Kevin Powell - Community•10mo 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•10mo 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
  }
}

ἔρως•10mo 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