Update dark mode styles for getting started components.

Author: Jesse Borden

assets/images/get-started/hero-bottom.png

@@ -1,15 +1,21 @@
 @mixin light-theme() {
   --site-text-color: #051416;
-  --site-navigation-border-bottom: linear-gradient(0deg, #f6b391 0%, #f8ce6e 92%);
-  --site-navigation-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
+  --site-navigation-border-bottom: linear-gradient(
+    0deg,
+    #f6b391 0%,
+    #f8ce6e 92%
+  );
+  --site-navigation-box-shadow:
+    rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
+    rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
   --site-navigation-background: rgba(255, 255, 255, 0.5);
-  --site-navigation-text-color: #3D3D3D;
+  --site-navigation-text-color: #3d3d3d;
   --site-navigation-item-background: rgba(0, 0, 0, 0.05);
   --site-tabs-background: rgba(255, 255, 255, 0.8);
   --site-tabs-active-background: #ffffff;
   --site-navigation-menu-toggle-invert: invert(0);
   --site-navigation-item-border: 1px solid #051416;
-  --site-code-box-text: #3D3D3D;
+  --site-code-box-text: #3d3d3d;
   --site-link-with-right-arrow-color: #384fea;
   --site-link-with-right-arrow-icon-filter: none;
   --site-content-link-with-right-arrow-icon-filter: brightness(0);
@@ -21,6 +27,13 @@
   --install-release-box-th-color: #333;
   --install-release-box-tr-border-bottom: 1px solid #f2f2f2;
   --install-release-box-tr-bg: #ffffff;
+
+  --get-started-page-bg: #fafafa;
+  --get-started-card-primary-bg: rgba(255, 255, 255, 0.9);
+  --get-started-card-secondary-bg: rgba(236, 236, 236, 1);
+  --get-started-boxes-bg: rgba(255, 255, 255, 0.5);
+  --get-started-code-box-pre-bg: #fff;
+  --get-started-code-box-pre-border: 1px solid #d5d5d5;
 }
 
 @mixin dark-theme() {
@@ -31,19 +44,27 @@
   --site-navigation-text-color: #ffffff;
   --site-navigation-item-background: rgba(0, 0, 0, 0.4);
   --site-tabs-background: rgba(35, 52, 74, 1);
-  --site-tabs-active-background: #505F83;
+  --site-tabs-active-background: #505f83;
   --site-navigation-menu-toggle-invert: invert(1);
   --site-navigation-item-border: 1px solid #ffffff;
   --site-code-box-text: #ffffff;
-  --site-link-with-right-arrow-color: #1EC1FD;
-  --site-link-with-right-arrow-icon-filter: invert(66%) sepia(89%) saturate(602%) hue-rotate(172deg) brightness(102%) contrast(101%);
+  --site-link-with-right-arrow-color: #1ec1fd;
+  --site-link-with-right-arrow-icon-filter: invert(66%) sepia(89%)
+    saturate(602%) hue-rotate(172deg) brightness(102%) contrast(101%);
   --site-content-link-with-right-arrow-icon-filter: brightness(0) invert(1);
 
-  --install-page-bg: linear-gradient(0deg, #FF8115 0%, #B7451B 92%);
-  --install-site-code-box-bg: #23344A;
+  --install-page-bg: linear-gradient(0deg, #ff8115 0%, #b7451b 92%);
+  --install-site-code-box-bg: #23344a;
   --install-site-code-box-pre-bg: #111727;
   --install-release-box-th-bg: #111727;
   --install-release-box-th-color: #ffffff;
   --install-release-box-tr-border-bottom: 1px solid #051416;
   --install-release-box-tr-bg: #384461;
-}
+
+  --get-started-page-bg: rgb(5, 20, 35);
+  --get-started-card-primary-bg: rgba(35, 52, 74, 0.9);
+  --get-started-card-secondary-bg: rgba(56, 68, 97, 1);
+  --get-started-boxes-bg: rgba(25, 52, 74, 0.5);
+  --get-started-code-box-pre-bg: #111727;
+  --get-started-code-box-pre-border: 1px solid #575757;
+}

assets/stylesheets/new-stylesheets/_themes.scss

@@ -1,8 +1,9 @@
 @use '../helpers' as *;
 
 .get-started {
+  color: var(--site-text-color);
   position: relative;
-  background: #f2f2f2;
+  background: var(--get-started-page-bg);
   @include noise();
 }
 
@@ -18,7 +19,6 @@
   aspect-ratio: 980 / 473;
   border-radius: 22px;
   overflow: hidden;
-  background-color: rgba(255, 255, 255, 0.8);
   margin-bottom: 50px;
   position: relative;
   z-index: 2;
@@ -79,18 +79,16 @@
 
       li {
         display: inline-block;
-        color: #801a1a;
         font-weight: 400;
         padding: 16px 16px 20px;
-        background-color: rgba(97, 75, 138, 0.8);
+        background-color: var(--get-started-boxes-bg);
         border-radius: 20px;
         font-size: 14px;
         white-space: nowrap;
 
         span {
           display: block;
           text-align: left;
-          color: white;
 
           &.title {
             font-size: 24px;
@@ -102,7 +100,7 @@
           &.text {
             font-size: 14px;
             white-space: normal;
-            line-height: 1.14;
+            line-height: 1.3;
           }
         }
       }
@@ -136,7 +134,7 @@
   margin-bottom: 50px;
 
   .content {
-    background-color: white;
+    background-color: var(--get-started-card-primary-bg);
     padding: 53px 50px 40px;
     max-width: 980px;
     margin: 0 auto;
@@ -159,6 +157,7 @@
       text-align: center;
       font-size: 48px;
       margin-bottom: 52px;
+      color: var(--site-text-color);
     }
 
     a {
@@ -180,7 +179,7 @@
       gap: 20px;
 
       li {
-        background-color: #f9f9f9;
+        background-color: var(--get-started-card-secondary-bg);
         display: flex;
         align-items: center;
         gap: 20px;
@@ -235,7 +234,7 @@
       // padding: 0 0 40px;
 
       li {
-        background-color: #f9f9f9;
+        background-color: var(--get-started-card-secondary-bg);
         padding: 20px 30px 20px 20px;
         display: flex;
         text-align: left;
@@ -388,6 +387,7 @@
 
   pre {
     max-height: 400px;
+    border: var(--get-started-code-box-pre-border);
   }
 
   &.code-box-with-tabs {
@@ -523,7 +523,7 @@
   p {
     font-size: 17px;
     padding: 0 100px;
-    margin-bottom: 45px;
+    margin-bottom: 26px;
   }
 
   a {
@@ -565,11 +565,11 @@
   &.background {
     border-radius: 22px;
     padding: 50px;
-    background: rgba(255, 255, 255, 0.9);
+    background: var(--get-started-card-primary-bg);
     box-sizing: border-box;
 
     .code {
-      background: #fff;
+      background: var(--get-started-code-box-pre-bg);
       max-height: 400px;
       overflow: scroll;
     }
@@ -590,13 +590,13 @@
   .code {
     max-width: none;
     width: 100%;
-    border: 1px solid #d5d5d5;
+    border: var(--get-started-code-box-pre-border);
     border-radius: 22px;
-    background: #fff;
+    background: var(--get-started-code-box-pre-bg);
     overflow: hidden;
 
     .highlight {
-      background: #fff;
+      background: var(--get-started-code-box-pre-bg);
     }
   }
 
@@ -640,12 +640,12 @@
   .code {
     flex: 1;
     margin-right: 40px;
-    border: 1px solid #d5d5d5;
+    border: var(--get-started-code-box-pre-border);
     border-radius: 22px;
     height: fit-content;
     overflow: hidden;
     pre.highlight {
-      background: #fff;
+      background: var(--get-started-code-box-pre-bg);
     }
   }
 
@@ -733,11 +733,11 @@
   .code {
     flex: 1;
     margin-right: 40px;
-    border: 1px solid #d5d5d5;
+    border: var(--get-started-code-box-pre-border);
     border-radius: 22px;
     overflow: hidden;
     pre.highlight {
-      background: #fff;
+      background: var(--get-started-code-primary-bg);
     }
   }
 
@@ -801,7 +801,7 @@
   padding-top: 37px;
   margin-bottom: 70px;
   border-radius: 22px;
-  background: rgba(255, 255, 255, 0.9);
+  background: var(--get-started-card-primary-bg);
 
   h2 {
     font-size: 48px;
@@ -845,14 +845,21 @@
 }
 
 .stand-alone-link {
-  background: rgba(255, 255, 255, 0.9);
+  background: var(--get-started-card-primary-bg);
   padding: 20px 50px;
   opacity: 0.9;
   border-radius: 20px;
   width: fit-content;
   margin: auto;
   display: block;
   margin-bottom: 90px;
+  position: relative;
+  z-index: 1;
+
+  &:hover {
+    cursor: pointer;
+  }
+
   a {
     @include link-with-right-arrow;
   }