feat(07-02): update Layout toggle to cycle three themes with next-theme label
- 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:
parent
8d7de460f9
commit
21ffa90455
1 changed files with 10 additions and 4 deletions
|
|
@ -61,6 +61,12 @@ export function Layout() {
|
||||||
setSelectedCompanyId,
|
setSelectedCompanyId,
|
||||||
} = useCompany();
|
} = useCompany();
|
||||||
const { theme, toggleTheme } = useTheme();
|
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 { companyPrefix } = useParams<{ companyPrefix: string }>();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
|
|
@ -339,8 +345,8 @@ export function Layout() {
|
||||||
size="icon-sm"
|
size="icon-sm"
|
||||||
className="text-muted-foreground shrink-0"
|
className="text-muted-foreground shrink-0"
|
||||||
onClick={toggleTheme}
|
onClick={toggleTheme}
|
||||||
aria-label="Cycle theme"
|
aria-label={`Switch to ${nextThemeLabel}`}
|
||||||
title="Cycle theme"
|
title={`Switch to ${nextThemeLabel}`}
|
||||||
>
|
>
|
||||||
{isDarkTheme ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
|
{isDarkTheme ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
|
||||||
</Button>
|
</Button>
|
||||||
|
|
@ -397,8 +403,8 @@ export function Layout() {
|
||||||
size="icon-sm"
|
size="icon-sm"
|
||||||
className="text-muted-foreground shrink-0"
|
className="text-muted-foreground shrink-0"
|
||||||
onClick={toggleTheme}
|
onClick={toggleTheme}
|
||||||
aria-label="Cycle theme"
|
aria-label={`Switch to ${nextThemeLabel}`}
|
||||||
title="Cycle theme"
|
title={`Switch to ${nextThemeLabel}`}
|
||||||
>
|
>
|
||||||
{isDarkTheme ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
|
{isDarkTheme ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
|
||||||
</Button>
|
</Button>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue