Skip to content
feflow

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, FeflowProvider } from "@dxdns/feflow-svelte"


  let { children } = $props()


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


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

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:
  • onPrimary:
  • secondary:
  • onSecondary:
  • muted:
  • bg:
  • onBg:
  • surface:
  • onSurface:
  • border:
  • disabled:
  • onDisabled:
  • skeleton:
  • onSkeleton:
  • overlay:
  • shadow:
  • success:
  • onSuccess:
  • error:
  • onError:
  • warning:
  • onWarning:
  • info:
  • onInfo: