Kajabi · QuintonJason · Dec 17, 2025 · Dec 10, 2025 · Dec 11, 2025 · Dec 11, 2025
diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml
diff --git a/.github/workflows/dependency-review.yml b/.github/workflows/dependency-review.yml
diff --git a/docs/app/views/application/_app_head_content.html.erb b/docs/app/views/application/_app_head_content.html.erb
@@ -9,7 +9,7 @@
   'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
   })(window,document,'script','dataLayer','GTM-T8W9NCJ');</script>
 <% end %>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@pine-ds/core@latest/dist/pine-core/pine-core.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kajabi-ui/styles@latest/dist/pine/pine.css">
 <%= stylesheet_pack_tag "docs" %>
 <link rel="canonical" href="<%= url_for(only_path: false) %>" />
 <link href="/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180" type="image/png">

diff --git a/docs/app/views/application/_assistant.html.erb b/docs/app/views/application/_assistant.html.erb
@@ -13,5 +13,18 @@
         name: "search"
       }
     } %>
+    <%= sage_component SageButton, {
+      value: "Toggle dark mode",
+      attributes: {
+        "data-js-dark-mode-toggle": true,
+        title: "Toggle dark mode",
+        "aria-label": "Toggle dark mode"
+      },
+      subtle: true,
+      icon: {
+        name: "flash",
+        style: "only"
+      }
+    } %>
   <% end %>
 <% end %>
diff --git a/docs/lib/sage-frontend/javascript/docs/dark-mode-toggle.js b/docs/lib/sage-frontend/javascript/docs/dark-mode-toggle.js
@@ -0,0 +1,74 @@
+/**
+ * Dark Mode Toggle
+ * Handles switching between light and dark themes
+ */
+
+const THEME_KEY = 'sage-theme';
+const THEME_DARK = 'dark';
+const THEME_LIGHT = 'light';
+
+class DarkModeToggle {
+  constructor() {
+    this.toggle = document.querySelector('[data-js-dark-mode-toggle]');
+    if (!this.toggle) return;
+
+    this.init();
+  }
+
+  init() {
+    // Set initial theme from localStorage or system preference
+    const savedTheme = localStorage.getItem(THEME_KEY);
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const initialTheme = savedTheme || (prefersDark ? THEME_DARK : THEME_LIGHT);
+
+    this.setTheme(initialTheme, false);
+
+    // Listen for toggle clicks
+    this.toggle.addEventListener('click', () => this.handleToggle());
+
+    // Listen for system theme changes
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+      if (!localStorage.getItem(THEME_KEY)) {
+        this.setTheme(e.matches ? THEME_DARK : THEME_LIGHT, false);
+      }
+    });
+  }
+
+  handleToggle() {
+    const currentTheme = document.documentElement.getAttribute('data-theme');
+    const newTheme = currentTheme === THEME_DARK ? THEME_LIGHT : THEME_DARK;
+    this.setTheme(newTheme, true);
+  }
+
+  setTheme(theme, save = true) {
+    // Update data-theme attribute on <html>
+    document.documentElement.setAttribute('data-theme', theme);
+
+    // Update toggle button aria-label and icon
+    const isDark = theme === THEME_DARK;
+    this.toggle.setAttribute('aria-label', isDark ? 'Switch to light mode' : 'Switch to dark mode');
+    this.toggle.setAttribute('title', isDark ? 'Switch to light mode' : 'Switch to dark mode');
+
+    // Update icon (pds-icon element)
+    const icon = this.toggle.querySelector('pds-icon');
+    if (icon) {
+      // When dark mode: use flash-filled, when light mode: use flash
+      icon.setAttribute('name', isDark ? 'flash-filled' : 'flash');
+    }
+
+    // Save to localStorage if requested
+    if (save) {
+      localStorage.setItem(THEME_KEY, theme);
+    }
+  }
+}
+
+// Initialize when DOM is ready
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', () => new DarkModeToggle());
+} else {
+  new DarkModeToggle();
+}
+
+export default DarkModeToggle;
+
diff --git a/docs/lib/sage-frontend/javascript/docs/index.js b/docs/lib/sage-frontend/javascript/docs/index.js
@@ -6,6 +6,7 @@ require('./meter')
 require('./button-group')
 require('./example')
 require('./scroll-to-active-nav-item')
+require('./dark-mode-toggle')
 
 import SageDocsTabs from './tabs';
 

diff --git a/docs/lib/sage-frontend/stylesheets/docs/_assistant.scss b/docs/lib/sage-frontend/stylesheets/docs/_assistant.scss
@@ -30,6 +30,6 @@
   margin-block-end: 0;
 
   .sage-switch__label {
-    color: sage-color(white);
+    color: var(--pine-color-white);
   }
 }