Remix this theme
Customize this theme by changing its colors and/or remixing it with design elements from other themes!
Color Jump to heading
Set the page theme to "Matter" from the top right to preview the following examples.
Floating Labels Jump to heading
This theme implements "floating labels" for wa-input
, wa-textarea
, wa-select
,
which makes labels look like placeholders when the input is empty, does not have an actual placeholder, and is not focused.
<wa-input label="What is your name?"></wa-input> <br> <wa-input label="What is your name?" appearance="filled"></wa-input>
Ripple Effect Jump to heading
This theme implements a ripple effect for buttons, including native buttons. Click on the following buttons to observe it:
<wa-button variant="brand">Button</wa-button> <button class="wa-brand">Button</button>
Customization Jump to heading
You can use several properties to customize the ripple effect.
These properties can be set on any ancestor, including the root element:
Property | Type | Default | Description |
---|---|---|---|
--wa-ripple-start-radius |
<length> |
0.1em |
The starting radius of the ripple effect. |
--wa-ripple-start-opacity |
<number> |
0.1 |
The starting opacity of the ripple effect. |
--wa-ripple-duration |
<time> |
calc(2 * var(--wa-transition-slow)) |
The duration of the ripple effect transition. |
Any of these can be used to disable the ripple effect:
--wa-ripple-start-radius: 0em;
--wa-ripple-start-opacity: 0;
--wa-ripple-duration: 0s;
These properties would only work on the button itself:
Property | Type | Default | Description |
---|---|---|---|
--wa-ripple-center-x |
<percentage> |
50% |
The x-coordinate of the ripple center point as a percentage of the button width. |
--wa-ripple-center-y |
<percentage> |
50% |
The y-coordinate of the ripple center point as a percentage of the button height. |
Ripple Center Point Jump to heading
By default the ripple effect starts from the center of the button. If you want it to start from the position the button was clicked, you can use this JS snippet:
document.addEventListener("mousedown", evt => { let target = evt.target; if (!target.matches?.('wa-button, button, .wa-button')) { return; } let rect = target.getBoundingClientRect(); let x = (evt.clientX - rect.left) / rect.width; let y = (evt.clientY - rect.top) / rect.height; target.style.setProperty("--mouse-local-x", x); target.style.setProperty("--mouse-local-y", y); });
How to use this theme Jump to heading
You can import this theme from the Web Awesome CDN.
Add the following code to the <head>
of your page:
<link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-alpha.12/dist/styles/themes/matter.css" />
Add the following code at the top of your CSS file:
@import url('https://early.webawesome.com/webawesome@3.0.0-alpha.12/dist/styles/themes/matter.css');
Dark mode Jump to heading
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> <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 class="wa-dark"> <head> <link rel="stylesheet" href="path/to/web-awesome/dist/styles/themes/matter.css" /> <!-- other links, scripts, and metadata --> </head> <body> <!-- page content --> </body> </html>
Detecting Color Scheme Preference Jump to heading
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
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.
Assuming the user's preference is in a variable called colorScheme
(values: auto
, light
, dark
),
you can use the following JS snippet to apply the wa-dark
class to the <html>
element accordingly:
const systemDark = window.matchMedia('(prefers-color-scheme: dark)'); const applyDark = function (event = systemDark) { const isDark = colorScheme === 'auto' ? event.matches : colorScheme === 'dark'; document.documentElement.classList.toggle('wa-dark', isDark); }; systemDark.addEventListener('change', applyDark); applyDark();