1 files changed, 92 insertions, 28 deletions

diff --git a/src/css/_style.scss b/src/css/_style.scss
index 4be15ec..e8eb304 100644
--- a/src/css/_style.scss
+++ b/src/css/_style.scss
@@ -23,9 +23,7 @@
   padding-left: 32px;
 }
 
-details {
-  color: #424242;
-}
+
 
 .special-box {
   margin: 12.5px 12.5px;
@@ -46,53 +44,88 @@ details {
   margin: 0 0 -48px -70px;
 }
 
-@mixin box($name, $bg) {
 
+@mixin box($name, $lightBg, $darkBg, $lightFg, $darkFg) {
   /* Theme style */
   .#{$name} {
-    background: $bg;
-    padding-right: 4%;
-    padding-top: 2%;
-    font-family: monospace, serif;
-    font-size: 1rem;
-
     background-image: url("/s/imgM/ic_" + $name + "_black_48px.svg");
     background-position: 25px center;
     background-repeat: no-repeat;
+
+    @media (prefers-color-scheme: dark) {
+      background-color: $darkBg;
+      color: $darkFg;
+    }
+    @media (prefers-color-scheme: light) {
+      background-color: $lightBg;
+      color: $lightFg;
+    }
+
+    &.light {
+      background-color: $lightBg;
+      color: $lightFg;
+    }
+    &.dark {
+      background-color: $darkBg;
+      color: $darkFg;
+    }
+
+    a, a.light, a.dark {
+      color: #458;
+      &:visited {
+        color: #444;
+      }
+    }
   }
 }
 
 .special-box a {
-  color: #3D58A8;
+  font-family: monospace, serif;
+  font-size: 1rem;
 }
 
 
-@include box('information', #daeaee);
-@include box('note', #bed2ff);
-@include box('attention', #eee7da);
-@include box('question', #e2daee);
-@include box('good', #aea);
-@include box('bad', #eaa);
+// @mixin darkMode {
+//   .likesBox {
+//     background-color: #3C3C7C;
+//
+//     .likesNotes {
+//       color: #CCC;
+//     }
+//
+//     .icon {
+//       .nbLikes {
+//         color: #F0D5AD;
+//       }
+//     }
+//   }
+// }
+
+@include box('information', #daeaee, #777a92, #000, #fff);
+@include box('note', #bed2ff, #7a8ab3, #000, #fff);
+@include box('attention', #eee7da, #aa9f8e, #000, #fff);
+@include box('question', #e2daee, #9e92a2, #000, #fff);
+@include box('good', #aea, #66a65e, #000, #fff);
+@include box('bad', #eaa, #aa625e, #000, #fff);
 
 details {
-  background-color: lightyellow;
   border-radius: 20px;
   margin: 40px;
   padding: 25px;
-
   summary {
     cursor: pointer;
   }
+  .secret {
+    padding: 10px 0 10px 15px;
+    min-height: 20px;
+  }
+  a, a.light, a.dark {
+    color: #458;
+    &:visited {
+      color: #444;
+    }
+  }
 }
-
-.secret {
-  padding: 10px 0 10px 15px;
-  min-height: 20px;
-
-  /* Theme style */
-  background: #eee;
-}
-
 .hiden_block_quote {
   display: none;
 }
@@ -101,6 +134,37 @@ details {
   margin-top: 5px;
 }
 
+@media (prefers-color-scheme: dark) {
+  details {
+    background-color: #896400;
+    .secret {
+      background: #eee;
+    }
+  }
+}
+details.dark {
+  background-color: #896400;
+  .secret {
+    background: #eee;
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  details {
+    background-color: lightyellow;
+    .secret {
+      background: #eee;
+    }
+  }
+}
+details.light {
+  background-color: lightyellow;
+  .secret {
+    background: #eee;
+  }
+}
+
+
 kbd {
   padding: 2px 6px;
   border-radius: 3px;