wintercms / wn-tailwindui-plugin

Provides the TailwindUI-based modern backend skin for the Winter CMS backend
MIT License
15 stars 9 forks source link

Adds dark mode #23

Closed der-On closed 1 year ago

der-On commented 1 year ago

This adds a fully working dark mode with a dark mode toggle button in the account drop down menu and user preferences form. The dark mode settings is stored in backend user preferences.

This PR also updates to tailwind 3.2

CSS for setting dark mode was taken from https://github.com/WebVPF/wn-darkbackend-plugin

LukeTowers commented 1 year ago

I made some tweaks to the switching themes logic / interface:

Screen Shot 2023-01-11 at 2 17 06 PM Screen Shot 2023-01-11 at 2 11 44 PM Screen Shot 2023-01-11 at 2 12 18 PM

@der-On @webvpf this is looking great so far, there's just a few things that need to be fixed before we can get this merged and live for everyone :)

Black border on account dropdown in light mode:

Screen Shot 2023-01-11 at 2 11 44 PM

Ugly borders on dashboard widgets in dark mode:

Screen Shot 2023-01-11 at 2 12 05 PM

Blue menu item text color in dark mode:

Screen Shot 2023-01-11 at 2 12 28 PM Screen Shot 2023-01-11 at 2 13 16 PM

Insufficient contrast on buttons and lists in dark mode:

Screen Shot 2023-01-11 at 2 13 06 PM Screen Shot 2023-01-11 at 2 13 13 PM Screen Shot 2023-01-11 at 2 15 51 PM

Very broken styles on fancy layouts, see the Records form page on the Winter.Test plugin for testing

winter local_backend_winter_test_records_create winter local_backend_winter_test_records_create (1) winter local_backend_winter_test_records_create (2) winter local_backend_winter_test_records_create (3) winter local_backend_winter_test_records_create (4) winter local_backend_winter_test_records_create (5) winter local_backend_winter_test_records_create (6)

LukeTowers commented 1 year ago

@der-On could you post the screenshots of the previously identified problematic areas now that you've fixed them?

der-On commented 1 year ago

Bildschirmfoto_am_2023-01-12_um_14 44 22-fullpage Bildschirmfoto_am_2023-01-12_um_14 46 03-fullpage Bildschirmfoto_am_2023-01-12_um_14 46 08-fullpage

LukeTowers commented 1 year ago

@der-On I merged in some other fixes from #24, can you resolve the conflicts and recompile? Other than that it looks great! I'm excited to get this merged once the conflicts are resolved.

der-On commented 1 year ago

@LukeTowers Done!