search

ady624 / webCoRE

webCoRE is a web version of CoRE
GNU General Public License v3.0
251 stars 984 forks source link

Added dark mode (experimental) #112

Closed tyron closed 3 years ago

tyron commented 3 years ago

Experimentation with Dark Mode for webCoRE UI. Some tweaks are still needed, specially on overlay and dialog windows. This is a draft to get feedback as well.

Current implementation detects the system-wide preference from user and uses as default, until the user switches manually. From that on, the user-preferred will be honoured.

I used CSS custom variables extensively for the switch, which means support for webCoRE would have to be dropped on older browsers (https://caniuse.com/css-variables). Not even the old CSS would work on those browsers.

For webCoRE logo and text marks, I just assumed a color that looked nice. Please let me know if there's an official layout to be used over dark backgrounds. I basically updated the SVG files from #333 to #CCC while keeping the blues. In the end, I duplicated the SVG files (adding a suffix for -light.svg and -dark.svg) but also kept the old files in-place, in case they are being referenced elsewhere (like in the forums). If that's not needed, we can remove the original SVG files.

Some screenshots for reference below. The colors on the editor are based on Solarized theme. I kept the colors from light theme as the originals, but we could reconcile them in the future if we want -- one of the benefits of Solarized is that you can keep all the accent colors and just invert their base colors and it will still be readable.

Screen Shot 2020-12-17 at 4 47 10 PM Screen Shot 2020-12-17 at 5 03 34 PM Screen Shot 2020-12-17 at 5 01 36 PM
idpaterson commented 3 years ago

Well done! Once I have time to do a quick code review I think the best way to move forward with this is to publish it on the staging dashboard so that people can try it out. Thanks for rebasing on dev, there are a number of changes staged already so that will make it easier to update.

So much to love about CSS variables, but we'll have to see if @ady624 can check analytics to weigh the impact of breaking the styles in older browsers. 🤞

tyron commented 3 years ago

Thanks @idpaterson, that sounds good. According to https://readium.org/readium-css/docs/CSS07-variables.html#fallback, it shouldn't be too hard to define a fallback value for IE11 (without support of themes). It gets a bit ugly though, so I'll leave it to @ady624 to weight in if we need to support older browsers. I feel like webCoRE user base is probably more on devs, and it's hard to think about one still using IE these days...

idpaterson commented 3 years ago

The code looks great! I haven't merged the branch yet since there may be some touch-up work but dark mode is available for anyone interested to preview at https://staging.webcore.co/

tyron commented 3 years ago

Great, thanks. For sure there's opportunity to improve; I'm not a designer nor have much experience with UX, so the contrast on some colors might not be ideal, specially in an Accessibility mindset.

I know Modals are the piece with most room for improvements; the dropdown menu hasn't been adapted, for example. I've seen newer versions of that component have support for light/dark modes already (starting with Bootstrap 4), but I tried bumping the version and it was a disaster, so it might be a bigger effort.

imnotbob commented 3 years ago

Nice.

There are a few drop downs that come back light/faded, but very nice!