Implemente theme switch

3 files changed, 117 insertions, 26 deletions

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;
+    }
+  }
+}