svelte-theme-toggle
v1.1.3
Published
Simple way to implement a dark theme toggle in Svelte/SvelteKit.
Downloads
26
Maintainers
Readme
svelte-theme-toggle
A dead simple way to implement a dark theme toggle in your Svelte/SvelteKit application.
Demo
Getting-Started
npm i svelte-theme-toggle
Usage
Import the package in <script>
in a svelte component and then declare it in the body.
<script>
import ThemeToggle from "svelte-theme-toggle";
</script>
<main>
<!-- Some Stuff here -->
<ThemeToggle />
<!-- Some other stuff here -->
</main>
Set styles
Use the following parameters in your global styles to actually change the colors on theme change
:root {
--bg: #fff;
--text-color: #000;
}
:global([data-theme="dark"]) {
--bg: #121212;
--text-color: #fff;
}
:global(body) {
background-color: var(--bg);
color: var(--text-color);
transition: ease 0.5s; /* Change the transition time by altering this property */
}