63 lines
1.5 KiB
TypeScript
63 lines
1.5 KiB
TypeScript
import type { ComputedRef, Ref } from 'vue';
|
|
import { computed, onMounted, ref } from 'vue';
|
|
import type { Appearance, ResolvedAppearance } from '@/types';
|
|
|
|
export type { Appearance, ResolvedAppearance };
|
|
|
|
export type UseAppearanceReturn = {
|
|
appearance: Ref<Appearance>;
|
|
resolvedAppearance: ComputedRef<ResolvedAppearance>;
|
|
updateAppearance: (value: Appearance) => void;
|
|
};
|
|
|
|
export function updateTheme(): void {
|
|
if (typeof window === 'undefined') {
|
|
return;
|
|
}
|
|
|
|
document.documentElement.classList.add('dark');
|
|
}
|
|
|
|
const setCookie = (name: string, value: string, days = 365) => {
|
|
if (typeof document === 'undefined') {
|
|
return;
|
|
}
|
|
|
|
const maxAge = days * 24 * 60 * 60;
|
|
|
|
document.cookie = `${name}=${value};path=/;max-age=${maxAge};SameSite=Lax`;
|
|
};
|
|
|
|
export function initializeTheme(): void {
|
|
if (typeof window === 'undefined') {
|
|
return;
|
|
}
|
|
|
|
updateTheme();
|
|
}
|
|
|
|
const appearance = ref<Appearance>('dark');
|
|
|
|
export function useAppearance(): UseAppearanceReturn {
|
|
onMounted(() => {
|
|
appearance.value = 'dark';
|
|
});
|
|
|
|
const resolvedAppearance = computed<ResolvedAppearance>(() => {
|
|
return 'dark';
|
|
});
|
|
|
|
function updateAppearance() {
|
|
appearance.value = 'dark';
|
|
localStorage.setItem('appearance', 'dark');
|
|
setCookie('appearance', 'dark');
|
|
updateTheme();
|
|
}
|
|
|
|
return {
|
|
appearance,
|
|
resolvedAppearance,
|
|
updateAppearance,
|
|
};
|
|
}
|