Theming

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

  let { children } = $props()

  const customTheme = customThemeConfig({
    colors: { light: { colorBg: "orange" } }
  })
</script>

<FeflowProvider {customTheme} defaultMode="dark">
  {@render children()}
</FeflowProvider>

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.

Usage

<script lang="ts">
  import { Badge, Button, Card, themeConfig } from "@dxdns/feflow"

  const theme = $derived(themeConfig())
</script>

<div
  style="
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  "
>
  <h2>{theme.mode}</h2>
  <Button variant="outlined" onclick={theme.toggle}>toggle theme</Button>
</div>
<Card style="background: {theme.mode === 'dark' ? 'green' : 'red'};">
  <ul style="line-height: 2;">
    {#each Object.keys(theme.colors) as t}
      {@const color = theme.colors[t as keyof typeof theme.colors]}
      <li>
        <span style="color:aqua;">{t}</span>:
        <Badge roundedFull style="background: {color};" size="sm"></Badge>
      </li>
    {/each}
  </ul>
</Card>

Preview

light

toggle theme

• colorPrimary:
• colorOnPrimary:
• colorSecondary:
• colorOnSecondary:
• colorText:
• colorTextMuted:
• colorBg:
• colorOnBg:
• colorSurface:
• colorSurfaceVariant:
• colorOnSurface:
• colorBorder:
• colorDisabled:
• colorOnDisabled:
• colorFocus:
• colorOnFocus:
• colorSkeleton:
• colorOnSkeleton:
• colorSuccess:
• colorOnSuccess:
• colorError:
• colorOnError:
• colorWarning:
• colorOnWarning:
• colorInfo:
• colorOnInfo: