From d91076cc8ab51c3dd2a1475f0d42872f05553f83 Mon Sep 17 00:00:00 2001 From: zesuma Date: Thu, 5 Oct 2023 12:31:36 -0400 Subject: [PATCH 1/4] update the link colors on darkmode --- website/src/css/custom.css | 37 ++++++++++++++++++++++++++++--------- 1 file changed, 28 insertions(+), 9 deletions(-) diff --git a/website/src/css/custom.css b/website/src/css/custom.css index 3181738406d..8c71696cf32 100644 --- a/website/src/css/custom.css +++ b/website/src/css/custom.css @@ -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 */ @@ -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 */ @@ -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, @@ -165,8 +165,19 @@ table td { vertical-align: top; } +html[data-theme="dark"] main .row .col:first-of-type a { + 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; } @@ -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; +} + html[data-theme="dark"] .alert * { --ifm-alert-foreground-color: var(--ifm-color-gray-900); } @@ -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 { @@ -949,7 +968,7 @@ html[data-theme="dark"] .blog-breadcrumbs a[href="#"] { } html[data-theme="dark"] .blog-breadcrumbs a:not(:last-of-type):after { - color: var(--ifm-link-color); + color: var(--darkmode-link-color); } html[data-theme="dark"] .breadcrumbs__item--active .breadcrumbs__link { @@ -1053,7 +1072,7 @@ article[itemprop="blogPost"] h2 { /* copyright */ .footer__bottom { text-align: left; - color: var(--color-footer-accent); + color: white; font-size: 0.875rem; } From 91fe14310fb56984f6e15554b6d888214d19510b Mon Sep 17 00:00:00 2001 From: zesuma Date: Thu, 5 Oct 2023 16:46:52 -0400 Subject: [PATCH 2/4] add darkmode styles for blog links --- website/src/css/custom.css | 26 +++++++++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) diff --git a/website/src/css/custom.css b/website/src/css/custom.css index 8c71696cf32..dff5113536a 100644 --- a/website/src/css/custom.css +++ b/website/src/css/custom.css @@ -861,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; @@ -967,7 +975,8 @@ 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 { +html[data-theme="dark"] .blog-breadcrumbs a:not(:last-of-type):after, +html[data-theme="dark"] .blog-breadcrumbs a { color: var(--darkmode-link-color); } @@ -1012,6 +1021,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); From df5bfb3de439289b392031bc2ac51b82c4ccf146 Mon Sep 17 00:00:00 2001 From: zesuma Date: Mon, 9 Oct 2023 10:47:46 -0400 Subject: [PATCH 3/4] add brightness to blog breadcrumbs --- website/src/css/custom.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/website/src/css/custom.css b/website/src/css/custom.css index dff5113536a..3ec164a2e8e 100644 --- a/website/src/css/custom.css +++ b/website/src/css/custom.css @@ -975,6 +975,10 @@ html[data-theme="dark"] .blog-breadcrumbs a[href="#"] { filter: brightness(var(--filter-brightness-low)); } +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); From a99d0b59b55f361329649a9b4e0e1783f66c4ecc Mon Sep 17 00:00:00 2001 From: zesuma Date: Mon, 9 Oct 2023 11:59:13 -0400 Subject: [PATCH 4/4] fix for error on buttons that Breezy found --- website/src/css/custom.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/src/css/custom.css b/website/src/css/custom.css index 3ec164a2e8e..972b86a48ca 100644 --- a/website/src/css/custom.css +++ b/website/src/css/custom.css @@ -165,7 +165,7 @@ table td { vertical-align: top; } -html[data-theme="dark"] main .row .col:first-of-type a { +html[data-theme=dark] main .row .col:first-of-type a:not(.button) { color: var(--darkmode-link-color); }