👋 CSS smarties, help please? Test was showing up white on light mode background. I saw it on mobile, but a few days ago a friend reported the same on macbook. just now I changed the text color in dark mode to black + now it’s showing up correctly (with the light mode background).
BUT WHY.
annie's micro(b)log ok I just learned that the media is about screen size, so that’s clears up one part but:
- why was it pulling the font color from dark mode but not the background color? i assume that’s what was happening b/c when I changed the font color in dark mode it ‘fixed’ it
2. if i take out that @media prefers…. could I change the font color in dark mode back to what it was (light) and not create the ghost text experience again ?
Greg Moore TLDR - The issue is just a naming error with your background CSS property. Change –background: to background for it to work.
Your list is good and declaring these with :root is no problem. Standard CSS properties, like background, won’t work with the double hyphens because they already exist and can’t be turned into a custom CSS variable. Basically, you only use the double hyphens to create and define custom CSS variables that don’t exist. (Example: –text: )
Greg Moore Forgot to note two things:
Once you fix the background property, you’ll want to change your dark mode text color back to white.
Your CSS also has a background-color set in the body. You’ll want to comment out or delete that line so it doesn’t conflict with your :root definitions at the top.
Greg Moore I think I made the longest explanation of “delete these two hyphens” ever. 🤣 Hopefully it helped more than confused. (I’m supposed to “know this” but it took me a bit to figure out where the conflict was.)
annie's micro(b)log @gregmoore oh I’m really glad you explained it, though. I’m trying to actually learn a little bit as I mess around lol