Jump To:

Themes

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.

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