☀️Theme

Light & Dark mode.

How does it work?

The approach of light/dark theme in Sentre is pretty forward. We employ CSS Selector to realize the theme switch with pure css (or sass, less).

The current theme will be depicted by the body id. For example, the current theme is light, then <body id="light"/>. By contrast, <body id="dark">.

To use the body id as a trigger, you can follow the example below to switch the text color corresponding to the current theme.

// index.css
#light .text-color {
  color: "black";
}
#dark .text-color {
  color: "white";
}

Theme Detector

For better development experience, the platform set up a postcss process for auto-detection and prepending the correct selector (i.e. either #light or #dark). To activate this feature, you only need to define your styles by less file and rename it to either [filename].light.less or [filename].dark.less; We also accept light.less or dark.less for short. The process will detect its extension and prepend the prefix to all styling within the file.

// light.less

// Before
.text-color {
  color: "black";
}
// After
#light .text-color {
  color: "black";
}
// dark.less

// Before
.text-color {
  color: "white";
}
// After
#dark .text-color {
  color: "white";
}
PreviousAdvanced UsageNextCustomizing Styles

Last updated