From c27a9af9bd903c4fbe62b2449ede6ab52dffc642 Mon Sep 17 00:00:00 2001 From: MathMan05 Date: Thu, 8 Aug 2024 22:43:39 -0500 Subject: [PATCH] accent color support --- .dist/localuser.js | 10 +++++++++- .dist/login.js | 4 ++++ .dist/settings.js | 44 ++++++++++++++++++++++++++++++++++++++++++ webpage/localuser.ts | 11 ++++++++++- webpage/login.ts | 6 +++++- webpage/settings.ts | 46 ++++++++++++++++++++++++++++++++++++++++++++ webpage/style.css | 3 --- webpage/themes.css | 31 ++++++++++++++--------------- 8 files changed, 134 insertions(+), 21 deletions(-) diff --git a/.dist/localuser.js b/.dist/localuser.js index a6768b4..a5209e1 100644 --- a/.dist/localuser.js +++ b/.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(); } diff --git a/.dist/login.js b/.dist/login.js index 05826b0..575c0db 100644 --- a/.dist/login.js +++ b/.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", diff --git a/.dist/settings.js b/.dist/settings.js index c84f72a..0d5d52e 100644 --- a/.dist/settings.js +++ b/.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); diff --git a/webpage/localuser.ts b/webpage/localuser.ts index 8da662b..4f6fa42 100644 --- a/webpage/localuser.ts +++ b/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(); } diff --git a/webpage/login.ts b/webpage/login.ts index 1a4881c..b933b79 100644 --- a/webpage/login.ts +++ b/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{ diff --git a/webpage/settings.ts b/webpage/settings.ts index f119f83..1678b48 100644 --- a/webpage/settings.ts +++ b/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 + 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); diff --git a/webpage/style.css b/webpage/style.css index 6352cf6..03cf9ca 100644 --- a/webpage/style.css +++ b/webpage/style.css @@ -1598,9 +1598,6 @@ form div{ /* border-radius:.05in; */ padding-left: .02in; padding-right: .05in; -} -.reactiondiv{ - } .flexgrow{ flex-grow:1; diff --git a/webpage/themes.css b/webpage/themes.css index aa46983..a0284e6 100644 --- a/webpage/themes.css +++ b/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; - --user-info-bg: #323039; - --user-dock-bg: #1a1a23; - --channels-bg: #32323c; - --channel-hover: #1c1b25; + --code-bg: color-mix(in srgb, #121212 95%, var(--accent-color)); + --user-info-bg: color-mix(in srgb,#383838 85%, var(--accent-color)); + --user-dock-bg: color-mix(in srgb,#111111 90%, var(--accent-color)); + --channels-bg: color-mix(in srgb,#3f3f3f 70%, var(--accent-color)); + --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-info-bg: #1a1a1e; - --server-border: #1b1b24; - --server-bg: #252530; + --profile-bg: color-mix(in srgb, #232323 90%, var(--accent-color)); + --profile-info-bg: color-mix(in srgb, #121212 90%, var(--accent-color)); + --server-border: color-mix(in srgb, #000000 80%, var(--accent-color)); + --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;