From 1ba801c408c5c8f01aa4f43b568db4990627cf18 Mon Sep 17 00:00:00 2001 From: lizzie Date: Mon, 10 Aug 2026 02:47:22 +0000 Subject: [PATCH 1/4] feat: make Night Sky a separate theme, bring back old theme as default Signed-off-by: lizzie --- src/webpage/localuser.ts | 2 +- src/webpage/themes.css | 52 ++++++++++++++------ src/webpage/utils/storage/userPreferences.ts | 2 + 3 files changed, 40 insertions(+), 16 deletions(-) diff --git a/src/webpage/localuser.ts b/src/webpage/localuser.ts index 67423b4..4a14ed6 100644 --- a/src/webpage/localuser.ts +++ b/src/webpage/localuser.ts @@ -3018,7 +3018,7 @@ class Localuser { const prefs = getPreferences(); const tas = settings.addButton(I18n.localuser.themesAndSounds(), {contained: true}); { - const themes = ["Dark", "WHITE", "Light", "Dark-Accent"]; + const themes = ["Dark", "WHITE", "Light", "Dark-Accent", "NightSky"]; tas.addSelect( I18n.localuser["theme:"](), async (_) => { diff --git a/src/webpage/themes.css b/src/webpage/themes.css index 402eb62..6843705 100644 --- a/src/webpage/themes.css +++ b/src/webpage/themes.css @@ -22,7 +22,8 @@ --code-func: #d564ff; } -/* Default theme that looks "just about grey" */ +/* TODO: still a copy of dark theme! + Default theme that looks "just about grey" */ .no-theme { color-scheme: dark; --primary-button-bg: color-mix(in srgb, #777777 10%, var(--accent-color)); @@ -114,24 +115,23 @@ .Dark-theme { color-scheme: dark; --primary-button-bg: color-mix(in srgb, #777777 10%, var(--accent-color)); - --primary-bg: #040404; - --primary-hover: #18181b; + --primary-bg: #303339; + --primary-hover: #272b31; --primary-text: #dfdfdf; --primary-text-soft: #adb8b9; - --secondary-bg: #060608; - --secondary-hover: #18181b; - --servers-bg: #000000; - --channels-bg: #0a0a0a; - --channel-selected: #1f1f20; - --typebox-bg: #101112; - --button-bg: #19191a; - --button-hover: #1f1f20; - --spoiler-bg: #1f1f20; - --link: #326be5; + --secondary-bg: #16191b; + --secondary-hover: #252b2c; + --servers-bg: #151718; + --channels-bg: #2a2d33; + --channel-selected: #3c4046; + --typebox-bg: #3a3e45; + --button-bg: #4e5457; + --button-hover: #6b7174; + --spoiler-bg: #000000; + --link: #5ca9ed; --primary-text-prominent: #efefef; - --dock-bg: #0a0b0c; + --dock-bg: #1b1e20; --card-bg: #000000; - --embed-bg: #000000; } .Dark-Accent-theme { color-scheme: dark; @@ -161,6 +161,28 @@ --primary-text-prominent: #efefef; --embed-bg: #000000; } +.NightSky-theme { + color-scheme: dark; + --primary-button-bg: color-mix(in srgb, #777777 10%, var(--accent-color)); + --primary-bg: #040404; + --primary-hover: #18181b; + --primary-text: #dfdfdf; + --primary-text-soft: #adb8b9; + --secondary-bg: #060608; + --secondary-hover: #18181b; + --servers-bg: #000000; + --channels-bg: #0a0a0a; + --channel-selected: #1f1f20; + --typebox-bg: #101112; + --button-bg: #19191a; + --button-hover: #1f1f20; + --spoiler-bg: #1f1f20; + --link: #326be5; + --primary-text-prominent: #efefef; + --dock-bg: #0a0b0c; + --card-bg: #000000; + --embed-bg: #000000; +} /* Optional Variables */ body { diff --git a/src/webpage/utils/storage/userPreferences.ts b/src/webpage/utils/storage/userPreferences.ts index e52d322..089d951 100644 --- a/src/webpage/utils/storage/userPreferences.ts +++ b/src/webpage/utils/storage/userPreferences.ts @@ -15,12 +15,14 @@ export const enum ThemeOption { White = "WHITE", Light = "Light", DarkAccent = "Dark-Accent", + NightSky = "Night Sky", } export const ThemeOptionValues = [ ThemeOption.Dark, ThemeOption.White, ThemeOption.Light, ThemeOption.DarkAccent, + ThemeOption.NightSky ]; export class UserPreferences { From 33da16415818b8923b7a102c8c2cc904d4136a28 Mon Sep 17 00:00:00 2001 From: lizzie Date: Mon, 10 Aug 2026 02:51:22 +0000 Subject: [PATCH 2/4] fixup accent --- src/webpage/themes.css | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/webpage/themes.css b/src/webpage/themes.css index 6843705..2e8ed69 100644 --- a/src/webpage/themes.css +++ b/src/webpage/themes.css @@ -136,21 +136,21 @@ .Dark-Accent-theme { color-scheme: dark; --primary-button-bg: color-mix(in srgb, #777777 20%, var(--accent-color)); - --primary-bg: color-mix(in srgb, #040404 95%, var(--accent-color)); - --primary-hover: color-mix(in srgb, #18181b 95%, var(--accent-color)); + --primary-bg: color-mix(in srgb, #303339 95%, var(--accent-color)); + --primary-hover: color-mix(in srgb, #272b31 95%, var(--accent-color)); --primary-text: #dfdfdf; --primary-text-soft: #adb8b9; - --secondary-bg: color-mix(in srgb, #060608 95%, var(--accent-color)); - --secondary-hover: color-mix(in srgb, #18181b 95%, var(--accent-color)); + --secondary-bg: color-mix(in srgb, #16191b 95%, var(--accent-color)); + --secondary-hover: color-mix(in srgb, #252b2c 95%, var(--accent-color)); --folder-bg: color-mix(in srgb, var(--primary-text-soft) 95%, var(--accent-color)); - --servers-bg: color-mix(in srgb, #000000 95%, var(--accent-color)); - --channels-bg: color-mix(in srgb, #0a0a0a 95%, var(--accent-color)); - --channel-selected: color-mix(in srgb, #1f1f20 95%, var(--accent-color)); - --typebox-bg: color-mix(in srgb, #101112 95%, var(--accent-color)); - --button-bg: color-mix(in srgb, #19191a 95%, var(--accent-color)); - --button-hover: color-mix(in srgb, #1f1f20 95%, var(--accent-color)); - --spoiler: color-mix(in srgb, #101010 95%, var(--accent-color)); - --link: #326be5; + --servers-bg: color-mix(in srgb, #151718 95%, var(--accent-color)); + --channels-bg: color-mix(in srgb, #2a2d33 95%, var(--accent-color)); + --channel-selected: color-mix(in srgb, #3c4046 95%, var(--accent-color)); + --typebox-bg: color-mix(in srgb, #3a3e45 95%, var(--accent-color)); + --button-bg: color-mix(in srgb, #4e5457 95%, var(--accent-color)); + --button-hover: color-mix(in srgb, #6b7174 95%, var(--accent-color)); + --spoiler: color-mix(in srgb, #000000 95%, var(--accent-color)); + --link: #5ca9ed; --black: color-mix(in srgb, #000000 90%, var(--accent-color)); --icon: color-mix(in srgb, #ffffff, var(--accent-color)); --dock-bg: color-mix(in srgb, #0a0b0c 95%, var(--accent-color)); From 79b39f90099d2c644bc0460ab0a3e70634229bb8 Mon Sep 17 00:00:00 2001 From: lizzie Date: Mon, 10 Aug 2026 02:52:03 +0000 Subject: [PATCH 3/4] WAIT restore --- src/webpage/themes.css | 45 +++++++++++++++++++++--------------------- 1 file changed, 22 insertions(+), 23 deletions(-) diff --git a/src/webpage/themes.css b/src/webpage/themes.css index 2e8ed69..62b0065 100644 --- a/src/webpage/themes.css +++ b/src/webpage/themes.css @@ -135,31 +135,30 @@ } .Dark-Accent-theme { color-scheme: dark; - --primary-button-bg: color-mix(in srgb, #777777 20%, var(--accent-color)); - --primary-bg: color-mix(in srgb, #303339 95%, var(--accent-color)); - --primary-hover: color-mix(in srgb, #272b31 95%, var(--accent-color)); - --primary-text: #dfdfdf; - --primary-text-soft: #adb8b9; - --secondary-bg: color-mix(in srgb, #16191b 95%, var(--accent-color)); - --secondary-hover: color-mix(in srgb, #252b2c 95%, var(--accent-color)); - --folder-bg: color-mix(in srgb, var(--primary-text-soft) 95%, var(--accent-color)); - --servers-bg: color-mix(in srgb, #151718 95%, var(--accent-color)); - --channels-bg: color-mix(in srgb, #2a2d33 95%, var(--accent-color)); - --channel-selected: color-mix(in srgb, #3c4046 95%, var(--accent-color)); - --typebox-bg: color-mix(in srgb, #3a3e45 95%, var(--accent-color)); - --button-bg: color-mix(in srgb, #4e5457 95%, var(--accent-color)); - --button-hover: color-mix(in srgb, #6b7174 95%, var(--accent-color)); - --spoiler: color-mix(in srgb, #000000 95%, var(--accent-color)); - --link: #5ca9ed; + color-scheme: dark; + --primary-button-bg: color-mix(in srgb, #777777 10%, var(--accent-color)); + --primary-bg: color-mix(in srgb, #3f3f3f 65%, var(--accent-color)); + --primary-hover: color-mix(in srgb, #373737 68%, var(--accent-color)); + --primary-text: #ebebeb; + --primary-text-soft: #ebebebb8; + --secondary-bg: color-mix(in srgb, #222222 72%, var(--accent-color)); + --secondary-hover: color-mix(in srgb, #222222 65%, var(--accent-color)); + --folder-bg: color-mix(in srgb, var(--primary-text-soft) 70%, var(--accent-color)); + --servers-bg: color-mix(in srgb, #0b0b0b 70%, var(--accent-color)); + --channels-bg: color-mix(in srgb, #292929 68%, var(--accent-color)); + --channel-selected: color-mix(in srgb, #555555 65%, var(--accent-color)); + --typebox-bg: color-mix(in srgb, #666666 60%, var(--accent-color)); + --button-bg: color-mix(in srgb, #777777 56%, var(--accent-color)); + --button-hover: color-mix(in srgb, #585858 58%, var(--accent-color)); + --spoiler: color-mix(in srgb, #101010 72%, var(--accent-color)); + --link: color-mix(in srgb, #99ccff 75%, var(--accent-color)); --black: color-mix(in srgb, #000000 90%, var(--accent-color)); --icon: color-mix(in srgb, #ffffff, var(--accent-color)); - --dock-bg: color-mix(in srgb, #0a0b0c 95%, var(--accent-color)); - --spoiler-hover: color-mix(in srgb, #111111 95%, var(--accent-color)); - --card-bg: color-mix(in srgb, #000000 95%, var(--accent-color)); - --spoiler-bg: #1f1f20; - --reaction-reacted-bg: color-mix(in srgb, var(--reaction-bg) 95%, white); - --primary-text-prominent: #efefef; - --embed-bg: #000000; + --dock-bg: color-mix(in srgb, #171717 68%, var(--accent-color)); + --spoiler-hover: color-mix(in srgb, #111111 80%, var(--accent-color)); + --card-bg: color-mix(in srgb, #0b0b0b 70%, var(--accent-color)); + --spoiler-bg: #000000; + --reaction-reacted-bg: color-mix(in srgb, var(--reaction-bg) 80%, white); } .NightSky-theme { color-scheme: dark; From 5edd86c8896bb963feb5fd655d6712c5e8177a52 Mon Sep 17 00:00:00 2001 From: lizzie Date: Mon, 10 Aug 2026 03:09:24 +0000 Subject: [PATCH 4/4] nightsky accent --- src/webpage/localuser.ts | 2 +- src/webpage/themes.css | 28 ++++++++++++++++++++ src/webpage/utils/storage/userPreferences.ts | 6 +++-- 3 files changed, 33 insertions(+), 3 deletions(-) diff --git a/src/webpage/localuser.ts b/src/webpage/localuser.ts index 4a14ed6..def814d 100644 --- a/src/webpage/localuser.ts +++ b/src/webpage/localuser.ts @@ -3018,7 +3018,7 @@ class Localuser { const prefs = getPreferences(); const tas = settings.addButton(I18n.localuser.themesAndSounds(), {contained: true}); { - const themes = ["Dark", "WHITE", "Light", "Dark-Accent", "NightSky"]; + const themes = ["Dark", "WHITE", "Light", "Dark-Accent", "NightSky", "NightSky-Accent"]; tas.addSelect( I18n.localuser["theme:"](), async (_) => { diff --git a/src/webpage/themes.css b/src/webpage/themes.css index 62b0065..4f7ba7c 100644 --- a/src/webpage/themes.css +++ b/src/webpage/themes.css @@ -182,6 +182,34 @@ --card-bg: #000000; --embed-bg: #000000; } +.NightSky-Accent-theme { + color-scheme: dark; + --primary-button-bg: color-mix(in srgb, #777777 20%, var(--accent-color)); + --primary-bg: color-mix(in srgb, #040404 95%, var(--accent-color)); + --primary-hover: color-mix(in srgb, #18181b 95%, var(--accent-color)); + --primary-text: #dfdfdf; + --primary-text-soft: #adb8b9; + --secondary-bg: color-mix(in srgb, #060608 95%, var(--accent-color)); + --secondary-hover: color-mix(in srgb, #18181b 95%, var(--accent-color)); + --folder-bg: color-mix(in srgb, var(--primary-text-soft) 95%, var(--accent-color)); + --servers-bg: color-mix(in srgb, #000000 95%, var(--accent-color)); + --channels-bg: color-mix(in srgb, #0a0a0a 95%, var(--accent-color)); + --channel-selected: color-mix(in srgb, #1f1f20 95%, var(--accent-color)); + --typebox-bg: color-mix(in srgb, #101112 95%, var(--accent-color)); + --button-bg: color-mix(in srgb, #19191a 95%, var(--accent-color)); + --button-hover: color-mix(in srgb, #1f1f20 95%, var(--accent-color)); + --spoiler: color-mix(in srgb, #101010 95%, var(--accent-color)); + --link: #326be5; + --black: color-mix(in srgb, #000000 90%, var(--accent-color)); + --icon: color-mix(in srgb, #ffffff, var(--accent-color)); + --dock-bg: color-mix(in srgb, #0a0b0c 95%, var(--accent-color)); + --spoiler-hover: color-mix(in srgb, #111111 95%, var(--accent-color)); + --card-bg: color-mix(in srgb, #000000 95%, var(--accent-color)); + --spoiler-bg: #1f1f20; + --reaction-reacted-bg: color-mix(in srgb, var(--reaction-bg) 95%, white); + --primary-text-prominent: #efefef; + --embed-bg: #000000; +} /* Optional Variables */ body { diff --git a/src/webpage/utils/storage/userPreferences.ts b/src/webpage/utils/storage/userPreferences.ts index 089d951..ec29b02 100644 --- a/src/webpage/utils/storage/userPreferences.ts +++ b/src/webpage/utils/storage/userPreferences.ts @@ -15,14 +15,16 @@ export const enum ThemeOption { White = "WHITE", Light = "Light", DarkAccent = "Dark-Accent", - NightSky = "Night Sky", + NightSky = "NightSky", + NightSkyAccent = "NightSky-Accent", } export const ThemeOptionValues = [ ThemeOption.Dark, ThemeOption.White, ThemeOption.Light, ThemeOption.DarkAccent, - ThemeOption.NightSky + ThemeOption.NightSky, + ThemeOption.NightSkyAccent, ]; export class UserPreferences {