Description
Appearance and Accessibility Settings let each user tune how Dots looks and moves without changing workspace content for anyone else. The settings surface covers color mode, personal accent, high-contrast presentation, reduced motion, focus-ring style, and skip-link behavior. Changes flow through shared providers and design tokens so the shell and feature modules respond consistently rather than maintaining isolated theme preferences.
The implementation separates visual identity from accessibility choices. Theme and accent settings change token resolution at the document root, while reduced motion and focus treatment remain explicit preferences with system-aware behavior. Server-backed settings travel with the user where appropriate, and shared hooks give every consuming surface the same resolved state.
Selling Points
- Gives users a coherent light, dark, and accent experience across the entire product rather than per-page theme fragments.
- Supports motion-sensitive and keyboard-first users with direct controls that affect real interaction primitives.
- Applies settings through the design system, preventing inaccessible modules from drifting away from the chosen presentation.
- Preserves personal preferences independently of shared workspace data, making one workspace comfortable for different people.
- Provides high-contrast and visible-focus options without requiring browser extensions or custom stylesheets.
User Story
A keyboard-first analyst switches to dark mode, selects a terracotta accent, enables high contrast, and chooses the stronger focus-ring treatment. They also reduce motion before returning to the graph and dashboards. The changed tokens and accessibility provider immediately carry those decisions through the shell, overlays, and shared components.
Extension Surface
This capability is configurable by definition. apps/web/src/modules/shell/settings/tabs/AppearanceTab.tsx and apps/web/src/modules/shell/settings/tabs/accessibility/HighContrastTab.tsx expose supported choices, while packages/ui/src/hooks/useAccessibilitySettings.tsx resolves them for component consumers. Users can choose among the sanctioned modes; they cannot inject arbitrary CSS or redefine the product’s token taxonomy.
Capabilities & Limits
- Persists color mode, personal accent, contrast, reduced-motion, focus, and skip-link preferences.
- Propagates resolved accessibility state through shared UI hooks and root-level theme stamps.
- Respects system motion preferences while allowing an explicit product setting.
- Limit: customization is bounded to supported tokens and modes; custom themes, module-specific accents, and user-authored stylesheets are not supported.
Implementation Map
apps/web/src/modules/shell/settings/tabs/AppearanceTab.tsxapps/web/src/modules/shell/settings/tabs/ThemeSection.tsxapps/web/src/modules/shell/settings/tabs/accessibility/HighContrastTab.tsxpackages/ui/src/hooks/useAccessibilitySettings.tsx