mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
docs(palimpsest): support dark mode, local storage for theming
This commit is contained in:
parent
01f65cb308
commit
4ae51209aa
1 changed files with 17 additions and 0 deletions
|
@ -1,9 +1,26 @@
|
|||
<script>
|
||||
export let inline = false;
|
||||
|
||||
import { onMount, afterUpdate } from 'svelte';
|
||||
import { Select, SelectItem } from 'carbon-components-svelte';
|
||||
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);
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue