mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 04:09:12 +00:00
e1bf5471bf
* fix filename * <wa-input> input + change (change not working) * compose that horribly misleading change event * use native blur/focus events * update checkbox * update color picker events * update color picker events * update radio group events * update button events * remove event options * update select events * update image comparer events * update icon button events * update slider events * update rating events * update radio events * update switch event * update textarea events * update radio button events * remove unused events * cleanup * fix react wrappers * fix react events for real this time * update changelog * add note * Update src/components/input/input.ts Co-authored-by: Lea Verou <lea@verou.me> * delete unused close event * use same event type * fix tests * remove wa- from events in docs and examples * fix comment * Update docs/docs/resources/changelog.md Co-authored-by: Lea Verou <lea@verou.me> --------- Co-authored-by: Lea Verou <lea@verou.me>
151 lines
4.9 KiB
Plaintext
151 lines
4.9 KiB
Plaintext
{% set hasSidebar = true %}
|
||
{% set hasOutline = true %}
|
||
{# {% set forceTheme = page.fileSlug %} #}
|
||
|
||
{% extends '../_includes/base.njk' %}
|
||
|
||
{% block header %}
|
||
<iframe src='{{ page.url }}demo.html' id="demo"></iframe>
|
||
|
||
<p id="mix_and_match" class="wa-gap-m">
|
||
<strong>
|
||
<wa-icon name="merge" slot="prefix"></wa-icon>
|
||
Remix
|
||
<wa-icon-button href="#remixing" name="circle-question" slot="suffix" variant="regular" label="How to use?"></wa-icon-button>
|
||
</strong>
|
||
<wa-select name="colors" label="Colors from…" size="small">
|
||
<wa-icon name="palette" slot="prefix" variant="regular"></wa-icon>
|
||
<wa-option value="">(Theme default)</wa-option>
|
||
<wa-divider></wa-divider>
|
||
{% for theme in collections.theme | sort %}
|
||
{% if theme.fileSlug !== page.fileSlug %}
|
||
<wa-option value="{{ theme.fileSlug }}">{{ theme.data.title }}</wa-option>
|
||
{% endif %}
|
||
{% endfor %}
|
||
</wa-select>
|
||
|
||
<wa-select name="palette" label="Palette" size="small">
|
||
<wa-icon name="swatchbook" slot="prefix" variant="regular"></wa-icon>
|
||
<wa-option value="">(Theme default)</wa-option>
|
||
<wa-divider></wa-divider>
|
||
{% for p in collections.palette | sort %}
|
||
{% if p.fileSlug !== palette %}
|
||
<wa-option value="{{ p.fileSlug }}">{{ p.data.title }}</wa-option>
|
||
{% endif %}
|
||
{% endfor %}
|
||
</wa-select>
|
||
|
||
<wa-select name="typography" label="Typography from…" size="small">
|
||
<wa-icon name="font-case" slot="prefix"></wa-icon>
|
||
<wa-option value="">(Theme default)</wa-option>
|
||
<wa-divider></wa-divider>
|
||
{% for theme in collections.theme | sort %}
|
||
{% if theme.fileSlug !== page.fileSlug %}
|
||
<wa-option value="{{ theme.fileSlug }}">{{ theme.data.title }}</wa-option>
|
||
{% endif %}
|
||
{% endfor %}
|
||
</wa-select>
|
||
|
||
|
||
</p>
|
||
<script>
|
||
document.querySelector('#mix_and_match').addEventListener('change', function(event) {
|
||
let selects = document.querySelectorAll('#mix_and_match wa-select');
|
||
let url = new URL(demo.src);
|
||
|
||
for (let select of selects) {
|
||
url.searchParams.set(select.name, select.value);
|
||
}
|
||
|
||
demo.src = url;
|
||
});
|
||
</script>
|
||
|
||
<h2>Default Color Palette</h2>
|
||
{% set paletteURL = '/docs/palettes/' + palette + '/' %}
|
||
{% set themePage = page %}
|
||
{% set page = paletteURL | getCollectionItemFromUrl %}
|
||
<div class="index-grid">
|
||
{% include 'page-card.njk' %}
|
||
</div>
|
||
{% set page = themePage %}
|
||
|
||
{% endblock %}
|
||
|
||
{% block afterContent %}
|
||
{% markdown %}
|
||
## How to use this theme
|
||
|
||
You can import this theme from the Web Awesome CDN.
|
||
|
||
{% set stylesheet = 'styles/themes/' + page.fileSlug + '.css' %}
|
||
{% include 'import-stylesheet-code.md.njk' %}
|
||
|
||
### Remixing { #remixing }
|
||
|
||
If you want to combine the **colors** from this theme with another theme, you can import this CSS file *after* the other theme’s CSS file:
|
||
|
||
{% set stylesheet = 'styles/themes/' + page.fileSlug + '/color.css' %}
|
||
{% include 'import-stylesheet-code.md.njk' %}
|
||
|
||
To use the **typography** from this theme with another theme, you can import this CSS file *after* the other theme’s CSS file:
|
||
|
||
{% set stylesheet = 'styles/themes/' + page.fileSlug + '/typography.css' %}
|
||
{% include 'import-stylesheet-code.md.njk' %}
|
||
|
||
<wa-callout variant="warning">
|
||
<wa-icon slot="icon" name="triangle-exclamation" variant="regular"></wa-icon>
|
||
Please note that not all combinations will look good — once you’re mixing and matching, you’re on your own!
|
||
</wa-callout>
|
||
|
||
## Dark mode
|
||
|
||
To activate the dark color scheme of the theme on any element and its contents, apply the class `wa-dark` to it.
|
||
This means you can use different color schemes throughout the page.
|
||
Here, we use the default theme with a dark sidebar:
|
||
|
||
```html
|
||
<html>
|
||
<head>
|
||
<link rel="stylesheet" href="path/to/web-awesome/dist/styles/themes/default.css" />
|
||
</head>
|
||
|
||
<body>
|
||
<nav class="wa-dark">
|
||
<!-- dark-themed sidebar -->
|
||
</nav>
|
||
|
||
<!-- light-themed content -->
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
You can apply the class to the `<html>` element on your page to activate the dark color scheme for the entire page.
|
||
|
||
```html
|
||
<html class="wa-dark">
|
||
<head>
|
||
<link rel="stylesheet" href="path/to/web-awesome/dist/styles/themes/{{ page.fileSlug }}.css" />
|
||
<!-- other links, scripts, and metadata -->
|
||
</head>
|
||
<body>
|
||
<!-- page content -->
|
||
</body>
|
||
</html>
|
||
```
|
||
### Detecting Color Scheme Preference
|
||
|
||
Web Awesome's themes have both light and dark styles built in.
|
||
However, Web Awesome doesn't try to auto-detect the user's light/dark mode preference.
|
||
This should be done at the application level.
|
||
As a best practice, to provide a dark theme in your app, you should:
|
||
|
||
- Check for [`prefers-color-scheme`](https://stackoverflow.com/a/57795495/567486) and use its value by default
|
||
- Allow the user to override the setting in your app
|
||
- Remember the user's preference and restore it on subsequent logins
|
||
|
||
Web Awesome avoids using the `prefers-color-scheme` media query because not all apps support dark mode, and it would break things for the ones that don't.
|
||
|
||
{% endmarkdown %}
|
||
{% endblock %}
|