My dev machine is running Windows 10 pro and the system display settings are set to dark.
In Pinegrow itself I have the window theme set to Dark (gray).
Given that what setting does the Visual designer take it’s que from when it comes to display mode (light or dark)?
I ask because I’m experiencing an issue with a tailwind based project where the tailwind ‘dark:’ state does not appear to be being followed. Within the tailwind config darkMode is set to ‘media’ which means it should reflect my system settings.
In all honesty I suspect that I’ve well and truly corrupted this particular project but It doesn’t hurt to ask the basic question anyway as it would be nice to know.
I’ve been working on a project that needs to switch between dark and light modes, and it’s been a bit of a challenge in Pinegrow since there isn’t an easy way to switch the theme in the preview window. Until now, I thought the request and mockup for a theme switcher was silly, but now I’m actually starting to think it would be helpful.
I have to admit that this is a limitation at present. I have my own machine settings set to favour Dark mode whenever that is provide by whatever application I’m using. I also rather like the fact that Tailwind supports dark Themes out of the box as it were and , something I hadn’t realised until I read Refactoring UI that the Tailwind colours were designed specifically to make dark / light switching much easier to design for.
I have a feeling though that this may find itself caught up in the tailwind.config bit that has been referred to elsewhere. For the time being I have stuck to using the external build process and setting Darkmode: ‘media’ in the config so that it just picks up the machine settings. What experimentation I’ve done to date seems to have this working well with WordPress sites. The thing that was of most use though was reading the section on colours in Refactoring UI. Refactoring UI
Hey, I thought I’d resurrect this topic since I’m working on a project with light and dark color schemes. Right now, I don’t see a good way to tell Pinegrow to display the preview canvas using anything other than the system’s color scheme or by using a color switcher control on the page.
It would be great to have a simple button in the Pinegrow UI to emulate the prefers-color-scheme light/dark rather than force users to change it through their OS or to dig into the Chrome dev tools > Rendering > Emulate CSS Media Features setting.
