85 lines
2.9 KiB
Markdown
85 lines
2.9 KiB
Markdown
# 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.
|