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

tweaks to color palette logic

Browse Source
This commit is contained in:
lindsaym-fa
2025-11-07 18:56:25 -05:00
parent c29e4cadf5
commit b57225d5b0
1 changed files with 3 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
packages/webawesome/docs/_includes/theming/color-palettes.njk
View File

@@ -73,28 +73,23 @@
<script type="module">
const paletteContainer = document.getElementById('color-palettes');
const palettePicker = document.getElementById('palette-picker');
const palettePreviewPicker = document.getElementById('palette-picker');
// Set first radio as checked and add initial palette class
const firstPaletteRadio = palettePicker.querySelector('wa-radio');
const firstPaletteRadio = palettePreviewPicker.querySelector('wa-radio');
if (firstPaletteRadio) {
firstPaletteRadio.checked = true;
paletteContainer.classList.add(`wa-palette-${firstPaletteRadio.value}`);
}
// Listen for radio changes
palettePicker.addEventListener('input', function(event) {
palettePreviewPicker.addEventListener('input', function(event) {
const selectedValue = event.target.value;
// Update palette container class
const existingThemeClasses = [...paletteContainer.classList].filter(className => className.startsWith('wa-palette-'));
existingThemeClasses.forEach(className => paletteContainer.classList.remove(className));
paletteContainer.classList.add(`wa-palette-${selectedValue}`);
// Show/hide appropriate instructions
document.querySelectorAll('.palette-instructions').forEach(instruction => {
instruction.hidden = instruction.dataset.palette !== selectedValue;
});
});
</script>