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

set brand and palette with theme in theme selector

Browse Source
This commit is contained in:
Cory LaViska
2025-06-24 16:45:29 -04:00
parent 41db67b4f2
commit de94949a5e
2 changed files with 37 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
packages/webawesome/docs/_includes/theme-selector.njk
View File

@@ -4,7 +4,13 @@
{# Free themes #}
{% for theme in themer.themes %}
{% if not theme.isPro %}
<wa-option value="{{ theme.filename | stripExtension }}">{{ theme.name }}</wa-option>
<wa-option
value="{{ theme.filename | stripExtension }}"
data-brand="{{ theme.colorBrand.color }}"
data-palette="{{ theme.palette.filename | stripExtension }}"
>
{{ theme.name }}
</wa-option>
{% endif %}
{% endfor %}
@@ -12,14 +18,24 @@
{% for theme in themer.themes %}
{% if loop.first %}<wa-divider></wa-divider>{% endif %}
{% if theme.isPro %}
<wa-option value="{{ theme.filename | stripExtension }}">{{ theme.name }}</wa-option>
<wa-option
value="{{ theme.filename | stripExtension }}"
data-brand="{{ theme.colorBrand.color }}"
data-palette="{{ theme.palette.filename | stripExtension }}"
>
{{ theme.name }}
</wa-option>
{% endif %}
{% endfor %}
</wa-select>
<script>
// Immediately set the correct value from storage
// Immediately set the correct values from storage
document.querySelectorAll('wa-select.theme-selector').forEach(el => {
el.setAttribute('value', localStorage.getItem('theme') || 'default');
});
// Apply saved brand and palette classes
document.documentElement.classList.add(`wa-brand-${localStorage.getItem('brand') || 'blue'}`);
document.documentElement.classList.add(`wa-palette-${localStorage.getItem('palette') || 'default'}`);
</script>

24
packages/webawesome/docs/assets/scripts/theme.js
View File

@@ -24,9 +24,21 @@ async function updateTheme(value, isInitialLoad = false) {
localStorage.setItem('theme', value);
// Update theme classes
// Get brand and palette from the selected option
const themeSelector = document.querySelector('.theme-selector');
const selectedOption = themeSelector.querySelector(`wa-option[value="${value}"]`);
const brand = selectedOption?.getAttribute('data-brand') || 'blue';
const palette = selectedOption?.getAttribute('data-palette') || 'default';
const htmlElement = document.documentElement;
const classesToRemove = Array.from(htmlElement.classList).filter(className => className.startsWith('wa-theme-'));
localStorage.setItem('brand', brand);
localStorage.setItem('palette', palette);
// Update theme classes
const classesToRemove = Array.from(htmlElement.classList).filter(
className =>
className.startsWith('wa-theme-') || className.startsWith('wa-brand-') || className.startsWith('wa-palette-'),
);
const themeStylesheet = document.getElementById('theme-stylesheet');
const href = `/dist/styles/themes/${value}.css`;
@@ -38,10 +50,10 @@ async function updateTheme(value, isInitialLoad = false) {
htmlElement.classList.remove(...classesToRemove);
// Add the new theme class (skip 'default' as it's the base theme)
if (value !== 'default') {
htmlElement.classList.add(`wa-theme-${value}`);
}
// Add the new theme, brand, and palette classes
htmlElement.classList.add(`wa-theme-${value}`);
htmlElement.classList.add(`wa-brand-${brand}`);
htmlElement.classList.add(`wa-palette-${palette}`);
// Sync all theme selectors
document.querySelectorAll('.theme-selector').forEach(el => (el.value = value));