Svelte Themes

Overview

This library is a port of next-theme for SvelteKit. It provides an abstraction for themes in your SvelteKit.js app. The library provides various features to make theme handling easy and customizable, including perfect dark mode, system setting with prefers-color-scheme, themed browser UI, and more. It is still in the early phase, and contributions are welcome.

Features

• Perfect dark mode in 2 lines of code: Easily enable dark mode for your app.
• System setting with prefers-color-scheme: Automatically switch between dark and light based on the user’s system preference.
• Themed browser UI with color-scheme: Indicate to browsers which color scheme is used for built-in UI elements like inputs and buttons.
• No flash on load: Prevent any flashing on page load when switching themes.
• Sync theme across tabs and windows: Ensure that the selected theme remains consistent across different tabs and windows.
• Disable flashing when changing themes: Disable any flashing effect that occurs during a theme switch.
• Force pages to specific themes: Set a forced theme for a specific page that overrides saved theme settings.
• Class or data attribute selector: Modify the HTML attribute based on the active theme, allowing you to apply theme-specific styles using either class or data attribute selectors.
• Theme store: Access the theme props anywhere in your app using the theme writable store and easily switch themes.

Installation

To use svelte-themes, you need to add SvelteTheme inside your __layout component. Here are the available props that you can set:

SvelteTheme({
  storageKey: 'theme', // Key used to store theme setting in localStorage
  defaultTheme: 'system', // Default theme name. If enableSystem is false, the default theme is light
  forcedTheme: '', // Forced theme name for the current page (does not modify saved theme settings)
  enableSystem: true, // Whether to switch between dark and light based on prefers-color-scheme
  enableColorScheme: true, // Whether to indicate to browsers which color scheme is used (dark or light) for built-in UI like inputs and buttons
  disableTransitionOnChange: false, // Optionally disable all CSS transitions when switching themes
  themes: ['light', 'dark'], // List of theme names
  attribute: 'data-theme', // HTML attribute modified based on the active theme
  value: { // Optional mapping of theme name to attribute value
    light: 'light-theme',
    dark: 'dark-theme'
  }
})

Summary

Svelte-themes is a library that provides a simple and convenient way to handle themes in your SvelteKit app. It offers features like perfect dark mode, system setting with prefers-color-scheme, themed browser UI, and more. With svelte-themes, you can easily switch themes, synchronize them across tabs and windows, and override theme settings for specific pages. It is still in the early phase and welcomes contributions. For more detailed documentation, you can refer to the next-themes repository.