mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs(palimpsest): support dark mode, local storage for theming

Browse source
This commit is contained in:
Eric Liu 2020-01-12 12:55:21 -08:00
commit 4ae51209aa
1 changed files with 17 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

17
palimpsest/src/components/ThemePicker.svelte
View file

@ -1,9 +1,26 @@
<script> <script>
export let inline = false; export let inline = false;
import { onMount, afterUpdate } from 'svelte';
import { Select, SelectItem } from 'carbon-components-svelte'; import { Select, SelectItem } from 'carbon-components-svelte';
import { theme } from '../store'; import { theme } from '../store';
onMount(() => {
let currentTheme = localStorage.getItem('theme');
if (currentTheme) {
theme.set(currentTheme);
} else {
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
theme.set('g90');
}
}
});
afterUpdate(() => {
localStorage.setItem('theme', $theme);
});
$: { $: {
document.documentElement.setAttribute('carbon-theme', $theme); document.documentElement.setAttribute('carbon-theme', $theme);
} }