accent color support

.dist/localuser.js

@@ -3,7 +3,7 @@ import { Direct } from "./direct.js";
 import { Voice } from "./audio.js";
 import { User } from "./user.js";
 import { Fullscreen } from "./fullscreen.js";
-import { setTheme } from "./login.js";
+import { getBulkInfo, setTheme } from "./login.js";
 import { SnowFlake } from "./snowflake.js";
 import { Message } from "./message.js";
 import { Member } from "./member.js";
@@ -709,6 +709,14 @@ class Localuser {
                     Voice.noises(sounds[_]);
                 });
             }
+            {
+                const userinfos = getBulkInfo();
+                tas.addColorInput("Accent color:", _ => {
+                    userinfos.accent_color = _;
+                    localStorage.setItem("userinfos", JSON.stringify(userinfos));
+                    document.documentElement.style.setProperty('--accent-color', userinfos.accent_color);
+                }, { initColor: userinfos.accent_color });
+            }
         }
         settings.show();
     }

.dist/login.js

@@ -36,6 +36,10 @@ function setDefaults() {
     if (userinfos.users === undefined) {
         userinfos.users = {};
     }
+    if (userinfos.accent_color === undefined) {
+        userinfos.accent_color = "#242443";
+    }
+    document.documentElement.style.setProperty('--accent-color', userinfos.accent_color);
     if (userinfos.preferences === undefined) {
         userinfos.preferences = {
             theme: "Dark",

.dist/settings.js

@@ -175,6 +175,45 @@ class TextInput {
         this.onSubmit(this.textContent);
     }
 }
+class ColorInput {
+    label;
+    owner;
+    onSubmit;
+    colorContent;
+    input;
+    constructor(label, onSubmit, owner, { initColor = "" } = {}) {
+        this.label = label;
+        this.colorContent = initColor;
+        this.owner = owner;
+        this.onSubmit = onSubmit;
+    }
+    generateHTML() {
+        const div = document.createElement("div");
+        const span = document.createElement("span");
+        span.textContent = this.label;
+        div.append(span);
+        const input = document.createElement("input");
+        input.value = this.colorContent;
+        input.type = "color";
+        input.oninput = this.onChange.bind(this);
+        this.input = new WeakRef(input);
+        div.append(input);
+        return div;
+    }
+    onChange(ev) {
+        this.owner.changed();
+        const value = this.input.deref().value;
+        this.onchange(value);
+        this.colorContent = value;
+    }
+    onchange = _ => { };
+    watchForChange(func) {
+        this.onchange = func;
+    }
+    submit() {
+        this.onSubmit(this.colorContent);
+    }
+}
 class SelectInput {
     label;
     owner;
@@ -389,6 +428,11 @@ class Options {
         this.options.push(textInput);
         return textInput;
     }
+    addColorInput(label, onSubmit, { initColor = "" } = {}) {
+        const colorInput = new ColorInput(label, onSubmit, this, { initColor });
+        this.options.push(colorInput);
+        return colorInput;
+    }
     addMDInput(label, onSubmit, { initText = "" } = {}) {
         const mdInput = new MDInput(label, onSubmit, this, { initText });
         this.options.push(mdInput);