Skip to content
logo fefade

Theming

Theme configuration

Section titled “Theme configuration”

This setup allows the user to define partial theme colors. That means it’s not required to specify every color — only the ones you wish to customize. Any colors not explicitly defined will automatically fall back to the default values.

Import necessary modules and create a custom theme configuration.

<script lang="ts">
  import { createTheme, Provider } from "@fefade/svelte"


  let { children } = $props()


  const theme = createTheme({
    colors: { light: { bg: "orange" } }
  })
</script>


<Provider {theme} defaultThemeMode="dark">
  {@render children()}
</Provider>

Accessing Theme Colors

Section titled “Accessing Theme Colors”

You can access and use theme colors throughout your components. For example, you might want to use colors defined in the theme for different parts of your app.

light
primary #171717
onPrimary #fafafa
secondary #f5f5f5
onSecondary #171717
muted #a3a3a3
bg #ffffff
onBg #262626
surface #f8f8f8
onSurface #0a0a0a
border #e5e5e5
disabled #d4d4d4
onDisabled #737373
skeleton #e5e5e5
onSkeleton #f9f9f9
overlay #00000066
shadow #0000001A
success #22c55e
onSuccess #124a28
error #ef4444
onError #511111
warning #f97316
onWarning #6c2710
info #58c5fcff
onInfo #003344