# 🎨 CSS Hack: Role-Based App Themes

**URL:** <https://community.glideapps.com/t/css-hack-role-based-app-themes/85185>\
**Category:** Community Resources\
**Tags:** custom-css, tutorial\
**Created:** [October 31, 2025, 2:11am UTC](https://community.glideapps.com/t/css-hack-role-based-app-themes/85185 "2025-10-31T02:11:55Z")\
**Posts on this page:** 3\
**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 31, 2025, 2:11am UTC](https://community.glideapps.com/t/css-hack-role-based-app-themes/85185/1 "2025-10-31T02:11:55Z")

</div>

Here’s a simple dynamic CSS trick to make your Glide app’s theme automatically change based on user roles — like _admin_, _member_, _vip_ or _banned_.  
By declaring global CSS variables and using the `:is()` selector to shorten rules — together with `:has()` for data-driven conditions — you can keep your CSS clean, dynamic, and highly scalable.

![ScreenRecording2025-11-01112758-ezgif.com-video-to-gif-converter](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/a/da0ff00da5f63fd1ba0f5d795fd01709fc28b565.gif)

🌎 **1. Global Variable Declaration**  
Define role-based color variables that your app can reference dynamically.

```auto
/* Global variable declaration */
#root:has(.admin) {
  --theme-color: #2F6783;
  --theme-color-light: rgb(85, 137, 166);
}

#root:has(.member) {
  --theme-color: #8247A0;
  --theme-color-light: rgb(163, 115, 191);
}

#root:has(.vip) {
  --theme-color: #D9A441;
  --theme-color-light: rgb(237, 206, 129);
}

#root:has(.banned) {
  --theme-color: #555;
  --theme-color-light: #999;
}

```

⚙ **2. Data-Driven Theme Application**  
Apply the declared variables to UI elements based on detected user roles.

```auto
/* Data-driven theme application */
#page-root:has(:is(.admin, .member, .vip, .banned)) #nav-root > div {
  --container-bg-color: var(--theme-color);
}

#page-root:has(:is(.admin, .member, .vip, .banned)) .accent-bg,
#page-root:has(:is(.admin, .member, .vip, .banned)) .accent,
#page-root:has(:is(.admin, .member, .vip, .banned)) .user-controls-accent {
  background: var(--theme-color);
}

#screen:has(:is(.admin, .member, .vip, .banned)) {
  --app-color-accent: var(--theme-color);
}

#page-root:has(:is(.admin, .member, .vip, .banned)) .mapboxgl-marker path {
  fill: var(--theme-color);
}

#page-root:has(:is(.admin, .member, .vip, .banned)) {
  --gv-accent: var(--theme-color);
  --gv-text-accent: var(--theme-color);
  --gv-text-contextual-accent: var(--theme-color-light);
}

```

🧩 **3. Example HTML element inside your Rich Text component**  
Dynamically apply one of the following elements in your Rich Text component according to the user profile data.

```auto
<div class="member"></div> or
<div class="vip"></div> or
<div class="admin"></div> or
<div class="banned"></div> or
<div class="admin banned"></div>

```

This will trigger the corresponding `.member`, `.vip`, `.admin`, or `.banned` logic above and switch your app’s theme color instantly.

* * *

📖 **Read more:**  
Main method and concept explained in 🧠 [CSS Hack: Dynamic CSS in Glide](https://community.glideapps.com/t/css-hack-dynamic-css-in-glide/85080)

✨ Inspired by @Robert_Petitto’s question about reducing repetitive CSS code.

---

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [October 31, 2025, 10:33am UTC](https://community.glideapps.com/t/css-hack-role-based-app-themes/85185/2 "2025-10-31T10:33:55Z")

</div>

Good work!

---

<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:** [November 1, 2025, 6:45am UTC](https://community.glideapps.com/t/css-hack-role-based-app-themes/85185/3 "2025-11-01T06:45:43Z")

</div>

💡 **Update note:**  
Turns out you can actually skip `:is()` — `:has()` already supports multiple selectors separated by commas.  
So this works perfectly fine too:

```css
#page-root:has(.admin, .member, .vip, .banned) .target

```

* * *

🧩 **Revision**

```css
/* Data-driven theme application */
#page-root:has(.admin, .member, .vip, .banned) #nav-root > div {
  --container-bg-color: var(--theme-color);
}

#page-root:has(.admin, .member, .vip, .banned) :is(.accent-bg, .accent, .user-controls-accent) {
  background: var(--theme-color);
}

#screen:has(.admin, .member, .vip, .banned) {
  --app-color-accent: var(--theme-color);
}

#page-root:has(.admin, .member, .vip, .banned) .mapboxgl-marker path {
  fill: var(--theme-color);
}

#page-root:has(.admin, .member, .vip, .banned) {
  --gv-accent: var(--theme-color);
  --gv-text-accent: var(--theme-color);
  --gv-text-contextual-accent: var(--theme-color-light);
}

```

:is() is best used for multiple targets (elements you want to style the same way)