add theme selection setting

rt-evil-inc · Sep 17, 2024 · 1ee9385 · 1ee9385
1 parent 0f592e8
commit 1ee9385
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 16 deletions.
diff --git a/src/app.css b/src/app.css
@@ -15,18 +15,16 @@
     --color-selection: #d4d4d4;
   }
 
-  @media screen and (prefers-color-scheme: dark) {
-    :root {
-      --color-primary: #87B43C;
-      --color-background: #202020;
-      --color-background-secondary: #262626;
-      --color-background-tertiary: #3B3B3B;
-      --color-label: #808080;
-      --color-info: #B3B3B3;
-      --color-warning: #ffbc56;
-      --color-shadow: rgba(0, 0, 0, 0.4);
-      --color-selection: #808080;
-    }
+  :root[data-theme='dark'] {
+    --color-primary: #87B43C;
+    --color-background: #202020;
+    --color-background-secondary: #262626;
+    --color-background-tertiary: #3B3B3B;
+    --color-label: #808080;
+    --color-info: #B3B3B3;
+    --color-warning: #ffbc56;
+    --color-shadow: rgba(0, 0, 0, 0.4);
+    --color-selection: #808080;
   }
 }
 

diff --git a/src/lib/components/settings/Settings.svelte b/src/lib/components/settings/Settings.svelte
@@ -10,6 +10,17 @@
 	<div class="flex flex-col p-5 gap-8 grow">
 		<div class="text-3xl font-bold text-info pt-1">Configurações</div>
 		<div class="flex flex-col gap-2">
+			<div class="flex bg-background rounded-2xl py-4 px-5 gap-5 text-info justify-between items-center dark:bg-background-secondary" style:box-shadow="0px 0px 12px 0px var(--color-shadow)">
+				<div class="grow">
+					<div class="font-semibold leading-relaxed">Tema</div>
+					<div class="text-xs font-medium leading-[1.1] text-label">Esquema de cores da aplicação</div>
+				</div>
+				<select bind:value={$appSettings.theme} class="bg-background-secondary dark:bg-background-tertiary rounded-xl border-none focus:ring-0 text-sm">
+					<option value="system">Sistema</option>
+					<option value="light">Claro</option>
+					<option value="dark">Escuro</option>
+				</select>
+			</div>
 			<div class="flex bg-background rounded-2xl py-4 px-5 gap-5 text-info justify-between items-center dark:bg-background-secondary" style:box-shadow="0px 0px 12px 0px var(--color-shadow)">
 				<div class="grow">
 					<div class="font-semibold leading-relaxed">Limitar desbloqueio</div>

diff --git a/src/lib/state/index.ts b/src/lib/state/index.ts
@@ -68,6 +68,7 @@ export type AppSettings = {
 	distanceLock: boolean;
 	mockUnlock: boolean;
 	analytics: boolean;
+	theme: 'light'|'dark'|'system';
 }
 export type TripRating = {
 	currentRating:{
@@ -87,7 +88,7 @@ export const currentTrip = writable<ActiveTrip|null>(null);
 export const accountInfo = writable<AccountInfo|null>(null);
 export const selectedStation = writable<string|null>(null);
 export const safeInsets = writable<Insets>({ top: 0, bottom: 0, left: 0, right: 0 });
-export const appSettings = writable<AppSettings>({ distanceLock: true, mockUnlock: true, analytics: true });
+export const appSettings = writable<AppSettings>({ distanceLock: true, mockUnlock: true, analytics: true, theme: 'system' });
 export const tripRating = writable<TripRating>({ currentRating: null });
 export const following = writable<boolean>(false);
 
@@ -145,7 +146,8 @@ export async function loadUserCreds() {
 	const distanceLock = (await Preferences.get({ key: 'settings/distanceLock' })).value !== 'false'; // !== 'false' is so that it defaults to true if the key is not set
 	const mockUnlock = (await Preferences.get({ key: 'settings/mockUnlock' })).value !== 'false';
 	const analytics = (await Preferences.get({ key: 'settings/analytics' })).value !== 'false';
-	appSettings.set({ distanceLock, mockUnlock, analytics });
+	const theme = (await Preferences.get({ key: 'settings/theme' })).value as 'light'|'dark'|'system';
+	appSettings.set({ distanceLock, mockUnlock, analytics, theme });
 
 	userCredentials.subscribe(async v => {
 		if (!v) {
@@ -165,8 +167,10 @@ export async function loadUserCreds() {
 		Preferences.set({ key: 'settings/distanceLock', value: v.distanceLock.toString() });
 		Preferences.set({ key: 'settings/mockUnlock', value: v.mockUnlock.toString() });
 		Preferences.set({ key: 'settings/analytics', value: v.analytics.toString() });
+		Preferences.set({ key: 'settings/theme', value: v.theme });
 	});
 }
+
 currentPos.subscribe(async v => {
 	if (!v) return;
 	currentTrip.update(trip => {

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { loadUserCreds, safeInsets, token } from '$lib/state';
+	import { loadUserCreds, safeInsets, token, appSettings } from '$lib/state';
 	import '@fontsource/inter/latin-400.css';
 	import '@fontsource/inter/latin-500.css';
 	import '@fontsource/inter/latin-600.css';
@@ -18,7 +18,6 @@
 
 	if (Capacitor.getPlatform() === 'android' || Capacitor.getPlatform() === 'ios') {
 		StatusBar.setOverlaysWebView({ overlay: true });
-		StatusBar.setStyle({ style: Style.Light });
 		NavigationBar.setTransparency({ isTransparent: true });
 		SafeArea.getSafeAreaInsets().then(ins => {
 			safeInsets.set(ins.insets);
@@ -35,8 +34,19 @@
 			}
 			updateActiveTripInfo();
 		});
+
+		const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+		const updateTheme = () => {
+			document.documentElement.setAttribute('data-theme', $appSettings.theme === 'system' ? mediaQuery.matches ? 'dark' : 'light' : $appSettings.theme);
+			StatusBar.setStyle({ style: $appSettings.theme === 'system' ? mediaQuery.matches ? Style.Dark : Style.Light : $appSettings.theme === 'dark' ? Style.Dark : Style.Light });
+		};
+		appSettings.subscribe(updateTheme);
+		mediaQuery.addEventListener('change', updateTheme);
+		updateTheme();
+
 		return () => {
 			App.removeAllListeners();
+			mediaQuery.removeEventListener('change', updateTheme);
 		};
 	});
 </script>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -25,5 +25,6 @@ export default {
 			},
 		},
 	},
+	darkMode: ['class', '[data-theme="dark"]'],
 	plugins: [require('@tailwindcss/forms')],
 };