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.

import { createApp, h } from "vue"
import App from "./App.vue"
import { createTheme, Provider } from "./lib"

const app = createApp({
  render() {
    return h(
      Provider,
      { theme: createTheme({ colors: { light: { bg: "orange" } } }) },
      {
        default: () => h(App)
      }
    )
  }
})

app.mount("#app")

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.

Preview

light

toggle theme

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

Code

<script setup lang="ts">
  import { reactive } from "vue"
  import { Badge, Button, themeConfig, Grid, Card } from "@fefade/vue"

  const theme = reactive(themeConfig())
</script>

<template>
  <div
    style="
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      align-items: center;
      justify-content: flex-end;
    "
  >
    <Badge variant="outlined">
      <h4>{{ theme.mode }}</h4>
    </Badge>
    <Button variant="outlined" @click="theme.toggle">toggle theme</Button>
  </div>

  <Grid style="grid-auto-rows: 60px">
    <Card
      v-for="(v, k) in theme.colors"
      :key="k"
      :style="{
        background: v,
        margin: 0
      }"
    >
      <Badge
        style="
          position: absolute;
          top: 0;
          right: 0;
          margin: 0;
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
        "
      >
        {{ k }}
      </Badge>
      <Badge size="lg">{{ v }}</Badge>
    </Card>
  </Grid>
</template>