litruv/cinny
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
61d41900cc4b2efc34bf38adf5e3b0fcf79d7926
cinny/docs/handoff/features/themes-and-appearance/HANDOFF.md
Max Litruv Boonzaayer e058165830 feat: upgrade toolchain and soften sync recovery after network blips 
Bump Vite 8, matrix-js-sdk, and related deps; fix immer/vanilla-extract imports for new majors. Replace blocking sync error dialog with background recovery on wake/offline, and disable Vite auto-open in dev. Add feature handoff documentation index.
2026-07-09 01:55:09 +10:00

2.5 KiB
Raw Blame History

Themes & appearance — handoff

Summary

Theming covers light/dark/system themes, custom CSS variables, font choices, page zoom, message spacing, and view transitions. Themes can be extended by plugins.

User-facing behavior

  • Theme toggle in settings (light / dark / system)
  • Page zoom slider (General settings)
  • Message spacing density
  • View transitions on navigation (where supported)
  • Plugin-registered custom themes

Architecture

ThemeManager.tsx — auth vs client theme application
settings.ts — theme, zoom, spacing in settingsAtom
useTheme.ts — read/apply theme
ClientNonUIFeatures — PageZoomFeature, EmojiStyleFeature
vanilla-extract / folds tokens in colors.css.ts

Key files

Path Role
cinny/src/app/pages/ThemeManager.tsx Route-level theme
cinny/src/app/state/settings.ts Settings including theme
cinny/src/app/hooks/useTheme.ts Theme hook
cinny/src/colors.css.ts Color tokens
cinny/src/app/pages/client/ClientNonUIFeatures.tsx Page zoom CSS
cinny/src/app/hooks/useViewTransitions.ts View transitions
cinny/src/app/hooks/useMessageSpacing.ts Message density
cinny/public/themes/ Bundled theme files (if present)

Data model

Key Storage
settingsAtom theme, pageZoom, messageSpacing, emojiStyle

Dependencies

  • folds design system
  • @vanilla-extract/css for component styles
  • CSS prefers-color-scheme for system theme

Integration points

  • plugins: registerTheme API
  • user-settings: General tab controls
  • forum: forumTheme.css.ts forum-specific styling

Testing

Manual

  1. Switch dark/light; all pages consistent.
  2. System theme follows OS.
  3. Page zoom 80–150%; layout usable.
  4. Plugin theme applies without breaking contrast.

Automated

  • None

Known issues & gotchas

  • Separate AuthRouteThemeManager and client theme — auth pages may differ
  • Zoom uses font-size on documentElement — may affect rem layout globally
  • Forum theme partially separate from global tokens

Future work

  • High contrast accessibility theme
  • Per-room wallpaper from avatar metadata banner

Related docs

Add your extra things here

  • EmojiStyle enum affects --font-emoji CSS variable
  • useViewTransitions tied to browser View Transitions API support
Reference in New Issue View Git Blame Copy Permalink