I am playing around with prefers-color-scheme in CSS, because my projects look yucky in dark mode! I’m going to continue to play around with it, but it’s not working very well…maybe it’s not meant to be as specific as I am trying to make it? Does anyone have experience with this? Should we just be designing for something that will look good both ways?
Also, I’m looking for a way to view what I’m styling in dark mode. I’m using the Dark Reader Firefox add-on, but can I toggle between light and dark mode in Devtools? I think maybe Miguel Useche mentioned this in his Devtools presentation?
2 Likes
In most cases you should only focus on one type of styling, when you style in most cases you will define a background color for body which will not let anyone switch to dark mode.
Furthermore it’s totally imposible to make a general design for both dark and light mode.
Why you ask? Well because of contrast.
The colors that standout in the dark won’t standout in the light and vice versa, and it’s also true for being beautiful.
No expects you to find out some colors that can stand out in both light and dark, as even if there may be some color which work, but those won’t give you much flexibility and designing is all about flexibility.
You can however make two deferent layouts by using a css variables to save the colors used in your layout in one place then add some functionality, that will change those variables to some other color when dark mode is enabled.
As a designer you should only think of one layout and one type of colouring at one time or your layout won’t turn out as great as it could be. And after you are done with that make other layouts and colour schemes. You can also do this element by element work and finish one element and add every layout and color scheme that element might have then move on. No other stretegy is as effective as the strategies I mentioned.
Hope this helps.
2 Likes
Thanks for your reply, I appreciate it. I guess I wasn’t clear about “designing for both light and dark,” what I meant was if you designed something in a default light mode that would not look bad if it did get switched over to dark mode. I had a pale yellow in one of my projects that turned to a yucky brown in dark mode and I was sore about it. I do realize it’s completely flipping the contrast.
I have had some success with two style sheets and the prefers-color-scheme media query, but I"ll have a look at variables as well. Thanks!
Hmm… I see, so you were having difficulty choosing colors.
For any dark background I think the hues of red, redis orange, blue works fine but the best would be plain dark grey as used in many IDEs, these colours seems to work great when darkened and or unsaturated to an extended amount, though some manual testing may be required.
As for the text, the best would be white for the best contrast but any light hue lightened moderately should work. Some examples may be yellow, light yellow, orange, yellowish orange, light blue, sky, green, lime etc. All of them should work fine, but after choosing a color you should refer to colour wheel and colour theory to choose the others.
Like when choosing lime or green, you should have sky, yellow or a shade of bluish green.
Hope this helps a little.
1 Like