Add new dark mode dauxio#301

mrutsy · Jul 29, 2022 · cf84750 · cf84750
1 parent f00d667
commit cf84750
Show file tree

Hide file tree

Showing 28 changed files with 248 additions and 95 deletions.
diff --git a/crafty.config.js b/crafty.config.js
@@ -1,5 +1,5 @@
 module.exports = {
-    browsers: "defaults, not op_mini all",
+    browsers: "defaults, not op_mini all, not IE < 12, not and_qq 10.4, not baidu 7.12",
     presets: [
         "@swissquote/crafty-preset-babel",
         "@swissquote/crafty-runner-rollup",

diff --git a/daux_libraries/search.min.js b/daux_libraries/search.min.js
diff --git a/daux_libraries/search.min.js.map b/daux_libraries/search.min.js.map
diff --git a/global.json b/global.json
@@ -23,6 +23,7 @@
     "strings": {
         "en": {
             "CodeBlocks_show": "Show Code Blocks",
+            "DarkMode": "Dark Mode",
             "Search_placeholder": "Search...",
             "Search_one_result": "1 result",
             "Search_results": "!count results",
@@ -41,6 +42,7 @@
         },
         "fr": {
             "CodeBlocks_show": "Afficher le code",
+            "DarkMode": "Mode Sombre",
             "Search_placeholder": "Rechercher...",
             "Search_one_result": "1 résultat",
             "Search_results": "!count résultats",

diff --git a/src/css/theme_daux/_components.scss b/src/css/theme_daux/_components.scss
@@ -24,7 +24,7 @@ hr {
     clear: both;
     margin: 1em 0;
     border: 0;
-    border-top: 1px solid #ddd;
+    border-top: 1px solid var(--hr-color);
 }
 
 /* ============================================================================
@@ -83,13 +83,13 @@ Components
 
 .Brand {
     display: block;
+    color: var(--brand-color);
     background-color: var(--brand-background);
     padding: 0.75em 0.6em;
     font-size: var(--type-size-4);
     text-shadow: none;
     font-family: var(--font-family-heading);
     font-weight: 700;
-    color: var(--brand-color);
 }
 
 .Navbar {
@@ -107,14 +107,6 @@ Components
 
 .CodeToggler {
     padding: 0 20px;
-
-    &__text {
-        font-size: 12px;
-        line-height: 1.5;
-        padding: 6px 10px 6px 0;
-        display: inline-block;
-        vertical-align: middle;
-    }
 }
 
 /* stylelint-disable-next-line selector-class-pattern */
@@ -123,6 +115,20 @@ Components
     display: none;
 }
 
+.DarkModeToggler {
+    padding: 0 20px;
+}
+
+// Hide the HR of the DarkModeToggler if the CodeToggler is present ...
+.CodeToggler ~ .DarkModeToggler hr {
+    display: none;
+}
+
+// ... except if it's hidden
+.CodeToggler--hidden ~ .DarkModeToggler hr {
+    display: block;
+}
+
 // Sidebar navigation
 .Nav {
     margin: 0;
@@ -218,7 +224,7 @@ Components
 .Page__header {
     margin: 0 0 10px;
     padding: 0;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid var(--page-header-separator-color);
 
     @include clearfix();
 
@@ -230,6 +236,7 @@ Components
 
     &--separator {
         height: 0.6em;
+        fill: currentColor;
     }
 
     a {
@@ -239,13 +246,13 @@ Components
     .ModifiedDate {
         float: left;
         font-size: 10px;
-        color: gray;
+        color: var(--page-header-details-color);
     }
 
     .EditOn {
         float: right;
         font-size: 10px;
-        color: gray;
+        color: var(--page-header-details-color);
     }
 }
 
@@ -356,12 +363,12 @@ Components
     }
 
     &__content {
-        border: 1px solid #efefef;
+        border: 1px solid var(--toc--border-color);
         border-width: 4px 2px 2px 6px;
     }
 
     &__content > .TableOfContents > li + li {
-        border-top: 1px solid #ddd;
+        border-top: 1px solid var(--toc--inner-border-color);
     }
 }
 
@@ -401,15 +408,15 @@ ul.TableOfContents {
         > a {
             display: inline-block;
             padding: 5px 14px;
-            background-color: #fff;
-            border: 1px solid #ddd;
+            background-color: var(--pager-background-color);
+            border: 1px solid var(--pager-border-color);
             border-radius: 15px;
         }
 
         > a:hover,
         > a:focus {
             text-decoration: none;
-            background-color: #eee;
+            background-color: var(--pager-hover-background-color);
         }
     }
 

diff --git a/src/css/theme_daux/_homepage.scss b/src/css/theme_daux/_homepage.scss
@@ -75,7 +75,6 @@ Homepage
         opacity: 0.8;
         margin: 0 10px;
         text-transform: uppercase;
-        border: 5px solid var(--hero-button-border-color);
         font-family: var(--font-family-heading);
         font-weight: 700;
 
@@ -92,19 +91,21 @@ Homepage
         }
 
         &.Button--secondary {
+            border: 5px solid var(--hero-button-secondary-border-color);
             background-color: var(--hero-button-secondary-background);
             color: var(--hero-button-secondary-color);
         }
 
         &.Button--primary {
+            border: 5px solid var(--hero-button-primary-border-color);
             background-color: var(--hero-buttom-primary-background);
             color: var(--hero-button-primary-color);
         }
     }
 }
 
 .HomepageContent {
-    background-color: white;
+    background-color: var(--homepage-body-background);
     padding: 40px 0;
 
     ul,

diff --git a/src/css/theme_daux/_structure.scss b/src/css/theme_daux/_structure.scss
@@ -24,8 +24,8 @@ html {
 html,
 body {
     height: 100%;
-    background-color: #fff;
-    color: var(--text);
+    background-color: var(--body-background);
+    color: var(--color-text);
 }
 
 .Columns {
@@ -36,7 +36,6 @@ body {
     &__right {
         &__content {
             padding: 10px;
-            background-color: #fff;
         }
     }
 }
@@ -84,11 +83,6 @@ body {
 }
 
 @media screen and (min-width: 769px) {
-    body {
-        //Needed only for floating code blocks
-        background-color: var(--content-floating-blocks-background);
-    }
-
     .Navbar {
         position: fixed;
         z-index: 1030;
@@ -129,7 +123,7 @@ body {
 
         &__left {
             width: 25%;
-            border-right: 1px solid var(--sidebar-border);
+            border-right: 1px solid var(--sidebar-border-color);
             overflow-x: hidden;
         }
 

diff --git a/src/css/theme_daux/_typography.scss b/src/css/theme_daux/_typography.scss
@@ -146,26 +146,26 @@ h6 {
         }
 
         tr {
-            border-top: 1px solid #eee;
-            background-color: white;
+            border-top: 1px solid var(--table-border);
+            background-color: var(--table-background);
             margin: 0;
             padding: 0;
         }
 
         tr:nth-child(2n) {
-            background-color: var(--lightest-gray);
+            background-color: var(--table-background-odd);
         }
 
         th {
             font-weight: bold;
-            border: 1px solid var(--light-gray);
-            background: var(--lighter-gray);
+            border: 1px solid var(--table-border);
+            background: var(--table-header-background);
             margin: 0;
             padding: 0.5em;
         }
 
         td {
-            border: 1px solid var(--lighter-gray);
+            border: 1px solid var(--table-border);
             margin: 0;
             padding: 0.5em;
         }
@@ -197,7 +197,7 @@ h6 {
         padding-top: 0.1rem;
         padding-bottom: 0.1rem;
         background: var(--code-tag-background-color);
-        border: 1px solid var(--light-gray);
+        border: 1px solid var(--code-tag-border-color);
         border-radius: var(--code-tag-border-radius);
         box-shadow: var(--code-tag-box-shadow);
 
@@ -240,7 +240,7 @@ h6 {
     u,
     ins {
         text-decoration: none;
-        border-bottom: 1px solid var(--text);
+        border-bottom: 1px solid var(--color-text);
 
         a {
             color: inherit;
@@ -250,4 +250,9 @@ h6 {
     del a {
         color: inherit;
     }
+
+    // stylelint-disable-next-line selector-class-pattern
+    .mermaid {
+        background: #fff;
+    }
 }