Guides dark mode fixes (rails#51372)

* Disabling font-smoothing as it reduces legibility in post-deploy testing The font ends up feeling lighter when this is applied in both light and dark mode. While it provides more precise font rendering, it doesn’t seem to be actually helping on the body text here, so I think we should strike it. * Dark mode fixes and improvements * Removing highlight behind code in TD * more subtle subCol background shift * White H1, h2 in dark mode * Fixing anchor vs h2 anchor * Fixing a pre/code regression on table code lines * Fixing Safari faux-bold issue in code blocks. * Removing double line on index * Removing footer inversion in dark mode * Fixing layout width for larger screens (mimics existing) * ADditional fixes on layout * First stab at scrollbar colors * White Rails HR for dark mode * Compresison on new construction sign SVG * Fixing subCol oddities * Fixing nav spacing regression
andrewn617 · Mar 21, 2024 · 31e795b · 31e795b
1 parent abbbf19
commit 31e795b
Show file tree

Hide file tree

Showing 7 changed files with 278 additions and 194 deletions.
diff --git a/guides/assets/images/hr_rails_white.svg b/guides/assets/images/hr_rails_white.svg
diff --git a/guides/assets/images/icon_construction-sign.svg b/guides/assets/images/icon_construction-sign.svg
diff --git a/guides/assets/stylesrc/_dark.scss b/guides/assets/stylesrc/_dark.scss
@@ -7,26 +7,53 @@
 
 @media (prefers-color-scheme: dark) {
   body.guide {
+
     background-color: $gray-900;
     color: #fff;
 
+    &::-webkit-scrollbar {
+      width: 12px;
+      background-color: transparent;
+    }
+
+    &::-webkit-scrollbar-track {
+        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
+        border-radius: 10px;
+        background-color: $gray-900;
+      }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: $gray-500;
+        border-radius: 10px;
+        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
+    }
+    h1 {
+      color: #fff;
+    }
+
     a {
       &:link {
-        color: $rf-brand-light;
+        color: $rf-brand-lightest;
       }
       &:hover,
       &:active {
-        color: $rf-brand-darker;
+        color: $rf-brand-lighter;
       } // &:hover, &:active
       &:visited {
-        color: $rf-brand;
+        color: $rf-brand-lightest;
       } // &:visited
     } // a
+
+    h2 a {
+      &:link,
+      &:visited {
+        color: #fff;
+      } 
+    } // h2 a
 
     table {
       th {
-        color: $gray-900;
-        background-color: $gray-200;
+        background-color: $gray-1000;
       } // th
 
       tr {
@@ -44,13 +71,27 @@
       } // a, a:link, a:visited
     } // h3
 
+    hr {
+      background: url("../images/hr_rails_white.svg") center no-repeat;
+    }
+
     pre, code {
-      background-color: $gray-200;
-      color: $gray-200;
+      background-color: $gray-1000;
+      color: #fff;
     } // pre, code
 
-    p code, ul code, li code, h2 code, h3 code, h4 code, h5 code, td code {
-      background-color: $gray-600;
+    p code, ul code, li code {
+      background-color: $gray-650;
+      color: #fff;
+    }
+
+    td code {
+      background-color: transparent;
+    }
+
+    h2 code, h3 code, h4 code, h5 code {
+      background-color: transparent;
+      color: #fff;
     }
 
     nav#topNav {
@@ -114,16 +155,12 @@
 
           a:hover,
           a:active {
-            color: $rf-brand-light;
+            color: $rf-brand-lighter;
           } // a:hover
         } // dd
       } // .guides-section
     } // #guides
 
-    footer#page_footer {
-      background-color: $gray-200;
-      color: $gray-900;
-    } // footer#page_footer
 
     #feature {
       background-color: $gray-800;
@@ -133,9 +170,28 @@
       }
 
       #subCol {
-        background-color: $gray-700; 
-
-        ol {
+        background-color: $gray-800; 
+
+        ol.chapters {
+          &::-webkit-scrollbar {
+            background-color: $gray-700;
+          }
+
+          &::-webkit-scrollbar-track {
+            background-color: $gray-700;
+            border-radius: 5px;
+            box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
+          }
+
+          &::-webkit-scrollbar-thumb {
+            background-image: -webkit-gradient(linear,
+                            left bottom,
+                            left top,
+                            color-stop(0.44, $rf-brand-lightest),
+                            color-stop(0.86, $rf-brand-lighter));
+            border-radius: 5px;
+            box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
+          }
           li {
             a,
             a:link,
@@ -145,15 +201,41 @@
 
             a:hover,
             a:active {
-              color: $rf-brand-light;
+              color: $rf-brand-lighter;
             } // a
           } // li
         } // ol
       } // #subCol
     } // #feature
 
-    .interstitial.code {
-      background-color: $gray-200;
-    }
+    .interstitial {
+      &.code {
+        background-color: $gray-1000;
+        color: $gray-200;
+      }
+      &.note,
+      &.work-in-progress,
+      &.todo {
+        border-color: $note-dark;
+        background-color: $note-bkgnd-dark;
+      }
+
+      &.info {
+        border-color: $tip-dark;
+        background-color: $tip-bkgnd-dark;
+      }
+
+      &.warning {
+        border-color: $stop-dark;
+        background-color: $stop-bkgnd-dark;
+      }
+
+      &.question {
+        border-color: $gray-600;
+        background-color: $gray-700;
+      }
+
+
+    }  
   } // body.guide
 } // @media (prefers-color-scheme: dark