Kevin Powell - CommunityKP-C
Kevin Powell - Community•15mo ago•
47 replies
snxxwyy

theme system

Hey, what would ya'll recommend as a good method to go about creating themes for a site? I had the idea of applying variables to html and having a data attribute toggle along with prefers-color-scheme (or lightdark()) e.g.
:root {
  --bg-light: ...;
  --bg-dark: ...;
}

@media (prefers-color-scheme: light) {
  html {
    --button-bg: var(--bg-light)
  }
}

@media (prefers-color-scheme: dark) {
  html {
    --button-bg: var(--bg-dark)
  }
}

html[data-light] {
  --button-bg: var(--bg-light);
}

html[data-dark] {
  --button-bg: var(--bg-dark);
}

I'm not sure if this is a good maintainable way of doing something like this though. I'd appreciate any insight. Thanks in advance
Was this page helpful?