Theming

Customize Fortune Kit's appearance through CSS custom properties.

Quick Theming

Override CSS variables to change the entire look:

:root {
  /* Change primary brand color from gold to purple */
  --fk-color-primary-DEFAULT: #a855f7;
  --fk-color-primary-500: #a855f7;
  --fk-color-primary-600: #9333ea;

  /* Adjust semantic colors */
  --fk-color-win-DEFAULT: #10b981;  /* Emerald instead of green */
  --fk-color-lose-DEFAULT: #f43f5e; /* Rose instead of red */
}

Theme Presets

Dark Theme (Default)

:root {
  --fk-color-background-DEFAULT: #09090b;
  --fk-color-background-secondary: #18181b;
  --fk-color-foreground-DEFAULT: #fafafa;
}

Light Theme

.theme-light {
  --fk-color-background-DEFAULT: #ffffff;
  --fk-color-background-secondary: #f4f4f5;
  --fk-color-foreground-DEFAULT: #09090b;
  --fk-color-border-DEFAULT: #e4e4e7;
}

Runtime Theme Switching

<script setup>
const isDark = ref(true)
</script>

<template>
  <div :class="isDark ? 'theme-dark' : 'theme-light'">
    <FkLeaderboard :entries="entries" />
  </div>
</template>

Custom Brand Integration

Match Fortune Kit to your brand:

/* Your brand colors */
:root {
  --brand-primary: #6366f1;    /* Indigo */
  --brand-success: #14b8a6;    /* Teal */
  --brand-danger: #f43f5e;     /* Rose */
}

/* Map to Fortune Kit tokens */
:root {
  --fk-color-primary-DEFAULT: var(--brand-primary);
  --fk-color-win-DEFAULT: var(--brand-success);
  --fk-color-lose-DEFAULT: var(--brand-danger);
}

Component-Level Overrides

Style specific components without affecting others:

<template>
  <FkResultWin
    class="custom-win"
    title="MEGA WIN!"
    :amount="10000"
  />
</template>

<style>
.custom-win {
  --fk-color-win-DEFAULT: gold;
  --fk-color-win-background: rgba(255, 215, 0, 0.2);
  background: linear-gradient(135deg, #1a1a2e, #16213e);
}
</style>

Animation Customization

Adjust timing and easing:

:root {
  /* Slower, more dramatic animations */
  --fk-duration-normal: 400ms;
  --fk-duration-slow: 600ms;

  /* Bouncier easing */
  --fk-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}