Function ColorSchemeToggle

packages/dev/s2-docs/pages/s2/home/Header.tsx:46–86

()

});

function ColorSchemeToggle() {
  let {colorScheme, toggleColorScheme, systemColorScheme} = useSettings();
  let isOverriding = colorScheme !== systemColorScheme;
  let label = isOverriding
    ? `Using ${colorScheme} mode (press to follow system)`
    : `Using system ${systemColorScheme} mode (press to switch)`;
  let ref = useRef<HTMLButtonElement>(null);
  let isDark = colorScheme === 'dark';

  return (
    <Button
      ref={ref}
      aria-label={label}
      onPress={toggleColorScheme}
      className={renderProps => colorSchemeToggleStyles(renderProps)}
      style={pressScale(ref)}>
      <span className={iconContainerStyles}>
        <Contrast
          styles={whiteIconStyle}
          UNSAFE_style={{
            position: 'absolute',
            inset: 0,
            opacity: isDark ? 0 : 1,
            transform: isDark ? 'rotate(-90deg) scale(0.5)' : 'rotate(0deg) scale(1)',
            transition: 'opacity 200ms ease-out, transform 200ms ease-out'
          }}
        />
        <Lighten
          styles={whiteIconStyle}
          UNSAFE_style={{
            position: 'absolute',
            inset: 0,
            opacity: isDark ? 1 : 0,
            transform: isDark ? 'rotate(0deg) scale(1)' : 'rotate(90deg) scale(0.5)',
            transition: 'opacity 200ms ease-out, transform 200ms ease-out'
          }}
        />
      </span>
    </Button>
  );
}

export default function HomeHeader() {
  const [searchOpen, setSearchOpen] = useState(false);