Add a dark theme (#91)

package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "emglken": "^0.4.0",
     "jquery": "^3.6.0",
+    "js-cookie": "^3.0.1",
     "lodash-es": "^4.17.21"
   },
   "devDependencies": {

src/common/launcher.js

@@ -9,6 +9,8 @@ https://github.com/curiousdannii/parchment
 
 */
 
+import Cookies from 'js-cookie'
+
 import Blorb from '../upstream/asyncglk/src/blorb/blorb.ts'
 import get_default_options from './options.js'
 import {FileView} from '../upstream/asyncglk/src/blorb/iff.ts'
@@ -36,6 +38,15 @@ class ParchmentLauncher
 
     launch() {
         try {
+            // Apply the dark theme if set
+            const theme = this.options.theme
+                || Cookies.get(this.options.theme_cookie)
+                // Or if the browser tells us to prefer dark
+                || (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : '')
+            if (theme) {
+                document.documentElement.setAttribute('data-theme', theme)
+            }
+
             const storyfile_path = this.get_storyfile_path()
             if (!storyfile_path) {
                 // Set up all the ways we can load a story

src/common/options.js

@@ -23,5 +23,7 @@ export default function get_default_options() {
         proxy_url: 'https://proxy.iplayif.com/proxy/',
         //single_file: 0
         //story: PATH_TO_STORY
+        //theme: can be set to 'dark'
+        theme_cookie: 'parchment_theme',
     }
 }

src/web/parchment.css

@@ -10,13 +10,14 @@ https://github.com/curiousdannii/parchment
 */
 
 body {
+  background: var(--glkote-page-bg);
+  color: var(--glkote-buffer-fg);
   height: 100%;
   margin: 0px;
 }
 
 /* Essential styles for GlkOte */
 #gameport {
-  background: var(--glkote-page-bg);
   bottom: 0px;
   left: 0px;
   margin: 0 auto;

src/web/web.css

@@ -4,4 +4,5 @@
 @import url('../upstream/asyncglk/src/glkote/web/glkote.css');
 @import url('../fonts/fonts.css');
 @import url('../upstream/glkote/dialog.css');
-@import url('../upstream/asyncglk/src/glkote/web/light.css');
+@import url('../upstream/asyncglk/src/glkote/web/light.css');
+@import url('../upstream/asyncglk/src/glkote/web/dark.css');