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);

webpage/localuser.ts

@@ -4,7 +4,7 @@ import {Direct} from "./direct.js";
 import {Voice} from "./audio.js";
 import {User} from "./user.js";
 import {Fullscreen} from "./fullscreen.js";
-import {setTheme, Specialuser} from "./login.js";
+import {getBulkInfo, setTheme, Specialuser} from "./login.js";
 import { SnowFlake } from "./snowflake.js";
 import { Message } from "./message.js";
 import { channeljson, guildjson, memberjson, readyjson, userjson } from "./jsontypes.js";
@@ -733,6 +733,15 @@ 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();
     }

webpage/login.ts

@@ -37,6 +37,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",
@@ -47,7 +51,7 @@ function setDefaults(){
     if(userinfos.preferences&&(userinfos.preferences.notisound===undefined)){
         userinfos.preferences.notisound="three";
     }
-    localStorage.setItem("userinfos",JSON.stringify(userinfos));
+    localStorage.setItem("userinfos",JSON.stringify(userinfos))
 }
 setDefaults();
 class Specialuser{

webpage/settings.ts

@@ -175,6 +175,47 @@ class TextInput implements OptionsElement{
         this.onSubmit(this.textContent);
     }
 }
+
+class ColorInput implements OptionsElement{
+    readonly label:string;
+    readonly owner:Options;
+    readonly onSubmit:(str:string)=>void;
+    colorContent:string;
+    input:WeakRef<HTMLInputElement>
+    constructor(label:string,onSubmit:(str:string)=>void,owner:Options,{initColor=""}={}){
+        this.label=label;
+        this.colorContent=initColor;
+        this.owner=owner;
+        this.onSubmit=onSubmit;
+    }
+    generateHTML():HTMLDivElement{
+        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;
+    }
+    private onChange(ev:Event){
+        this.owner.changed();
+        const value=this.input.deref().value as string;
+        this.onchange(value);
+        this.colorContent=value;
+    }
+    onchange:(str:string)=>void=_=>{};
+    watchForChange(func:(str:string)=>void){
+        this.onchange=func;
+    }
+    submit(){
+        this.onSubmit(this.colorContent);
+    }
+}
+
 class SelectInput implements OptionsElement{
     readonly label:string;
     readonly owner:Options;
@@ -390,6 +431,11 @@ class Options implements OptionsElement{
         this.options.push(textInput);
         return textInput;
     }
+    addColorInput(label:string,onSubmit:(str:string)=>void,{initColor=""}={}){
+        const colorInput=new ColorInput(label,onSubmit,this,{initColor});
+        this.options.push(colorInput);
+        return colorInput;
+    }
     addMDInput(label:string,onSubmit:(str:string)=>void,{initText=""}={}){
         const mdInput=new MDInput(label,onSubmit,this,{initText});
         this.options.push(mdInput);

webpage/style.css

@@ -1598,9 +1598,6 @@ form div{
 	/* border-radius:.05in; */
 	padding-left: .02in;
 	padding-right: .05in;
-}
-.reactiondiv{
-	
 }
 .flexgrow{
 	flex-grow:1;

webpage/themes.css

@@ -4,36 +4,37 @@
 	--red: red;
 	--green: green;
 	--yellow:yellow;
+	--accent-color:#242443;
 }
 .Dark-theme { /* thanks to TomatoCake for the updated CSS vars and such*/
 	color-scheme: dark;
 	--primary-text: #FFF;
-	--primary-bg: #282832;
+	--primary-bg: color-mix(in srgb, #2f2f2f 70%, var(--accent-color));
 	--black: #000;
 	--shadow: #000;
 	--focus: #8888ff;
-	--message-bg-hover: #1e1e28;
+	--message-bg-hover: color-mix(in srgb, #191919 85%, var(--accent-color));
 	--typing-bg: #161616;
 	--timestamp-color: #a2a2a2;
-	--code-bg: #101014;
+	--code-bg: color-mix(in srgb, #121212 95%, var(--accent-color));
-	--user-info-bg: #323039;
+	--user-info-bg: color-mix(in srgb,#383838 85%, var(--accent-color));
-	--user-dock-bg: #1a1a23;
+	--user-dock-bg: color-mix(in srgb,#111111 90%, var(--accent-color));
-	--channels-bg: #32323c;
+	--channels-bg: color-mix(in srgb,#3f3f3f 70%, var(--accent-color));
-	--channel-hover: #1c1b25;
+	--channel-hover:color-mix(in srgb, #2c2c2c 70%, var(--accent-color));
 	--blank-bg: #1b1b1b;
 	--light-border: #92929B;
-	--settings-hover: #0e0d10;
+	--settings-hover: color-mix(in srgb, #000000 95%, var(--accent-color) 5%);
 	--quote-bg: #7a798e;
-	--button-bg: #1b1b28;
+	--button-bg: color-mix(in srgb, #303030 80%, var(--accent-color));
 	--button-hover: #282832;
-	--textarea-bg: #26272c;
+	--textarea-bg: color-mix(in srgb, #272727 85%, var(--accent-color));
 	--filename: #47bbff;
 	--mention-bg: #F00;
 	--pronouns: #797979;
-	--profile-bg: #2e2d33;
+	--profile-bg: color-mix(in srgb, #232323 90%, var(--accent-color));
-	--profile-info-bg: #1a1a1e;
+	--profile-info-bg: color-mix(in srgb, #121212 90%, var(--accent-color));
-	--server-border: #1b1b24;
+	--server-border: color-mix(in srgb, #000000 80%, var(--accent-color));
-	--server-bg: #252530;
+	--server-bg: color-mix(in srgb, #2a2a2a 80%, var(--accent-color));
 	--reply-border: #474b76;
 	--reply-bg: #0b0d20;
 	--reply-text: #acacac;
@@ -49,7 +50,7 @@
 	--scrollbar-thumb: #201f29;
 	--scrollbar-thumb-hover: #16161f;
 	--markdown-timestamp: #2f2f33;
-	--embed: #1a1823;
+	--embed: color-mix(in srgb, #131313 90%, var(--accent-color));
 	--link: #8888ff;
 	--discovery-bg: #37373b;
 	--message-jump:#7678b0;