diff --git a/docs/doc-fragments/buildYourOwnFlavor.js b/docs/doc-fragments/buildYourOwnFlavor.js
index 6d95f9f..a6f7a61 100644
--- a/docs/doc-fragments/buildYourOwnFlavor.js
+++ b/docs/doc-fragments/buildYourOwnFlavor.js
@@ -392,6 +392,50 @@ module.exports = {
       document.getElementById('buttonHoverBackColor').addEventListener('input', function(e){ updateColorPreview('buttonHoverBackColorPreview', e.target.value) });
       document.getElementById('buttonHoverBorderColor').addEventListener('input', function(e){ updateColorPreview('buttonHoverBorderColorPreview', e.target.value) });
       document.getElementById('buttonGroupBorderColor').addEventListener('input', function(e){ updateColorPreview('buttonGroupBorderColorPreview', e.target.value) });
+      document.getElementById('headerForeColor').addEventListener('input', function(e){ updateColorPreview('headerForeColorPreview', e.target.value) });
+      document.getElementById('headerBackColor').addEventListener('input', function(e){ updateColorPreview('headerBackColorPreview', e.target.value) });
+      document.getElementById('headerBorderColor').addEventListener('input', function(e){ updateColorPreview('headerBorderColorPreview', e.target.value) });
+      document.getElementById('navForeColor').addEventListener('input', function(e){ updateColorPreview('navForeColorPreview', e.target.value) });
+      document.getElementById('navBackColor').addEventListener('input', function(e){ updateColorPreview('navBackColorPreview', e.target.value) });
+      document.getElementById('navHoverBackColor').addEventListener('input', function(e){ updateColorPreview('navHoverBackColorPreview', e.target.value) });
+      document.getElementById('navBorderColor').addEventListener('input', function(e){ updateColorPreview('navBorderColorPreview', e.target.value) });
+      document.getElementById('navLinkColor').addEventListener('input', function(e){ updateColorPreview('navLinkColorPreview', e.target.value) });
+      document.getElementById('footerForeColor').addEventListener('input', function(e){ updateColorPreview('footerForeColorPreview', e.target.value) });
+      document.getElementById('footerBackColor').addEventListener('input', function(e){ updateColorPreview('footerBackColorPreview', e.target.value) });
+      document.getElementById('footerBorderColor').addEventListener('input', function(e){ updateColorPreview('footerBorderColorPreview', e.target.value) });
+      document.getElementById('footerLinkColor').addEventListener('input', function(e){ updateColorPreview('footerLinkColorPreview', e.target.value) });
+      document.getElementById('drawerForeColor').addEventListener('input', function(e){ updateColorPreview('drawerForeColorPreview', e.target.value) });
+      document.getElementById('drawerBackColor').addEventListener('input', function(e){ updateColorPreview('drawerBackColorPreview', e.target.value) });
+      document.getElementById('drawerHoverBackColor').addEventListener('input', function(e){ updateColorPreview('drawerHoverBackColorPreview', e.target.value) });
+      document.getElementById('drawerCloseColor').addEventListener('input', function(e){ updateColorPreview('drawerCloseColorPreview', e.target.value) });
+      document.getElementById('tableBorderColor').addEventListener('input', function(e){ updateColorPreview('tableBorderColorPreview', e.target.value) });
+      document.getElementById('tableBorderSeparatorColor').addEventListener('input', function(e){ updateColorPreview('tableBorderSeparatorColorPreview', e.target.value) });
+      document.getElementById('thForeColor').addEventListener('input', function(e){ updateColorPreview('thForeColorPreview', e.target.value) });
+      document.getElementById('thBackColor').addEventListener('input', function(e){ updateColorPreview('thBackColorPreview', e.target.value) });
+      document.getElementById('tdForeColor').addEventListener('input', function(e){ updateColorPreview('tdForeColorPreview', e.target.value) });
+      document.getElementById('tdBackColor').addEventListener('input', function(e){ updateColorPreview('tdBackColorPreview', e.target.value) });
+      document.getElementById('tdAltForeColor').addEventListener('input', function(e){ updateColorPreview('tdAltForeColorPreview', e.target.value) });
+      document.getElementById('tdAltBackColor').addEventListener('input', function(e){ updateColorPreview('tdAltBackColorPreview', e.target.value) });
+      document.getElementById('markForeColor').addEventListener('input', function(e){ updateColorPreview('markForeColorPreview', e.target.value) });
+      document.getElementById('markBackColor').addEventListener('input', function(e){ updateColorPreview('markBackColorPreview', e.target.value) });
+      document.getElementById('toastForeColor').addEventListener('input', function(e){ updateColorPreview('toastForeColorPreview', e.target.value) });
+      document.getElementById('toastBackColor').addEventListener('input', function(e){ updateColorPreview('toastBackColorPreview', e.target.value) });
+      document.getElementById('tooltipForeColor').addEventListener('input', function(e){ updateColorPreview('tooltipForeColorPreview', e.target.value) });
+      document.getElementById('tooltipBackColor').addEventListener('input', function(e){ updateColorPreview('tooltipBackColorPreview', e.target.value) });
+      document.getElementById('modalOverlayColor').addEventListener('input', function(e){ updateColorPreview('modalOverlayColorPreview', e.target.value) });
+      document.getElementById('modalCloseColor').addEventListener('input', function(e){ updateColorPreview('modalClosekColorPreview', e.target.value) });
+      document.getElementById('modalHoverBackColor').addEventListener('input', function(e){ updateColorPreview('modalHoverBackColorPreview', e.target.value) });
+      document.getElementById('collapseContentBackColor').addEventListener('input', function(e){ updateColorPreview('collapseContentBackColorPreview', e.target.value) });
+      document.getElementById('collapseLabelForeColor').addEventListener('input', function(e){ updateColorPreview('collapseLabelForeColorPreview', e.target.value) });
+      document.getElementById('collapseLabelBackColor').addEventListener('input', function(e){ updateColorPreview('collapseLabelBackColorPreview', e.target.value) });
+      document.getElementById('collapseLabelHoverBackColor').addEventListener('input', function(e){ updateColorPreview('collapseLabelHoverBackColorPreview', e.target.value) });
+      document.getElementById('collapseSelectedLabelBackColor').addEventListener('input', function(e){ updateColorPreview('collapseSelectedLabelBackColorPreview', e.target.value) });
+      document.getElementById('collapseBorderColor').addEventListener('input', function(e){ updateColorPreview('collapseBorderColorPreview', e.target.value) });
+      document.getElementById('collapseSelectedLabelBorderColor').addEventListener('input', function(e){ updateColorPreview('collapseSelectedLabelBorderColorPreview', e.target.value) });
+      document.getElementById('progressForeColor').addEventListener('input', function(e){ updateColorPreview('progressForeColorPreview', e.target.value) });
+      document.getElementById('progressBackColor').addEventListener('input', function(e){ updateColorPreview('progressBackColorPreview', e.target.value) });
+      document.getElementById('spinnerDonutForeColor').addEventListener('input', function(e){ updateColorPreview('spinnerDonutForeColorPreview', e.target.value) });
+      document.getElementById('spinnerDonutBackColor').addEventListener('input', function(e){ updateColorPreview('spinnerDonutBackColorPreview', e.target.value) });
       document.getElementById('genericBorderColor').addEventListener('input', function(e){ updateColorPreview('genericBorderColorPreview', e.target.value) });
       document.getElementById('genericBoxShadowColor').addEventListener('input', function(e){ updateColorPreview('genericBoxShadowColorPreview', e.target.value) });
     }