fix dark mode styles

tgdwyer · Aug 30, 2024 · 8fd6650 · 8fd6650
1 parent 67daf75
commit 8fd6650
Showing 1 changed file with 33 additions and 7 deletions.
diff --git a/_sass/minima/custom-styles.scss b/_sass/minima/custom-styles.scss
@@ -1,13 +1,13 @@
-.cheatsheet {
-  background-color: #e8e8e8;
-  padding: 8px 12px;
-}
-
-.glossary {
+.cheatsheet, .glossary {
   background-color: #f3f0f0;
   padding: 8px 12px;
 }
 
+@media (prefers-color-scheme: dark) {
+  .cheatsheet, .glossary {
+    background-color: #333;
+  }
+}
 
 .post-header {
   &, h1 {
@@ -37,7 +37,7 @@
   margin-left: -120px;
 
   padding: 10px;
-  background: #fff;
+  background: var(--minima-background-color);
   border: 1px solid #ccc;
   box-shadow: 0 0 10px rgba(0,0,0,0.1);
   z-index: 1000;
@@ -49,6 +49,12 @@
   font: 400 16px / 1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
 
+@media (prefers-color-scheme: dark) {
+  .glossary-popup {
+    border-color: #444;
+  }
+}
+
 
 #pagination {
   width: 100%;
@@ -185,3 +191,23 @@ input:checked + .slider:before {
   background-color: #aaa;
   border: 1px solid #999;
 }
+
+@media (prefers-color-scheme: dark) {
+  .spoiler, .spoiler * {
+    color: #333;
+  }
+
+  .spoiler {
+    color: white;
+    background-color: #333;
+  }
+
+  .spoiler[data-revealed], .spoiler[data-revealed] * {
+    background-color: #333;
+  }
+
+  .spoiler[data-revealed] code {
+    background-color: #222;
+    border-color: #111;
+  }
+}