Implement dark/white theme controls. Fix #56

src/features/index.ts

@@ -5,7 +5,8 @@ import Sidebar from "./sidebar";
 import RESCompatibility from "./RESCompatibility";
 import PostsEnhancements from "./posts";
 import { OLFeature } from "./base";
+import WhiteTheme from "./themeSwitch";
 type Constructor = new (...args: any[]) => OLFeature;
-const features: Array<Constructor> = [Expandos, RESButtons, Sidebar,  RESCompatibility, RedditMarquee];
+const features: Array<Constructor> = [Expandos, RESButtons, Sidebar,  RESCompatibility, RedditMarquee, WhiteTheme];
 features.push(...PostsEnhancements)
 export default features;

src/features/themeSwitch.ts

@@ -0,0 +1,40 @@
+import { store } from "../extensionPreferences";
+import { waitForElement } from "../utility/waitForElement";
+import { OLFeature, SettingToggle } from "./base";
+
+const systemThemeKey = "systemTheme"
+const whiteThemeKey = "whiteTheme"
+
+export default class WhiteTheme extends OLFeature {
+    moduleId: string = "whiteTheme";
+    moduleName: string = "Theme controls";
+    async init () {
+        this.settingOptions.push(
+            new SettingToggle("White theme", "Enables white theme instead of dark.", whiteThemeKey, async (theme) => {
+                const { systemTheme } = await store.get(systemThemeKey)
+                if (systemTheme !== undefined && systemTheme) {
+                    console.log("Systemtheme key is set, not enabling white theme")
+                    return
+                }
+                waitForElement("body", () => {
+                    document.body.classList.toggle("whiteTheme", theme)
+                })
+            })
+        )
+        this.settingOptions.push(
+            new SettingToggle("System theme", "Makes oldlander follow system theme. Overrides white theme option", systemThemeKey, (followSystemTheme) => {
+                if (followSystemTheme) {
+                    this.followSystemTheme()
+                    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', this.followSystemTheme)
+                }
+            })
+        )
+    }
+    followSystemTheme() {
+        const darkTheme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+        console.log("Dark theme?", darkTheme)
+        waitForElement("body", () => {
+            document.body.classList.toggle("whiteTheme", !darkTheme)
+        })
+    }
+}

src/material/theme.css

@@ -1,8 +1,8 @@
 @import url(tokens.css);
 @import url(colors.css);
 @import url(typography.css);
-@import url(theme.light.css) (prefers-color-scheme: light);
-@import url(theme.dark.css) (prefers-color-scheme: dark);
+@import url(theme.light.css);
+@import url(theme.dark.css);
 :root {
     --md-sys-shape-corner-extra-small: (4px 4px 0 0)
 }

src/material/theme.light.css

@@ -1,4 +1,4 @@
-:root {
+.whiteTheme {
     --md-sys-color-primary: var(--md-sys-color-primary-light);
     --md-sys-color-on-primary: var(--md-sys-color-on-primary-light);
     --md-sys-color-primary-container: var(