svelte-theme-manager

A versatile Svelte component for effortlessly managing dark/light modes and custom color themes in your Svelte applications.

Features

• Easy-to-use theme switch component
• Smooth transitions between dark and light modes
• System theme detection and synchronization
• Customizable color palette and CSS property names
• Support for custom-only themes
• Multiple instances stay synced across your app
• No dependencies

Installation

npm install svelte-theme-manager

Basic Usage

<script>
  import ThemeSwitch from 'svelte-theme-manager';
</script>

<ThemeSwitch />

Advanced Usage

Custom Colors and CSS Property Names

You can customize the default color palette and CSS property names:

<script>
  import ThemeSwitch from 'svelte-theme-manager';

  let colors = {
    lightBg0: "#f0f0f0",
    lightBg1: "#ffffff",
    darkBg0: "#1a1a1a",
    darkBg1: "#2c2c2c",
    // ... add more custom colors
  };

  let propertyNames = {
    Bg0: "--custom-bg-0",
    Bg1: "--custom-bg-1",
    // ... add more custom property names
  };
</script>

<ThemeSwitch {colors} {propertyNames} />

Custom-Only Mode

You can use only custom colors and properties:

<script>
  import ThemeSwitch from 'svelte-theme-manager';

  let customOnly = true;
  let customColors = {
    lightCustomColor0: "#e0e0e0",
    darkCustomColor0: "#303030",
    // ... add more custom colors
  };

  let customPropertyNames = {
    CustomColor0: '--my-custom-color',
    // ... add more custom property names
  };
</script>

<ThemeSwitch {customOnly} {customColors} {customPropertyNames} />

Styling Options

You can customize the appearance of the ThemeSwitch component:

<script>
  import ThemeSwitch from 'svelte-theme-manager';
</script>

<ThemeSwitch 
  fontSize="0.8rem"
  padding="8px"
  backgroundColor="var(--my-bg-color)"
  border="2px solid #ccc"
  horizontal={true}
/>

Props

Prop	Type	Default	Description
fontSize	string	"0.6rem"	Size of the icons
padding	string	calc(fontSize / 3)	Padding of each option
backgroundColor	string	'var(--color-bg-1)'	Background color CSS property
applyOnBody	boolean	true	Apply background color to body
horizontal	boolean	false	Horizontal layout of options
preference	"light" | "dark" | "system"	"system"	Default theme preference
border	string	"solid 1px var(--color-text)"	Border style of the switch
style	string	""	Custom inline style
colors	object	{}	Custom color palette
propertyNames	object	{}	Custom CSS property names
customOnly	boolean	false	Use only custom colors and properties
customColors	object	{}	Custom color values
customPropertyNames	object	{}	Custom CSS property names

Default Colors and Property Names

The component comes with a set of default colors and property names. You can override these by passing your own colors and propertyNames objects. For a full list of default values, please refer to the source code.

System Theme Detection

The component automatically detects the user's system theme preference and adjusts accordingly. You can override this behavior by setting the preference prop to "light" or "dark".

Reactive Updates

The theme state is managed using a Svelte store, allowing for reactive updates across your entire application. You can access the current theme state in your components:

<script>
  import { themeStore } from 'svelte-theme-manager';
</script>

<p>Current theme: {$themeStore.darkMode ? 'Dark' : 'Light'}</p>
<p>Using system theme: {$themeStore.useSystemTheme ? 'Yes' : 'No'}</p>

Browser Compatibility

This component uses modern CSS features like backdrop-filter. Make sure to check browser compatibility and provide appropriate fallbacks if needed.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License.

About

Created by um-dev