This CSS trick successfully switches between Dark and Light environments inside Glide — tested directly in the DOM (not in the custom CSS field). I’m not sharing the full code here since it’s quite long, but the concept is fully replicable.
How it works:
-
Set your app’s base appearance to either Dark or Light under Settings → Appearance.
-
Create a flag column in your User Profile table that stores which button (Dark/Light) is currently active.
-
Add an empty Rich Text component (for example with class name
"dark-mode") that acts as a flag element, and set its visibility to depend on the flag value — so it only appears in the DOM when the flag is active. -
Use a Glide variable to override one environment style (Dark or Light, depending on your default).
-
This CSS method doesn’t automatically affect AI components, but they might be adjusted to follow the same flag if configured accordingly.
This implementation is built entirely with Glide logic and advanced CSS targeting.
Disclaimer:
-
This method depends on Glide’s current DOM structure, which may change in future updates.
-
If your CSS includes many
!importantrules elsewhere, this code might not work as intended.
If you’re interested in using this system for your own Glide app, feel free to reach out.