Marwes UI

Marwes documentation

SvelteKit integration

Use Marwes with SvelteKit without causing a light or dark mode flash.

Sveltekit setup

Place the provider in the root layout. Add the Marwes theme script to the document head before hydration to avoid a light or dark mode flash.

  1. Complete the Svelte setup.
  2. Render one provider at the application boundary.
  3. Keep server and browser theme initialization aligned.
  4. Run pnpm dlx @marwes-ui/cli doctor --run-build.
<script lang="ts">
  import {
    MarwesProvider,
    createMarwesThemeScript,
    createMarwesThemeStyle,
  } from "@marwes-ui/svelte"

  let { children } = $props()
  const themeHead = `<style>${createMarwesThemeStyle({ target: "html", attribute: "class" })}</style><script>${createMarwesThemeScript({ storageKey: "marwes-theme", defaultPreference: "system", target: "html", attribute: "class" })}<\/script>`
</script>

<svelte:head>{@html themeHead}</svelte:head>
<MarwesProvider
  defaultPreference="system"
  storageKey="marwes-theme"
  target="html"
  attribute="class"
  variableStrategy="style-tag"
>
  {@render children()}
</MarwesProvider>