diff --git a/docs/_includes/base.njk b/docs/_includes/base.njk index 9ec84b4a0..850a0151b 100644 --- a/docs/_includes/base.njk +++ b/docs/_includes/base.njk @@ -76,10 +76,7 @@ newStylesheet.addEventListener("load", updateStylesheet) - document.documentElement.classList.toggle( - `wa-theme-${preset}-dark`, - isDark() - ); + document.documentElement.classList.toggle(`wa-dark`, isDark()); diff --git a/docs/_layouts/blank.njk b/docs/_layouts/blank.njk index 8dc25ef9a..f4e08da0c 100644 --- a/docs/_layouts/blank.njk +++ b/docs/_layouts/blank.njk @@ -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()); diff --git a/docs/assets/scripts/color-scheme.js b/docs/assets/scripts/color-scheme.js index aa69e3d9d..8c437f1da 100644 --- a/docs/assets/scripts/color-scheme.js +++ b/docs/assets/scripts/color-scheme.js @@ -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() { diff --git a/docs/assets/scripts/preset-theme.js b/docs/assets/scripts/preset-theme.js index 3ea8db10b..58227a3ed 100644 --- a/docs/assets/scripts/preset-theme.js +++ b/docs/assets/scripts/preset-theme.js @@ -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) { diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css index 0d9ddabc3..d9937e1ce 100644 --- a/docs/assets/styles/docs.css +++ b/docs/assets/styles/docs.css @@ -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; } diff --git a/docs/assets/styles/theme-headers.css b/docs/assets/styles/theme-headers.css index 6ce3d34f9..f95a3c1b6 100644 --- a/docs/assets/styles/theme-headers.css +++ b/docs/assets/styles/theme-headers.css @@ -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); } diff --git a/docs/docs/components/page-samples/documentation.md b/docs/docs/components/page-samples/documentation.md index c84183de3..f5f989bf4 100644 --- a/docs/docs/components/page-samples/documentation.md +++ b/docs/docs/components/page-samples/documentation.md @@ -127,7 +127,7 @@ eleventyExcludeFromCollections: true
-
+