Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
switch theme between light and dark
<script>
import { onMount } from 'svelte';
let html, currentColorScheme = 'light';
onMount(
() => {
html = document.getElementsByTagName('html')[0]
window.matchMedia('(prefers-color-scheme: dark)').addListener(({ matches }) => {
if (matches) {
html.dataset.theme = 'dark';
currentColorScheme = 'dark';
} else {
html.dataset.theme = 'light';
currentColorScheme = 'light';
}
})
});
</script>
<fieldset>
<div class="pulse-four-times">
{#if currentColorScheme === 'light'}
<label for="one" on:click={ () => ( html.dataset.theme = 'dark', currentColorScheme = 'dark' ) }>
<svg class="fill-one hover:fill-four inline-block h-5 w-4" viewBox="0 0 20 20"><path d="M7 13.33a7 7 0 1 1 6 0V16H7v-2.67zM7 17h6v1.5c0 .83-.67 1.5-1.5 1.5h-3A1.5 1.5 0 0 1 7 18.5V17zm2-5.1V14h2v-2.1a5 5 0 1 0-2 0z"/></svg>
</label>
{:else }
<label for="two" on:click={ () => html.dataset.theme = 'light', currentColorScheme = 'light' }>
<svg class="fill-one hover:fill-four inline-block h-5 w-4" viewBox="0 0 20 20"><path d="M7 13.33a7 7 0 1 1 6 0V16H7v-2.67zM7 17h6v1.5c0 .83-.67 1.5-1.5 1.5h-3A1.5 1.5 0 0 1 7 18.5V17zm2-5.1V14h2v-2.1a5 5 0 1 0-2 0z"/></svg>
</label>
{/if}
</div>
</fieldset>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.