Function useSettingsState

packages/dev/s2-docs/src/SettingsProvider.tsx:28–61

()

}

export function useSettingsState() {
  // Store the "override" color scheme ('light', 'dark', or 'system')
  let [storedColorScheme, setStoredColorScheme] = useLocalStorage('colorScheme', 'system');
  let systemColorScheme = useSyncExternalStore(
    subscribeToColorScheme,
    getSystemColorScheme,
    getServerSnapshot
  );

  // Resolve the actual color scheme being used
  let colorScheme: ColorScheme =
    storedColorScheme === 'system' ? systemColorScheme : (storedColorScheme as ColorScheme);

  // Toggle between system preference and the "other" one
  let toggleColorScheme = useCallback(() => {
    if (storedColorScheme === 'system') {
      // Currently following system, switch to the opposite of system preference
      setStoredColorScheme(systemColorScheme === 'dark' ? 'light' : 'dark');
    } else {
      // Currently overriding, go back to system
      setStoredColorScheme('system');
    }
  }, [storedColorScheme, systemColorScheme, setStoredColorScheme]);

  let providerColorScheme: ColorScheme | undefined =
    storedColorScheme === 'system' ? undefined : (storedColorScheme as ColorScheme);

  return {
    colorScheme,
    toggleColorScheme,
    systemColorScheme,
    providerColorScheme
  };
}

export function SettingsContextProvider({children, elementType, locale}: SettingsProviderProps) {
  let {colorScheme, toggleColorScheme, systemColorScheme, providerColorScheme} = useSettingsState();