diff --git a/packages/webawesome/docs/_includes/theme-selector.njk b/packages/webawesome/docs/_includes/theme-selector.njk
index fcb95712d..1de9a0160 100644
--- a/packages/webawesome/docs/_includes/theme-selector.njk
+++ b/packages/webawesome/docs/_includes/theme-selector.njk
@@ -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>
diff --git a/packages/webawesome/docs/assets/scripts/theme.js b/packages/webawesome/docs/assets/scripts/theme.js
index 3ad4cfc91..73a103c89 100644
--- a/packages/webawesome/docs/assets/scripts/theme.js
+++ b/packages/webawesome/docs/assets/scripts/theme.js
@@ -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));