svg with color-scheme: dark light, automatic BUT BACKGROUND!
Hi, I have this website https://goetzeiscool.github.io/presernove-poezije/.
color-scheme: dark light; is used, so I don't have to set any variables for colors.
with the svg-s (for bottom navigation) having
svg path{
fill:currentColor
}
the svg-s also change color, which is what I want!
However!!!! The problem:
I want the transparent parts of the svg-s to have the opposite color of fill:currentColor, meaning that when the font/svg is white, the background should be the opposite color, black; and vice versa, which is based on hte color-scheme
34 Replies
Do you have an exmaple of what your trying to do? what you linked seems to be working and using perferse to swap images?
Yes, so the middle parts of the SVG are see-through
I want them to have a solid background
So they are not see through
But I also want this to be automatic with the color-scheme
But if I set a background color, it's not responsive to the color scheme automatically
Do you have an example like in codepen so we can see the fill and stroke you’ve set
Honestly I think you will need a @prefers rule and change it. You would need to add the background in the SVG if you wanted it there (not going to fill the viewBox) but then you would need to define the fill="color" which you could use a CSS custom property for.
Oh wait lets try a div xD
So the deal is this (from what I can tell)
color-scheme is going to deal with defaults
so the issue is you never really know what the bg/font colors would be
I have not tested so I'm semi guessing here but from what I can tell is that you could petentially get a different default on different OS/browser
I also think so
so in any case, it would be best to define a media query for prefered and have more control over everything?
@media (prefers-color-scheme: dark){
:root{
}
}
@media (prefers-color-scheme: light){
:root{
}
}
Unless we look at the browser defaults like
-webkit-link
I honestly think so and is what I would use/dodon't even know what does are 😅
its just a dirty way to use webkits default link color
for example
https://codepen.io/b1mind/pen/JjzrJqw
So instead of a hard coded value you can jam the browser defaults in there and let them fallback.
maybe*
color-scheme does kinda work with custom colors in away too though it seems. Like you could put a background that is dark on there and it would change currentColor light
O wait maybe I'm wrong ... i swear it did xD
Yea I'd just use prefers >.>;; (maybe with color-scheme as a meta tag for fallback)
Another "dirty" option would be just to give your nav a background 😄
Cause yea honestly this is not good feels even if it filled the arrow in
needs more, very least a drop shadow or different color than the text 🤔 idk
I just come up with 'dirty' solution:
put the svg in some container
have the container and svg have bg: currentColor, filter: invert(1)
and give the container border-radius: 50%
I can get behind that
Oh but in practice does it work?
Nope 😦
again cause color-scheme is going to use what ever defaults the OS/browser use
Keep in mind users CAN change these colors too
Yea I double down just use @prefers-color and know/control it.
kinda works
Right but they want it to fill, and its not the same color
its black not 121212 which my browser is defaulting to
Also inverts the svg path fill xD
As you see in your demo
the tree is the one I styled
🤦♂️
but the arrows wrong?
cause I didn't want to put them all in divs
Maybe I'm just confused I'll bow out of this one, I already said what I would do 😄
lazy me
Well right but theirs takes current color for the fill so I was confused, as the arrow is inverted too
now all are in containers
though there is a bit of a problem
the dimensions of the divs are w40 h43
while svg 40,40
Hmm, why is that
no clue
Without looking deeply at the code I do wonder could it have something to do with the specificity overriding values you declared on selectors that are ids vs others that are classes.
I refuse to use ids as selectors without putting them in a :where() {which still can create problems with specificity the other way} everything in the sheet then needs a :where then to keep specificity level. Or if I don’t want to give it a class I’ll use the attr selector [id=“svg-icon”] which keeps it level with classes .
For my workflow, IDs are for forms and a11y, data-attr for JS, classes for styling
you forgot anchor links* but 100% agree (side note: attributes are great for styling too)
ur right, I added a class for styling, because the styling is the same for all
previously I was thinking that if I style one thing, it should have an id, but if the style affects multiple elements, they should have a class
I still font really know about data-attr, will have to learn about them
So, now I ended doing what I did not want, but it seem that this is the best solution:
@media (prefers-color-scheme: light) {
.nav-btn {
background-color: white;
}
}
@media (prefers-color-scheme: dark) {
.nav-btn {
background-color: black;
}
}
If you use custom properties for the colors you want to change it’s very easy to update in those media queries. There are also filter : invert and filter hue-rotate that may be helpful to your goal.
actually, now I found out
that if I use JS to change the color scheme, the preffered still stays the same, and my
@media (prefers-color-scheme: light) {
.nav-btn {
background-color: white;
}
}
doesn't actually work