feat: add dark mode

docs/static/assets/demo.css

@@ -1,5 +1,8 @@
 body {
-    background-image: url("/img/geometry2.png")
+  background-image: url("/img/geometry2.png")
+}
+html.dark  body {
+  background: #41403e;
 }
 #top {
     max-width: 1440px;
@@ -31,7 +34,6 @@ img.no-responsive {
 }
 .to-top .paper-btn {
     padding: .6em 1em;
-    background: #fff;
     border-top-left-radius: 185px 160px;
     border-top-right-radius: 200px 195px;
     border-bottom-right-radius: 160px 195px;

src/components/_accordion.scss

@@ -21,7 +21,7 @@
     display: none;
 
     &:checked + label {
-      color: $primary;
+      @include color('color', 'primary');
     }
 
     &[id^='collapsible']:checked~div.collapsible-body {
@@ -33,8 +33,8 @@
   }
 
   label {
+    @include color('color', 'primary');
     border-bottom: 1px solid $muted-light;
-    color: $primary;
     display: inline-block;
     font-weight: 600;
     margin: 0 0 -1px;
@@ -42,7 +42,7 @@
     text-align: center;
 
     &:hover {
-      color: $muted;
+      @include color('color', 'muted');
       cursor: pointer;
     }
   }

src/components/_article.scss

@@ -4,15 +4,15 @@ article {
   }
 
   .article-meta {
-    color: $muted;
+    @include color(color, 'muted-text');
     font-size: 15px;
 
     a {
+      @include color(color, 'muted-text');
       background-image: none;
-      color: $muted-text;
 
       &:hover {
-        color: $light-dark;
+        @include color(color, 'light-dark');
       }
     }
   }

src/components/_badges.scss

@@ -1,9 +1,9 @@
 .badge {
   @include border-style();
-  background-color: $muted;
+  @include color('color', 'primary-text');
+  @include color('background-color', 'muted');
   border: 2px solid $primary;
   border-color: transparent;
-  color: $white;
   display: inline-block;
   font-size: 75%;
   font-weight: 700;

src/components/_breadcrumb.scss

@@ -11,8 +11,8 @@ ul.breadcrumb {
     }
 
     a {
+      @include color(color, 'secondary');
       background-image: none;
-      color: $secondary;
       text-decoration: none;
 
       &:hover {

src/components/_buttons.scss

@@ -4,10 +4,12 @@ button,
   @include border-style();
   @include shadow();
   @include transition();
+  @include color('color', 'primary');
+  @include color('border-color', 'primary');
+  @include color('background-color', 'main-background');
   align-self: center;
-  background: transparent;
-  border: 2px solid $primary;
-  color: $primary;
+  background-image: none;
+  border: 2px solid;
   cursor: pointer;
   display: inline-block;
   font-size: 1rem;
@@ -60,14 +62,23 @@ button,
 }
 
 a {
-  background-image: linear-gradient(5deg, transparent 65%, $secondary 80%, transparent 90%), linear-gradient(165deg, transparent 5%, $secondary 15%, transparent 25%), linear-gradient(165deg, transparent 45%, $secondary 55%, transparent 65%), linear-gradient(15deg, transparent 25%, $secondary 35%, transparent 50%);
+  @include color('color', 'secondary');
+  background-image: linear-gradient (
+    5deg,
+    transparent 65%,
+    $secondary 80%,
+    transparent 90%
+  ),
+    linear-gradient(165deg, transparent 5%, $secondary 15%, transparent 25%),
+    linear-gradient(165deg, transparent 45%, $secondary 55%, transparent 65%),
+    linear-gradient(15deg, transparent 25%, $secondary 35%, transparent 50%);
   background-position: 0 90%;
   background-repeat: repeat-x;
   background-size: 4px 3px;
   text-decoration: none;
 
   &:visited {
-    color: $primary;
+    @include color('color', 'primary');
     text-decoration: none;
   }
 }

src/components/_forms.scss

@@ -1,13 +1,15 @@
 input,
 select,
 textarea {
+  @include color('color', 'primary');
+  @include color('border-color', 'primary');
   background: transparent;
-  border: 2px solid $primary;
   border-bottom-left-radius: 15px 255px;
   border-bottom-right-radius: 225px 15px;
+  border-style: solid;
   border-top-left-radius: 255px 15px;
   border-top-right-radius: 15px 225px;
-  color: $primary;
+  border-width: 2px;
   display: block;
   font-size: 1rem;
   outline: none;

src/components/_modals.scss

@@ -24,9 +24,11 @@
   }
 
   .modal-body {
+    @include color('color', 'primary');
+    @include color('background', 'main-background');
     @include transition;
     backface-visibility: hidden;
-    background: $white;
+
     border: 2px solid $muted-light;
     left: 50%;
     padding: 1.25rem;
@@ -41,8 +43,8 @@
   }
 
   .btn-close {
+    @include color('color', 'primary-light');
     @include transition;
-    color: $primary-light;
     cursor: pointer;
     font-size: 30px;
     height: 1.1rem;
@@ -55,7 +57,7 @@
     &:hover,
     &:active,
     &:focus {
-      color: $primary;
+      @include color('color', 'primary');
     }
   }
 
@@ -67,7 +69,7 @@
 
   h5,
   .modal-subtitle {
-    color: $secondary;
+    @include color('color', 'secondary');
     margin-bottom: 0.5rem;
     margin-top: 0;
   }
@@ -101,7 +103,7 @@
     &:hover,
     &:focus,
     &:visited {
-      color: $primary;
+      @include color('color', 'primary');
       text-decoration: none;
     }
   }

src/components/_navbar.scss

@@ -1,5 +1,5 @@
 nav {
-  background-color: $main-background;
+  @include color('background-color', 'main-background');
   display: flex;
   padding: 0.3rem;
   position: relative;
@@ -70,11 +70,13 @@ nav {
   }
 
   a {
+    @include color('color', 'primary');
+    @include color('border-bottom-color', 'primary');
     background-image: none;
-    border-bottom: 5px solid $primary;
     border-bottom-left-radius: 15px 3px;
     border-bottom-right-radius: 15px 5px;
-    color: $primary;
+    border-bottom-style: solid;
+    border-bottom-width: 5px;
     padding-bottom: 0.1rem;
   }
 
@@ -135,20 +137,23 @@ nav {
   }
 
   .collapsible label {
-    border: 2px solid #41403e;
     border-bottom-left-radius: 15px 255px;
     border-bottom-right-radius: 225px 15px;
+    border-color: #41403e;
+    border-style: solid;
     border-top-left-radius: 255px 15px;
     border-top-right-radius: 15px 225px;
+    border-width: 2px;
   }
 
-  .collapsible > button { // Leaving for backwards compatibility. See docs for proper usage
+  .collapsible > button {
+    // Leaving for backwards compatibility. See docs for proper usage
     border: 0;
   }
 
   .collapsible > button, // Leaving for backwards compatibility. See docs for proper usage
   .collapsible > label {
-    background-color: $main-background;
+    @include color('background-color', 'main-background');
     display: none;
     font-size: 0.5rem;
     margin-right: 1rem;

src/components/_tabs.scss

@@ -7,20 +7,20 @@
   input {
     display: none;
 
-    &:checked+label {
+    &:checked + label {
+      @include color(color, 'primary');
       border-bottom: solid 3px $secondary;
-      color: $primary;
     }
 
     @for $num from 1 through 5 {
-      &[id='tab#{$num}']:checked~div[id='content#{$num}'] {
+      &[id='tab#{$num}']:checked ~ div[id='content#{$num}'] {
         display: block;
       }
     }
   }
 
   label {
-    color: $primary-light;
+    @include color('color', primary-light);
     display: inline-block;
     font-weight: 600;
     margin: 0 0 -1px;
@@ -28,7 +28,7 @@
     text-align: center;
 
     &:hover {
-      color: $muted;
+      @include color('color', muted);
       cursor: pointer;
     }
   }

src/content/_code.scss

@@ -1,24 +1,27 @@
 code {
-  background-color: lighten($primary, 70%);
+  @include color('color', 'secondary');
+  @include color('background-color', 'primary-light');
   border-radius: 3px;
-  color: $secondary;
   font-size: 80%;
   padding: 2px 4px;
 }
 
 kbd {
-  background-color: $primary;
+  @include color('color', 'primary-text');
+  @include color('background-color', 'primary');
   border-radius: 3px;
-  color: $white;
   font-size: 80%;
   padding: 2px 4px;
 }
 
 pre {
-  background-color: lighten($primary, 73%);
-  border: 1px solid lighten($primary, 50%);
+  @include color('color', 'primary');
+  @include color('background-color', 'main-background');
+  @include color('border-color', 'main-background-light');
+
   border-radius: 3px;
-  color: $primary;
+  border-style: solid;
+  border-width: 1px;
   display: block;
   font-size: 80%;
   line-height: 1.5;
@@ -29,7 +32,7 @@ pre {
   word-wrap: break-word;
 
   code {
-    background: transparent;
+    @include color('background-color', 'main-background');
     color: inherit;
     display: block;
     font-size: inherit;

src/content/_fonts.scss

@@ -1,5 +1,5 @@
 html {
-  color: $font-color;
+  @include color('color', 'primary');
   font-family: $body-font, sans-serif;
   font-size: $global-font-size;
 }

src/content/_tables.scss

@@ -29,7 +29,7 @@ table {
   }
 
   &.table-hover tbody tr:hover {
-    color: $secondary;
+    @include color('color', 'secondary');
   }
 
   &.table-alternating tbody tr:nth-of-type(even) {

src/core/_config.scss

@@ -25,6 +25,7 @@ $white-dark: rgba(#000, 0.03) !default;
 $light-dark: rgba(#000, 0.7) !default;
 $white: rgba(#fff, 1) !default;
 $main-background: rgba(#fff, 1) !default;
+$main-background-light: lighten($main-background, 50%) !default;
 
 $primary-text: #fff !default;
 $secondary-text: $primary !default;
@@ -37,6 +38,161 @@ $shadow-color-regular: hsla(0, 0, 0%, 0.2) !default;
 $shadow-color-hover: hsla(0, 0, 0%, 0.3) !default;
 
 
+/////////
+
+$dark-primary: #fff !default;
+$dark-secondary: #339bff !default;
+
+$dark-success: #189418 !default;
+$dark-warning: #ddcd45 !default;
+$dark-danger: #ff8c86 !default;
+$dark-muted: #868e96 !default;
+
+$dark-primary-light: lighten($dark-primary, 50%) !default;
+$dark-secondary-light: lighten($dark-secondary, 50%) !default;
+$dark-success-light: lighten($dark-success, 30%) !default;
+$dark-warning-light: lighten($dark-warning, 30%) !default;
+$dark-danger-light: lighten($dark-danger, 45%) !default;
+$dark-muted-light: lighten($dark-muted, 35%) !default;
+
+$dark-white-dark: rgba(#000, 0.03) !default;
+$dark-light-dark: rgba(#000, 0.7) !default;
+$dark-white: rgba(#fff, 1) !default;
+$dark-main-background: rgba(#41403e, 1) !default;
+$dark-main-background-light: lighten($dark-main-background, 50%) !default;
+
+$dark-primary-text: #41403e !default;
+$dark-secondary-text: $dark-secondary !default;
+$dark-success-text: $dark-primary !default;
+$dark-warning-text: $dark-primary !default;
+$dark-danger-text: $dark-primary !default;
+$dark-muted-text: $dark-primary !default;
+
+$dark-shadow-color-regular: hsla(0, 0, 0%, 0.2) !default;
+$dark-shadow-color-hover: hsla(0, 0, 0%, 0.3) !default;
+
+
+////////@debug
+
+$theme-map: (
+  light: (
+    primary: $primary,
+    secondary: $secondary,
+    success: $success,
+    warning: $warning,
+    danger: $danger,
+    muted: $muted,
+    primary-light: #{$primary-light},
+    secondary-light:$secondary-light,
+    success-light:$success-light,
+    warning-light:$warning-light,
+    danger-light:$danger-light,
+    muted-light:$muted-light,
+    white-dark:$white-dark,
+    light-dark:$light-dark,
+    white:$white,
+    main-background: $main-background,
+    main-background-light: $main-background-light,
+    primary-text:$primary-text,
+    secondary-text:$secondary-text,
+    success-text:$success-text,
+    warning-text:$warning-text,
+    danger-text:$danger-text,
+    muted-text:$muted-text,
+    shadow-color-regular: $shadow-color-regular,
+    shadow-color-hover: $shadow-color-hover,
+  ),
+  dark: (
+    primary: $dark-primary,
+    secondary: $dark-secondary,
+    success: $dark-success,
+    warning: $dark-warning,
+    danger: $dark-danger,
+    muted: $dark-muted,
+    primary-light: #{$dark-primary-light},
+    secondary-light:$dark-secondary-light,
+    success-light:$dark-success-light,
+    warning-light:$dark-warning-light,
+    danger-light:$dark-danger-light,
+    muted-light:$dark-muted-light,
+    white-dark:$dark-white-dark,
+    light-dark:$dark-light-dark,
+    white:$dark-white,
+    main-background: $dark-main-background,
+    main-background-light: $dark-main-background-light,
+    primary-text:$dark-primary-text,
+    secondary-text:$dark-secondary-text,
+    success-text:$dark-success-text,
+    warning-text:$dark-warning-text,
+    danger-text:$dark-danger-text,
+    muted-text:$dark-muted-text,
+    shadow-color-regular: $dark-shadow-color-regular,
+    shadow-color-hover: $dark-shadow-color-hover,
+  )
+);
+
+
+html {
+  --primary: #{map-get(map-get($theme-map, 'light'), 'primary')};
+  --secondary: #{map-get(map-get($theme-map, 'light'), 'secondary')};
+  --success: #{map-get(map-get($theme-map, 'light'), 'success')};
+  --warning: #{map-get(map-get($theme-map, 'light'), 'warning')};
+  --danger: #{map-get(map-get($theme-map, 'light'), 'danger')};
+  --muted: #{map-get(map-get($theme-map, 'light'), 'muted')};
+  --primary-light: #{map-get(map-get($theme-map, 'light'), 'primary-light')};
+  --secondary-light: #{map-get(map-get($theme-map, 'light'), 'secondary-light')};
+  --success-light: #{map-get(map-get($theme-map, 'light'), 'success-light')};
+  --warning-light: #{map-get(map-get($theme-map, 'light'), 'warning-light')};
+  --danger-light: #{map-get(map-get($theme-map, 'light'), 'danger-light')};
+  --muted-light: #{map-get(map-get($theme-map, 'light'), 'muted-light')};
+  --white-dark: #{map-get(map-get($theme-map, 'light'), 'white-dark')};
+  --light-dark: #{map-get(map-get($theme-map, 'light'), 'light-dark')};
+  --white: #{map-get(map-get($theme-map, 'light'), 'white')};
+  --main-background: #{map-get(map-get($theme-map, 'light'), 'main-background')};
+  --primary-text: #{map-get(map-get($theme-map, 'light'), 'primary-text')};
+  --secondary-text: #{map-get(map-get($theme-map, 'light'), 'secondary-text')};
+  --success-text: #{map-get(map-get($theme-map, 'light'), 'success-text')};
+  --warning-text: #{map-get(map-get($theme-map, 'light'), 'warning-text')};
+  --danger-text: #{map-get(map-get($theme-map, 'light'), 'danger-text')};
+  --muted-text: #{map-get(map-get($theme-map, 'light'), 'muted-text')};
+  --shadow-color-regular: #{map-get(map-get($theme-map, 'light'), 'shadow-color-regular')};
+  --shadow-color-hover: #{map-get(map-get($theme-map, 'light'), 'shadow-color-hover')};
+}
+
+html.dark {
+  --primary: #{map-get(map-get($theme-map, 'dark'), 'primary')};
+  --secondary: #{map-get(map-get($theme-map, 'dark'), 'secondary')};
+  --success: #{map-get(map-get($theme-map, 'dark'), 'success')};
+  --warning: #{map-get(map-get($theme-map, 'dark'), 'warning')};
+  --danger: #{map-get(map-get($theme-map, 'dark'), 'danger')};
+  --muted: #{map-get(map-get($theme-map, 'dark'), 'muted')};
+  --primary-light: #{map-get(map-get($theme-map, 'dark'), 'primary-light')};
+  --secondary-light: #{map-get(map-get($theme-map, 'dark'), 'secondary-light')};
+  --success-light: #{map-get(map-get($theme-map, 'dark'), 'success-light')};
+  --warning-light: #{map-get(map-get($theme-map, 'dark'), 'warning-light')};
+  --danger-light: #{map-get(map-get($theme-map, 'dark'), 'danger-light')};
+  --muted-light: #{map-get(map-get($theme-map, 'dark'), 'muted-light')};
+  --white-dark: #{map-get(map-get($theme-map, 'dark'), 'white-dark')};
+  --light-dark: #{map-get(map-get($theme-map, 'dark'), 'light-dark')};
+  --white: #{map-get(map-get($theme-map, 'dark'), 'white')};
+  --main-background: #{map-get(map-get($theme-map, 'dark'), 'main-background')};
+  --primary-text: #{map-get(map-get($theme-map, 'dark'), 'primary-text')};
+  --secondary-text: #{map-get(map-get($theme-map, 'dark'), 'secondary-text')};
+  --success-text: #{map-get(map-get($theme-map, 'dark'), 'success-text')};
+  --warning-text: #{map-get(map-get($theme-map, 'dark'), 'warning-text')};
+  --danger-text: #{map-get(map-get($theme-map, 'dark'), 'danger-text')};
+  --muted-text: #{map-get(map-get($theme-map, 'dark'), 'muted-text')};
+  --shadow-color-regular: #{map-get(map-get($theme-map, 'dark'), 'shadow-color-regular')};
+  --shadow-color-hover: #{map-get(map-get($theme-map, 'dark'), 'shadow-color-hover')};
+}
+
+
+@mixin color($property, $varName) {
+  // IE falls back to light theme always
+  #{$property}: #{map-get(map-get($theme-map, 'light'), 'primary')};
+  #{$property}: var(--#{$varName});
+}
+
 // Map to set your color names
 /* stylelint-disable */
 $colors: (primary, $primary, $primary-light, $primary-text),
@@ -53,11 +209,12 @@ $colors: (primary, $primary, $primary-light, $primary-text),
 */
 @each $colorName, $color, $color-light in $colors {
   .text-#{$colorName} {
-    color: $color;
+    @include color('color',#{$colorName});
   }
 
   .background-#{$colorName} {
-    background-color: $color-light;
+    @include color('background-color',#{$colorName}-light);
+    // @include color('color', 'primary-text');
   }
 }
 

src/layout/_container.scss

@@ -31,7 +31,7 @@ hr {
 }
 
 .paper {
-  background-color: $main-background;
+  @include color('background-color', 'main-background');
   border: 1px solid $primary-light;
   box-shadow: -1px 5px 35px -9px hsla(0, 0%, 0%, 0.2);
   margin-bottom: 1rem;

src/utilities/_borders.scss

@@ -1,6 +1,9 @@
 
 .border {
-  border: 2px solid $primary;
+  @include color('border-color','primary' );
+  border-style: solid;
+  border-width: 2px;
+
 }
 
 .border,