DarkModeMixin

Lets a component automatically or explicitly configure itself for dark backgrounds

Overview

Purpose: Lets a component automatically or explicitly configure itself for dark backgrounds.

This mixin works at the beginning of the Elix render pipeline:

eventssetState → render DOM → post-render

Expects the component to provide:

  • setState method compatible with ReactiveMixin's setState.

Provides the component with:

  • darkMode state member and property that is true if the component should configure itself for a dark background, false if not.

Usage

import ReactiveMixin from 'elix/src/ReactiveMixin.js';
import DarkModeMixin from 'elix/src/DarkModeMixin.js';
class MyElement extends DarkModeMixin(ReactiveMixin(HTMLElement)) {}

Example

These two Carousel components are generally identical, except that the second has been given a dark background color, and will default to dark mode:

Mountain lake Terraced farm Winter trees Forest river Red panda Mountain lake Terraced farm Winter trees Forest river Red panda
Demo: The second carousel is on a dark background, so automatically takes on dark mode

Since the second carousel defaults to dark mode, its interior ArrowDirectionButton and PageDot elements will be set for dark mode. This entails using light foreground colors in all element states, including disabled, hover, and selected states.

API

Used by classes ArrowDirectionButton, CalendarMonthNavigator, Carousel, CarouselSlideshow, CarouselWithThumbnails, and PageDot.

darkMode property

True if the component should configure itself for display on a dark background; false if the component should assume a light background.

The default value of this property is inferred when the component is initially added to the page. The component will look up its hierarchy for an ancestor that has an explicit background color. If the color's lightness value in the HSL cylindrical-coordinate system is below 50%, the background is assumed to be dark and darkMode will default to true. If the color is lighter than that, or no explicit background color can be found, the default value of darkMode will be false.

Type: boolean