Styling
Using Themes

Using themes

Themes are a set of predefined keys which should be used whenever the color should be dynamic based on the current active theme. They are used to customize component styles to fit the specific aesthetic of a brand or product. Lualtek UI provides two themes, light and dark, both combined into a single css file.

How to use themes

Themes are activated by importing the css file inside your project you have import both themes in your application because they are interchangable using react properties. Once you include the file all the theme keys will be available as custom properties, eg. var(--global-foreground).

// import the default theme
import "@lualtek/themes/web";
// import the pro alternative theme
import "@lualtek/themes/web/pro";

This file contains both the light and dark variants which are activated based on the data-theme attribute:

:root,
[data-theme="light"] {
  /* light theme values */
}
 
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* dark theme values */
  }
}
 
[data-theme="dark"],
:root[data-theme="dark"] {
  /* dark theme values */
}

The above CSS works this way:

  • light theme: activated when data-theme is set to light
  • dark theme: activated when data-theme is set to dark
  • light/dark: automatically swapped based on the user's system preferences when data-theme is not "light" or "dark", or when there is not the attribute at all.

Once you have imported the themes, all the keys you find here become available as css custom properties. Here is an example of how to use them to build a theme-aware user interface:

/* text and background color are swapped based on the active theme */
.CustomText {
  color: var(--global-foreground);
  background-color: var(--global-background);
}

Advanced usage

If needed, you can also import the json format of the theme and use the theme keys inside javascript, however this is not recommended as you should use css strings whenever possible.

// Import default light theme
import DefaultLightTheme from "@lualtek/themes/web/light.json";
 
export default () => (
  <div style={{ color: DefaultLightTheme["dimmed-5"] }}>I'm dimmed</div>
  /* Use style={{ color: 'var(--dimmed-5)' }} whenever possible */
);

⚠️

JSON themes are only meant to be used inside javascript for special use cases, you still need to import the css version to enable the themes in your app's ui

Theme switching

To switch between light and dark theme you just have to add the data-theme attribute to the document root, or, you can add it on any element on the page, everything inside the element with the attribute will use the theme declared.

Taking this example:

<!DOCTYPE html>
<!--
Everything that is not "light" or "dark"
will use the system preferences.
By using "auto" the document will use the light or dark theme
based on the system preference.
-->
<html data-theme="auto">
  <body>
    <div>I'm light</div>
 
    <!-- Everything inside .Hero will use the dark theme -->
    <div class="Hero" data-theme="dark">I'm dark</div>
  </body>
</html>

Providing the UI pattern to switch the theme, and handling the attribute application, is up to the consumer.

LayersCSS Utilities