# 🌘 CSS Hack: Switching Dark - Light Environment Mode

**URL:** <https://community.glideapps.com/t/css-hack-switching-dark-light-environment-mode/84978>\
**Category:** Community Resources\
**Tags:** custom-css, tutorial, custom-code\
**Created:** [October 19, 2025, 10:17am UTC](https://community.glideapps.com/t/css-hack-switching-dark-light-environment-mode/84978 "2025-10-19T10:17:19Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [October 19, 2025, 10:17am UTC](https://community.glideapps.com/t/css-hack-switching-dark-light-environment-mode/84978/1 "2025-10-19T10:17:19Z")

</div>

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.

![ScreenRecording2025-09-30131621-ezgif.com-video-to-gif-converter](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/b/5be6290b250ceb653b88ee5169c9247fe1ce97b3.gif)

**How it works:**

1. Set your app’s base appearance to either _Dark_ or _Light_ under **Settings → Appearance**.

2. Create a flag column in your **User Profile** table that stores which button (Dark/Light) is currently active.

3. 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.

4. Use a **Glide variable** to override one environment style (Dark or Light, depending on your default).

5. 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:**

1. This method depends on Glide’s **current DOM structure** , which may change in future updates.

2. If your CSS includes many `!important` rules 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._