update the link colors on darkmode

dbt-labs · Oct 5, 2023 · d91076c · d91076c
1 parent b03d5fa
commit d91076c
Showing 1 changed file with 28 additions and 9 deletions.
diff --git 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;
 }