Skip to main content

Styling

The CSS file provided here uses the default light theme. You can override the CSS variables to change the appearance of elements.

Dark Theme​

The code above will load the light theme. If you want to use the dark theme instead, update the stylesheet as shown below and add <html class="sl-theme-dark"> to your page.

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/themes/dark.css"
/>

Light & Dark Theme​

If you want to load the light or dark theme based on the user’s prefers-color-scheme setting, use the stylesheets below. The media attributes ensure that only the user’s preferred theme stylesheet loads and the onload attribute sets the appropriate theme class on the <html> element.

<link
  rel="stylesheet"
  media="(prefers-color-scheme:light)"
  href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/themes/light.css"
/>
<link
  rel="stylesheet"
  media="(prefers-color-scheme:dark)"
  href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/themes/dark.css"
  onload="document.documentElement.classList.add('sl-theme-dark');"
/>