# Using the Theme Store

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

## Imports
```js
import { useThemeStore } from "@/stores/theme";
```

## Reading theme tokens
```js
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>`
```vue
<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
```vue
<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:
```js
watch(() => themeStore.currentTheme, (t) => {
  console.log("theme changed", t.primary);
});
```

## Adding a new company theme
1) 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`.
2) 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.