Themes

Themes

dopaminejs-themes 1.0.2.

npm install dopaminejs-themes

Five named sets of CSS variables and a small engine that applies one to the page.

import { themeEngine } from 'dopaminejs-themes';

themeEngine.setTheme('neon');

What it does, and what it does not

setTheme sets --dopamine-* variables on the root element. That is all.

The core stylesheet (dopaminejs/style.css) does not read those variables, so setting a theme does not restyle the GameUI overlay. The variables are for your own CSS:

.my-panel {
    background: var(--dopamine-bg);
    color: var(--dopamine-text);
    border: 1px solid var(--dopamine-border);
    border-radius: var(--dopamine-border-radius);
    font-family: var(--dopamine-font);
}

To restyle the overlay itself, override its classes (.game-ui-overlay, .achievement-popup, .level-up-overlay) and use the variables there.

Importing has a side effect

Importing the package in a browser applies the modern theme at once. Import it only where you want the variables set.

Themes

modern, dark-cyberpunk, neon, retro, cute.

Variables

Variable	Use
--dopamine-primary, --dopamine-secondary	Accent colours
--dopamine-success, --dopamine-warning, --dopamine-error	Status colours
--dopamine-bg, --dopamine-bg-light	Backgrounds
--dopamine-text, --dopamine-text-dim	Text
--dopamine-border	Borders
--dopamine-shadow	Shadow colour
--dopamine-font	Font stack
--dopamine-border-radius	Corner radius
--dopamine-animation-speed	Transition time

API

Member	Notes
themeEngine	A ready instance
setTheme(name)	Applies the variables. An unknown name warns and changes nothing.
registerTheme(name, variables)	Adds a theme. A custom theme wins over a built-in of the same name.
getAvailableThemes()	Built-in names, then custom ones
getCurrentTheme()	The last name applied
Themes	The built-in variable maps
ThemeEngine	The class

A custom theme

import { themeEngine, Themes } from 'dopaminejs-themes';

themeEngine.registerTheme('brand', {
    ...Themes.modern,
    '--dopamine-primary': '#e06020',
    '--dopamine-font': '"Outfit", sans-serif'
});

themeEngine.setTheme('brand');

setTheme only sets the variables the theme lists. Spread a built-in first so a partial theme does not leave values from the previous one.

Change event

window.addEventListener('dopamine:theme-changed', (event) => {
    console.log(event.detail.theme);
});