Skip to content
PocketArk

Styling, theming and code style

Styling

Section titled “Styling”

Use shadcn-vue semantic colors (bg-primary, text-muted-foreground, …); never hard-code color values. Tokens like text-success / text-warning / text-info and bg-console already exist.

Icons

Section titled “Icons”

Only @lucide/vue (lucide-vue-next is deprecated — do not add it).

Code style

Section titled “Code style”

prettier: single quotes, 100 columns, es5 trailing commas. Before committing:

终端窗口
pnpm format

src/components/ui/** is generated by the shadcn-vue CLI: you may change styles, but not structure or logic.

Theming

Section titled “Theming”
  • Accents: six available in settings; adding a custom one requires syncing three places — the accent class in assets/index.css → ACCENTS in core/theme → the anti-flash script in index.html.
  • Default accent / theme: edit DEFAULT_ACCENT / DEFAULT_THEME in core/theme/index.ts (pnpm scaffold can also set these interactively).
  • Root font size: three steps (small 13 / normal 14 / large 15) that scale the whole UI; the scale table is documented in assets/index.css.
  • Dark base: dark by default (deep blue-gray), with light maintained alongside; when changing the palette, check both the :root / .dark blocks in index.css and NATIVE_BG in core/theme (the native window background).