Function ColorSwitch

Source

• Source code

export const ColorSwitch = ({ targetId, skipSystem, size, ...props }: ColorSwitchProps) => {
  const {
    setColorSchemePreference,
    resolvedColorScheme: rcs,
    colorSchemePreference: csp,
  } = useTheme(targetId);
  const toggleColorScheme = () => {
    switch (csp) {
      case "dark":
        setColorSchemePreference("light");
        break;
      case "light":
        setColorSchemePreference(skipSystem ? "dark" : "system");
        break;
      case "system":
      default:
        setColorSchemePreference("dark");
        break;
    }
  };
  return (
    <button
      className={["nthul--color-switch", rcs, csp === "system" ? "system" : ""].join(" ")}
      data-testid="color-switch"
      {...props}
      onClick={toggleColorScheme}
      // @ts-expect-error -- setting custom attribute
      style={{ "--size": `${size}px` }}
      type="button"
    />
  );
};
Copy