https://github.com/captaincodeman/svelte-theme-select

Theme switcher for Svelte & TailwindCSS
https://github.com/captaincodeman/svelte-theme-select

dark-mode dark-theme prefers-color-scheme svelte sveltekit theme

Last synced: 3 days ago
JSON representation

Theme switcher for Svelte & TailwindCSS

• Host: GitHub
• URL: https://github.com/captaincodeman/svelte-theme-select
• Owner: CaptainCodeman
• License: mit
• Created: 2022-12-18T18:36:47.000Z (almost 2 years ago)
• Default Branch: master
• Last Pushed: 2024-10-24T19:26:54.000Z (20 days ago)
• Last Synced: 2024-10-25T20:20:22.889Z (19 days ago)
• Topics: dark-mode, dark-theme, prefers-color-scheme, svelte, sveltekit, theme
• Language: Svelte
• Homepage: https://captaincodeman.github.io/svelte-theme-select/
• Size: 332 KB
• Stars: 16
• Watchers: 3
• Forks: 2
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# svelte-theme-select

Customizable Svelte components for theme selection (light mode / dark mode) inspired by TailwindCSS.





## About

The [TailwindCSS site](https://tailwindcss.com/) is a great example of excellent UX and the theme select option is particularly nice. A simple icon gives access to a menu to set the theme to light mode or dark mode, or allow the system to automatically switch based on your device configuration (which can change based on the time of day).

A particularly nice touch is that it shows if the default system mode has been overridden using a different icon color.

For mobile users, where the navigation bar shrinks to become an expandable menu, they have a larger-hit-target version providing the same features.

This project re-creates these UI widgets and provides the system to persist and apply the selected theme in your SvelteKit project. Please refer to [TailwindCSS Dark Mode](https://tailwindcss.com/docs/dark-mode) documentation for how to use dark mode styles within your app.

## Usage

### Install Package

Install using your package manager of choice:

    pnpm i svelte-theme-select

### Add to root +layout.svelte

Create an instance of the theme manager in your root `src/routes/+layout.svelte` file and include the `` component which writes the JS into the page to apply the theme. The `` component provides the desktop icon and menu, the `` component provides the mobile friendly equivalent. This is a cut-down layout, checkout the [ready made templates available from TailwindUI](https://tailwindui.com/).

```svelte

  import { createThemeSwitcher, Theme, ThemeToggle, ThemeSelect } from 'svelte-theme-select'

  import '../app.postcss'

  createThemeSwitcher()

  

  


    

    

  


  

  


    

    

  


```

### Configure TailwindCSS dark-mode

Configure TailwindCSS to [toggle dark mode manually using a class](https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually):

```js

const config = {

  content: ['./src/**/*.{html,js,svelte,ts}'],

  theme: {

    extend: {},

  },

  darkMode: 'class',

  plugins: [],

}

module.exports = config

```

### Define light / dark background colors

Set the light and dark mode backgrounds to use in your `src/app.html` app shell:

```html

  
%sveltekit.body%


```

Everything should then be in place to design using the TailWindCSS classes including the `dark:` prefix for when dark mode is active.

## Customizing the Widget Style

The UI widgets can be customized to match whatever TailwindCSS colors scheme you are using, the default icons can be replaced if desired, and the "Light", "Dark", and "System" labels replaced.

### Colors

Coming soon

### Icons

Coming soon

### Labels

Coming soon