Files
AstralRinth/apps/frontend/src/plugins/theme/themes.ts
Sasha Sorokin 1e0d7c7e28 Rewrite cosmetics and theme preferences (#1328)
- Cosmetics and theme preferences are now only stored in cookies instead
  of a combination of both cookies and state.

- The theme plugin now supports client hints. This allows the server
  to render a page using the client-preferred theme provided it supplies
  this information (any browser other than Firefox), helping to avoid an
  annoying flash while the page is hydrating.

- For the future, the theme plugin now supports additional light themes.
  Light theme preferences are currently not stored, but this can easily
  be fixed if the need arises.

- The previous workaround using the Nitro plugin has been removed. Its
  functionality is now handled by the Nuxt theme plugin with cleaner
  code.

- All pages and components now use the new plugins.

- Compared to the previous attempt, this commit has been improved to be
  more robust in cases where the theme cookie contains invalid values.

Co-authored-by: Geometrically <18202329+Geometrically@users.noreply.github.com>
2024-07-31 19:42:55 +00:00

28 lines
815 B
TypeScript

export const LightThemes = ["light"] as const;
export type LightTheme = (typeof LightThemes)[number];
export const DarkThemes = ["dark", "oled", "retro"] as const;
export type DarkTheme = (typeof DarkThemes)[number];
export type Theme = LightTheme | DarkTheme;
export function isLightTheme(theme: Theme | (string & Record<never, never>)): theme is LightTheme {
return LightThemes.includes(theme as any);
}
export function isDarkTheme(theme: Theme | (string & Record<never, never>)): theme is DarkTheme {
return DarkThemes.includes(theme as any);
}
export type ThemeType = "light" | "dark";
export function getThemeType(
theme: Theme | (string & Record<never, never>),
): ThemeType | "unknown" {
if (isLightTheme(theme)) return "light";
if (isDarkTheme(theme)) return "dark";
return "unknown";
}