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

update how themes are assigned

Browse Source
This commit is contained in:
Cory LaViska
2025-06-17 13:22:20 -04:00
parent fb1c01e2e2
commit c3fe8fa14c
2 changed files with 59 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
packages/webawesome/docs/assets/examples/themes/showcase.html → packages/webawesome/docs/docs/examples/themes/showcase.njk
View File

@@ -1,3 +1,6 @@
---
unlisted: true
---
<!doctype html>
<html lang="en" class="wa-cloak" data-fa-kit-code="b10bfbde90">
<head>
@@ -6,35 +9,39 @@
<title>Web Awesome: Theme Showcase</title>
<!-- Web Awesome -->
<link
id="theme-stylesheet"
rel="stylesheet"
href="/dist/styles/themes/default.css"
render="blocking"
fetchpriority="high"
/>
<link rel="stylesheet" href="/dist/styles/webawesome.css" />
<script type="module" src="/dist/webawesome.loader.js"></script>
<!-- Handle query params to adjust theme and color scheme -->
<script type="module">
const urlParams = new URLSearchParams(window.location.search);
const theme = urlParams.get('theme');
const colorScheme = urlParams.get('color-scheme');
<!-- Load all available themes -->
{% for theme in themer.themes %}
<link rel="stylesheet" href="/dist/styles/themes/{{theme.filename}}" />
{% endfor %}
// Theme
if (theme) {
const themeStylesheet = document.getElementById('theme-stylesheet');
const currentHref = themeStylesheet.href;
const newHref = currentHref.replace('/themes/default.css', `/themes/${theme}.css`);
themeStylesheet.href = newHref;
}
<!-- Set the initial theme and color scheme based on ?theme and ?color-scheme -->
<script type="module">
const htmlElement = document.documentElement;
const urlParams = new URLSearchParams(window.location.search);
const colorScheme = urlParams.get('color-scheme');
const theme = urlParams.get('theme');
// Color scheme
if (colorScheme === 'dark') {
document.documentElement.classList.add('wa-dark');
htmlElement.classList.add('wa-dark');
} else if (colorScheme === 'light') {
document.documentElement.classList.remove('wa-dark');
htmlElement.classList.remove('wa-dark');
}
// Theme
if (theme) {
// Remove existing wa-theme-* classes
htmlElement.classList.forEach(className => {
if (className.startsWith('wa-theme-')) {
htmlElement.classList.remove(className);
}
});
// Add new theme class
htmlElement.classList.add(`wa-theme-${theme}`);
}
</script>
</head>

44
packages/webawesome/docs/docs/themes.njk
View File

@@ -30,11 +30,13 @@ isPro: true
</header>
<wa-comparison position="80">
<wa-zoomable-frame
src="/docs/examples/themes/showcase?color-scheme=dark"
slot="before"
without-controls
without-interaction
></wa-zoomable-frame>
<wa-zoomable-frame
src="/docs/examples/themes/showcase"
slot="after"
without-controls
without-interaction
@@ -43,6 +45,7 @@ isPro: true
</div>
<script type="module">
import { doViewTransition } from '/assets/scripts/view-transitions.js';
let didInit = false;
function init() {
@@ -60,21 +63,34 @@ isPro: true
const proBadge = document.querySelector('[data-pro-badge]');
function updateFrames(selectedValue, title, description, isPro) {
const baseUrl = '/assets/examples/themes/showcase.html';
const params = new URLSearchParams();
// Update theme classes on both frames
[afterFrame, beforeFrame].forEach(frame => {
if (frame.contentDocument) {
const html = frame.contentDocument.documentElement;
if (selectedValue !== 'default') {
params.set('theme', selectedValue);
// Remove all existing wa-theme-* classes
html.classList.forEach(className => {
if (className.startsWith('wa-theme-')) {
html.classList.remove(className);
}
});
// Add new theme class if not default
if (selectedValue !== 'default') {
html.classList.add(`wa-theme-${selectedValue}`);
}
}
});
// Set dark mode on before frame only
if (beforeFrame.contentDocument) {
beforeFrame.contentDocument.documentElement.classList.add('wa-dark');
}
const darkParams = new URLSearchParams(params);
darkParams.set('color-scheme', 'dark');
const queryString = params.toString() ? '?' + params.toString() : '';
const darkQueryString = '?' + darkParams.toString();
afterFrame.src = baseUrl + queryString;
beforeFrame.src = baseUrl + darkQueryString;
// Ensure after frame is light mode
if (afterFrame.contentDocument) {
afterFrame.contentDocument.documentElement.classList.remove('wa-dark');
}
// Update header elements directly
if (nameElement && title) {
@@ -104,7 +120,9 @@ isPro: true
const title = selectedRadio.getAttribute('data-title');
const description = selectedRadio.getAttribute('data-description');
const isPro = selectedRadio.hasAttribute('data-is-pro');
updateFrames(selectedRadio.value, title, description, isPro);
doViewTransition(() => {
updateFrames(selectedRadio.value, title, description, isPro);
});
});
}