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
b1mind
b1mind10mo ago
Do you have an exmaple of what your trying to do? what you linked seems to be working and using perferse to swap images?
Skriti mož
Skriti mož10mo ago
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
clevermissfox
clevermissfox10mo ago
Do you have an example like in codepen so we can see the fill and stroke you’ve set
b1mind
b1mind10mo ago
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
Skriti mož
Skriti mož10mo ago
@clevermissfox @b1mind @capslookpl https://codepen.io/Goetzeiscool/pen/dyrVRxE hmm!!
b1mind
b1mind10mo ago
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
Skriti mož
Skriti mož10mo ago
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{ } }
b1mind
b1mind10mo ago
Unless we look at the browser defaults like -webkit-link I honestly think so and is what I would use/do
Skriti mož
Skriti mož10mo ago
don't even know what does are 😅
b1mind
b1mind10mo ago
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 😄
b1mind
b1mind10mo ago
Cause yea honestly this is not good feels even if it filled the arrow in
No description
b1mind
b1mind10mo ago
needs more, very least a drop shadow or different color than the text 🤔 idk
Caps-look
Caps-look10mo ago
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%
b1mind
b1mind10mo ago
I can get behind that Oh but in practice does it work? Nope 😦
b1mind
b1mind10mo ago
No description
b1mind
b1mind10mo ago
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.
Caps-look
Caps-look10mo ago
No description
Caps-look
Caps-look10mo ago
kinda works
b1mind
b1mind10mo ago
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
Caps-look
Caps-look10mo ago
the tree is the one I styled
b1mind
b1mind10mo ago
🤦‍♂️ but the arrows wrong?
Caps-look
Caps-look10mo ago
cause I didn't want to put them all in divs
b1mind
b1mind10mo ago
Maybe I'm just confused I'll bow out of this one, I already said what I would do 😄
Caps-look
Caps-look10mo ago
lazy me
b1mind
b1mind10mo ago
Well right but theirs takes current color for the fill so I was confused, as the arrow is inverted too
Caps-look
Caps-look10mo ago
now all are in containers
No description
Caps-look
Caps-look10mo ago
though there is a bit of a problem the dimensions of the divs are w40 h43 while svg 40,40
Skriti mož
Skriti mož10mo ago
Hmm, why is that
Caps-look
Caps-look10mo ago
no clue
clevermissfox
clevermissfox10mo ago
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
b1mind
b1mind10mo ago
you forgot anchor links* but 100% agree (side note: attributes are great for styling too)
Skriti mož
Skriti mož10mo ago
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; } }
clevermissfox
clevermissfox10mo ago
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.
Skriti mož
Skriti mož10mo ago
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
Want results from more Discord servers?
Add your server