@coldsurf/ocean-road 1.13.2

package/src/contexts/ColorSchemeProvider.tsx

@@ -0,0 +1,154 @@
+import darkColorDesignTokens from '@coldsurfers/ocean-road-design-tokens/dist/json/color/variables-dark.json';
+import lightColorDesignTokens from '@coldsurfers/ocean-road-design-tokens/dist/json/color/variables-light.json';
+import {
+  type Context,
+  type PropsWithChildren,
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from 'react';
+import { type DarkColorDesignTokens, type LightColorDesignTokens, colors } from '../tokens';
+
+export type ColorScheme = 'light' | 'dark' | 'userPreference';
+
+export interface Theme extends DarkColorDesignTokens, LightColorDesignTokens {
+  name: 'lightMode' | 'darkMode';
+}
+
+export const lightModeTheme: Theme = {
+  name: 'lightMode',
+  ...lightColorDesignTokens,
+};
+export const darkModeTheme: Theme = {
+  name: 'darkMode',
+  ...darkColorDesignTokens,
+};
+
+export const generateCssVar = (themeName: Theme['name']) => {
+  const theme = themeName === 'lightMode' ? lightModeTheme : darkModeTheme;
+  let styles = '';
+  Object.keys(theme).forEach((key) => {
+    styles += `  --${key}: ${theme[key as keyof Theme]};\n`;
+  });
+  return styles;
+};
+
+const cssVar = (name: string) => `var(--${name})`;
+
+const darkColorKeys = Object.keys(darkColorDesignTokens);
+
+export const themeVariables = darkColorKeys.reduce(
+  (prev, curr) => {
+    const next = prev;
+    next[curr as keyof DarkColorDesignTokens] = cssVar(curr);
+    return next;
+  },
+  {} as Record<keyof DarkColorDesignTokens, string>
+);
+
+export const themeToStyles = (theme: Theme) => {
+  let styles = '';
+  Object.keys(colors).forEach((key) => {
+    styles += `  --${key}: ${colors[key as keyof typeof colors]};\n`;
+  });
+  if (theme.name === 'darkMode') {
+    Object.keys(darkColorDesignTokens).forEach((key) => {
+      styles += `  --${key}: ${darkColorDesignTokens[key as keyof typeof darkColorDesignTokens]};\n`;
+    });
+  }
+  if (theme.name === 'lightMode') {
+    Object.keys(lightColorDesignTokens).forEach((key) => {
+      styles += `  --${key}: ${lightColorDesignTokens[key as keyof typeof lightColorDesignTokens]};\n`;
+    });
+  }
+
+  return styles;
+};
+
+type ThemeContextValue = {
+  theme: Theme;
+  setTheme: (theme: ColorScheme) => void;
+};
+
+const ThemeContext: Context<ThemeContextValue> = createContext<ThemeContextValue>({
+  theme: lightModeTheme,
+  setTheme: () => {},
+});
+
+const getTheme = (colorScheme?: ColorScheme) =>
+  colorScheme === 'dark' ||
+  (colorScheme === 'userPreference' &&
+    typeof window !== 'undefined' &&
+    window.matchMedia &&
+    window.matchMedia('(prefers-color-scheme: dark)').matches)
+    ? darkModeTheme
+    : lightModeTheme;
+
+const sanitizeThemeScopeId = (id?: string) => {
+  if (!id) return undefined;
+  const safeId = id.replace(/[^A-Za-z0-9_-]/g, '');
+  return safeId || undefined;
+};
+
+const ColorSchemeProvider = ({
+  children,
+  colorScheme,
+  id,
+}: PropsWithChildren<{ colorScheme: ColorScheme; id?: string }>) => {
+  const [theme, setTheme] = useState(getTheme(colorScheme));
+  const safeId = sanitizeThemeScopeId(id);
+  const className = safeId ? `__oceanRoadTheme${safeId}` : undefined;
+  const selector = className ? `.${className}` : ':root';
+
+  const handlePrefChange = useCallback((e: MediaQueryListEvent) => {
+    setTheme(getTheme(e.matches ? 'dark' : 'light'));
+  }, []);
+
+  useEffect(() => {
+    setTheme(getTheme(colorScheme));
+    if (colorScheme === 'userPreference' && window.matchMedia) {
+      window.matchMedia('(prefers-color-scheme: dark)').addListener(handlePrefChange);
+      return () =>
+        window.matchMedia('(prefers-color-scheme: dark)').removeListener(handlePrefChange);
+    }
+    return undefined;
+  }, [colorScheme, handlePrefChange]);
+
+  return (
+    <ThemeContext.Provider
+      value={{
+        theme: theme,
+        setTheme: (theme: ColorScheme) => {
+          setTheme(getTheme(theme));
+        },
+      }}
+    >
+      <style
+        // biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation>
+        dangerouslySetInnerHTML={{
+          __html:
+            colorScheme === 'userPreference'
+              ? `${selector} {
+${themeToStyles(lightModeTheme)}
+}\n@media(prefers-color-scheme: dark) {
+  ${selector} {
+${themeToStyles(darkModeTheme)}
+  }
+}`
+              : `${selector} {
+${themeToStyles(theme)} }`,
+        }}
+      />
+      <div className={className}>{children}</div>
+    </ThemeContext.Provider>
+  );
+};
+
+export default ColorSchemeProvider;
+
+export const useColorScheme = () => {
+  const theme = useContext(ThemeContext);
+  return theme || lightModeTheme;
+};

package/src/css/global.css

@@ -0,0 +1,30 @@
+html,
+body {
+  padding: 0;
+  margin: 0;
+}
+
+body {
+  background-color: white;
+  color: black;
+}
+
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: rgb(24, 24, 31);
+    color: rgb(238, 238, 238);
+  }
+}
+
+a {
+  color: #2563eb;
+  text-decoration: none;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+h1 {
+  font-weight: 800;
+}

package/src/extensions/accordion/accordion.hooks.ts

@@ -0,0 +1,11 @@
+import { type Dispatch, type SetStateAction, useEffect, useState } from 'react';
+
+export const useAccordion = (): [string | null, Dispatch<SetStateAction<string | null>>] => {
+  const [accordionKey, setAccordionKey] = useState<string | null>(null);
+
+  useEffect(() => {
+    return () => setAccordionKey(null);
+  }, []);
+
+  return [accordionKey, setAccordionKey];
+};

package/src/extensions/accordion/accordion.tsx

@@ -0,0 +1,80 @@
+import styled from '@emotion/styled';
+import type { ReactNode } from 'react';
+import { useAccordion } from './accordion.hooks';
+
+const StyledLi = styled.li`
+    margin: 20px 0;
+`;
+
+const StyledDropdownWrapper = styled.div`
+    margin-top: 0.5rem;
+`;
+
+type AccordionRendererProps<ItemT> = {
+  accordionKey: string | null;
+  item: ItemT;
+  renderTrigger: (item: ItemT) => ReactNode;
+  renderExpanded: ({ selectedItem }: { selectedItem: ItemT }) => ReactNode;
+};
+
+const AccordionRenderer = <ItemT extends { accordionKey: string }>({
+  accordionKey,
+  item,
+  renderTrigger,
+  renderExpanded,
+}: AccordionRendererProps<ItemT>) => {
+  return (
+    <StyledLi>
+      {renderTrigger(item)}
+      {accordionKey === item.accordionKey && (
+        <StyledDropdownWrapper>
+          {renderExpanded({
+            selectedItem: item,
+          })}
+        </StyledDropdownWrapper>
+      )}
+    </StyledLi>
+  );
+};
+
+export type AccordionProps<ItemT> = {
+  data: ItemT[];
+  renderTrigger: (item: ItemT) => ReactNode;
+  renderExpanded: ({ selectedItem }: { selectedItem: ItemT }) => ReactNode;
+  customized?: ReactNode;
+};
+
+export const Accordion = <ItemT extends { accordionKey: string }>({
+  data,
+  renderTrigger,
+  renderExpanded,
+  customized,
+}: AccordionProps<ItemT>) => {
+  const [accordionKey, setAccordionKey] = useAccordion();
+  return (
+    <>
+      {data.map((item) => {
+        return (
+          <AccordionRenderer
+            key={item.accordionKey}
+            accordionKey={accordionKey}
+            item={item}
+            renderTrigger={(item) => (
+              // biome-ignore lint/a11y/useKeyWithClickEvents: <explanation>
+              <div
+                key={item.accordionKey}
+                onClick={() =>
+                  setAccordionKey((prev) => (prev === item.accordionKey ? null : item.accordionKey))
+                }
+              >
+                {renderTrigger(item)}
+              </div>
+            )}
+            renderExpanded={({ selectedItem }) => <>{renderExpanded({ selectedItem })}</>}
+          />
+        );
+      })}
+      {customized}
+    </>
+  );
+};

package/src/extensions/accordion/index.ts

@@ -0,0 +1 @@
+export * from './accordion';

package/src/extensions/app-header/app-header.hooks.ts

@@ -0,0 +1,94 @@
+import { breakpoints } from '@/utils';
+import { useEffect, useState, useSyncExternalStore } from 'react';
+import type { AnimatedHeaderAnimation } from './app-header.types';
+
+export function useHeaderScrollAnimation() {
+  const [animation, setAnimation] = useState<AnimatedHeaderAnimation>('show');
+
+  useEffect(() => {
+    let lastScrollTop = 0;
+    const onScroll = () => {
+      const currentScroll = window.pageYOffset || document.documentElement.scrollTop;
+      const diff = Math.abs(currentScroll - lastScrollTop);
+      if (diff >= 12) {
+        if (currentScroll > lastScrollTop) {
+          setAnimation('hide');
+        } else {
+          setAnimation('show');
+        }
+      }
+      lastScrollTop = currentScroll <= 0 ? 0 : currentScroll; // For Mobile or negative scrolling
+    };
+
+    window.addEventListener('scroll', onScroll);
+
+    return () => {
+      window.removeEventListener('scroll', onScroll);
+    };
+  }, []);
+
+  return { headerAnimation: animation };
+}
+
+type Listener = () => void;
+
+let isOpen = false;
+const listeners = new Set<Listener>();
+
+const notify = () => {
+  listeners.forEach((listener) => listener());
+};
+
+export const mobileMenuStore = {
+  getSnapshot: () => isOpen,
+
+  subscribe: (listener: Listener) => {
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+  },
+
+  open() {
+    if (!isOpen) {
+      isOpen = true;
+      notify();
+    }
+  },
+
+  close() {
+    if (isOpen) {
+      isOpen = false;
+      notify();
+    }
+  },
+};
+
+let initialized = false;
+
+function initMobileMenuEffects() {
+  if (initialized || typeof window === 'undefined') return;
+  initialized = true;
+
+  const handleResize = () => {
+    if (window.innerWidth > breakpoints.large) {
+      mobileMenuStore.close();
+    }
+  };
+
+  window.addEventListener('resize', handleResize);
+}
+
+export function useIsMobileMenuOpen() {
+  // 최초 1회만 effect 초기화
+  initMobileMenuEffects();
+  const isMobileMenuOpen = useSyncExternalStore(
+    mobileMenuStore.subscribe,
+    mobileMenuStore.getSnapshot,
+    () => false // SSR fallback
+  );
+
+  return {
+    isMobileMenuOpen,
+    openMobileMenu: mobileMenuStore.open,
+    closeMobileMenu: mobileMenuStore.close,
+  };
+}

package/src/extensions/app-header/app-header.tsx

@@ -0,0 +1,31 @@
+import styled from '@emotion/styled';
+import { type PropsWithChildren, memo } from 'react';
+import type { AnimatedHeaderAnimation } from './app-header.types';
+
+const HeaderContainer = styled.header<{ $animation: AnimatedHeaderAnimation; $zIndex?: number }>`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  transition: all 0.3s ease-in-out;
+  transform: translateY(${({ $animation }) => ($animation === 'show' ? '0' : '-100%')});
+  z-index: ${({ $zIndex }) => $zIndex ?? 100};
+`;
+
+export type AnimatedHeaderProps = PropsWithChildren<{
+  animation: AnimatedHeaderAnimation;
+  className?: string;
+  zIndex?: number;
+}>;
+
+export const AnimatedHeader = memo(
+  ({ animation, children, className, zIndex }: AnimatedHeaderProps) => {
+    return (
+      <HeaderContainer $animation={animation} className={className} $zIndex={zIndex}>
+        {children}
+      </HeaderContainer>
+    );
+  }
+);
+
+AnimatedHeader.displayName = 'AppHeader.AnimatedHeader';

package/src/extensions/app-header/app-header.types.ts

@@ -0,0 +1 @@
+export type AnimatedHeaderAnimation = 'show' | 'hide';

package/src/extensions/app-header/index.ts

@@ -0,0 +1,8 @@
+import { AnimatedHeader } from './app-header';
+import { useHeaderScrollAnimation, useIsMobileMenuOpen } from './app-header.hooks';
+
+export const AppHeader = {
+  useHeaderScrollAnimation,
+  useIsMobileMenuOpen,
+  AnimatedHeader,
+};

package/src/extensions/app-logo/app-logo.tsx

@@ -0,0 +1,40 @@
+import styled from '@emotion/styled';
+import { memo } from 'react';
+import { match } from 'ts-pattern';
+import appLogoChristmas from '../../../assets/app-logo-christmas.webp';
+import appLogoTransparent from '../../../assets/app-logo-transparent.webp';
+import appLogoWhiteBackground from '../../../assets/app-logo-white-background.webp';
+
+const createDataUrl = (base64Encoded: string) => {
+  return `url(${base64Encoded})`;
+};
+
+type LogoTheme = 'christmas' | 'transparent' | 'white-background';
+
+const StyledAppLogo = styled.div<{
+  $circle?: boolean;
+  $logoTheme: LogoTheme;
+}>`
+
+  background-image: ${({ $logoTheme }) => {
+    return match($logoTheme)
+      .with('christmas', () => createDataUrl(appLogoChristmas))
+      .with('transparent', () => createDataUrl(appLogoTransparent))
+      .with('white-background', () => createDataUrl(appLogoWhiteBackground))
+      .otherwise(() => createDataUrl(appLogoWhiteBackground));
+  }};
+  background-size: cover;
+  background-position: 50%;;
+  border-radius: ${({ $circle }) => ($circle ? '50%' : '12px')};
+`;
+
+interface Props {
+  type?: 'round' | 'square';
+  logoTheme: LogoTheme;
+}
+
+export const AppLogo = memo(({ type = 'round', logoTheme, ...otherProps }: Props) => {
+  return <StyledAppLogo $circle={type === 'round'} $logoTheme={logoTheme} {...otherProps} />;
+});
+
+AppLogo.displayName = 'AppLogo';

package/src/extensions/app-logo/index.ts

@@ -0,0 +1 @@
+export * from './app-logo';

package/src/extensions/app-store-button/app-store-button.tsx

@@ -0,0 +1,64 @@
+import { Button, Text } from '@/base';
+import { semantics } from '@/tokens';
+import styled from '@emotion/styled';
+import { memo } from 'react';
+import { match } from 'ts-pattern';
+import { BrandIcon } from '../brand-icon';
+
+const StyledAppStoreButton = styled(Button)`
+  border-radius: 32px;
+  background-color: ${semantics.color.background[1]} !important;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  width: fit-content;
+  margin-bottom: 1.5rem;
+
+  padding: 0.5rem 1rem !important;
+`;
+
+const StyledAppStoreLogo = styled(BrandIcon)`
+  width: 1.25rem;
+  height: 1.25rem;
+  color: ${semantics.color.foreground[1]};
+  fill: ${semantics.color.foreground[1]};
+`;
+
+const StyledAppStoreText = styled(Text)`
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: ${semantics.color.foreground[1]};
+  margin: unset;
+`;
+
+type Props = {
+  store: 'app-store' | 'google-play';
+};
+
+export const AppStoreButton = memo(({ store }: Props) => {
+  return (
+    <>
+      {match(store)
+        .with('app-store', () => {
+          return (
+            <StyledAppStoreButton variant="border">
+              <StyledAppStoreLogo brand="apple" />
+              <StyledAppStoreText as="p">iOS</StyledAppStoreText>
+            </StyledAppStoreButton>
+          );
+        })
+        .with('google-play', () => (
+          <StyledAppStoreButton variant="border">
+            <StyledAppStoreLogo brand="android" />
+            <StyledAppStoreText as="p">Android</StyledAppStoreText>
+          </StyledAppStoreButton>
+        ))
+        .exhaustive()}
+    </>
+  );
+});
+
+AppStoreButton.displayName = 'AppStoreButton';

package/src/extensions/app-store-button/index.ts

@@ -0,0 +1 @@
+export * from './app-store-button';

package/src/extensions/brand-icon/brand-icon.android.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { type Ref, type SVGProps, forwardRef, memo } from 'react';
+const SvgComponent = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" ref={ref} {...props}>
+    <title>{'Android'}</title>
+    <path d="M18.44 5.559c-.676 1.166-1.353 2.331-2.028 3.498-.037-.016-.074-.029-.111-.043a12.098 12.098 0 0 0-8.68.033C7.537 8.897 5.868 6.026 5.6 5.56a1.145 1.145 0 0 0-.141-.19 1.104 1.104 0 0 0-1.768 1.298c1.947 3.37-.096-.216 1.948 3.36.017.03-.495.263-1.393 1.017C2.9 12.176.452 14.772 0 18.99h24a11.728 11.728 0 0 0-.746-3.068 12.1 12.1 0 0 0-2.74-4.184 12.105 12.105 0 0 0-2.131-1.687c.66-1.122 1.312-2.256 1.965-3.385a1.108 1.108 0 0 0-.008-1.12 1.1 1.1 0 0 0-.852-.532c-.522-.054-.939.313-1.049.545zm-.04 8.46c.395.593.324 1.331-.156 1.65-.48.32-1.188.1-1.582-.493-.394-.593-.324-1.33.156-1.65.473-.316 1.182-.11 1.582.494zm-11.193-.492c.48.32.55 1.058.156 1.65-.394.593-1.103.815-1.584.495-.48-.32-.55-1.058-.156-1.65.4-.603 1.109-.811 1.584-.495z" />
+  </svg>
+);
+const ForwardRef = forwardRef(SvgComponent);
+const Memo = memo(ForwardRef);
+export default Memo;

package/src/extensions/brand-icon/brand-icon.apple.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { type Ref, type SVGProps, forwardRef, memo } from 'react';
+const SvgComponent = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" ref={ref} {...props}>
+    <title>{'Apple'}</title>
+    <path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701" />
+  </svg>
+);
+const ForwardRef = forwardRef(SvgComponent);
+const Memo = memo(ForwardRef);
+export default Memo;

package/src/extensions/brand-icon/brand-icon.google.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { type Ref, type SVGProps, forwardRef, memo } from 'react';
+const SvgComponent = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" ref={ref} {...props}>
+    <title>{'Google'}</title>
+    <path d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z" />
+  </svg>
+);
+const ForwardRef = forwardRef(SvgComponent);
+const Memo = memo(ForwardRef);
+export default Memo;

package/src/extensions/brand-icon/brand-icon.tsx

@@ -0,0 +1,22 @@
+import { type Ref, type SVGProps, memo } from 'react';
+import { match } from 'ts-pattern';
+import AndroidLogo from './brand-icon.android';
+import AppleLogo from './brand-icon.apple';
+import GoogleLogo from './brand-icon.google';
+
+interface Props extends SVGProps<SVGSVGElement> {
+  brand: 'apple' | 'google' | 'android';
+  ref?: Ref<SVGSVGElement>;
+}
+
+export const BrandIcon = memo(({ brand, ...svgProps }: Props) => {
+  const Component = match(brand)
+    .with('apple', () => <AppleLogo {...svgProps} />)
+    .with('google', () => <GoogleLogo {...svgProps} />)
+    .with('android', () => <AndroidLogo {...svgProps} />)
+    .exhaustive();
+
+  return Component;
+});
+
+BrandIcon.displayName = 'BrandIcon';

package/src/extensions/brand-icon/index.ts

@@ -0,0 +1 @@
+export * from './brand-icon';

package/src/extensions/color-scheme-toggle/color-scheme-toggle.tsx

@@ -0,0 +1,76 @@
+import { Button, Text } from '@/base';
+import { useColorScheme } from '@/contexts/ColorSchemeProvider';
+import styled from '@emotion/styled';
+import { memo, useCallback, useEffect } from 'react';
+
+const DarkLabelText = styled(Text)`
+  display: block;
+  html.dark & {
+    display: none;
+  }
+`;
+
+const DarkLabel = () => {
+  return <DarkLabelText>☀️</DarkLabelText>;
+};
+
+const LightLabelText = styled(Text)`
+  display: none;
+  html.dark & {
+    display: block;
+  }
+`;
+
+const LightLabel = () => {
+  return <LightLabelText>🌕</LightLabelText>;
+};
+
+type Props = {
+  onToggle?: (params: { setTheme: ReturnType<typeof useColorScheme>['setTheme'] }) => void;
+};
+
+export const ColorSchemeToggle = memo(({ onToggle }: Props) => {
+  const { setTheme } = useColorScheme();
+
+  const handleToggle = useCallback(() => {
+    onToggle?.({
+      setTheme: (theme) => {
+        window.__setPreferredTheme(theme);
+        setTheme(theme);
+      },
+    });
+  }, [onToggle, setTheme]);
+
+  useEffect(() => {
+    const darkModeMedia = window.matchMedia('(prefers-color-scheme: dark)');
+    function handleThemeChange(e: MediaQueryListEvent) {
+      // 초기에 유저가 브라우저를 통해 진입 후, 다크모드/라이트모드 변경이 있을시에만 ocean road theme 변경을 위해 실행
+      if (e.matches) {
+        // console.log('🌙 사용자 다크모드로 변경');
+        setTheme('dark');
+      } else {
+        // console.log('☀️ 사용자 라이트모드로 변경');
+        setTheme('light');
+      }
+    }
+    // 변화 감지 리스너 등록 (최초 감지는 하지 않음)
+    darkModeMedia.addEventListener('change', handleThemeChange);
+
+    return () => {
+      darkModeMedia.removeEventListener('change', handleThemeChange);
+    };
+  }, [setTheme]);
+
+  return (
+    <Button
+      onClick={handleToggle}
+      variant="transparent"
+      style={{ marginLeft: 'auto', fontSize: 20 }}
+    >
+      <DarkLabel />
+      <LightLabel />
+    </Button>
+  );
+});
+
+ColorSchemeToggle.displayName = 'ColorSchemeToggle';

package/src/extensions/color-scheme-toggle/index.ts

@@ -0,0 +1 @@
+export * from './color-scheme-toggle';