Theme Designer Pro | CSS Variables Utility

THEEMA v1.0.0.87

LIGHT DARK

Surface Interaction

This DIALOG references surface1.

The BACKGROUND references
--overlay-main
--glass-blur.

These are controlled via the Overlay & Blur settings in the sidebar.

BRAND_LOGO

Surface 2

Surface 1 - Everything you see here is mapped to CSS variables.

INFO

CONFIRM

SUCCESS

WARN

DANGER

Status Text

--text-main

--text-muted

--text-highlight

--text-on-accent

--fontsize-tiny

--fontsize-small

--fontsize-main

--fontsize-large

--bg-header	--bg-header
Hover over me!	click me!
--bg-table-hover	--bg-table-hover

THEEMA - by TurnerWorks

Surfaces

Defaults

Canvas

Header

Surface 1

Surface 2

Input Bg

Table Hover

Brand & Accents

Defaults

Accent 1

Accent 1 Hover

Accent 2

Accent 2 Hover

Accent Mono

Accent Mono Hover

Borders

Defaults

Border Main

Border Focus

Border Thickness

Border Style

Border Radius (px)

Overlay & Blur

Defaults

Overlay Main

Glass Blur (px)

Status Colors

Defaults

Info

Info Hover

Confirm

Confirm Hover

Success

Success Hover

Warn

Warn Hover

Danger

Danger Hover

Typography

Defaults

Main Text

Muted Text

Highlight

On Accent

On Status

Font Family

Base Font Size (rem)

Shadow Config

Defaults

X Offset

Y Offset

Blur

Shadow Colour

Size & Spacing

Defaults

Padding (px)

Line Height

Instructions:

Export your theme for use in any project. Copy the CSS and JavaScript to integrate your styles. These examples show how to map your UI elements to the variables and build a working theme switcher.

1. Root Variables (CSS)

Copy the CSS Root variables, and paste at the top of your CSS file in your project (includes light and dark)

2. Example Usage (CSS Style)

Reference the CSS root variables in your styles, for example on body tag:

body {
        font-family: var(--font-family-main);
        background-color: var(--bg-canvas);
        color: var(--text-main);
        transition: background-color 0.3s ease;
    }

3. Toggle Button (HTML)

Add a button somewhere in your project that listens for the light/dark switch - or copy this example:

<button id="theme-toggle" class="theme-switch"  style="height: 31px;">Toggle Theme</button>

4. Logic (JavaScript)

Paste this javascript in your project to listen for the light/dark switch and apply the appropriate theme!

const toggleBtn = document.getElementById('theme-toggle');
    toggleBtn.addEventListener('click', () => {
        const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
        const newTheme = isDark ? 'light' : 'dark';
        document.documentElement.setAttribute('data-theme', newTheme);
        localStorage.setItem('user-theme', newTheme);
    });
    const savedTheme = localStorage.getItem('user-theme') || 'light';
    document.documentElement.setAttribute('data-theme', savedTheme);

Surface Interaction

Color Settings

Templates

🚀 Export Theme

Help & Documentation

Reset Theme?

Reset Section?

Adjust Opacity

Import

Clear All Templates?

Delete Template?