Resources

Theme

Our themes make it easy to apply the right environment. Dark or light? It depends on how immersive the experience is.

Web
React Native
Android
Apple
Other

Switcher

The theme switcher serves as the underlying mixin used for other theme mixins. It also allows you to theme css properties not currently covered by the other specific theme mixins below.

@include theme-switchter($light, $dark, $property);

Parameters

$light

color

Default value: null

The color for light environments.

$dark

color

Default value: null

The color for dark environments.

$property

css property

Default value: null

The CSS property you want the $light and $dark paramenters to apply.

Color

@include theme-color($light, $dark, $auto-switch);

Parameters

$light

color

Default value: $color-le-text-default

The type color for light environments.

$dark

color

Default value: null

The the color for dark environments.

$auto-switch

bool

Default value: true

Setting to false opts out of auto switching based on $light argument. Set this to false when you want to customize the switch between light and dark.

Notes

  • The auto-switch is configured to automatically choose the appropriate dark environment color, if you have passed in one of the $color-le-text- variables.

Background Color

The theme background mixin is used to switch the background color of an element based on whether its in a dark or light environment.

@include theme-bg($light, $dark);

Parameters

$light

color

Default value: null

The background color for light environments..

$dark

color

Default value: null

The background color for dark environments.

Border Color

@include theme-bg($light, $dark, $auto-switch);

Parameters

$light

color

Default value: null

The border color for light environments.

$dark

color

Default value: null

The border color for dark environments.

$auto-switch

bool

Default value: true

Turns auto switching off or on.

Notes

  • The auto-switch is configured to automatically choose $color-de-divider, if you have passed $color-le-divider for the $light parameter.