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

update brand color too

Browse Source
This commit is contained in:
lindsaym-fa
2025-07-02 17:35:42 -04:00
parent 3e869a3c36
commit 2f30b1d7c1
1 changed files with 12 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -30,6 +30,7 @@ layout: page
data-description="{{ theme.description }}"
data-title="{{ theme.name }}"
data-palette="{{ theme.palette.filename | stripExtension}}"
data-brand="{{ theme.colorBrand.color }}"
{% if theme.isPro %}data-is-pro{% endif %}
>
{{ theme.name }}
@@ -44,6 +45,7 @@ layout: page
data-description="{{ theme.description }}"
data-title="{{ theme.name }}"
data-palette="{{ theme.palette.filename | stripExtension}}"
data-brand="{{ theme.colorBrand.color }}"
{% if theme.isPro %}data-is-pro{% endif %}
>
{{ theme.name }}
@@ -88,7 +90,7 @@ layout: page
<p>
To import this theme, apply the following classes to the <code>&lt;html&gt;</code> element and import the theme's stylesheet.
</p>
<pre><code class="language-html">&lt;html class=&quot;wa-theme-{{ theme.filename | stripExtension }} wa-palette-{{ theme.palette.filename | stripExtension }}&quot;&gt;
<pre><code class="language-html">&lt;html class=&quot;wa-theme-{{ theme.filename | stripExtension }} wa-palette-{{ theme.palette.filename | stripExtension }} wa-brand-{{ theme.colorBrand.color}}&quot;&gt;
...
&lt;link rel=&quot;stylesheet&quot; href=&quot;{% cdnUrl %}styles/themes/{{ theme.filename }}&quot; /&gt;</code></pre>
</div>
@@ -107,24 +109,25 @@ layout: page
const freeBadge = document.querySelector('[data-free-badge]');
const proBadge = document.querySelector('[data-pro-badge]');
function updateFrames(selectedValue, title, description, isPro, palette) {
function updateFrames(selectedValue, title, description, isPro, palette, brand) {
// Update theme classes on both frames
[afterFrame, beforeFrame].forEach(frame => {
if (frame.contentDocument) {
const html = frame.contentDocument.documentElement;
if (!html) return;
// Remove all existing wa-theme-* and wa-palette-* classes
// Remove all existing wa-theme-*, wa-palette-*, and wa-brand-* classes
[...html.classList].forEach(className => {
if (className.startsWith('wa-theme-') || className.startsWith('wa-palette-')) {
if (className.startsWith('wa-theme-') || className.startsWith('wa-palette-') || className.startsWith('wa-brand-')) {
html.classList.remove(className);
}
});
// Add new theme and palette class
// Add new theme, palette, and brand classes
if (selectedValue !== 'default') {
html.classList.add(`wa-theme-${selectedValue}`);
html.classList.add(`wa-palette-${palette}`);
html.classList.add(`wa-brand-${brand}`);
}
}
});
@@ -153,8 +156,9 @@ layout: page
const title = defaultRadio.getAttribute('data-title');
const description = defaultRadio.getAttribute('data-description');
const palette = defaultRadio.getAttribute('data-palette');
const brand = defaultRadio.getAttribute('data-brand');
const isPro = defaultRadio.hasAttribute('data-is-pro');
updateFrames('default', title, description, isPro, palette);
updateFrames('default', title, description, isPro, palette, brand);
}
// Listen for radio changes
@@ -163,9 +167,10 @@ layout: page
const title = selectedRadio.getAttribute('data-title');
const description = selectedRadio.getAttribute('data-description');
const palette = selectedRadio.getAttribute('data-palette');
const brand = selectedRadio.getAttribute('data-brand');
const isPro = selectedRadio.hasAttribute('data-is-pro');
doViewTransition(() => {
updateFrames(selectedRadio.value, title, description, isPro, palette);
updateFrames(selectedRadio.value, title, description, isPro, palette, brand);
});
});
</script>