svelte-color-mode

Svelte Color Mode

Live Demo

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:

• Afara
• Ocean artUp
• Studenten bilden Schüler