Skip to content

CSS Variables and Theming

Jump to bottom
60plus edited this page Apr 13, 2026 · 1 revision

CSS Variables and Theming

How Theme CSS Works

  1. Plugin defines skins in frontend_get_theme() with CSS variable values
  2. User selects skin in Settings > Appearance
  3. GD sets data-theme and data-skin attributes on <html>
  4. Your CSS rules activate based on these selectors

HTML Attributes

Attribute Set by Example
data-theme Theme store data-theme="neon-horizon"
data-skin Theme store data-skin="nh-cyber"
data-animations Theme store data-animations="true"
data-ambient Theme store data-ambient="true"
data-grid Theme store data-grid="true"

CSS Selectors

/* Scope to your theme (always use this!) */
[data-theme="my-theme"] .my-class { }

/* Skin-specific colors */
:root[data-skin="blue"] {
  --pl: #2563eb;
  --pl-light: #60a5fa;
  --pglow: rgba(37, 99, 235, .4);
  --pglow2: rgba(37, 99, 235, .15);
  --bg: #0a0a1a;
  --bg2: #0f0f25;
  --bg3: #141430;
  --text: rgba(255, 255, 255, .87);
  --muted: rgba(255, 255, 255, .45);
}

/* Theme + skin combo */
[data-theme="my-theme"][data-skin="sunset"] .accent { }

Standard CSS Variables

All themes should define these variables per skin:

Variable Purpose Example
--pl Primary color #00d4ff
--pl-light Light primary #4de8ff
--pl2 Secondary (gradients) #7b2fff
--pglow Primary glow (shadows) rgba(0, 212, 255, .4)
--pglow2 Subtle glow rgba(0, 212, 255, .15)
--bg Background #05050f
--bg2 Secondary bg #0a0a1a
--bg3 Tertiary bg #0f0f25
--text Main text rgba(255,255,255,.87)
--muted Secondary text rgba(255,255,255,.45)
--glass-bg Glass panel bg rgba(10,10,20,.5)
--glass-border Glass panel border rgba(255,255,255,.08)

Theme Settings -> CSS Variables

Settings defined in frontend_get_theme().settings[] with cssVar field are auto-applied to :root:

{"key": "glassBlur", "type": "range", "default": 20, "unit": "px", "cssVar": "--glass-blur-px"}

When user changes value to 30:

  • :root gets inline style --glass-blur-px: 30px
  • gd-theme-updated event fires on <html>

Reading CSS Variables in JS

function getCssVar(name, fallback) {
  const val = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
  return val || fallback;
}

gd-theme-updated Event

Fires whenever any theme setting changes:

document.documentElement.addEventListener('gd-theme-updated', () => {
  // Re-read CSS vars and update effects
  const blur = parseFloat(getCssVar('--glass-blur-px', '20'));
  applyGlassBlur(blur);
});

Glass Style Pattern

GD uses a consistent glass morphism pattern:

.my-panel {
  background: color-mix(in srgb, var(--pl) 20%, transparent);
  backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid color-mix(in srgb, var(--pl) 30%, transparent);
  border-radius: 12px;
}

Never use solid var(--pl) backgrounds - always use color-mix() with transparency.

Clone this wiki locally