How to copy the dark theme files in v8.3?

The light and dark themes no longer have folders in the file structure for them.

The issue with switching themes by changing the session theme prop in the client is that this unloads all of the styles and loads the new ones, causing the client to go to an unstyled state in the interim, which looks unprofessional. It also means that you can't apply a nice animation to the changeover to fade from one to the other.

To solve this and use a standard method that other websites employ, you can include the dark theme variable value overrides within the one theme styles, and toggle the dark overrides class on and off (JS Injection Hack Usefuls (JavaScript) - #50 by nminchin)

However, in order to do this, you need to move the dark style variable and class overrides into your main theme and prefix each selector to also require a "dark" class, but with these root theme folders now MIA, you have to grab these from v8.1 which may be outdated now and in the future.

So, how can we pull out these files?

Better yet, are there any plans in the future to support toggling dark mode (and other modes like colourblind) either via toggling a dark class on the root HTML element such as mentioned, or using the data-theme attribute method (better support for more than 2 themes) so that the entire styling isn't unloaded/reloaded?

(The current stylesheet swap used is described by copilot as this:


Although it's more of a hybrid since the dark theme inherits from the light theme files..)

1 Like