Added Amoled theme

materialious/src/lib/Settings.svelte

@@ -17,6 +17,7 @@
 		deArrowThumbnailInstanceStore,
 		deArrowTitlesOnly,
 		instanceStore,
+		interfaceAmoledTheme,
 		interfaceAutoExpandComments,
 		interfaceAutoExpandDesc,
 		interfaceForceCase,
@@ -47,6 +48,7 @@
 		synciousStore,
 		themeColorStore
 	} from './store';
+	import { setAmoledTheme } from './theme';
 
 	let sponsorCategoriesList: string[] = [];
 	sponsorBlockCategoriesStore.subscribe((value) => (sponsorCategoriesList = value));
@@ -83,6 +85,7 @@
 		const target = color.target;
 		const hex = (target as { value: string }).value;
 		await ui('theme', hex);
+		setAmoledTheme();
 		themeColorStore.set(hex);
 	}
 
@@ -191,6 +194,24 @@
 
 			<div class="margin"></div>
 
+			{#if $darkModeStore}
+				<div class="field no-margin">
+					<nav class="no-padding">
+						<div class="max">
+							<div>{$_('layout.theme.AmoledTheme')}</div>
+						</div>
+						<label class="switch">
+							<input
+								type="checkbox"
+								bind:checked={$interfaceAmoledTheme}
+								on:click={() => interfaceAmoledTheme.set(!$interfaceAmoledTheme)}
+							/>
+							<span></span>
+						</label>
+					</nav>
+				</div>
+			{/if}
+
 			{#if Capacitor.isNativePlatform()}
 				<form
 					on:submit|preventDefault={() => {

materialious/src/lib/i18n/locales/en.json

@@ -103,6 +103,7 @@
 			"theme": "Theme",
 			"darkMode": "Dark mode",
 			"lightMode": "Light mode",
+			"AmoledTheme": "Amoled theme",
 			"color": "Color"
 		},
 		"searchSuggestions": "Search suggestions",

materialious/src/lib/store.ts

@@ -61,6 +61,8 @@ export const interfacePreviewVideoOnHoverStore = persisted('previewVideoOnHover'
 export const interfaceForceCase: Writable<TitleCase> = persisted('forceCase', null);
 export const interfaceAutoExpandComments: Writable<boolean> = persisted('autoExpandComments', true);
 export const interfaceAutoExpandDesc: Writable<boolean> = persisted('autoExpandDesc', false);
+export const interfaceAmoledTheme = persisted('amoledTheme', false);
+
 
 export const sponsorBlockStore = persisted('sponsorBlock', true);
 export const sponsorBlockUrlStore: Writable<string | null | undefined> = persisted(

materialious/src/lib/theme.ts

@@ -1,4 +1,6 @@
 import ui from 'beercss';
+import { get } from 'svelte/store';
+import { darkModeStore, interfaceAmoledTheme } from './store';
 
 export async function getDynamicTheme(mode?: string): Promise<Record<string, string>> {
 	const givenSettings = (await ui('theme'));
@@ -12,3 +14,46 @@ export async function getDynamicTheme(mode?: string): Promise<Record<string, str
 	});
 	return themeVars;
 }
+
+
+
+export function setAmoledTheme() {
+	const isAmoled = get(interfaceAmoledTheme);
+	const isDark = get(darkModeStore);
+
+	if (isAmoled && isDark) {
+		const rootVars = [
+			'--surface-container',
+			'--surface',
+			'--surface-container-lowest',
+			'--surface-container-low',
+			'--surface-container-high',
+			'--surface-container-highest'
+		];
+		rootVars.forEach((varName) => {
+			document.body.style.setProperty(varName, '#000');
+		});
+	} else {
+		setTheme();
+	}
+}
+
+export function setTheme() {
+	const isDark = get(darkModeStore);
+
+	if (isDark === null) {
+		if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+			darkModeStore.set(true);
+			ui('mode', 'dark');
+		} else {
+			darkModeStore.set(false);
+			ui('mode', 'light');
+		}
+	} else {
+		if (isDark) {
+			ui('mode', 'dark');
+		} else {
+			ui('mode', 'light');
+		}
+	}
+}

materialious/src/routes/(app)/+layout.svelte

@@ -17,9 +17,11 @@
 		authStore,
 		darkModeStore,
 		instanceStore,
+		interfaceAmoledTheme,
 		syncPartyPeerStore,
 		themeColorStore
 	} from '$lib/store';
+	import { setAmoledTheme, setTheme } from '$lib/theme';
 	import { App } from '@capacitor/app';
 	import { Browser } from '@capacitor/browser';
 	import { Capacitor } from '@capacitor/core';
@@ -76,12 +78,13 @@
 		}
 	];
 
-	darkModeStore.subscribe((isDark) => {
-		if (isDark) {
-			ui('mode', 'dark');
-		} else {
-			ui('mode', 'light');
-		}
+	interfaceAmoledTheme.subscribe(() => {
+		setAmoledTheme();
+	});
+
+	darkModeStore.subscribe(() => {
+		setTheme();
+		setAmoledTheme();
 	});
 
 	App.addListener('appUrlOpen', (data) => {
@@ -147,29 +150,14 @@
 		// So user preferences overwrite instance preferences.
 		bookmarkletLoadFromUrl();
 
-		const isDark = get(darkModeStore);
-
-		if (isDark === null) {
-			if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-				darkModeStore.set(true);
-				ui('mode', 'dark');
-			} else {
-				darkModeStore.set(false);
-				ui('mode', 'light');
-			}
-		} else {
-			if (isDark) {
-				ui('mode', 'dark');
-			} else {
-				ui('mode', 'light');
-			}
-		}
-
 		const themeHex = get(themeColorStore);
 		if (themeHex) {
 			await ui('theme', themeHex);
 		}
 
+		setTheme();
+		setAmoledTheme();
+
 		if (isLoggedIn) {
 			loadNotifications().catch(() => authStore.set(null));
 		}