Theming

Make it yours with CSS variables

DedrisFramework is built entirely on CSS custom properties. Change a handful of variables and every button, card, list and tab updates at once — no build step, no preprocessor, no recompilation. Theme the whole app from a single block of CSS.

How theming works

Every color, radius, shadow and font in the framework is exposed as a CSS variable on the :root selector. To re-theme your app, override the variables you care about in your own stylesheet — loaded after dedris.css. Because the cascade does the work, your overrides flow into every component automatically.

www/css/theme.css

/* Your overrides — loaded after dedris.css */
:root {
  --dx-primary: #e0457b;     /* brand color */
  --dx-accent:  #ffb020;
  --dx-radius:  18px;        /* rounder corners */
}

💡

Order matters. Link your theme.css after dedris.css in index.html so your variables win the cascade.

Design tokens

These are the variables you'll reach for most. Every one can be overridden globally or per-screen.

Brand & feedback colors

--dx-primary#6c4bf6

--dx-primary-dark#4f33d6

--dx-primary-light#8f78f9

--dx-accent#00c2a8

--dx-success#16b364

--dx-warning#f5a524

--dx-danger#f0436b

Surfaces & text

--dx-ink#15122b

--dx-ink-soft#4a4763

--dx-muted#6b6885

--dx-line#e7e4f2

--dx-bg#ffffff

--dx-bg-soft#f7f6fc

Shape & motion

Variable	Default	Controls
`--dx-radius`	14px	Default corner radius for cards, inputs, buttons.
`--dx-radius-sm`	9px	Tighter radius for small controls.
`--dx-radius-lg`	22px	Large radius for hero panels and CTAs.
`--dx-shadow`	0 8px 30px …	Standard elevation shadow.
`--dx-transition`	180ms …	Shared easing for hovers and toggles.

Live theme playground

Drag the controls and watch a screen re-theme in real time. Copy the generated CSS into your project to keep it.

Primary color

#6c4bf6

Accent color

#00c2a8

Corner radius

14px

Screen background

#f7f6fc

My App

Featured

Sunrise Trail

6.2 km · moderate · 2h

Harbor Loop

3.4 km · easy · 50 min

Start hike Save for later

generated theme.css

Dark mode

A dark theme is just a second set of variable values applied under a selector. The recommended pattern is a data-theme="dark" attribute on <html>, which you flip with a small script (and persist with localStorage). Tap the button below to preview the idea.

Aa Preview surface

www/css/theme.css

html[data-theme="dark"] {
  --dx-bg:       #120f25;
  --dx-bg-soft:  #1a1636;
  --dx-ink:      #f4f2fc;
  --dx-ink-soft: #cbc7e6;
  --dx-line:     #2d2856;
}

www/js/theme.js

// Restore the saved choice on launch
var saved = localStorage.getItem("theme");
if (saved) document.documentElement.setAttribute("data-theme", saved);

function toggleTheme() {
  var el = document.documentElement;
  var next = el.getAttribute("data-theme") === "dark" ? "light" : "dark";
  el.setAttribute("data-theme", next);
  localStorage.setItem("theme", next);
}

♿

Respect the user's OS setting with @media (prefers-color-scheme: dark) for the first visit, then let the toggle take over once they choose.

Styling individual components

Need to restyle just one component? Scope your overrides to its class. For example, give primary buttons a pill shape without touching anything else:

www/css/theme.css

.dx-btn--primary {
  border-radius: 999px;
  letter-spacing: .02em;
}

You can also theme a single screen by setting variables on a wrapper element — handy for a "premium" section that uses a different accent.

Typography

Swap the font stack by overriding --dx-font (UI) and --dx-mono (code). Load your webfont first, then point the variable at it.

www/css/theme.css

:root {
  --dx-font: "Manrope", system-ui, sans-serif;
}

Browse components → Explore icons