Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

update the link colors on darkmode #4201

Merged
merged 6 commits into from
Oct 9, 2023
Merged

update the link colors on darkmode #4201

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d91076c
update the link colors on darkmode
zesuma Oct 5, 2023
91fe143
add darkmode styles for blog links
zesuma Oct 5, 2023
ffb051d
Merge remote-tracking branch 'origin/current' into Fix-insufficient-c…
zesuma Oct 5, 2023
df5bfb3
add brightness to blog breadcrumbs
zesuma Oct 9, 2023
a122032
Merge remote-tracking branch 'origin/current' into Fix-insufficient-c…
zesuma Oct 9, 2023
a99d0b5
fix for error on buttons that Breezy found
zesuma Oct 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 57 additions & 10 deletions website/src/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@
--pagination-icon-prev: "\2190";
--filter-brightness-low: 1.1;
--filter-brightness-high: 1.5;

--darkmode-link-color: #1FA4A3;
--light-dark-toggle: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTQuMzA4IDMuMzg1YzAtMS4xNzguMTczLTIuMzcuNjE1LTMuMzg1QzEuOTgzIDEuMjggMCA0LjI4MiAwIDcuNjkyQTguMzA4IDguMzA4IDAgMCAwIDguMzA4IDE2YzMuNDEgMCA2LjQxMi0xLjk4MyA3LjY5Mi00LjkyMy0xLjAxNS40NDItMi4yMDcuNjE1LTMuMzg1LjYxNWE4LjMwOCA4LjMwOCAwIDAgMS04LjMwNy04LjMwN1oiIGZpbGw9IiM5MkEwQjMiLz48L3N2Zz4=";

/* search overrides */
Expand Down Expand Up @@ -104,10 +104,10 @@ html[data-theme="dark"] {

/* Linked `code` tags visibility adjustment */
html[data-theme=dark] a code {
color: var(--ifm-link-color);
color: var(--darkmode-link-color);
}
html[data-theme=dark] a code:hover {
color: var(--ifm-link-hover-color);;
color: var(--darkmode-link-color);
}

/* For /dbt-cloud/api REDOC Page */
Expand All @@ -122,11 +122,11 @@ html[data-theme="dark"] .api-content h1 {

html[data-theme="dark"] .api-content button,
html[data-theme="dark"] .api-content a {
filter: brightness(1.25);
filter: brightness(var(--filter-brightness-low));
}

html[data-theme="dark"] .api-content a:hover {
filter: brightness(1.25);
filter: brightness(var(--filter-brightness-low));
}

.redoc-wrap .api-content a,
Expand Down Expand Up @@ -165,8 +165,19 @@ table td {
vertical-align: top;
}

html[data-theme=dark] main .row .col:first-of-type a:not(.button) {
color: var(--darkmode-link-color);
}

html[data-theme="dark"] main .row .col:first-of-type a:hover {
filter: brightness(var(--filter-brightness-low));
}

html[data-theme="dark"] main .row .col:first-of-type a article * {
color: white;
}

html[data-theme="dark"] table td {
filter: brightness(1.5);
color: white;
}

Expand Down Expand Up @@ -668,6 +679,14 @@ i.theme-doc-sidebar-item-category.theme-doc-sidebar-item-category-level-2.menu__
color: var(--ifm-color-gray-900);
}

.alert--secondary,
.alert--secondary a,
.alert--secondary svg {
--ifm-alert-background-color: #474748;
color: white !important;
fill: white !important;
}
Comment on lines +682 to +688
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you know of a page where this is used for me to checkout?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here's one with the alert--secondary which the the note alert:
https://docs-getdbt-com-git-fix-insufficient-contrast-o-3250d0-dbt-labs.vercel.app/docs/cloud/connect-data-platform/connect-apache-spark

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch @JKarlavige. I've added style updates for the blog hrefs.


html[data-theme="dark"] .alert * {
--ifm-alert-foreground-color: var(--ifm-color-gray-900);
}
Expand All @@ -683,7 +702,7 @@ html[data-theme="dark"] .alert table {
.alert--success a,
.alert--danger a,
.alert--warning a {
color: var(--ifm-color-gray-900);
color: var(--ifm-color-gray-900) !important;
}

.linkout {
Expand Down Expand Up @@ -842,6 +861,14 @@ div .toggle_src-components-faqs-styles-module {
gap: 1em;
}

html[data-theme="dark"] .pagination-nav a {
color: var(--darkmode-link-color);
}

html[data-theme="dark"] .pagination-nav a:hover {
filter: brightness(var(--filter-brightness-low));
}

.pagination-nav__link {
padding: 1rem 0;
transition: 100ms all ease-in-out;
Expand Down Expand Up @@ -948,8 +975,13 @@ html[data-theme="dark"] .blog-breadcrumbs a[href="#"] {
filter: brightness(var(--filter-brightness-low));
}

html[data-theme="dark"] .blog-breadcrumbs a:not(:last-of-type):after {
color: var(--ifm-link-color);
html[data-theme="dark"] .blog-breadcrumbs a:hover {
filter: brightness(var(--filter-brightness-low));
}

html[data-theme="dark"] .blog-breadcrumbs a:not(:last-of-type):after,
html[data-theme="dark"] .blog-breadcrumbs a {
color: var(--darkmode-link-color);
}

html[data-theme="dark"] .breadcrumbs__item--active .breadcrumbs__link {
Expand Down Expand Up @@ -993,6 +1025,21 @@ article[itemprop="blogPost"] h2 {
font-size: 2rem;
}

html[data-theme="dark"] article[itemprop="blogPost"] a {
color: var(--darkmode-link-color);
}

html[data-theme="dark"] article[itemprop="blogPost"] a:hover {
filter: brightness(var(--filter-brightness-low));
}

/* Sidebar Nav */
html[data-theme="dark"] .main-wrapper nav a:hover,
html[data-theme="dark"] .main-wrapper nav a:active {
color: var(--darkmode-link-color) !important;
filter: brightness(var(--filter-brightness-low));
}

/* footer styles */
.footer {
font-weight: var(--ifm-font-weight-narrow);
Expand Down Expand Up @@ -1053,7 +1100,7 @@ article[itemprop="blogPost"] h2 {
/* copyright */
.footer__bottom {
text-align: left;
color: var(--color-footer-accent);
color: white;
font-size: 0.875rem;
}

Expand Down
Loading