All files / hooks useThemeFromCookies.ts

100% Statements 15/15
100% Branches 4/4
100% Functions 3/3
100% Lines 14/14

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 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62  1x 1x   1x                                               1x 2x                 2x 2x 2x 2x   2x 2x                 2x 2x 2x            
import { type PaletteMode } from '@mui/material';
import { parseCookies } from 'nookies';
import { useEffect } from 'react';
 
import { useThemeStore } from '../stores/changeModeStore';
 
/**
 * Custom hook for synchronizing theme preferences between cookies and application state
 *
 * @description
 * Manages theme synchronization by:
 * - Reading theme preferences from cookies on initial load
 * - Applying theme settings to both state manager and DOM
 * - Supporting both color mode (light/dark) and high contrast mode
 *
 * @example
 * // Basic usage in component
 * useThemeFromCookies();
 *
 * @example
 * // With theme store access
 * const { mode } = useThemeStore();
 * useThemeFromCookies();
 *
 * @see useThemeStore For the underlying theme state management
 * @see PaletteMode For available theme modes
 * @see parseCookies For cookie parsing utility
 */
export const useThemeFromCookies = () => {
	const { setMode, setHighContrast } = useThemeStore();
 
	/**
	* Effect for initial theme synchronization
	* - Runs once on component mount
	* - Reads theme preferences from cookies
	* - Updates theme store with saved preferences
	* - Falls back to 'dark' mode if no preference exists
	*/
	useEffect(() => {
		const cookies = parseCookies();
		const initialMode = (cookies?.["createTheme"] as PaletteMode) ?? 'dark';
		const initialHighContrast = cookies?.["highContrast"] === 'true';
 
		setMode(initialMode);
		setHighContrast(initialHighContrast);
	}, [setMode, setHighContrast]);
 
	/**
	 * Effect for DOM theme synchronization
	 * - Runs once on component mount
	 * - Applies theme to document root for CSS variable usage
	 * - Ensures server-side and client-side rendering match
	 */
	useEffect(() => {
		const cookies = parseCookies();
		document.documentElement.setAttribute(
			'createTheme',
			cookies?.["createTheme"] || 'dark',
		);
	}, []);
};