From 5c8feeed682a1af36c5d71f78bfba9d83a618255 Mon Sep 17 00:00:00 2001
From: ache <ache@ache.one>
Date: Sun, 11 Sep 2022 00:29:46 +0200
Subject: Implemente theme switch

---
 src/css/_contenu.scss      | 65 +++++++++++++++++++++++++++++++++++++---------
 src/css/_sommaire.scss     | 34 +++++++++++++++++++-----
 src/css/design.scss        | 44 ++++++++++++++++++++++++++-----
 src/img/moon.svg           |  1 +
 src/img/sun.svg            |  1 +
 src/js/theme.js            | 55 +++++++++++++++++++++++++++++++++++++++
 src/templates/article.tmpl |  1 +
 src/templates/index.tmpl   |  2 +-
 8 files changed, 176 insertions(+), 27 deletions(-)
 create mode 100644 src/img/moon.svg
 create mode 100644 src/img/sun.svg
 create mode 100644 src/js/theme.js

diff --git a/src/css/_contenu.scss b/src/css/_contenu.scss
index 0dd4889..3ff6b90 100755
--- a/src/css/_contenu.scss
+++ b/src/css/_contenu.scss
@@ -34,15 +34,15 @@ article {
     line-height: 1.6;
   }
 
+
+
   h1 {
     font-size: 3rem;
     line-height: 3rem;
-    color: #605;
   }
   h2 {
     font-size: 2rem;
     line-height: 3rem;
-    color: #551;
   }
   h3 {
     font-size: 1.6rem;
@@ -67,7 +67,6 @@ article {
   }
 
   > p:first-of-type {
-      color: #944040;
       > img {
         height: 150px;
         float: right;
@@ -77,8 +76,6 @@ article {
     }
   }
 
-
-
   @media #{$gt-gsm} {
     ul {
       line-height: 1.4;
@@ -130,8 +127,9 @@ article {
   h1 h2 h3 {
     line-height: initial;
   }
-
-
+  h1, h2, h3, h4, h5 {
+      text-indent: -10px;
+  }
 
   @media #{$gsm} {
     margin: 0;
@@ -142,11 +140,44 @@ article {
       font-size: 0.9rem;
     }
   }
+  @mixin lightMode {
+    h1 {
+      color: #605;
+    }
+    h2 {
+      color: #551;
+    }
+    h3 {
+      color: #660;
+    }
+    h4, h5, h6 {
+      color: black;
+    }
+    img {
+      filter: none;
+    }
+    color: initial;
+
+    > p:first-of-type {
+      color: #944040;
+      > img {
+        filter: none;
+      }
+    }
+  }
 
   @mixin darkMode {
-    h1, h2, h3, h4, h5 {
+    h1 {
+      color: #FEF;
+    }
+    h2 {
+      color: #EFE;
+    }
+    h3 {
+      color: #DED;
+    }
+    h4, h5, h6 {
       color: #EFEFEF;
-      text-indent: -10px;
     }
     img {
       filter: invert(1);
@@ -160,8 +191,9 @@ article {
       }
     }
   }
-  @media (prefers-color-scheme: dark) { @include darkMode; } &.dark { @include darkMode; }
-
+  @media (prefers-color-scheme: dark) { @include darkMode; }   @media (prefers-color-scheme: light) { @include lightMode; }
+  &.light{ @include lightMode; }
+  &.dark { @include darkMode; }
 }
 
 .keybs {
@@ -187,14 +219,23 @@ article {
 .sidenotes {
   margin: 10px 10px 0 0;
   text-align: justify;
+
   @media #{$tab} {
     display: none;
   }
 
+  @mixin lightMode {
+    color: #333333;
+  }
+
   @mixin darkMode {
     color: #eee;
   }
-  @media (prefers-color-scheme: dark) { @include darkMode; } &.dark { @include darkMode; }
+  @media (prefers-color-scheme: dark) { @include darkMode; }
+  @media (prefers-color-scheme: light) { @include lightMode; }
+  &.light{ @include lightMode; }
+  &.dark { @include darkMode; }
+
   transition: width 0.25s ease-out 0.25s;
   position: relative;
   max-width: 475px;
diff --git a/src/css/_sommaire.scss b/src/css/_sommaire.scss
index c920bb3..44a3b1e 100755
--- a/src/css/_sommaire.scss
+++ b/src/css/_sommaire.scss
@@ -4,13 +4,10 @@
   font-size: 0.8em;
   font-weight: bold;
   font-family: monospace, serif;
-  text-shadow: 0 1px 0 #DDD;
-  color: #686868;
   &:before {
     content: "/";
   }
   a {
-    color: #686868;
     outline: none;
     text-decoration: none;
   }
@@ -27,6 +24,28 @@
     list-style-type: none;
     padding-left: 0;
   }
+  @mixin lightMode {
+    background: #F5F6F5;
+    color: inherit;
+
+    #logo-ache {
+      filter: none;
+    }
+    #desc_intro {
+      text-shadow: 0 1px 0 #DDD;
+    }
+    .sommaire_blien {
+      text-shadow: 0 1px 0 #444;
+      color: #686868;
+      a {
+        color: #686868;
+      }
+    }
+    .about {
+      color: #666;
+    }
+  }
+
 
   @mixin darkMode {
     background: #101110;
@@ -37,8 +56,6 @@
     #desc_intro {
       text-shadow: 2px 4px 0 #333;
     }
-    .about_bar {
-    }
     .sommaire_blien {
       text-shadow: 0 1px 0 #444;
       color: #F5F5F5;
@@ -50,7 +67,11 @@
       color: #BBB;
     }
   }
-  @media (prefers-color-scheme: dark) { @include darkMode; } &.dark { @include darkMode; }
+  @media (prefers-color-scheme: light) { @include lightMode; }
+  @media (prefers-color-scheme: dark) { @include darkMode; }
+
+  &.light { @include lightMode; }
+  &.dark { @include darkMode; }
 
 
 
@@ -92,7 +113,6 @@
 }
 .about {
   font-size: 0.8em;
-  color: #666;
   font-family: monospace;
   align-items: center;
   justify-content: center;
diff --git a/src/css/design.scss b/src/css/design.scss
index a83ce34..8bbaa36 100755
--- a/src/css/design.scss
+++ b/src/css/design.scss
@@ -12,11 +12,17 @@ $big-screen: "screen and (min-width: 1720px)";
 
 
 html {
-  background: #f1f1f1;
+
+  @mixin lightMode {
+    background: #f1f1f1;
+  }
   @mixin darkMode {
     background: #222;
   }
-  @media (prefers-color-scheme: dark) { @include darkMode; } &.dark { @include darkMode; }
+  @media (prefers-color-scheme: dark) { @include darkMode; } 
+  @media (prefers-color-scheme: light) { @include lightMode; }
+  &.light { @include lightMode; }
+  &.dark { @include darkMode; }
 }
 
 /*
@@ -45,10 +51,6 @@ body {
   #side-bar {
     box-sizing: border-box;
 
-    @mixin lightMode {
-      background: #F5F6F5;
-    }
-    @media (prefers-color-scheme: light) { @include lightMode; } &.dark { @include lightMode; }
     padding-top: 10px;
 
 
@@ -68,6 +70,8 @@ body {
 }
 .hide_arrow {
   @media (prefers-color-scheme: dark) { filter: invert(1); }
+  @media (prefers-color-scheme: light) { filter: invert(0); }
+  &.light{ filter: invert(0); }
   &.dark { filter: invert(1); }
 
   position: fixed;
@@ -149,4 +153,30 @@ table, th, td {
   }
   transition: margin-left 0.25s ease-out 0.25s, grid-template-columns 0.25s ease-out 0.25s;
 }
-
+#hid {
+  .moon, .sun {
+    display: none;
+  }
+  &.dark {
+    .sun {
+      display: unset;
+    }
+  }
+  &.light {
+    .moon {
+      display: unset;
+    }
+  }
+  position: fixed;
+  top: 10px;
+  right: 10vw;
+  .sun, .moon {
+    position: sticky;
+    top: 400px;
+    cursor: pointer;
+    opacity: 0.5;
+    &:hover {
+      opacity: 1;
+    }
+  }
+}
diff --git a/src/img/moon.svg b/src/img/moon.svg
new file mode 100644
index 0000000..251b499
--- /dev/null
+++ b/src/img/moon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
\ No newline at end of file
diff --git a/src/img/sun.svg b/src/img/sun.svg
new file mode 100644
index 0000000..5d95560
--- /dev/null
+++ b/src/img/sun.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="#DDD" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
\ No newline at end of file
diff --git a/src/js/theme.js b/src/js/theme.js
new file mode 100644
index 0000000..687574e
--- /dev/null
+++ b/src/js/theme.js
@@ -0,0 +1,55 @@
+window.addEventListener('DOMContentLoaded', () => {
+  const preferesDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+  let isDark = preferesDark;
+
+  const hid = document.querySelector('#hid');
+  const html = document.querySelector('html');
+  const aside = document.querySelector('#side-bar');
+  const sidenotes = document.querySelector('.sidenotes');
+  const harr = document.querySelector('#harr');
+
+  function toogleTheme() {
+    const arg = isDark ? ['dark', 'light'] : ['light', 'dark'];
+    const theme = arg[1];
+
+    if (!hid.classList.replace(...arg)) {
+      hid.classList.add(theme);
+    }
+
+    if (!html.classList.replace(...arg)) {
+      html.classList.add(theme);
+    }
+
+    if (!aside.classList.replace(...arg)) {
+      aside.classList.add(theme);
+    }
+
+    if (!sidenotes.classList.replace(...arg)) {
+      sidenotes.classList.add(theme);
+    }
+
+    if (!harr.classList.replace(...arg)) {
+      harr.classList.add(theme);
+    }
+
+    for (const article of document.querySelectorAll('article')) {
+      if (!article.classList.replace(...arg)) {
+        article.classList.add(theme);
+      }
+    }
+
+    isDark = !isDark;
+  }
+
+  const sun = document.querySelector('.sun');
+  const moon = document.querySelector('.moon');
+
+  sun.addEventListener('click', toogleTheme);
+  moon.addEventListener('click', toogleTheme);
+
+  if (isDark) {
+    hid.classList.add('dark');
+  } else {
+    hid.classList.add('light');
+  }
+});
diff --git a/src/templates/article.tmpl b/src/templates/article.tmpl
index 6d6528d..33ce8f4 100644
--- a/src/templates/article.tmpl
+++ b/src/templates/article.tmpl
@@ -11,5 +11,6 @@
       <div class="sidenotes"></div>
     </div>
     {{> leftPanel }}
+    <div id="hid"><div class="sun">{{{svg.sun}}}</div><div class="moon">{{{svg.moon}}}</div></div>
   </body>
 </html>
diff --git a/src/templates/index.tmpl b/src/templates/index.tmpl
index db117c9..230db27 100644
--- a/src/templates/index.tmpl
+++ b/src/templates/index.tmpl
@@ -1,4 +1,3 @@
-
 <!DOCTYPE html>
 <html lang="fr">
   {{>header }}
@@ -13,5 +12,6 @@
       </div>
     {{/articles}}
     {{> leftPanel }}
+    <div id="hid"><div class="sun">{{{svg.sun}}}</div><div class="moon">{{{svg.moon}}}</div></div>
   </body>
 </html>
-- 
cgit v1.2.3