refactor: repartition server-side and client-side code

app/stores/theme.ts

@@ -0,0 +1,53 @@
+import { atom } from 'nanostores';
+import type { Theme } from '~/types/theme';
+import { logStore } from './logs';
+
+export const kTheme = 'upage_theme';
+
+export function themeIsDark() {
+  return themeStore.get() === 'dark';
+}
+
+export const DEFAULT_THEME = 'light';
+
+export const themeStore = atom<Theme>(initStore());
+
+function initStore() {
+  if (!import.meta.env.SSR) {
+    const persistedTheme = localStorage.getItem(kTheme) as Theme | undefined;
+    const themeAttribute = document.querySelector('html')?.getAttribute('data-theme');
+
+    return persistedTheme ?? (themeAttribute as Theme) ?? DEFAULT_THEME;
+  }
+
+  return DEFAULT_THEME;
+}
+
+export function toggleTheme() {
+  const currentTheme = themeStore.get();
+  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+
+  // Update the theme store
+  themeStore.set(newTheme);
+
+  // Update localStorage
+  localStorage.setItem(kTheme, newTheme);
+
+  // Update the HTML attribute
+  document.querySelector('html')?.setAttribute('data-theme', newTheme);
+
+  // TODO：Update user profile if it exists
+  try {
+    const userProfile = localStorage.getItem('upage_user_profile');
+
+    if (userProfile) {
+      const profile = JSON.parse(userProfile);
+      profile.theme = newTheme;
+      localStorage.setItem('upage_user_profile', JSON.stringify(profile));
+    }
+  } catch (error) {
+    console.error('Error updating user profile theme:', error);
+  }
+
+  logStore.logSystem(`Theme changed to ${newTheme} mode`);
+}