Using the Theme Store

This guide shows how to read and react to the company theme in Vue components.

Imports

import { useThemeStore } from "@/stores/theme";

Reading theme tokens

const themeStore = useThemeStore();
// Access current theme object
console.log(themeStore.currentTheme.primary);

Theme tokens exposed as CSS variables (runtime-applied to :root):

--theme-primary: main brand color
--theme-primary-strong: deeper shade of primary for borders/active states
--theme-secondary: secondary accent color
--theme-accent: softer accent/highlight
--theme-gradient-start / --theme-gradient-end: primary gradient stops
--theme-secondary-gradient-start / --theme-secondary-gradient-end: secondary gradient stops
--theme-surface: default card/background surface
--theme-surface-alt: alternate surface
--theme-border: standard border color
--theme-hover: hover surface color
--theme-text: primary text color
--theme-text-muted: muted/secondary text
--theme-text-dark: dark text color (use on light surfaces)
--theme-text-light: light text color (use on dark/gradient surfaces)
Backward-compat (mapped to the above): --primary-color, --primary-600, --surface-card, --surface-border, --surface-hover, --text-color

Applying theme in components

Option 1: Use CSS vars in `<style>`

<style scoped>
.button-primary {
  background: var(--theme-primary);
  color: white;
}
.card-surface {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
}
.banner-gradient {
  background: linear-gradient(135deg, var(--theme-gradient-start), var(--theme-gradient-end));
}
</style>

Option 2: Use reactive values in script

<script setup>
import { useThemeStore } from "@/stores/theme";
const themeStore = useThemeStore();
const styles = computed(() => ({
  background: `linear-gradient(135deg, ${themeStore.currentTheme.primaryGradientStart}, ${themeStore.currentTheme.primaryGradientEnd})`,
  color: themeStore.currentTheme.text,
}));
</script>

<template>
  <div :style="styles">Themed box</div>
</template>

Reacting to company changes

The app already applies themes on company change. If you need side-effects in a component:

watch(() => themeStore.currentTheme, (t) => {
  console.log("theme changed", t.primary);
});

Adding a new company theme

Open src/stores/theme.js and add a new entry to themeMap with all keys: primary, primaryStrong, secondary, accent, primaryGradientStart/End, secondaryGradientStart/End, surface, surfaceAlt, border, hover, text, textMuted.
No further changes are needed; selecting that company will apply the theme.

Quick reference for gradients

Primary gradient: --theme-gradient-start → --theme-gradient-end
Secondary gradient: --theme-secondary-gradient-start → --theme-secondary-gradient-end

Use primary for main brand moments; secondary for supporting UI accents.

2.9 KiB Raw Blame History