Dark mode - Merge geotribu#91 from geotribu/dark-mode

rxlacroix · May 29, 2020 · f86982a · f86982a
2 parents 5a92bbb + 373f0f4
commit f86982a
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 5 deletions.
diff --git a/content/index.md b/content/index.md
@@ -10,3 +10,18 @@ tags: homepage,accueil,geotribu,bienvenue,global
 Bienvenue sur Geotribu !
 
 ![Bannière Géotribu](https://cdn.geotribu.fr/images/internal/charte/geotribu_banner.jpg)
+
+## Thème
+
+<button data-md-color-scheme="default"><code>Thème clair (défault)</code></button>
+<button data-md-color-scheme="slate"><code>Thème sombre</code></button>
+
+<script>
+  var buttons = document.querySelectorAll("button[data-md-color-scheme]")
+  buttons.forEach(function(button) {
+    var attr = "data-md-color-scheme"
+    button.addEventListener("click", function() {
+      document.body.setAttribute(attr, this.getAttribute(attr))
+    })
+  })
+</script>
diff --git a/content/theme/assets/stylesheets/extra.css b/content/theme/assets/stylesheets/extra.css
@@ -1,4 +1,5 @@
 /* Custom images */
+
 img {
     border-style: solid;
     border-color: darkgrey;
@@ -17,12 +18,27 @@ img {
     border: none;
 }
 
-.emojione,
-.twemoji {
+.emojione, .twemoji {
     box-shadow: none;
     border: none;
 }
 
+/* Custom buttons to set dark/ligth modes */
+.md-typeset button[data-md-color-scheme] {
+    cursor: pointer;
+    transition: opacity 250ms;
+}
+
+.md-typeset button[data-md-color-scheme]:hover {
+    opacity: 0.75;
+}
+
+.md-typeset button[data-md-color-scheme]>code {
+    display: block;
+    color: var(--md-primary-bg-color);
+    background-color: var(--md-primary-fg-color);
+}
+
 /* Customize embedded tweets */
 
 blockquote.twitter-tweet {

diff --git a/src/mkdocs/mkdocs.yml b/src/mkdocs/mkdocs.yml
@@ -44,8 +44,9 @@ theme:
   language: 'fr'
   logo: 'theme/assets/images/geotribu/logo_geotribu.png'
   palette:
-    primary: 'teal'
-    accent: 'deep-orange'
+    accent: deep-orange
+    primary: teal
+    scheme: default
 
 # Integrations with 3rd party
 google_analytics:

diff --git a/src/mkdocs/requirements.txt b/src/mkdocs/requirements.txt
@@ -7,7 +7,7 @@ mkdocs-awesome-pages-plugin==2.2.*
 mkdocs-git-authors-plugin==0.3.*
 mkdocs-git-revision-date-localized-plugin==0.5.*
 mkdocs-localsearch==0.7.*
-mkdocs-material==5.1.*
+mkdocs-material==5.2.*
 mkdocs-minify-plugin==0.3.*
 # markdown-include==0.5.*
 https://github.com/cmacmackin/markdown-include/archive/3d76bef7d8b3a2a78b4410454c5504ced72793bd.zip