Styling#
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#
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#
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');"
/>