mikkel/nexus
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(07-02): update Layout toggle to cycle three themes with next-theme label

Browse source 
- Add THEME_CYCLE map for mocha->tokyo-night->latte->mocha
- Compute nextThemeLabel for descriptive aria-label/title on toggle button
- Update both desktop and mobile toggle button aria-label/title to 'Switch to [theme]'
- Icon logic unchanged: Sun in dark mode, Moon in light mode
This commit is contained in:
Mikkel Georgsen 2026-03-31 14:20:31 +02:00 • committed by Nexus Dev
parent 8d7de460f9
commit 21ffa90455
1 changed files with 10 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
ui/src/components/Layout.tsx
View file

@ -61,6 +61,12 @@ export function Layout() {
setSelectedCompanyId,
} = useCompany();
const { theme, toggleTheme } = useTheme();
const THEME_CYCLE: Record<string, string> = {
"catppuccin-mocha": "Tokyo Night",
"tokyo-night": "Catppuccin Latte",
"catppuccin-latte": "Catppuccin Mocha",
};
const nextThemeLabel = THEME_CYCLE[theme] ?? "next theme";
const { companyPrefix } = useParams<{ companyPrefix: string }>();
const navigate = useNavigate();
const location = useLocation();
@ -339,8 +345,8 @@ export function Layout() {
size="icon-sm"
className="text-muted-foreground shrink-0"
onClick={toggleTheme}
aria-label="Cycle theme"
title="Cycle theme"
aria-label={`Switch to ${nextThemeLabel}`}
title={`Switch to ${nextThemeLabel}`}
>
{isDarkTheme ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
</Button>
@ -397,8 +403,8 @@ export function Layout() {
size="icon-sm"
className="text-muted-foreground shrink-0"
onClick={toggleTheme}
aria-label="Cycle theme"
title="Cycle theme"
aria-label={`Switch to ${nextThemeLabel}`}
title={`Switch to ${nextThemeLabel}`}
>
{isDarkTheme ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
</Button>