kopia lustrzana https://github.com/shoelace-style/shoelace
68 wiersze
2.4 KiB
Markdown
68 wiersze
2.4 KiB
Markdown
# Theme
|
|
|
|
[component-header:sl-theme]
|
|
|
|
Themes change the visual appearance of components.
|
|
|
|
This component will activate a theme and apply its styles to everything inside. All themes must adhere to [theming guidelines](/getting-started/themes) and expose a class that follows the `sl-theme-{name}` convention.
|
|
|
|
To activate a theme, include the necessary stylesheet(s) and wrap your content in an `<sl-theme>` element. The theme to use is specified by the `name` prop.
|
|
|
|
```html
|
|
<link rel="stylesheet" href="your-theme.css">
|
|
|
|
<sl-theme name="dark">
|
|
<!-- Everything inside will use the dark theme -->
|
|
</sl-theme>
|
|
```
|
|
|
|
?> It's important to note that the default "light" theme isn't actually a theme — it's a set of design tokens and base styles that themes can use as a foundation to build upon. As such, it's not possible to opt in to the default theme using this component.
|
|
|
|
## Examples
|
|
|
|
### Dark Theme
|
|
|
|
To use the official dark theme, include its stylesheet per the instructions on the [themes page](/getting-started/themes) and activate it as shown in the example below. All design tokens and components will render accordingly.
|
|
|
|
```html preview
|
|
<div class="theme-overview">
|
|
<sl-theme name="dark">
|
|
|
|
<!-- Design tokens used inside <sl-theme> will reflect the theme's colors -->
|
|
<div style="background-color: var(--sl-color-gray-900); padding: var(--sl-spacing-xx-large);">
|
|
<!-- These are just some sample components to demonstrate -->
|
|
<sl-dropdown>
|
|
<sl-button slot="trigger" caret>Dropdown</sl-button>
|
|
<sl-menu>
|
|
<sl-menu-item>Item 1</sl-menu-item>
|
|
<sl-menu-item>Item 2</sl-menu-item>
|
|
<sl-menu-item>Item 3</sl-menu-item>
|
|
</sl-menu>
|
|
</sl-dropdown>
|
|
|
|
<sl-dialog label="Dialog">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
<sl-button slot="footer" type="primary">Close</sl-button>
|
|
</sl-dialog>
|
|
<sl-button>Open Dialog</sl-button>
|
|
|
|
<sl-checkbox>Check me</sl-checkbox>
|
|
</div>
|
|
</sl-theme>
|
|
</div>
|
|
|
|
<script>
|
|
(() => {
|
|
const container = document.querySelector('.theme-overview');
|
|
const dialog = container.querySelector('sl-dialog');
|
|
const openButton = dialog.nextElementSibling;
|
|
const closeButton = dialog.querySelector('sl-button[slot="footer"]');
|
|
|
|
openButton.addEventListener('click', () => dialog.show());
|
|
closeButton.addEventListener('click', () => dialog.hide());
|
|
})();
|
|
</script>
|
|
```
|
|
|
|
[component-metadata:sl-theme]
|