diff --git a/materialious/src/lib/Settings.svelte b/materialious/src/lib/Settings.svelte index 60550754..3ba0fe64 100644 --- a/materialious/src/lib/Settings.svelte +++ b/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 @@
+ {#if $darkModeStore} +
+ +
+ {/if} + {#if Capacitor.isNativePlatform()}
{ diff --git a/materialious/src/lib/i18n/locales/en.json b/materialious/src/lib/i18n/locales/en.json index 6c118fa4..8b8f0811 100644 --- a/materialious/src/lib/i18n/locales/en.json +++ b/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", diff --git a/materialious/src/lib/store.ts b/materialious/src/lib/store.ts index c1d0da0d..be407891 100644 --- a/materialious/src/lib/store.ts +++ b/materialious/src/lib/store.ts @@ -61,6 +61,8 @@ export const interfacePreviewVideoOnHoverStore = persisted('previewVideoOnHover' export const interfaceForceCase: Writable = persisted('forceCase', null); export const interfaceAutoExpandComments: Writable = persisted('autoExpandComments', true); export const interfaceAutoExpandDesc: Writable = persisted('autoExpandDesc', false); +export const interfaceAmoledTheme = persisted('amoledTheme', false); + export const sponsorBlockStore = persisted('sponsorBlock', true); export const sponsorBlockUrlStore: Writable = persisted( diff --git a/materialious/src/lib/theme.ts b/materialious/src/lib/theme.ts index 06dc020f..bc176374 100644 --- a/materialious/src/lib/theme.ts +++ b/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> { const givenSettings = (await ui('theme')); @@ -12,3 +14,46 @@ export async function getDynamicTheme(mode?: string): Promise { + 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'); + } + } +} \ No newline at end of file diff --git a/materialious/src/routes/(app)/+layout.svelte b/materialious/src/routes/(app)/+layout.svelte index 9824552e..ba2542e0 100644 --- a/materialious/src/routes/(app)/+layout.svelte +++ b/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)); }