Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2025-01-26 04:36:25 +01:00
Code Issues Projects Releases Packages Wiki Activity

web/theme: add dynamic status bar color on mobile

Browse source
This commit is contained in:
wukko 2024-06-29 20:24:51 +06:00
parent 980dd67344
commit 192351681b
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
2 changed files with 18 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
web/src/lib/state/theme.ts
View file

@ -1,9 +1,11 @@
import { readable, derived } from 'svelte/store'; import { readable, derived, type Readable } from 'svelte/store';
import settings from '$lib/settings'; import settings from '$lib/settings';
import { themeOptions } from '$lib/types/settings'; import { themeOptions } from '$lib/types/settings';
let set: (_: typeof themeOptions[number]) => void; type Theme = typeof themeOptions[number];
let set: (_: Theme) => void;
const browserPreference = () => const browserPreference = () =>
window.matchMedia('(prefers-color-scheme: light)') window.matchMedia('(prefers-color-scheme: light)')
@ -30,5 +32,9 @@ export default derived(
return $browserPref; return $browserPref;
}, },
browserPreference() browserPreference()
); ) as Readable<Exclude<Theme, "auto">>
export const statusBarColors = {
"dark": "#000000",
"light": "#ffffff"
}

10
web/src/routes/+layout.svelte
View file

@ -2,11 +2,19 @@
import "@fontsource/ibm-plex-mono/400.css"; import "@fontsource/ibm-plex-mono/400.css";
import "@fontsource/ibm-plex-mono/500.css"; import "@fontsource/ibm-plex-mono/500.css";
import currentTheme from "$lib/state/theme"; import currentTheme, { statusBarColors } from "$lib/state/theme";
import Sidebar from "$components/sidebar/Sidebar.svelte"; import Sidebar from "$components/sidebar/Sidebar.svelte";
import device from "$lib/device";
</script> </script>
<svelte:head>
{#if device.isMobile}
<meta name="theme-color" content={statusBarColors[$currentTheme]}>
{/if}
</svelte:head>
<div style="display: contents" data-theme={$currentTheme}> <div style="display: contents" data-theme={$currentTheme}>
<div id="cobalt"> <div id="cobalt">
<Sidebar /> <Sidebar />