Themes

Jump To:

Core configuration module for the themes system. Used to orchestrate custom property variations (e.g., light/dark modes).

Note: This system is intended for switching context values like colors, box-shadows, and borders. It is not recommended to use this for structural layout values like margins or padding. For responsive or structural changes, rely on the layout/breakpoint modules or component modifiers.

Demos

Theme Switching

Using the `theme-light` and `theme-dark` classes to change the visual context of a section.

Themed Content

This section changes its colors based on the applied theme class.

<div>
  <button class="button" data-ulu-theme-toggle='{ "target": "#theme-demo-box" }'>Toggle Theme</button>
<div id="theme-demo-box" class="demo-theme-box theme-light padding">
<h3 class="h3">Themed Content</h3>
<p>This section changes its colors based on the applied theme class.</p>
<button class="button">Themed Button</button>
</div>
</div>

Theme Inversion

The `theme-inverse` utility automatically applies the opposite theme (e.g., dark inside light) based on the current context.

Light Context

This box is automatically inverted to the dark theme because its parent is light.

<div class="demo-theme-box theme-light">
  <h3 class="h3">Light Context</h3>
  <div class="demo-theme-box theme-inverse padding margin-top">
    <p>This box is automatically inverted to the dark theme because its parent is light.</p>
    <button class="button">Inverted Button</button>
  </div>
</div>

Variables

$config

Variable Type: Map

Module Settings

$config: (
  "default" : "light",
  "color-schemes" : (),
  "inverses" : ()
);

File Information

File: _themes.scss
Group: themes
Type: variable
Lines (comments): 16-20
Lines (code): 21-25

Map Properties

Name	Type	Default	Description
default	String	"light"	The theme key output to :root
color-schemes	Map	()	Maps theme names to their corresponding valid CSS color-scheme value (e.g. ("high-contrast": "dark")). Note: If a theme name is literally "light" or "dark", it does not need to be mapped here.
inverses	Map	()	Maps theme names to their opposite theme name (e.g. ("light": "dark", "dark": "light")). Used to output the .theme-inverse utility.

$tokens

Variable Type: Map

The themes map

Format: ("property-name": ("light": value, "dark": value))

$tokens: ();

File Information

File: _themes.scss
Group: themes
Type: variable
Lines (comments): 27-29
Lines (code): 31-31

Mixins

set()

Mixin

Change modules $config

File Information

File: _themes.scss
Group: themes
Type: mixin
Lines (comments): 33-36
Lines (code): 38-40

Examples

@include ulu.themes-set(( "default" : "dark" ));

Parameters

Name	Type	Description
$changes	`Map`	Map of changes

Require

$config

set-tokens()

Mixin

Set the theme variations

File Information

File: _themes.scss
Group: themes
Type: mixin
Lines (comments): 42-51
Lines (code): 53-55

Examples

@include ulu.themes-set-tokens((
  "color-background": (
    "light": white,
    "dark": black
  )
));

Parameters

Name	Type	Description
$changes	`Map`	Map of theme variations to merge
$merge-mode	`String`	Merge mode see utils.map-merge() [null

Require

map-merge()
$tokens

declare()

Mixin

Outputs css vars for a specific type from a theme map

File Information

File: _themes.scss
Group: themes
Type: mixin
Lines (comments): 110-123
Lines (code): 125-132

Examples

Example usage

@include ulu.themes-set-tokens((
  "color-background": (
    "light": white,
    "dark": black
  )
));
:root {
  @include ulu.themes-declare("light");
}

:root {
  --color-background: white;
}

Parameters

Name	Type	Description	Default
$key	`String`	The key used to retrieve values from the map.
$tokens	`Map`	The map containing the values. Defaults to the internal $tokens map.	$tokens
$prefix	`String`	The optional prefix for CSS variables.

Require

Functions

get()

Function

Get a config option

File Information

File: _themes.scss
Group: themes
Type: function
Lines (comments): 57-63
Lines (code): 65-67

Examples

Example usage

.test {
  content: ulu.themes-get("default");
}

.test {
  content: "light";
}

Parameters

Name	Type	Description
$name	`String`	Name of property

Returns

Type	Description
*	Resolved value

Require

require-map-get()
$config

get-color-scheme()

Function

Helper function to safely get the color scheme

File Information

File: _themes.scss
Group: themes
Type: function
Lines (comments): 69-75
Lines (code): 77-91

Examples

Example usage

.test {
  content: ulu.themes-get-color-scheme("dark");
}

.test {
  content: "dark";
}

Parameters

Name	Type	Description
$theme-name	`String`	The name of the theme to lookup

Returns

Type	Description
String	Null

Require

get()

get-keys()

Function

Helper function to get all unique theme keys (e.g., 'light', 'dark') from the $themes map

File Information

File: _themes.scss
Group: themes
Type: function
Lines (comments): 93-94
Lines (code): 96-108

Returns

Type	Description
List	A list of all unique theme string keys

Require

$tokens