Merge branch 'pr-523'

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", "NightSky-Accent"];
 				tas.addSelect(
 					I18n.localuser["theme:"](),
 					async (_) => {

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));
@@ -112,6 +113,54 @@
 	--blank-bg: #494985;
 }
 .Dark-theme {
+	color-scheme: dark;
+	--primary-button-bg: color-mix(in srgb, #777777 10%, var(--accent-color));
+	--primary-bg: #303339;
+	--primary-hover: #272b31;
+	--primary-text: #dfdfdf;
+	--primary-text-soft: #adb8b9;
+	--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: #1b1e20;
+	--card-bg: #000000;
+}
+.Dark-Accent-theme {
+	color-scheme: dark;
+	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, #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;
 	--primary-button-bg: color-mix(in srgb, #777777 10%, var(--accent-color));
 	--primary-bg: #040404;
@@ -133,7 +182,7 @@
 	--card-bg: #000000;
 	--embed-bg: #000000;
 }
-.Dark-Accent-theme {
+.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));

src/webpage/utils/storage/userPreferences.ts

@@ -15,12 +15,16 @@ export const enum ThemeOption {
 	White = "WHITE",
 	Light = "Light",
 	DarkAccent = "Dark-Accent",
+	NightSky = "NightSky",
+	NightSkyAccent = "NightSky-Accent",
 }
 export const ThemeOptionValues = [
 	ThemeOption.Dark,
 	ThemeOption.White,
 	ThemeOption.Light,
 	ThemeOption.DarkAccent,
+	ThemeOption.NightSky,
+	ThemeOption.NightSkyAccent,
 ];
 
 export class UserPreferences {