Themes

Jump To:

Output base themes stylesheets

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: (
  "output-inverse": true,
  "fake-invert-color": black,
  "fake-invert-filter": invert(1) hue-rotate(180deg) saturate(0.7),
  "token-color": "color-type",
  "token-background-color": null,
  "token-warnings" : true,
);

File Information

File: _themes.scss
Group: themes
Type: variable
Lines (comments): 14-21
Lines (code): 23-30

Map Properties

Name	Type	Default	Description
output-inverse	Boolean	true	Whether to output the `.theme-inverse` utility and corresponding inverse variables
fake-invert-color	Color	black	The fallback text color applied to elements using the fake inversion utilities. Note: This should be the color that, when inverted, results in the desired theme color.
fake-invert-filter	String	invert(1) hue-rotate(180deg) saturate(0.7)	The filter applied to elements using the fake inversion utilities.
token-color	String	"color-type"	The token name used for the `color` property on theme classes.
token-background-color	String	null	The token name used for the `background-color` property on theme classes. This is not included by default (normally we don't want to set a specific background color but if you do add the background-color token name from the theme)
token-warnings	Boolean	true	Since this is an opinionated stylesheet we warn if you have "token-color" set but it's key is not found in the theme. If this is intentional

Mixins

set()

Mixin

Change modules $config

File Information

File: _themes.scss
Group: themes
Type: mixin
Lines (comments): 32-33
Lines (code): 35-37

Parameters

Name	Type	Description
$changes	`Map`	Map of changes

Require

$config

styles()

Mixin

Outputs base theme variables and classes

File Information

File: _themes.scss
Group: themes
Type: mixin
Lines (comments): 46-49
Lines (code): 51-193

Examples

@include ulu.base-themes-styles();

Parameters

Name	Type	Default	Description
$root-selector	`String`	:root	Top-level selector for default theme, can be adjusted for things like building an editor stylesheet where these are wrapped

Require

-token-warning
get()

Functions

get()

Function

Get a config option

File Information

File: _themes.scss
Group: themes
Type: function
Lines (comments): 39-40
Lines (code): 42-44

Parameters

Name	Type	Description
$name	`String`	Name of property

Require

$config