Investigate `AccentColorSelector` logic in conjunction with it's `BaseLayout` script

[AVGVSTVS96]

export const AccentColorSelector = () => {
  const isBrowser = typeof window !== 'undefined' && window.localStorage;
  const [selectedTheme, setSelectedTheme] = useState(() => {
    const storedTheme =
      isBrowser && window.localStorage.getItem('themeSwitcher');
    return storedTheme;
  });

  useEffect(() => {
    return () => {
      window.removeEventListener('storage', handleStorageChange);
    };
  }, []);

  const handleStorageChange = () => {
    const storedTheme = localStorage.getItem('themeSwitcher') || 'sky';

    if (isBrowser && storedTheme !== selectedTheme) {
      setSelectedTheme(storedTheme);
      document.documentElement.setAttribute('data-theme', storedTheme);
    }
  };

  isBrowser && window.addEventListener('storage', handleStorageChange);

  const handleThemeChange = (href: string) => {
    const theme = href.substring(1);
    setSelectedTheme(theme);
    localStorage.setItem('themeSwitcher', theme);
    document.documentElement.setAttribute('data-theme', theme);
  };

 </x-turndown>
  const storedThemeColor = localStorage.getItem('themeSwitcher');
  const theme = storedThemeColor || 'sky';
  document.documentElement.setAttribute('data-theme', theme);

[linear[bot]]

ASTRO-144 Investigate `AccentColorSelector` logic in conjunction with it's `BaseLayout` script