fix: theme selector

Author: IMB11

packages/assets/styles/variables.scss

@@ -1,17 +1,15 @@
-:root {
-	--color-bg: var(--surface-l1);
-	--color-raised-bg: var(--surface-l3);
-	--color-super-raised-bg: var(--surface-l4);
-}
-
 .light-properties {
 	--surface-l1: #ebebeb;
 	--surface-l2: #ffffff;
 	--surface-l3: #f5f5f5;
 	--surface-l4: #eeeeee;
 	--surface-l5: #e6e6e6;
 
-	--color-button-bg: #f5f5f5;
+	--color-bg: var(--surface-l1);
+	--color-raised-bg: var(--surface-l3);
+	--color-super-raised-bg: var(--surface-l4);
+
+	--color-button-bg: var(--surface-l4);
 	--color-button-border: rgba(161, 161, 161, 0.35);
 	--color-scrollbar: #96a2b0;
 
@@ -148,7 +146,11 @@ html {
 	--surface-l4: #34363c;
 	--surface-l5: #42444a;
 
-	--color-button-bg: #33363d;
+	--color-bg: var(--surface-l1);
+	--color-raised-bg: var(--surface-l3);
+	--color-super-raised-bg: var(--surface-l4);
+
+	--color-button-bg: var(--surface-l4);
 	--color-button-border: rgba(193, 190, 209, 0.12);
 	--color-scrollbar: var(--color-button-bg);
 

packages/ui/src/components/settings/ThemeSelector.vue

@@ -4,7 +4,7 @@ import { defineMessages, useVIntl } from '@vintl/vintl'
 
 const { formatMessage } = useVIntl()
 
-defineProps<{
+const { updateColorTheme, currentTheme, themeOptions, systemThemeColor } = defineProps<{
 	updateColorTheme: (theme: T) => void
 	currentTheme: T
 	themeOptions: readonly T[]
@@ -53,6 +53,11 @@ const colorTheme = defineMessages({
 function asString(theme: T): string {
 	return theme
 }
+
+function getPreviewClass(option: T): string {
+	const base = option === 'system' ? systemThemeColor : option
+	return base.endsWith('-mode') ? base : `${base}-mode`
+}
 </script>
 
 <template>
@@ -64,7 +69,7 @@ function asString(theme: T): string {
 			:class="{ selected: currentTheme === option }"
 			@click="() => updateColorTheme(option)"
 		>
-			<div class="preview" :class="`${option === 'system' ? systemThemeColor : option}-mode`">
+			<div class="preview" :class="getPreviewClass(option)">
 				<div class="example-card card card">
 					<div class="example-icon"></div>
 					<div class="example-text-1"></div>
@@ -96,6 +101,24 @@ function asString(theme: T): string {
 	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
 	gap: var(--gap-lg);
 
+	.preview {
+		&.light-mode {
+			@extend .light-mode;
+		}
+
+		&.dark-mode {
+			@extend .dark-mode;
+		}
+
+		&.oled-mode {
+			@extend .oled-mode;
+		}
+
+		&.retro-mode {
+			@extend .retro-mode;
+		}
+	}
+
 	.preview .example-card {
 		margin: 0;
 		padding: 1rem;