0.1.4 • Published 2 years ago
svelte-color-mode v0.1.4
SSR-compatible, flash-free, localStorage
-persisted color mode + multiple Svelte UI components for selecting current color mode.
Installation
yarn add -D svelte-color-mode
Usage
In a SvelteKit project:
<script>
import { ColorMode, ColorPicker } from 'svelte-color-mode'
const colorsByMode = {
light: {
textColor: `black`,
linkColor: 'darkblue',
hoverColor: 'darkorange',
bodyBg: `white`,
},
dark: {
textColor: `white`,
linkColor: 'cornflowerblue',
hoverColor: 'orange',
bodyBg: '#061725',
},
}
</script>
<ColorMode {colorsByMode} />
For more docs, check out the live demo.
Want to contribute?
At present, svelte-color-mode
contains just a few UI components for changing the color mode, all under src/lib/*ColorPicker.svelte
. More are welcome. If you have a good idea for a color mode UI and would like to contribute it, please do! Implementation-wise, all it takes is to import the colorMode
store (see stores.ts
) and change its value based on user input.
To submit a PR, clone the repo, install dependencies and start the dev server to try out your changes.
git clone https://github.com/janosh/svelte-color-mode
cd svelte-color-mode
yarn
yarn dev
Examples
Used in production on these sites: