Dark mode (#97)

decred · Sep 15, 2021 · 65f1099 · 65f1099
1 parent 28377c9
commit 65f1099
Show file tree

Hide file tree

Showing 4 changed files with 111 additions and 39 deletions.
diff --git a/docs/css/fonts.css b/docs/css/fonts.css
@@ -61,39 +61,39 @@ pre, code {
 }
 
 .md-typeset h1 {
-    color         : #596D81;
+    color : var(--dcrdocs-h1-color);
     font-size     : 34px;
     text-transform: none;
 }
 
 .md-typeset h2 {
-    color         : #091440;
+    color : var(--dcrdocs-h2-color);
     font-size     : 26px;
     text-transform: none;
     font-weight   : bold;
 }
 
 .md-typeset h3 {
-    color         : #091440;
+    color : var(--dcrdocs-h3-color);
     font-size     : 23px;
     text-transform: none;
 }
 
 .md-typeset h4 {
-    color         : #091440;
+    color : var(--dcrdocs-h4-color);
     font-size     : 20px;
     text-transform: none;
     font-weight   : bold;
 }
 
 .md-typeset h5 {
-    color         : #091440;
+    color : var(--dcrdocs-h5-color);
     font-size     : 18px;
     text-transform: none;
 }
 
 .md-typeset h6 {
-    color         : #596D81;
+    color : var(--dcrdocs-h6-color);
     font-size     : 16px;
     text-transform: none;
     font-weight   : bold;
@@ -103,7 +103,6 @@ pre, code {
 .md-typeset ul,
 .md-typeset ol,
 .md-typeset table {
-    color    : #48566E;
     font-size: 16px;
 }
 
@@ -116,22 +115,13 @@ font-awesome icons */
 a.fa{
     font-weight: normal;
 }
-.md-typeset a:link,
-.md-typeset a:visited {
-    color: #2970FF;
-}
-.md-typeset a:hover,
-.md-typeset a:active {
-    color: #1A59F7;
-}
 
 .md-typeset blockquote {
-    border-left:.2rem solid #48566E;
+    border-left:.2rem solid var(--md-typeset-color);
 }
 .md-typeset blockquote p,
 .md-typeset blockquote ul,
 .md-typeset blockquote ol
- {
-    color:      #48566E;
+{
     font-style: italic;
 }
diff --git a/docs/css/style.css b/docs/css/style.css
@@ -1,14 +1,85 @@
-/* Override header and footer with decred dark blue*/
-.md-header,
-.md-footer-nav,
-.md-footer-meta,
-.md-nav__source {
-    background-color: #2970FF;
+[data-md-color-scheme="dcrdocs-light"] {
+    /* Header bg color */
+    --md-primary-fg-color:           #2970FF;
+    /* Mobile nav menu bg color */
+    --md-primary-fg-color--dark:     #2970FF;
+    /* Background */
+    --md-default-bg-color:           #fff;
+    /* h1 & table header bg */
+    --md-default-fg-color--light:    #596D81;
+    /* Edit icon (pencil) */
+    --md-default-fg-color--lighter:  #596D81;
+    /* <hr> */
+    --md-default-fg-color--lightest: rgba(0,0,0,0.1);
+    /* Main body text & h2, h3, etc. */
+    --md-typeset-color:              #48566E;
+    /* <a> */
+    --md-typeset-a-color:            #2970FF;
+    /* <a> :hover */
+    --md-accent-fg-color:            #1A59F7;
+    /* Footer */
+    --md-footer-fg-color:            #fff;
+    --md-footer-bg-color:            #2970FF;
+    /* Code */
+    --md-code-fg-color:              #48566E;
+    --md-code-bg-color:              #EDEFF1;
+    /* Admonitions */
+    --md-admonition-fg-color:        #48566E;
+    --md-admonition-bg-color:        #fff;
+    /* Custom colors for headings */
+    --dcrdocs-h1-color:              #596D81;
+    --dcrdocs-h2-color:              #091440;
+    --dcrdocs-h3-color:              #091440;
+    --dcrdocs-h4-color:              #091440;
+    --dcrdocs-h5-color:              #091440;
+    --dcrdocs-h6-color:              #596D81;
+    /* Custom colors for table headers */
+    --dcrdocs-table-bg-color:        #EDEFF1;
+    --dcrdocs-table-fg-color:        #091440;
+}
+
+[data-md-color-scheme="dcrdocs-dark"] {
+    /* Header bg color */
+    --md-primary-fg-color:           #091440;
+    /* Mobile nav menu bg color */
+    --md-primary-fg-color--dark:     #122c5c;
+    /* Background */
+    --md-default-bg-color:           #223767;
+    /* h1 & table header bg */
+    --md-default-fg-color--light:    #b7deee;
+    /* Edit icon (pencil) */
+    --md-default-fg-color--lighter:  #b7deee;
+    /* <hr> */
+    --md-default-fg-color--lightest: rgba(255,255,255,0.1);
+    /* Main body text & h2, h3, etc. */
+    --md-typeset-color:              #99c1e3;
+    /* <a> */
+    --md-typeset-a-color:            #4A92FF;
+    /* <a> hover */
+    --md-accent-fg-color:            #66A9FF;
+    /* Footer */
+    --md-footer-fg-color:            #E9F8FE;
+    --md-footer-bg-color:            #152042;
+    /* Code */
+    --md-code-fg-color:              #99c1e3;
+    --md-code-bg-color:              #152042;
+    /* Admonitions */
+    --md-admonition-fg-color:        #99c1e3;
+    --md-admonition-bg-color:        #223767;
+    /* Custom colors for headings */
+    --dcrdocs-h1-color:              #99c1e3;
+    --dcrdocs-h2-color:              #99c1e3;
+    --dcrdocs-h3-color:              #99c1e3;
+    --dcrdocs-h4-color:              #99c1e3;
+    --dcrdocs-h5-color:              #99c1e3;
+    --dcrdocs-h6-color:              #99c1e3;
+    /* Custom colors for table headers */
+    --dcrdocs-table-bg-color:        #152042;
+    --dcrdocs-table-fg-color:        #EDEFF1;
 }
 
 /* Highlight current page in nav menu */
 .md-nav__link--active {
-    color      : #536dfe;
     font-weight: bold;
 }
 
@@ -39,15 +110,6 @@ p img.dcr-icon {
     vertical-align: middle;
 }
 
-@media only screen and (max-width: 76.1875em){
-    .md-nav--primary .md-nav__title[for=__drawer] {
-        background-color: #2970FF;
-    }
-    .md-nav__source {
-        background-color: #2970FF;
-    }
-}
-
 /* Disable min-width for headers in tables with at least 7 columns */
 .md-typeset table:not([class]) th:first-child:nth-last-child(n+7),
 .md-typeset table:not([class]) th:first-child:nth-last-child(n+7) ~ th {
@@ -74,10 +136,10 @@ details .md-typeset__table code{
 }
 
 .md-typeset table:not([class]) th{
-    background-color: #EDEFF1;
+    background-color: var(--dcrdocs-table-bg-color);
     font-size: 13px;
     font-weight: bold;
-    color: #091440;
+    color: var(--dcrdocs-table-fg-color);
 }
 .md-typeset table:not([class]) td{
     font-size: 13px;
@@ -91,13 +153,11 @@ details .md-typeset__table code{
     padding-left: 4px;
     padding-right: 4px;
     border-radius: 3px;
-    background-color: #EDEFF1;
     box-shadow: none;
 }
 
 .md-typeset pre>code {
     border-radius: 3px;
-    background-color: #EDEFF1;
 }
 
 .tabbed-set {

diff --git a/mkdocs.yml b/mkdocs.yml
@@ -8,6 +8,28 @@ theme:
     - navigation.instant
   icon:
     repo: octicons/mark-github-16
+  palette:
+    # Light mode
+    - media: "(prefers-color-scheme: light)"
+      scheme: dcrdocs-light
+      # Primary and accent colours should be fully overridden by dcrdocs-light theme.
+      # If any green shows up in the site, thats a bug.
+      primary: green
+      accent: green
+      toggle:
+        icon: material/weather-night
+        name: Switch to dark mode
+
+    # Dark mode
+    - media: "(prefers-color-scheme: dark)"
+      scheme: dcrdocs-dark
+      # Primary and accent colours should be fully overridden by dcrdocs-dark theme.
+      # If any green shows up in the site, thats a bug.
+      primary: green
+      accent: green
+      toggle:
+        icon: material/weather-sunny
+        name: Switch to light mode
 extra:
   social:
     - icon: octicons/mark-github-16

diff --git a/requirements.txt b/requirements.txt
@@ -1,4 +1,4 @@
 mkdocs==1.1.2
-mkdocs-material==7.1.3
+mkdocs-material==7.1.4
 mkdocs-material-extensions==1.0.1
 mkdocs-markdownextradata-plugin==0.2.4