A happy little svelte theme switcher to brighten or maybe darken your day 🌞.
App.svelte
<script>
import ThemeSwitcher from "svelte-theme-switcher";
</script>
<style>
:global(body) {
background: var(--background);
color: var(--text);
transition: 0.6s;
}
:global(.theme-light) {
--background: rgb(250, 252, 240);
--text: #222;
}
:global(.theme-dark) {
--background: #222;
--text: #fff;
}
</style>
<ThemeSwitcher />
npm i svelte-theme-switcher
yarn add svelte-theme-switcher
Property | default | type | notes |
---|---|---|---|
height: | 30px | string | must be a px value |
width: | 60px | string | |
transition | 0.6s | string | |
background | { light: #ecf0f1, dark: #333 } |
object |
<ThemeSwitcher
options={{
height: "30px",
width: "60px",
transition: "0.6s",
background: {
light: "#ecf0f1",
dark: "#333",
},
}}
/>
<script>
import { theme } from "svelte-theme-switcher";
</script>
<h1>{$theme}</h1>
In the head of your document add:
<script src="https://unpkg.com/[email protected]/dist/wc/index.js" />
<style>
body {
background: var(--background);
color: var(--text);
transition: 0.6s;
}
.theme-light {
--background: rgb(250, 252, 240);
--text: #222;
}
.theme-dark {
--background: #222;
--text: #fff;
}
</style>
this ensure's there is no inital flicker
You can now add the web component to switch between themes.
<theme-switcher></theme-switcher>