Theminggit add .

static/content/main.js

@@ -1,5 +1,6 @@
 import { submit, navigate, token, self } from "./api.js";
 import { get_info } from "./api_client.js";
+import { ThemeManager } from "./theme.js";
 console.log(await get_info());
 window.submit = submit;
 let path = window.location.pathname;
@@ -242,6 +243,13 @@ const router = () => {
         // navigate("/");
     }
 };
+
+const setup_theme_manager = () => {
+	window.ThemeManager = ThemeManager;
+	window.ThemeManager.init();
+};
+
+setup_theme_manager();
 setup_storage();
 await dbgr();
 router();

static/content/modules/style.css

@@ -3,13 +3,13 @@
 body {
     font-family: "Roboto Mono", monospace;
     margin: 0;
-    background-color: #121212;
-    color: white;
+    background-color: var(--background-color);
+    color: var(--primary-text-color);
 }
 
 #header {
     display: flex;
-    background-color: #ff0069;
+    background-color: var(--accent-color);
     overflow: hidden;
     padding: 0 20px;
     align-items: center;
@@ -37,30 +37,30 @@ body {
 }
 
 .buttons a:hover {
-    background-color: #121212;
+    background-color: var(--background-color);
 }
 
 .btn {
     padding: 10px;
     min-width: 90px;
     margin: 6px;
     font-size: 1.2em;
-    color: white;
+    color: var(--primary-text-color);
     border-radius: 3px;
     /* border: solid 1.5px ; */
 }
 a {
     text-decoration: none;
-    color: white;
+    color: var(--primary-text-color);
 }
 
 .btn.primary {
-    background-color: #ff0069;
-    border: solid 2px #ff0069;
+    background-color: var(--accent-color);
+    border: solid 2px var(--accent-color);
 }
 .btn.secondary {
-    border: solid 2px #ff0069;
-    color: white;
+    border: solid 2px var(--accent-color);
+    color: var(--primary-text-color);
 }
 .btn:hover {
     cursor: pointer;
@@ -74,7 +74,7 @@ input {
     padding: 10px;
     margin: 10px;
     min-width: 90px;
-    border: solid 2px white;
+    border: solid 2px var(--primary-text-color);
     border-radius: 3px;
 }
 
@@ -84,13 +84,13 @@ form {
 }
 
 .secondary {
-    color: #a7a7a7;
+    color: var(--secondary-text-color);
 }
 a.secondary {
-    color: #5c5c5c;
+    color: var(--secondary-link-color);
 }
 .btn.secondary:hover {
-    background-color: #ff0069;
+    background-color: var(--accent-color);
     transition-duration: 0.5s;
 }
 
@@ -118,7 +118,8 @@ div.bigaf {
     grid-template-columns: 1.5fr 0.75fr 0.75fr;
     text-align: center;
 
-    /* border: solid 2px #ff0069; */
+    /* border: solid 2px var(--accent-color)
+     ; */
     width: 100%;
     padding: 10px;
     margin: 0px 0px;
@@ -135,15 +136,15 @@ div.bigaf {
 }
 
 .item:hover {
-    background-color: #ff0069;
+    background-color: var(--accent-color);
     /* transition-duration: 0.5s; */
 }
 
 .item:hover div.item-title {
-    text-decoration: underline 1px white;
+    text-decoration: underline 1px var(--primary-text-color);
     /* transition: transform .3s cubic-bezier(.86,0,.07,1); */
 }
 
 [hidden] {
     display: none;
-}
+}

static/content/modules/user/settings.html

@@ -2,21 +2,18 @@
     <h1 class="primary">
         Settings
     </h1>
-    <form onsubmit="window.submit.register(event)">
-        <input id="color" type="color" value="#ff0069"/>
-        <input id="password" name="password" type="password" placeholder="Password"/> 
-        <input type="submit" class="btn primary" value="Register">
+    <form id="settings">
     </form>
     <script>
-	    export async const run = () => {
-		    import { setColor } from "
-		    document.querySelector("#color").onchange = (event) => {
-
-			    localStorage.setItem("color", event.target.value);
-		    };
-
+	    export const run = () => {
+		    let settings = document.querySelector("#settings");
+		    for (const prop in window.ThemeManager.style) {
+			    let el = document.createElement("input");
+			    el.type = "color";
+			    el.value = window.ThemeManager.style[prop];
+			    el.onchange = () => window.ThemeManager.set(prop, el.value);
+			    settings.appendChild(el);
+		    }
 	    }
     </script>
-    <p idg="error"></p>
-    <a href="/user/login" class="secondary">Already have an account?</a>
 </div>

static/content/theme.js

@@ -1 +1,42 @@
-// TODO: functions to change theme color etc.
+// TODO: functions to change theme color etc
+export const ThemeManager = {
+	styleEl: null,
+	style: {
+		accentColor: "#ff0069",
+		backgroundColor: "#121212",
+		primaryTextColor: "#ffffff",
+		secondaryTextColor: "#a7a7a7",
+		primaryLinkColor: "#ffffff",
+		secondaryLinkColor: "#5c5c5c",
+	},
+	_css: null,
+	get css() { return this._css },
+	set css(val) { this._css = val; this.styleEl.innerHTML = val; },
+	init(el = null) {
+		for (let prop in this.style) 
+			this.style[prop] = localStorage.getItem("theme." + prop) || this.style[prop];
+		this.inject(el);
+		return this.compile();
+	},
+	compile() {
+		let css = "";
+		for (let prop in this.style) {
+			const val = this.style[prop];
+			prop = "--" + prop.replaceAll(/[A-Z]/g, (m) => "-" + m.toLowerCase());
+			css += `${prop}: ${val};\n`;
+		}
+		this.css = `:root { ${css} }`;
+		return css;
+	},
+	set(prop, val) {
+		if (!this.style.hasOwnProperty(prop)) return false;
+		this.style[prop] = val;
+		localStorage.setItem("theme." + prop, val);
+		return this.compile();
+	},
+	inject(el = null) {
+		if (!el) el = document.head;
+		this.styleEl = document.createElement("style");
+		el.appendChild(this.styleEl);
+	},
+}