dark mode support

2 files changed, 50 insertions, 2 deletions

diff --git a/public/assets/css/bucky.css b/public/assets/css/bucky.css
index 349c35c..96bdabc 100644
--- a/public/assets/css/bucky.css
+++ b/public/assets/css/bucky.css
@@ -7,6 +7,7 @@ html {
   min-height: 100%;
   margin: 0;
   padding: 0;
+  margin-bottom: 150px;
 }
 body {
   min-width: 100%;
@@ -17,7 +18,7 @@ body {
 	font-size: 10px;
 	font-family: Trebuchet MS, Helvetica, Arial, sans-serif;
   margin: 0;
-	padding: 20px 30px 200px 30px;
+	padding: 20px 30px 30px 30px;
 	transition: opacity 100ms;
 }
 body.loading {
@@ -1244,3 +1245,36 @@ audio {
     padding-right: 2px;
   }
 }
+@media (prefers-color-scheme: dark) {
+  body {
+    background: #180808;
+    color: #f8f8f8;
+  }
+  button, input[type=submit] {
+    color: #f8f8f8;
+    border: 2px #eee solid;
+    padding: 2px;
+    margin: 3px;
+    background-color: #18202c;
+    text-transform: uppercase;
+    cursor: pointer;
+  }
+  .desktop button:hover,
+  .desktop input[type=submit] {
+    color: #fff;
+    background-color: #28303c;
+  }
+  hr {
+    border-color: #fff;
+  }
+  a.headline:link,
+  a.headline:visited { color: #eee; text-decoration: none; }
+  .desktop a.headline:hover { color: #fff; text-decoration: none; }
+  .ledger .row td:nth-child(1) a { color: #ddd; }
+  #threads .keyword td a { color: #ddd; text-decoration: none; }
+  .desktop #threads .keyword td a:hover { color: #fff; text-decoration: underline; }
+  #threads .keyword td b a { color: #ddd; }
+  .desktop #threads .keyword td b a:hover { color: #fff; }
+  .subtitle a { color: #eee; text-decoration: none; }
+  .desktop.subtitle a:hover { color: #fff; text-decoration: underline; }
+}
\ No newline at end of file
diff --git a/public/assets/js/util/color.js b/public/assets/js/util/color.js
index 6d33a72..1de555d 100644
--- a/public/assets/js/util/color.js
+++ b/public/assets/js/util/color.js
@@ -65,6 +65,19 @@ var COLORS = {
   black: new Color(32,32,37),
 }
 
+var DARK_COLORS = {
+  plain: new Color(24,10,10),
+  ivory: new Color(18,18,18),
+  pink: new Color(40,23,35),
+  red: new Color(40,24,23),
+  orange: new Color(40,32,23),
+  yellow: new Color(40,40,31),
+  green: new Color(33,40,31),
+  blue: new Color(24,26,40),
+  purple: new Color(35,31,40),
+  black: new Color(0,0,0),
+}
+
 function nighttime_quotient() {
   var q = -10;
   var date = new Date()
@@ -111,7 +124,8 @@ function set_background_color_from_time(){
 }
 function set_background_color(color_name){
   color_name = color_name || "plain"
-  var color = COLORS[color_name]
+  var color_set = window.matchMedia('prefers-color-scheme: dark') ? DARK_COLORS : COLORS
+  var color = color_set[color_name]
     .clone()
     .mottleRGB(4,4,8)
 //     .add(nighttime_quotient())