• Introduction
    • Why Liquid Oxygen
    • Getting started
      • React
      • Vue
  • Guides
    • CSS vs. Web Components
    • Component assets
    • Type checking and intellisense
    • Server-side rendering
    • Event handling
    • Form validation
    • Tailwind CSS integration
    • Design tokens
    • Testing
    • Sandbox applications
    • Troubleshooting
      • Popped-out element is rendered in wrong container
      • Failed to execute removeChild on Node
    • FAQ
    • Contributing
  • Globals
    • Animations
    • Border-radius
    • Colors
    • Focus
    • Fonts
    • Shadows
    • Spacings
    • Theming
    • Typography
  • Components
    • Accordion
      • Accordion Panel
      • Accordion Section
      • Accordion Toggle
    • Background Cells
    • Badge
    • Breadcrumbs
      • Crumb
    • Button
    • Card
      • Card Stack
    • Checkbox
    • Circular Progress
    • Context Menu
      • Menu
      • Menuitem
      • Menuitem Group
    • Cookie Consent
    • Header
    • Icon
    • Input
    • Input Message
    • Label
    • Link
    • Loading Indicator
    • Modal
    • Notice
    • Notification
    • Pagination
    • Progress
    • Radio Button
    • Screen Reader Live
    • Screen Reader Only
    • Select
      • Option
      • Option Group
    • Sidenav
      • Sidenav Accordion
      • Sidenav Back
      • Sidenav Header
      • Sidenav Heading
      • Sidenav Navitem
      • Sidenav Separator
      • Sidenav Slider
      • Sidenav Subnav
      • Sidenav Toggle Outside
    • Slider
    • Stepper
      • Step
    • Switch
      • Switch Item
    • Table
      • Table Body
      • Table Caption
      • Table Cell
      • Table Colgroup
      • Table Column
      • Table Footer
      • Table Head
      • Table Header
      • Table Row
      • Table Toolbar
    • Tabs
      • Tab
      • Tab List
      • Tab Panel
      • Tab Panel List
    • Toggle
    • Tooltip
    • Typography
  • Data Visualization
    • Getting Started
  1. How to apply a theme
  2. Theme inception
  3. CSS Custom Properties
    1. Examples
Globals Theming
(external link)

Theming #

Liquid comes with multiple themes for theming its UI components. Most of the examples in the documentation have a theme switch built in, which you can use to switch between the available themes. In the following examples this switch is turned off. Instead, the examples show how you can apply a theme yourself.

How to apply a theme #

You apply a theme by wrapping whatever needs to be themed in an element with a ld-theme-<themename> CSS class.

<div class="ld-theme-bubblegum">
  <ld-button>Text</ld-button>
</div>
<div class="ld-theme-bubblegum">
  <button class="ld-button">Text</button>
</div>
Text

Theme inception #

In rare cases you may want to have a theming element wrapped by another theming element. Liquid supports unlimited theme inception (nested themes). Here is an example of a two-level theme inception:

<div class="ld-theme-bubblegum" style="display: flex;">
  <ld-button>Text</ld-button>
  <div class="ld-theme-tea" style="display: flex;">
    <ld-button style="margin: 0 var(--ld-sp-16);">Text</ld-button>
    <div class="ld-theme-ocean">
      <ld-button>Text</ld-button>
    </div>
  </div>
</div>
<div class="ld-theme-bubblegum" style="display: flex;">
  <button class="ld-button">Text</button>
  <div class="ld-theme-tea" style="display: flex;">
    <button class="ld-button" style="margin: 0 var(--ld-sp-16);">Text</button>
    <div class="ld-theme-ocean">
      <button class="ld-button">Text</button>
    </div>
  </div>
</div>
Text
Text
Text

CSS Custom Properties #

You have access to CSS custom properties with a color value depending on the current theme:

--ld-thm-primary
--ld-thm-primary-active
--ld-thm-primary-focus
--ld-thm-primary-highlight
--ld-thm-primary-hover
--ld-thm-primary-alpha-low
--ld-thm-primary-alpha-lowest
--ld-thm-secondary
--ld-thm-secondary-active
--ld-thm-secondary-focus
--ld-thm-secondary-highlight
--ld-thm-secondary-hover
--ld-thm-success
--ld-thm-success-active
--ld-thm-success-focus
--ld-thm-success-highlight
--ld-thm-success-hover
--ld-thm-warning
--ld-thm-warning-active
--ld-thm-warning-focus
--ld-thm-warning-highlight
--ld-thm-warning-hover
--ld-thm-error
--ld-thm-error-active
--ld-thm-error-focus
--ld-thm-error-highlight
--ld-thm-error-hover

Examples #

The following examples illustrate the variables applied to background color within each theme:

Bubblegum #

Ocean #

Shake #

Solvent #

Tea #