Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2024-11-15 12:50:01 +00: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 d817888838
commit f383f5d94e
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 { themeOptions } from '$lib/types/settings';
let set: (_: typeof themeOptions[number]) => void;
type Theme = typeof themeOptions[number];
let set: (_: Theme) => void;
const browserPreference = () =>
window.matchMedia('(prefers-color-scheme: light)')
@ -30,5 +32,9 @@ export default derived(
return $browserPref;
},
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/500.css";
import currentTheme from "$lib/state/theme";
import currentTheme, { statusBarColors } from "$lib/state/theme";
import Sidebar from "$components/sidebar/Sidebar.svelte";
import device from "$lib/device";
</script>
<svelte:head>
{#if device.isMobile}
<meta name="theme-color" content={statusBarColors[$currentTheme]}>
{/if}
</svelte:head>
<div style="display: contents" data-theme={$currentTheme}>
<div id="cobalt">
<Sidebar />