Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | 1x 1x 1x 1x 1x 1x 2x 2x 2x 2x 2x 1x 1x 1x 1x 1x 1x | import { create } from "zustand";
import { createJSONStorage, persist } from "zustand/middleware";
import {
THEME_MODE_STORE_IDENTIFIER,
ThemeModeStore,
} from "~/types/ThemeModeStore";
/**
* A Zustand store for managing the theme mode state of the application.
* The store persists the theme mode (light or dark) in localStorage.
*
* @example
* ```typescript
* const toggleThemeMode = useThemeModeStore((state) => state.toggleMode);
*
* // Usage with a React button to toggle the theme mode
* <button onClick={toggleThemeMode}>Toggle Theme</button>
* ```
*/
export const useThemeModeStore = create<ThemeModeStore>()(
persist(
(set, get) => ({
/**
* Indicates whether the theme is set to light mode.
* @type {boolean}
*/
isLight: true,
/**
* Toggles the theme between light and dark.
* Updates the `isLight` state accordingly.
*/
toggleMode: () => {
set({ isLight: !get().isLight });
},
}),
{
name: THEME_MODE_STORE_IDENTIFIER,
storage: createJSONStorage(() => localStorage),
},
),
);
|