You've already forked AstralRinth
forked from didirus/AstralRinth
1e0d7c7e28
- 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>
39 lines
994 B
TypeScript
39 lines
994 B
TypeScript
import type { Theme } from "./themes.ts";
|
|
|
|
interface ThemeSettings {
|
|
preference: Theme | "system";
|
|
value: Theme;
|
|
}
|
|
|
|
export function useThemeSettings(getDefaultTheme?: () => Theme) {
|
|
getDefaultTheme ??= () => "dark";
|
|
|
|
const $settings = useCookie<ThemeSettings>("color-mode", {
|
|
maxAge: 60 * 60 * 24 * 365 * 10,
|
|
sameSite: "lax",
|
|
secure: true,
|
|
httpOnly: false,
|
|
path: "/",
|
|
});
|
|
|
|
// reset theme settings to a default value if the cookie is missing or contains invalid value
|
|
if ($settings.value == null || typeof $settings.value !== "object") {
|
|
$settings.value = {
|
|
preference: "system",
|
|
value: getDefaultTheme(),
|
|
};
|
|
}
|
|
|
|
return reactive({
|
|
preferred: computed({
|
|
get: () => $settings.value.preference ?? "system",
|
|
set: (value) => ($settings.value.preference = value),
|
|
}),
|
|
|
|
active: computed({
|
|
get: () => $settings.value.value ?? getDefaultTheme(),
|
|
set: (value) => ($settings.value.value = value),
|
|
}),
|
|
});
|
|
}
|