Dark Mode CSS

docusaurus.config.js

@@ -118,7 +118,7 @@ module.exports = {
     colorMode: {
       // Hides the switch in the navbar
       // Useful if you want to support a single color mode
-      disableSwitch: true,
+      disableSwitch: false,
     },
     announcementBar: {
       id: 'redisconf20201cfp', // Any value that will identify this message.

src/css/_article.scss

@@ -25,6 +25,18 @@
 
   --ifm-tabs-color: var(--black);
   --ifm-tabs-color-active: var(--purple);
+
+  --ifm-code-color: var(--black);
+}
+
+html[data-theme="dark"] {
+  --ifm-menu-color: var(--white);
+  --ifm-menu-color-active: #829EF0;
+  --ifm-menu-color-background-active: #181D27;
+  --ifm-menu-color-background-hover: #181D27;
+  --ifm-toc-border-color: #676768;
+  --ifm-toc-link-color: var(--white);
+  --ifm-code-color: var(--white);
 }
 
 hr {
@@ -73,6 +85,7 @@ hr {
 
   li {
     margin-right: 0;
+    line-height: 1.5;
   }
 
   &__link {
@@ -85,6 +98,10 @@ hr {
       font-weight: 700;
       color: $purple;
 
+      @include dark {
+        color: #829EF0;
+      }
+
       &:before {
         position: absolute;
         top: 0;
@@ -93,6 +110,24 @@ hr {
         height: 100%;
         background-color: $purple;
         content: '';
+
+        @include dark {
+          background-color: #829EF0;
+        }
+      }
+    }
+
+    &:hover {
+      @include dark {
+        color: #829EF0;
+      }
+    }
+
+    code {
+      color: $black !important;
+
+      @include dark {
+        color: $white !important;
       }
     }
   }
@@ -108,6 +143,11 @@ hr {
 
 blockquote {
   border-left: 5px solid #dbdada;
+
+  @include dark {
+    border-color: #676768;
+    color: $white;
+  }
 }
 
 main:not(.home-main) {
@@ -117,6 +157,10 @@ main:not(.home-main) {
 
     &:hover {
       color: $purple-hover;
+
+      @include dark {
+        color: #829EF0;
+      }
     }
   }
 
@@ -130,6 +174,10 @@ main:not(.home-main) {
         @include mobile {
           font-size: 39px;
         }
+
+        @include dark {
+          color: $white;
+        }
       }
     }
   }
@@ -138,6 +186,10 @@ main:not(.home-main) {
 .markdown {
   color: $black;
 
+  @include dark {
+    color: $white;
+  }
+
   h1,
   h2,
   h3,
@@ -257,6 +309,10 @@ main:not(.home-main) {
 .tabs {
   border-bottom: 1px solid $grey-light;
 
+  @include dark {
+    border-color: #676768;
+  }
+
   &__item {
     margin-top: 0 !important;
     padding: 0 10px 10px;
@@ -265,13 +321,21 @@ main:not(.home-main) {
     font-size: 17px;
     transition: color .2s ease-in-out;
 
+    @include dark {
+      color: $white;
+    }
+
     &:not(:last-child) {
       margin-right: 10px;
     }
 
     &:hover {
       background-color: transparent;
-      color: $purple-hover;
+      color: $purple-hover !important;
+
+      @include dark {
+        color: #829EF0 !important;
+      }
     }
 
     &--active {
@@ -289,8 +353,20 @@ main:not(.home-main) {
   box-shadow: 0px 4px 7px rgba(196, 196, 196, .5);
   transition: border-color .2s ease-in-out;
 
+  @include dark {
+    background-color: #2a2c2d;
+    border-color: #2a2c2d;
+    box-shadow: none;
+    color: $white;
+  }
+
   &.ri-link:hover {
     border-color: $purple;
+
+    @include dark {
+      border-color: $purple-hover;
+      background-color: #2a2b2d;
+    }
   }
 
   .ri-card-link {
@@ -320,6 +396,14 @@ main:not(.home-main) {
 
     a {
       color: $black;
+
+      @include dark {
+        color: $white;
+
+        &:hover {
+          color: #829EF0;
+        }
+      }
     }
   }
 
@@ -328,6 +412,10 @@ main:not(.home-main) {
     font-size: 16px;
     color: $black;
 
+    @include dark {
+      color: $white;
+    }
+
     img {
       margin-top: 15px;
     }
@@ -341,6 +429,10 @@ main:not(.home-main) {
 code {
   border-radius: 4px;
   background-color: $purple-light;
+
+  @include dark {
+    background-color: #3E44AC;
+  }
 }
 
 iframe {

src/css/_config.scss

@@ -38,6 +38,14 @@ monospace;
   --purple-lighter: #F9FAFF;
 }
 
+/* dark mode */
+
+@mixin dark {
+  html[data-theme="dark"] & {
+    @content;
+  }
+}
+
 /* media queries */
 @mixin desktop {
   @media only screen and (min-width: 997px) {

src/css/_typography.scss

@@ -9,6 +9,8 @@ h6 {
 
 // section-title
 .section-title {
+  z-index: 2;
+  position: relative;
   margin: 0;
   text-align: center;
   line-height: 1.15;
@@ -19,6 +21,10 @@ h6 {
     font-size: 32px;
   }
 
+  @include dark {
+    color: $white;
+  }
+
   &.white {
     color: $white;
   }
@@ -44,6 +50,10 @@ h6 {
     font-size: 16px;
   }
 
+  @include dark {
+    color: $white;
+  }
+
   &:not(:first-child) {
     margin-top: 11px;
 

src/css/components/_demos.scss

@@ -30,8 +30,11 @@
       position: absolute;
       top: -37px;
       left: -109px;
-      height: 477.5px;
       user-select: none;
+
+      @include dark {
+        opacity: .4;
+      }
     }
 
     .col {
@@ -88,6 +91,10 @@
         min-height: 220px;
       }
 
+      @include dark {
+        background-color: $primary-black;
+      }
+
       .title {
         margin: 0;
         line-height: 1;
@@ -96,6 +103,10 @@
         @include mobile {
           font-size: 22px;
         }
+
+        @include dark {
+          color: $white;
+        }
       }
 
       .links {
@@ -127,8 +138,12 @@
           color: $primary-blue;
           transition: color .2s ease-in-out;
 
+          @include dark {
+            color: $white;
+          }
+
           &:hover {
-            color: $purple;
+            color: $purple !important;
           }
         }
       }

src/css/custom.scss

@@ -42,6 +42,10 @@
   --ifm-global-radius: 10px;
 }
 
+html[data-theme="dark"] {
+  --ifm-background-color: var(--primary-black);
+}
+
 .container {
   max-width: 1140px;
 }