nrshapiro
commented
3 years ago @bakerac4 - you had a busy couple of days!
Much nicer...some minor issues in my quick look:
1) triangle icons next to Most Cited, etc. disappeared. 2) blue text is pretty but might be a bit low contrast against the gray. Experiment a bit with this. I just tried a quick less saturated color, per various suggestions in those docs, and it looks a bit more contrasty (though it might be the font itself...so experiment a bit)
I am no expert, but I use dark mode on Opera and in apps and on other sites. Unlike those, the current theme is definitely high contrast, but that wasn't the primary goal of dark mode.
Most dark mode apps and sites I've used are not full-on-black backgrounds with stark white text. That might qualify as a high contrast design, but it's hard to use and not very pleasing (at least to me subjectively). The idea is to make it both beautiful and dark. I hope that's not asking too much, but I'm happy to help if I can.
Here's what I'm seeing in your dark mode:
I just did a quick color play with your dark mode in Photoshop, to show an example of a non-black dark mode...it's less jarring, but it's no where near pretty like other website examples I hope to show.
As the css-tricks.com site says, a full black background with bright white text can be jarring.
Tips I found that seem sound.
Best practices for dark mode design — There are certain processes that need to work properly when creating dark mode UI. After all, you want your product to kick-ass, right? Let’s check off all the boxes on our dark mode best practices checklist:
Don’t go too dark Book publishers don’t use pure white paper because the contrast with black ink is too stark. It makes you squint and can lead to headaches. The same goes for digital devices. Steer clear of pure black. It’s hard on the eyes to look at a high contrast screen. Good dark mode colors are shades of grey combined with desaturated colors.
Have proper contrast Dark mode backgrounds have to be dark enough to show white text. The suggestion from Google Material Design is to use a text-to-background contrast level of at least 15.8:1.
Desaturate your colors Keep away from fully saturated colors on dark backgrounds. The shades often seem to “vibrate” when viewed on dark surfaces. Instead, use desaturated colors like pastels and muted colors—shades that have grey and white added.
Also, consider adjusting your brand’s color palette. Your company’s blue might read differently on black than on white. Colors in dark mode often have to be tweaked to elicit the same response you’d get in light mode.
Use the right “on” colors What’s an “on” color? One that shows up on top of elements and key surfaces. “On” colors are usually used for lettering. Dark mode UI default “on” color is pure white (#FFFFFF). Don’t use it. #FFFFFF appears to vibrate when viewed against dark backgrounds. Go with a light grey.
Don’t just reverse If you’re switching to dark mode from standard mode, there are probably valuable visual cues in the original theme. Don’t simply invert the colors to get your dark theme. You might be turning colors that had a psychological purpose into meaningless muted colors. Be intentional about your color selection.
Get deep The higher a layer is, the lighter it should be. This will create a visual hierarchy in dark mode that goes from the most used elements in your display to the least.
I'll paste some screens I think show very beautiful dark themes.
Some resources: https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/ https://uxdesign.cc/dark-mode-ui-design-the-definitive-guide-part-1-color-53dcfaea5129
Nice mobile examples: https://twitter.com/steveschoger/status/1151160261170126850/photo/1