Kevin Powell - Community•9mo ago

:root most common customer variables

What are the most common custom properties you should put into the :root? Font-size Font-weight Colours what other ones do you use?

2 Replies

reddogg476•9mo ago

prefers-color-scheme is very useful for light and dark themes. It applies styles based on the user preference system, dark, light. like this:

:root {
  --clr-primary: #FFFFFF
  @media (prefers-color-scheme: dark)
  {
  --clr-primary: #000000
  }
}

:root {
  --clr-primary: #FFFFFF
  @media (prefers-color-scheme: dark)
  {
  --clr-primary: #000000
  }
}

ἔρως•9mo ago

you should put all the custom properties you want to have available in the entire website common ones include colors and font sizes and some dimentions (like the gap size, margins, border radius, ...) also, if you use videos and dialogs, you should pass these to the ::backdrop pseudo-element, as that one doesn't inherit anything from the parent

Gaming

Programming

:root most common customer variables