Как добавить 2 палитры цветов для реализации темного режима в default theme styled components?

Question

[Alexander]

Как добавить 2 палитры цветов для реализации темного режима в default theme styled components?

const theme: DefaultTheme = {
  fonts: {
    primary: "'Exo 2', sans-serif",
    secondary: "'Ubuntu', sans-serif",
    bold: '',
  },
  palette: {
    primary: '#51D6EA',
    secondary: '#8d8d8d',
    text: {
      primary: '#4F5364',
      secondary: '#656567',
    },
    error: '#fe0000',
  },
  breakpoints: {
    xs: '0',
    sm: '576px',
    md: '768px',
    lg: '992px',
    xl: '1200px',
    xxl: '1400px',
  },
}
 export {theme}

TS

declare module 'styled-components' {
  export interface DefaultTheme {
    fonts: {
      primary: string
      secondary: string
      bold: string
    }
    palette: {
      primary: string
      secondary: string
      text: {
        primary: string
        secondary: string
      }
      error: string
    }
    breakpoints: {
      xs: string
      sm: string
      md: string
      lg: string
      xl: string
      xxl: string
    }
  }
}

Answer 1

[Alexander]

const light: IThemeMode = {
  bg: {
    primary: '#eff0f5',
    secondary: '#ffffff',
  },
  text: {
    primary: '#4F5364',
    secondary: '#656567',
  },
}

const dark: IThemeMode = {
  bg: {
    primary: '#000000',
    secondary: '#111111',
  },
  text: {
    primary: '#fbfbfc',
    secondary: '#656567',
  },
}

const theme: DefaultTheme = {
  fonts: {
    primary: "'Exo 2', sans-serif",
    secondary: "'Ubuntu', sans-serif",
    bold: '',
  },
  palette: {
    primary: '#51D6EA',
    secondary: '#8d8d8d',
    text: {
      primary: '#4F5364',
      secondary: '#656567',
    },
    error: '#fe0000',
  },
  breakpoints: {
    xs: '0',
    sm: '576px',
    md: '768px',
    lg: '992px',
    xl: '1200px',
    xxl: '1400px',
  },
}

export const lightTheme = { ...theme, ...light }
export const darkTheme = { ...theme, ...dark }

export function useDarkMode() {
  const [theme, setTheme] = React.useState<string>('light')
  const [mountedComponent, setMountedComponent] = React.useState<boolean>(false)
  const setMode = (mode: string) => {
    window.localStorage.setItem('theme', mode)
    setTheme(mode)
  }
  const themeToggler = () => {
    theme === 'light' ? setMode('dark') : setMode('light')
  }
  React.useEffect(() => {
    const localTheme: string | null = window.localStorage.getItem('theme')
    localTheme ? setTheme(localTheme) : setMode('light')
    setMountedComponent(true)
  }, [])
  return [theme, themeToggler, mountedComponent]
}

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ThemeStore>
      <Theme>
        <Component {...pageProps} />
      </Theme>
    </ThemeStore>
  )
}
export default MyApp

const ThemeContext = React.createContext<Partial<IContext>>({})

const ThemeStore: React.FC<{ children: ReactChild }> = ({ children }) => {
  const [theme, themeToggler, mountedComponent] = useDarkMode()
  if (!mountedComponent) return null

  return <ThemeContext.Provider value={{ themeToggler, theme, mountedComponent }}>{children}</ThemeContext.Provider>
}

export { ThemeStore, ThemeContext }

const Theme: React.FC<ITheme> = ({ children }) => {
  const { theme } = React.useContext(ThemeContext)
  const themeMode = theme === 'light' ? lightTheme : darkTheme
  return (
    <ThemeProvider theme={themeMode}>
      <GlobalStyles />
      {children}
    </ThemeProvider>
  )
}

export default Theme

const { theme, themeToggler } = React.useContext(ThemeContext)
<input checked={theme === 'dark'} onClick={themeToggler} type='checkbox/>