Cursor rule

1---
2description: "Guidelines for implementing Day/Night (Light/Dark) mode and UI/UX design."
3globs: "*.vue, *.ts, *.tsx, *.css"
4---
5 
6# UX/UI Day/Night Mode Guidelines
7 
8This project supports both Day (Light) and Night (Dark) modes. All new UI components and pages must be designed to adapt seamlessly to both modes.
9 
10## Core Principles
11 
121. **Mandatory Dual-Mode Support**
13   - Never assume the app will only be viewed in dark mode or light mode.
14   - Every new component, page, or feature must look good and function correctly in both modes.
15   - Test your UI changes by toggling the theme in the header.
16 
172. **Strict Use of Semantic Colors**
18   - **DO NOT** hardcode absolute color values in your Tailwind classes or CSS unless absolutely necessary (e.g., `bg-white`, `text-black`, `bg-gray-900`, `#ffffff`, `#000000`).
19   - **DO** use the semantic CSS variables defined in `src/style.css` via Tailwind utility classes.
20     - Backgrounds: `bg-background`, `bg-card`, `bg-popover`, `bg-muted`
21     - Text: `text-foreground`, `text-muted-foreground`, `text-primary-foreground`
22     - Borders: `border-border`, `border-input`
23     - Action/States: `bg-primary`, `bg-secondary`, `bg-destructive`, `bg-accent`
24 
253. **Component Adaptation**
26   - **Shadows and Borders**: Dark mode often relies more on subtle borders (`border-border`) rather than shadows (`shadow-sm`, `shadow-md`) to distinguish elevation, whereas light mode often uses shadows. Ensure elements have clear boundaries in both modes.
27   - **Third-Party Components**: When integrating charts, code editors, terminal emulators, or other complex components, ensure their themes are linked to the current app theme (using `isDark` from `@vueuse/core` or CSS variables).
28 
294. **Opacity and Alpha Channels**
30   - Use Tailwind's opacity modifiers with semantic colors when you need a lighter version of a color (e.g., `bg-primary/10`, `text-muted-foreground/80`). This ensures the alpha blending looks correct on both light and dark backgrounds.
31 
32## Implementation Example
33 
34### ❌ Bad (Hardcoded Colors)
35```vue
36<div class="bg-white border border-gray-200 text-gray-900 shadow-sm">
37  <h2 class="text-black">Title</h2>
38  <p class="text-gray-500">Description</p>
39</div>
40```
41 
42### ✅ Good (Semantic Colors)
43```vue
44<div class="bg-card border border-border text-card-foreground">
45  <h2 class="text-foreground">Title</h2>
46  <p class="text-muted-foreground">Description</p>
47</div>
48```
49 
50## Using Theme State in Logic
51If you need to programmatically access the current theme (e.g., to pass a "theme" prop to a chart library), use `@vueuse/core`:
52 
53```typescript
54import { useDark } from '@vueuse/core'
55 
56const isDark = useDark()
57 
58// isDark.value will be true in Night mode, false in Day mode
59```