Themes · MYVMS v2

Cấu trúc

ColorMode (3 chế độ): light · dark · system (theo OS qua matchMedia('(prefers-color-scheme: dark)'))
ThemeId (30 chủ đề): light, dark, anthropic, anthropic-light, cursor, perplexity, dracula, nord, tokyo-night, catppuccin, gruvbox, rosepine, github-light, github-dim, vercel-light, stripe, supabase, discord, solarized, monokai, sepia, forest, ocean-deep, sunset, cyberpunk, matrix, vaporwave, synthwave, high-contrast-dark
Storage: localStorage.vms-theme + localStorage.vms-color-mode
Áp dụng: html[data-theme=...] + class theme-light / theme-dark

Sử dụng trong React

import { useTheme } from '@/contexts/ThemeContext';

function MyComponent() {
  const { theme, mode, setTheme, setMode, toggleTheme, isDark } = useTheme();
  return (
    <button onClick={() => setMode('system')}>Theo hệ thống</button>
  );
}

CSS variables

Mỗi theme define các biến trong html[data-theme=<id>]. Component dùng:

.card {
  background: var(--vms-bg-secondary);
  color: var(--vms-text-primary);
  border: 1px solid var(--vms-border);
}
.btn-primary { background: var(--vms-accent); }

Danh sách biến: --vms-bg-primary, --vms-bg-secondary, --vms-bg-tertiary, --vms-bg-elevated, --vms-text-primary, --vms-text-secondary, --vms-text-muted, --vms-border, --vms-accent, --vms-accent-glow, --vms-success, --vms-warning, --vms-danger.

UI Controls

ColorModeToggle: Segmented (Light / Dark / System) trong Header.
ThemePicker: Dropdown 30 chủ đề, group theo Cơ bản / AI / Dev / Brand / Classic / Nature / Retro / A11y.

Thêm chủ đề mới

Định nghĩa CSS trong src/themes/themes-extra.css:

html[data-theme="my-brand"] {
  --vms-bg-primary: #...;
  --vms-accent: #...;
  /* ... */
}

Thêm ID vào ThemeId union và THEME_OPTIONS trong contexts/ThemeContext.tsx.
Nếu là theme sáng → thêm vào LIGHT_THEMES.
Build & deploy: npm run build && cp -r dist/* /var/www/html/vms-client/.