vibe themes

src/__data__/slices/theme.ts

@@ -0,0 +1,69 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { ThemeType } from '../../types/theme';
+import { 
+  LIGHT_THEME, 
+  DARK_THEME, 
+  PINK_THEME, 
+  BLUE_THEME, 
+  GREEN_THEME, 
+  PURPLE_THEME,
+  THEMES,
+  getNextTheme
+} from '../../utils/themes';
+
+// Ключ для хранения текущей темы в localStorage
+const THEME_STORAGE_KEY = 'journal-pl-theme';
+
+// Получаем сохраненную тему из localStorage или используем светлую тему по умолчанию
+const getSavedTheme = (): ThemeType => {
+  if (typeof window !== 'undefined') {
+    const savedTheme = localStorage.getItem(THEME_STORAGE_KEY) as ThemeType | null;
+    if (savedTheme && THEMES.includes(savedTheme as ThemeType)) {
+      return savedTheme as ThemeType;
+    }
+  }
+  // По умолчанию используем светлую тему
+  return LIGHT_THEME;
+};
+
+interface ThemeState {
+  currentTheme: ThemeType;
+}
+
+const initialState: ThemeState = {
+  currentTheme: getSavedTheme(),
+};
+
+export const themeSlice = createSlice({
+  name: 'theme',
+  initialState,
+  reducers: {
+    setTheme: (state, action: PayloadAction<ThemeType>) => {
+      state.currentTheme = action.payload;
+      
+      // Сохраняем выбранную тему в localStorage
+      if (typeof window !== 'undefined') {
+        localStorage.setItem(THEME_STORAGE_KEY, action.payload);
+      }
+    },
+    cycleNextTheme: (state) => {
+      state.currentTheme = getNextTheme(state.currentTheme);
+      
+      // Сохраняем выбранную тему в localStorage
+      if (typeof window !== 'undefined') {
+        localStorage.setItem(THEME_STORAGE_KEY, state.currentTheme);
+      }
+    },
+  },
+});
+
+export const { setTheme, cycleNextTheme } = themeSlice.actions;
+
+// Селекторы для получения информации о текущей теме
+export const selectCurrentTheme = (state: { theme: ThemeState }) => state.theme.currentTheme;
+export const selectIsLightVariant = (state: { theme: ThemeState }) => 
+  [LIGHT_THEME, PINK_THEME, BLUE_THEME, GREEN_THEME].includes(state.theme.currentTheme);
+export const selectIsDarkVariant = (state: { theme: ThemeState }) => 
+  [DARK_THEME, PURPLE_THEME].includes(state.theme.currentTheme);
+
+export default themeSlice.reducer;