js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Decouple dark mode & theme, fixes #445 closes #385 (#457)

Browse Source 
Co-authored-by: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com>
This commit is contained in:
Lea Verou
2025-01-08 12:50:29 -05:00
committed by GitHub
parent 8541369ae1
commit 19042fcca4
25 changed files with 92 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
docs/_includes/base.njk
View File

@@ -76,10 +76,7 @@
newStylesheet.addEventListener("load", updateStylesheet)
document.documentElement.classList.toggle(
`wa-theme-${preset}-dark`,
isDark()
);
document.documentElement.classList.toggle(`wa-dark`, isDark());
</script>
</head>
<body class="layout-{{ layout | stripExtension }}">

5
docs/_layouts/blank.njk
View File

@@ -48,10 +48,7 @@
stylesheet.href = `/dist/styles/themes/${preset}.css`
document.documentElement.classList.toggle(
`wa-theme-${preset}-dark`,
isDark()
);
document.documentElement.classList.toggle(`wa-dark`, isDark());
</script>
</head>
<body class="layout-{{ layout | stripExtension }}">

3
docs/assets/scripts/color-scheme.js
View File

@@ -5,13 +5,12 @@
function setColorScheme(newColorScheme) {
colorScheme = newColorScheme;
localStorage.setItem('colorScheme', colorScheme);
const presetTheme = window.getPresetTheme();
// Update the UI
updateSelection();
// Toggle the dark mode class
document.documentElement.classList.toggle(`wa-theme-${presetTheme}-dark`, window.isDark());
document.documentElement.classList.toggle(`wa-dark`, window.isDark());
}
function updateSelection() {

2
docs/assets/scripts/preset-theme.js
View File

@@ -35,7 +35,7 @@
document.head.append(newStylesheet);
updateSelection();
document.documentElement.classList.toggle(`wa-theme-${presetTheme}-dark`, window.isDark());
document.documentElement.classList.toggle(`wa-dark`, window.isDark());
}
function updateSelection(container = document) {

4
docs/assets/styles/docs.css
View File

@@ -10,8 +10,8 @@
--wa-brand-grey: #30323b;
}
html.wa-theme-default-dark .only-light,
html:not(.wa-theme-default-dark) .only-dark {
.wa-dark .only-light,
.only-dark:not(.wa-dark, .wa-dark *) {
display: none;
}

22
docs/assets/styles/theme-headers.css
View File

@@ -4,7 +4,7 @@
*/
/* #region Default */
html[class*='wa-theme-default'] .preview-container {
html.wa-theme-default .preview-container {
container-name: default-theme;
}
@@ -59,7 +59,7 @@ html[class*='wa-theme-default'] .preview-container {
/* #endregion */
/* #region Migration */
html[class*='wa-theme-migration'] .preview-container {
html.wa-theme-migration .preview-container {
container-name: migration-theme;
}
@@ -139,7 +139,7 @@ html[class*='wa-theme-migration'] .preview-container {
/* #endregion */
/* #region Brutalist */
html[class*='wa-theme-brutalist'] .preview-container {
html.wa-theme-brutalist .preview-container {
container-name: brutalist-theme;
}
@@ -268,7 +268,7 @@ html[class*='wa-theme-brutalist'] .preview-container {
border: var(--wa-panel-border-width) var(--wa-panel-border-style) var(--wa-color-surface-border);
}
.wa-theme-brutalist-dark {
.wa-theme-brutalist.wa-dark {
& p a::before {
background: var(--wa-color-yellow-40);
}
@@ -332,7 +332,7 @@ html[class*='wa-theme-brutalist'] .preview-container {
/* #endregion */
/* #region Playful */
html[class*='wa-theme-playful'] .preview-container {
html.wa-theme-playful .preview-container {
container-name: playful-theme;
}
@@ -416,7 +416,7 @@ html[class*='wa-theme-playful'] .preview-container {
background-color: var(--wa-color-neutral-fill-quiet);
}
&:not(.wa-theme-premium-dark) .message-composer wa-card {
&:not(.wa-theme-premium.wa-dark) .message-composer wa-card {
--wa-color-neutral-fill-quiet: var(--wa-color-gray-90);
}
@@ -469,7 +469,7 @@ html[class*='wa-theme-playful'] .preview-container {
padding-block-end: var(--wa-space-xs);
}
.wa-theme-playful-dark {
.wa-theme-playful.wa-dark {
& .hero-background {
background: linear-gradient(180deg, var(--wa-color-green-60) 69.42%, var(--wa-color-green-30) 100%);
}
@@ -505,7 +505,7 @@ html[class*='wa-theme-playful'] .preview-container {
/* #endregion */
/* #region Active */
html[class*='wa-theme-active'] .preview-container {
html.wa-theme-active .preview-container {
container-name: active-theme;
}
@@ -578,7 +578,7 @@ html[class*='wa-theme-active'] .preview-container {
/* #endregion */
/* #region Premium */
html[class*='wa-theme-premium'] .preview-container {
html.wa-theme-premium .preview-container {
container-name: premium-theme;
}
@@ -652,7 +652,7 @@ html[class*='wa-theme-premium'] .preview-container {
background-color: var(--wa-color-neutral-fill-quiet);
}
&:not(.wa-theme-premium-dark) .message-composer wa-card {
&:not(.wa-theme-premium.wa-dark) .message-composer wa-card {
--wa-color-neutral-fill-quiet: var(--wa-color-base-95);
}
@@ -702,7 +702,7 @@ html[class*='wa-theme-premium'] .preview-container {
font-style: italic;
}
.wa-theme-premium-dark {
.wa-theme-premium.wa-dark {
& .message-composer .tools .grouped-buttons:not(:last-of-type) {
--wa-color-neutral-border-quiet: var(--wa-color-base-40);
}

2
docs/docs/components/page-samples/documentation.md
View File

@@ -127,7 +127,7 @@ eleventyExcludeFromCollections: true
</a>
</nav>
<header slot="main-header">
<div class="wa-flank:end wa-border-radius-l wa-theme-default-dark" style="background-color: var(--wa-color-surface-lowered); --content-percentage: 35%; padding: var(--wa-space-m);">
<div class="wa-flank:end wa-border-radius-l wa-dark" style="background-color: var(--wa-color-surface-lowered); --content-percentage: 35%; padding: var(--wa-space-m);">
<div class="wa-stack" style="margin: var(--wa-space-2xl);">
<h1>Great Horned Owl</h1>
<wa-divider></wa-divider>

2
docs/docs/components/page-samples/media-app.md
View File

@@ -5,7 +5,7 @@ layout: blank
eleventyExcludeFromCollections: true
---
<wa-page class="wa-theme-default-dark">
<wa-page class="wa-dark">
<header slot="header">
<div class="wa-cluster">
<wa-icon-button name="bars" label="Menu" data-toggle-nav></wa-icon-button>

4
docs/docs/components/page.md
View File

@@ -119,7 +119,7 @@ It can be opened using a button with `[data-toggle-nav]` that appears in the `su
</a>
</nav>
<header slot="main-header">
<div class="wa-flank:end wa-border-radius-l wa-theme-default-dark" style="background-color: var(--wa-color-surface-lowered); --content-percentage: 35%; padding: var(--wa-space-m);">
<div class="wa-flank:end wa-border-radius-l wa-dark" style="background-color: var(--wa-color-surface-lowered); --content-percentage: 35%; padding: var(--wa-space-m);">
<div class="wa-stack" style="margin: var(--wa-space-2xl);">
<h1>Great Horned Owl</h1>
<wa-divider></wa-divider>
@@ -299,7 +299,7 @@ It can be opened using a button with `[data-toggle-nav]` that appears in the `su
A sample media app page using `header`, `navigation-header`, `main-header`, and `main-footer` along with the default slot. The navigation menu collapses into a drawer at the default `mobile-breakpoint` and can be opened using a button with `[data-toggle-nav]` that appears in the `header` slot.
```html {.example viewport="1600"}
<wa-page class="wa-theme-default-dark">
<wa-page class="wa-dark">
<header slot="header">
<div class="wa-cluster">
<wa-icon-button name="bars" label="Menu" data-toggle-nav></wa-icon-button>

2
docs/docs/customizing.md
View File

@@ -17,7 +17,7 @@ To customize a theme, simply override any of these custom properties in your own
```css
:root,
:host,
.wa-theme-default-light {
.wa-theme-default {
/* Changes the brand color to violet across the library */
--wa-color-brand-fill-quiet: var(--wa-color-violet-95);
--wa-color-brand-fill-normal: var(--wa-color-violet-90);

2
docs/docs/experimental/themer.md
View File

@@ -2123,7 +2123,7 @@ hasOutline: false
<h3>Ontological Shock</h3>
<p>The allegory is related to Plato's theory of Forms, which holds that the true essence of an object is not what we perceive with our senses, but rather its quality, and that most people perceive only the shadow of the object and are thus limited to false perception.</p>
<pre class="codeblock">
<code class="language-html">&lt;html class="wa-theme-default-dark"&gt;
<code class="language-html">&lt;html class="wa-dark"&gt;
&lt;head&gt;
&lt;link rel="stylesheet" href="path/to/webawesome/dist/styles/themes/dark.css" /&gt;
&lt;/head&gt;

30
docs/docs/themes.md
View File

@@ -14,23 +14,25 @@ Web Awesome includes two pre-made themes:
Themes are a standard collection of [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) that cover all styles from colors to transitions. We use these custom properties throughout Web Awesome components to ensure a cohesive look and feel. Our [Theming pages](/docs/theming/) document these styles so that you can use them freely throughout your project and customize them as needed.
Themes are scoped to unique classes for each color scheme, such as `wa-theme-default-light` and `wa-theme-default-dark`, and the `:host` selector. Scoping to unique classes allows you to import multiple themes and use them interchangeably without collisions, while scoping to `:host` ensures the styles are applied to the shadow roots of custom elements.
Themes are scoped to unique classes for each color scheme, such as `wa-theme-default`.
You can apply the dark version of each theme by using the class `wa-dark`.
Scoping to unique classes allows you to import multiple themes and use them interchangeably without collisions, while scoping to `:host` ensures the styles are applied to the shadow roots of custom elements.
Additionally, styles may be scoped to the `:root` selector to be activated automatically. For pre-made themes, *all* custom properties are scoped to both `:root` and the class for the light color scheme (`wa-theme-default-light` or `wa-theme-classic-light`), activating the light color scheme by default.
Other themes or color schemes must be activated with the corresponding class, like the dark color scheme for pre-made themes (`wa-theme-default-dark` or `wa-theme-classic-dark`), which only defines a subset of custom properties for colors. This ensures that non-color styles only need to be defined once for the theme, regardless of whether the color scheme is light or dark.
Additionally, styles may be scoped to the `:root` selector to be activated automatically.
For pre-made themes, *all* custom properties are scoped to both `:root` and the theme class (`wa-theme-default` or `wa-theme-classic`),
activating the light color scheme by default.
For example, the default theme is set up like this:
```css
:root,
:host,
.wa-theme-default-light {
.wa-theme-default {
/* all CSS custom properties for color, typography, space, etc. */
}
.wa-theme-default-dark,
.wa-theme-default-dark :host {
.wa-dark,
:host-context(.wa-dark) {
/* subset of CSS custom properties for color */
}
```
@@ -49,9 +51,11 @@ Or import the **classic** theme:
<link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-alpha.4/dist/styles/themes/classic.css" />
```
Both the default and classic themes include both light and dark color schemes. When importing either theme, the light color scheme is activated by default. To activate the dark color scheme, apply the appropriate class (`wa-theme-default-dark` or `wa-theme-classic-dark`, depending on theme) to the `<html>` element on your page, like this example for the default theme:
Both the default and classic themes include both light and dark color schemes.
When importing either theme, the light color scheme is activated by default.
To activate the dark color scheme, apply the class `wa-dark` to the `<html>` element on your page, like this example for the default theme:
```html
<html class="wa-theme-default-dark">
<html class="wa-theme-default wa-dark">
<head>
<link rel="stylesheet" href="path/to/web-awesome/dist/styles/themes/default.css" />
<!-- other links, scripts, and metadata -->
@@ -71,7 +75,7 @@ Because themes are scoped to specific classes, you can activate different color
</head>
<body>
<nav class="wa-theme-default-dark">
<nav class="wa-dark">
<!-- dark-themed sidebar -->
</nav>
@@ -93,7 +97,7 @@ If you're customizing the default light styles, scope your styles to the followi
```css
:root,
:host,
.wa-theme-default-light {
.wa-theme-default {
/* your custom styles here */
}
```
@@ -101,8 +105,8 @@ If you're customizing the default light styles, scope your styles to the followi
If you're customizing the default dark styles, scope your styles to the following selectors.
```css
:host,
.wa-theme-default-dark {
.wa-dark,
:is(:host-context(.wa-dark)) {
/* your custom styles here */
}
```

2
docs/index.md
View File

@@ -268,7 +268,7 @@ layout: page
<h1 class="brand-font">Make something <span class="emphasis">awesome</span> with open-source web components</h1>
<div class="hero-cta">
<span><em>Psst!</em> You can pre-order Web Awesome Pro at a low, guaranteed-for-life price &mdash; but not for long. Get in while the gettin’s good.</span>
<wa-button class="wa-theme-default-dark" size="small" href="https://www.kickstarter.com/projects/fontawesome/web-awesome">
<wa-button class="wa-dark" size="small" href="https://www.kickstarter.com/projects/fontawesome/web-awesome">
<wa-icon slot="prefix" name="person-running"></wa-icon>
Pre-order WA Pro
</wa-button>

9
src/styles/themes/active.css
View File

@@ -11,7 +11,8 @@
:root,
:host,
.wa-theme-active-light {
.wa-theme-active,
.wa-light {
color-scheme: light;
color: var(--wa-color-text-normal);
@@ -79,7 +80,7 @@
--wa-color-neutral-on-normal: var(--wa-color-gray-30);
--wa-color-neutral-on-loud: black;
/**
/**
* Typography
*/
--wa-font-family-body: 'Inter', sans-serif;
@@ -98,8 +99,8 @@
--wa-form-control-border-color: var(--wa-color-neutral-border-normal);
}
.wa-theme-active-dark,
:is(:host-context(.wa-theme-active-dark)) {
.wa-dark,
:is(:host-context(.wa-dark)) {
color-scheme: dark;
color: var(--wa-color-text-normal);

9
src/styles/themes/awesome.css
View File

@@ -11,7 +11,8 @@
:root,
:host,
.wa-theme-awesome-light {
.wa-theme-awesome,
.wa-light {
color-scheme: light;
color: var(--wa-color-text-normal);
@@ -141,8 +142,8 @@
--wa-tooltip-line-height: var(--wa-line-height-normal);
}
.wa-theme-awesome-dark,
:is(:host-context(.wa-theme-awesome-dark)) {
.wa-dark,
:is(:host-context(.wa-dark)) {
color-scheme: dark;
color: var(--wa-color-text-normal);
@@ -278,7 +279,7 @@ wa-badge {
transform: translateY(var(--wa-shadow-offset-y-s));
}
.wa-theme-awesome-dark & {
.wa-dark & {
--border-color: var(--wa-color-border-quiet);
}
}

7
src/styles/themes/brutalist.css
View File

@@ -11,7 +11,8 @@
:root,
:host,
.wa-theme-brutalist-light {
.wa-theme-brutalist,
.wa-light {
color-scheme: light;
color: var(--wa-color-text-normal);
@@ -122,8 +123,8 @@
--wa-form-control-activated-color: var(--wa-color-neutral-fill-loud);
}
.wa-theme-brutalist-dark,
:is(:host-context(.wa-theme-brutalist-dark)) {
.wa-dark,
:is(:host-context(.wa-dark)) {
color-scheme: dark;
color: var(--wa-color-text-normal);

7
src/styles/themes/classic.css
View File

@@ -10,7 +10,8 @@
:root,
:host,
.wa-theme-classic-light {
.wa-theme-classic,
.wa-light {
color-scheme: light;
/**
@@ -116,8 +117,8 @@
--wa-tooltip-content-color: var(--wa-color-surface-default);
}
.wa-theme-classic-dark,
:is(:host-context(.wa-theme-classic-dark)) {
.wa-dark,
:is(:host-context(.wa-dark)) {
color-scheme: dark;
color: var(--wa-color-text-normal);

7
src/styles/themes/default.css
View File

@@ -10,13 +10,14 @@
:root,
:host,
.wa-theme-default-light {
.wa-theme-default,
.wa-light {
color-scheme: light;
color: var(--wa-color-text-normal);
}
.wa-theme-default-dark,
:is(:host-context(.wa-theme-migration-dark)) {
.wa-dark,
:is(:host-context(.wa-dark)) {
color-scheme: dark;
color: var(--wa-color-text-normal);
}

7
src/styles/themes/default/color-semantic.css
View File

@@ -2,7 +2,8 @@
* Foundational Colors and Semantic Colors
*/
:where(:root, :host),
.wa-theme-default-light {
.wa-theme-default,
.wa-light {
/**
* Foundational Colors
*/
@@ -102,8 +103,8 @@
}
/** need to wrap :host-context() in an :is() selector for unsupported browsers */
.wa-theme-default-dark,
:is(:host-context(.wa-theme-default-dark)) {
.wa-dark,
:is(:host-context(.wa-dark)) {
/**
* Foundational Colors
*/

7
src/styles/themes/default/groups.css
View File

@@ -2,7 +2,8 @@
* Component Groups
*/
:where(:root, :host),
.wa-theme-default-light {
.wa-theme-default,
.wa-light {
/* Form controls */
--wa-form-control-background-color: var(--wa-color-surface-default);
@@ -45,8 +46,8 @@
}
/** need to wrap :host-context() in an :is() selector for unsupported browsers */
.wa-theme-default-dark,
:is(:host-context(.wa-theme-default-dark)) {
.wa-dark,
:is(:host-context(.wa-dark)) {
/* Form controls */
--wa-form-control-background-color: var(--wa-color-surface-default);

7
src/styles/themes/glassy.css
View File

@@ -10,7 +10,8 @@
:root,
:host,
.wa-theme-glassy-light {
.wa-theme-glassy,
.wa-light {
color-scheme: light;
color: var(--wa-color-text-normal);
@@ -33,8 +34,8 @@
--wa-shadow-blur-scale: 3;
}
.wa-theme-glassy-dark,
:is(:host-context(.wa-theme-glassy-dark)) {
.wa-dark,
:is(:host-context(.wa-dark)) {
color-scheme: dark;
color: var(--wa-color-text-normal);

7
src/styles/themes/mellow.css
View File

@@ -11,7 +11,8 @@
:root,
:host,
.wa-theme-mellow-light {
.wa-theme-mellow,
.wa-light {
color-scheme: light;
color: var(--wa-color-text-normal);
@@ -119,8 +120,8 @@
--wa-form-control-border-color: var(--wa-color-neutral-border-normal);
}
.wa-theme-mellow-dark,
:is(:host-context(.wa-theme-mellow-dark)) {
.wa-dark,
:is(:host-context(.wa-dark)) {
color-scheme: dark;
color: var(--wa-color-text-normal);

7
src/styles/themes/migration.css
View File

@@ -11,7 +11,8 @@
:root,
:host,
.wa-theme-migration-light {
.wa-theme-migration,
.wa-light {
color-scheme: light;
color: var(--wa-color-text-normal);
@@ -124,8 +125,8 @@
--wa-form-control-label-line-height: var(--wa-line-height-normal);
}
.wa-theme-migration-dark,
:is(:host-context(.wa-theme-migration-dark)) {
.wa-dark,
:is(:host-context(.wa-dark)) {
color-scheme: dark;
color: var(--wa-color-text-normal);

7
src/styles/themes/playful.css
View File

@@ -10,7 +10,8 @@
:root,
:host,
.wa-theme-playful-light {
.wa-theme-playful,
.wa-light {
color-scheme: light;
color: var(--wa-color-text-normal);
@@ -203,8 +204,8 @@
--wa-form-control-border-color: var(--wa-color-neutral-border-normal);
}
.wa-theme-playful-dark,
:is(:host-context(.wa-theme-playful-dark)) {
.wa-dark,
:is(:host-context(.wa-dark)) {
color-scheme: dark;
color: var(--wa-color-text-normal);

9
src/styles/themes/premium.css
View File

@@ -12,7 +12,8 @@
:root,
:host,
.wa-theme-premium-light {
.wa-theme-premium,
.wa-light {
color-scheme: light;
color: var(--wa-color-text-normal);
@@ -104,8 +105,8 @@
--wa-form-control-border-color: var(--wa-color-neutral-border-normal);
}
.wa-theme-premium-dark,
:is(:host-context(.wa-theme-premium-dark)) {
.wa-dark,
:is(:host-context(.wa-dark)) {
color-scheme: dark;
color: var(--wa-color-text-normal);
@@ -237,7 +238,7 @@ wa-tag {
border-width: 0;
}
&:not(.wa-theme-premium-dark) wa-alert {
&:not(.wa-dark) wa-alert {
&[variant='brand'] {
--background: var(--wa-color-primary-95);
}