adding light and dark theme to cosmic web display

bin/web

@@ -309,6 +309,7 @@ if [ "$run_user" = "root" ] || [ "$run_user" = "publish" ]; then
 
   # copy cosmic banner
   cp "/var/cosmic/files/cosmicbanner.png" "${html_dir}"
+  cp "/var/cosmic/files/paper.png" "${html_dir}"
 
   # generate tilde.json
   printf '{"name": "cosmic.voyage", "url": "https://cosmic.voyage", "signup_url": "https://cosmic.voyage/join.html", "user_count": %s, "want_users": true, "admin_email": "register@cosmic.voyage", "description": "Cosmic Voyage is a public-access unix system and tilde community based around a collaborative science-fiction universe. Users write stories as the people aboard ships, colonies, and outposts, using the only remaining free, interconnected network that unites the dispersed peoples of the stars."}' "$(grep -E '1[0-9]{3}' "/etc/passwd" | grep -c 'home')" > "${html_dir}/tilde.json"

templates/webstyles.tmpl

@@ -1,14 +1,16 @@
 <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet"> 
 <style>
-  body, html {
+
+  body,
+  html {
     color: rgb(50, 200, 100);
     background-color: #010;
-    font-size: 12px;
   }
 
-  a, a:visited, a:hover, a:active {
-    text-decoration: none;
-    font-weight: bold;
+  a,
+  a:visited,
+  a:hover,
+  a:active {
     color: rgb(62, 231, 123);
   }
 
@@ -16,6 +18,48 @@
     color: rgb(62, 231, 123, 0.5);
   }
 
+  @media (prefers-color-scheme: dark) {
+    body,
+    html {
+      color: rgb(50, 200, 100);
+      background-color: #010;
+    }
+
+    a,
+    a:visited,
+    a:hover,
+    a:active {
+      color: rgb(62, 231, 123);
+    }
+
+    .dim {
+      color: rgb(62, 231, 123, 0.5);
+    }
+  }
+
+  @media (prefers-color-scheme: light) {
+    body,
+    html {
+      color: #333;
+      background-color: white;
+      background-image: url('/paper.png');
+      background-repeat: repeat;
+    }
+
+    a,
+    a:visited,
+    a:hover,
+    a:active {
+      color: #333;
+      font-weight: bold;
+      text-decoration: none;
+    }
+
+    .dim {
+      color: rgba(30, 30, 30, 0.5);
+    }
+  }
+
   .page-wrapper {
     text-align: center;
   }