:root {
  var-header-color: #06c;
}
h1 { background-color: var(header-color); }

:root {
  --header-color: #06c;
}
h1 { background-color: var(--header-color); }

colors: {
  body: '#ECEFF1',
  antiBody: '#263238',
  shared: {
    primary: '#1565C0',
    secondary: '#EF6C00',
    error: '#C62828',
    default: '#9E9E9E',
    disabled: '#E0E0E0',
  },
},

colors: {
  ...
  text: {
    lvl1: '#263238',
    lvl3: '#546E7A',
    lvl5: '#78909C',
    lvl7: '#B0BEC5',
    lvl9: '#ECEFF1',
  },
},

.theme-light {
  --body-color: #ECEFF1;
  --antiBody-color: #263238;
  --shared-primary-color: #1565C0;
  --shared-secondary-color: #EF6C00;
  --shared-error-color: #C62828;
  --shared-default-color: #9E9E9E;
  --shared-disabled-color: #E0E0E0;
  --text-lvl1-color: #263238;
  --text-lvl3-color: #546E7A;
  --text-lvl5-color: #78909C;
  --text-lvl7-color: #B0BEC5;
  --text-lvl9-color: #ECEFF1;
}
.theme-dark {
  --body-color: #263238;
  --antiBody-color: #ECEFF1;
  --shared-primary-color: #90CAF9;
  --shared-secondary-color: #FFE0B2;
  --shared-error-color: #FFCDD2;
  --shared-default-color: #BDBDBD;
  --shared-disabled-color: #616161;
  --text-lvl1-color: #ECEFF1;
  --text-lvl3-color: #B0BEC5;
  --text-lvl5-color: #78909C;
  --text-lvl7-color: #546E7A;
  --text-lvl9-color: #263238;
}

@media (prefers-color-scheme: dark) {
  body.theme-auto {
    --background-color: #111;
    --text-color: #f3f3f3;
  }
}
@media (prefers-color-scheme: light) {
  body.theme-auto {
    --background-color: #f3f3f3;
    --text-color: #111;
  }
}

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  body.classlist.add('theme-dark')
} else {
  body.classlist.add('theme-light')
}

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
    if (e.matches) {
        body.classlist.remove('theme-light')
        body.classlist.add('theme-dark')
    } else {
        body.classlist.remove('theme-dark')
        body.classlist.add('theme-light')
    }
});

.button {
  color: var(--text-lvl1-color);
  background: var(--shared-default-color);
  ...
  &:disabled {
    background: var(--shared-disabled-color);
  }
}
.button-primary {
  background: var(--shared-primary-color);
}
.button-secondary {
  background: var(--shared-secondary-color)
}

.appbar {
  display: flex;
  align-items: center;
  padding: 8px 0;
  color: var(--text-lvl9-color);
  background-color: var(--shared-primary-color);
}

body.classlist.remove('theme-light', 'theme-high')

body.classlist.add('theme-dark')

const savedTheme = localStorage.getItem('theme')
if (['light', 'dark', 'rose'].includes(savedTheme)) {
  body.classlist.remove('theme-light', 'theme-dark', 'theme-rose')
  body.classList.add(`theme-${savedTheme}`)
}

import { useState } from 'react'
import { ThemeProvider } from 'styled-components'
import themes from './theme'
const App = () => {
  const [theme, setTheme] = useState<'light' | 'dark'>('light')
  const onChangeTheme = (newTheme: 'light' | 'dark') => {
    setTheme(newTheme)
  }
  return (
    <ThemeProvider theme={themes[theme]}>
      // ...
    </ThemeProvide>
  )
}

useEffect(() => {
  if (window.matchMedia?.('(prefers-color-scheme: dark)').matches) {
    onChangeTheme('dark')
  }
}, [])

useEffect(() => {
  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
    if (e.matches) {
      onChangeTheme('dark')
    } else {
      onChangeTheme('light')
    }
  })
}, [])

import type { ButtonHTMLAttributes } from 'react'
import styled from 'styled-components'
interface StyledProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  fullWidth?: boolean;
  color?: 'primary' | 'secondary' | 'default'
}
const Button = styled.button<StyledProps>(({ fullWidth, color = 'default', theme }) => `
  color: ${theme.colors.text.lvl9};
  width: ${fullWidth ? '100%' : 'fit-content'};
  ...
  &:not(:disabled) {
    background: ${theme.colors.shared[color]};
    cursor: pointer;
    &:hover {
      opacity: 0.8;
    }
  }
  &:disabled {
    background: ${theme.colors.shared.disabled};
  }
`)
export interface Props extends StyledProps {
  loading?: boolean;
}
export default Button

import styled from 'styled-components'
const AppBar = styled.header(({ theme }) => `
  display: flex;
  align-items: center;
  padding: 8px 0;
  color: ${theme.colors.text.lvl9};
  background-color: ${theme.colors.shared.primary};
`)
export default AppBar

import { useState } from 'react'
import { ThemeProvider } from 'styled-components'
import themes from './theme'
const App = () => {
  const [theme, setTheme] = useState<'light' | 'dark'>('light')
  const onChangeTheme = (newTheme: 'light' | 'dark') => {
    setTheme(newTheme)
  }
  return (
    <ThemeProvider theme={themes[theme]}>
      <ThemeContext.Provider value={{ theme, onChangeTheme }}>
        ...
      </ThemeContext.Provider>
    </ThemeProvide>
  )
}

import { useContext } from 'react'
import Grid from '../../atoms/Grid'
import Container from '../../atoms/Conrainer'
import Button from '../../atoms/Button'
import AppBar from '../../atoms/AppBar'
import ThemeContext from '../../../contexts/ThemeContext'
const Header: React.FC = () => {
  const { theme, onChangeTheme } = useContext(ThemeContext)
  return (
    <AppBar>
      <Container>
        <Grid container alignItems="center" justify="space-between" gap={1}>
          <h1>
            Themization
          </h1>
          <Button color="secondary" onClick={() => onChangeTheme(theme === 'light' ? 'dark' : 'light')}>
            set theme
          </Button>
        </Grid>
      </Container>
    </AppBar>
  )
}
export default Header

...
function App() {
  const [theme, setTheme] = useState<'light' | 'dark'>('light')
  const onChangeTheme = (newTheme: 'light' | 'dark') => {
    localStorage.setItem('theme', newTheme)
    setTheme(newTheme)
  }
  useEffect(() => {
    const savedTheme = localStorage?.getItem('theme') as 'light' | 'dark' | null
    if (savedTheme && Object.keys(themes).includes(savedTheme)) setTheme(savedTheme)
    else if (window.matchMedia?.('(prefers-color-scheme: dark)').matches) {
      onChangeTheme('dark')
    }
  }, [])
  useEffect(() => {
    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
      if (e.matches) {
        onChangeTheme('dark')
      } else {
        onChangeTheme('light')
      }
    })
  }, [])
  return (
    ...
  )
}