KPC
Kevin Powell - Community•4mo ago
Stroudy

: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
reddogg476•4mo 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
  }
}
ἔρως
ἔρως•4mo 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
Want results from more Discord servers?
Add your server
More Posts
CSS Margins HelpHello All, I'm still learning the basics of CSS and am having trouble with my code. Forwhatever reasremove unused dependencies? Importance?Just wondering if unused dependencies (in package.json) effect anything other than install time (andposition absolute element is underneath other elementim trying to create a dropdown component in react, the dropdown whose position is relative has a buhow to set image for domain when paste into socialsi want add image when i paste link website into facebook , it will show image , web that i use deploDynamic scroll with fade in/outI am attempting to create a dynamic scroll, where a single paragraph and corresponding image are disIs it possible to create this 3d button ?Hello community is my first post on this Chanel. I'm french guy and my English is not perfect 😉 I'mSecurity error, There are problems with the security certificate for this sitei get this error while opening the website from Instagram chat, anyone knows how to fix this ?How to customize default <input> date picker?Is there a way to edit the appearance of the default date picker? Right now, I'm just looking to chaPriority Plus NavigationHello, I am currently working on my portfolio site using react and I was wondering how someone mightIs there an efficient way to handle SVG usage in Svelte?Instead of this hideous block of code in the picture, is there an easier way to handle using an svg?