Skip to content
Sveltier
Mode
Getting started

Quick start

Add one provider with the theme pack you use, then read or change the theme and the app's settings from any component.

1. Add the provider

Put UIProvider in your root layout and pass the theme pack you use. It follows the operating system's light or dark preference, with no flash on first paint, and gives every component its defaults, breakpoints and locale.

SvelteKit 
<!-- src/routes/+layout.svelte -->
<script>
  import { UIProvider } from 'sveltier';
  import { monolith } from 'sveltier/themes/monolith';
  let { children } = $props();
</script>

<!-- Monolith, light or dark following the OS -->
<UIProvider themes={monolith}>
  {@render children()}
</UIProvider>

Without SvelteKit, wrap the root component instead:

Vite 
// src/main.ts (Vite without SvelteKit)
import { mount } from 'svelte';
import App from './App.svelte';

mount(App, { target: document.getElementById('app')! });

<!-- src/App.svelte -->
<script>
  import { UIProvider } from 'sveltier';
  import { monolith } from 'sveltier/themes/monolith';
</script>

<UIProvider themes={monolith}>
  <h1>Hello</h1>
</UIProvider>

2. Pick a theme pack

Pass a pack to themes. Its light and dark themes become the pair that "system" and toggle() switch between. Only the packs you pass are bundled.

Maison 
<script>
  import { UIProvider } from 'sveltier';
  import { maison } from 'sveltier/themes/maison';
  let { children } = $props();
</script>

<UIProvider themes={maison}>
  {@render children()}
</UIProvider>

Each pack names its own fonts; install them as shown in Fonts.

3. Read and change the theme

useTheme() returns the nearest theme. Its fields are reactive, and the root remembers the user's choice across visits.

Theme toggle 
<script>
  import { useTheme } from 'sveltier';
  const theme = useTheme();
</script>

<button type="button" onclick={() => theme.toggle()}>
  {theme.isDark ? 'Light' : 'Dark'}
</button>

4. Set app-wide options

Defaults, locale and breakpoints are options of the same provider. All of them are optional.

+layout.svelte 
<script>
  import { UIProvider } from 'sveltier';
  import { monolith } from 'sveltier/themes/monolith';
  let { children } = $props();
</script>

<UIProvider
  themes={monolith}
  defaults={{ global: { density: 'compact' } }}
  locale={{ locale: 'en-GB', currency: 'GBP', timeZone: 'Europe/London' }}
  display={{ mobileBreakpoint: 'lg' }}
>
  {@render children()}
</UIProvider>

Next