From ffbdae7ac93415d7c3f1c2cfd87212d678e8a930 Mon Sep 17 00:00:00 2001
From: Madison <madison.w.kennedy@gmail.com>
Date: Wed, 2 Jul 2025 12:05:53 -0500
Subject: [PATCH] light mode and accessibility feat

---
 docs/src/components/mdx/sdk-components.tsx | 132 ++++++++++++++++++++-
 1 file changed, 128 insertions(+), 4 deletions(-)

diff --git a/docs/src/components/mdx/sdk-components.tsx b/docs/src/components/mdx/sdk-components.tsx
index 8a1e9e698..999d1acf4 100644
--- a/docs/src/components/mdx/sdk-components.tsx
+++ b/docs/src/components/mdx/sdk-components.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { Palette } from 'lucide-react';
 import React, { useEffect, useRef, useState } from 'react';
 import { codeToHtml } from "shiki";
 import './clickable-code-styles.css';
@@ -22,8 +23,64 @@ function ClickableCodeblock({
 }) {
   const [highlightedCode, setHighlightedCode] = useState<string>("");
   const [linePositions, setLinePositions] = useState<Array<{ top: number, height: number }>>([]);
+  const [selectedLightTheme, setSelectedLightTheme] = useState<string>('github-light-default');
+  const [selectedDarkTheme, setSelectedDarkTheme] = useState<string>('github-dark');
+  const [isThemeSwitcherOpen, setIsThemeSwitcherOpen] = useState(false);
   const codeRef = useRef<HTMLDivElement>(null);
 
+  // Available themes
+  const lightThemes = [
+    { value: 'github-light-default', label: 'GitHub Light' },
+    { value: 'light-plus', label: 'VS Code Light' },
+    { value: 'min-light', label: 'Minimal Light' },
+    { value: 'slack-ochin', label: 'Slack Light' },
+  ];
+
+  const darkThemes = [
+    { value: 'github-dark', label: 'GitHub Dark' },
+    { value: 'github-dark-dimmed', label: 'GitHub Dimmed' },
+    { value: 'dark-plus', label: 'VS Code Dark' },
+    { value: 'dracula', label: 'Dracula' },
+  ];
+
+  // Load saved theme preferences on mount
+  useEffect(() => {
+    const savedLightTheme = localStorage.getItem('stack-docs-light-theme');
+    const savedDarkTheme = localStorage.getItem('stack-docs-dark-theme');
+    
+    if (savedLightTheme) {
+      setSelectedLightTheme(savedLightTheme);
+    }
+    if (savedDarkTheme) {
+      setSelectedDarkTheme(savedDarkTheme);
+    }
+  }, []);
+
+  // Close theme switcher when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (isThemeSwitcherOpen && !(event.target as Element).closest('.theme-switcher-container')) {
+        setIsThemeSwitcherOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isThemeSwitcherOpen]);
+
+  // Save theme preferences when they change
+  const handleThemeChange = (isDark: boolean, theme: string) => {
+    if (isDark) {
+      setSelectedDarkTheme(theme);
+      localStorage.setItem('stack-docs-dark-theme', theme);
+    } else {
+      setSelectedLightTheme(theme);
+      localStorage.setItem('stack-docs-light-theme', theme);
+    }
+  };
+
   // Measure actual line positions after code is rendered
   useEffect(() => {
     if (codeRef.current && highlightedCode) {
@@ -102,12 +159,15 @@ function ClickableCodeblock({
     const updateHighlightedCode = async () => {
       try {
         // Detect if we're in dark mode by checking CSS custom properties or document class
-        const isDarkMode = document.documentElement.classList.contains('dark') ||
+        const isDarkMode = document.documentElement.classList.contains('dark') || 
                           getComputedStyle(document.documentElement).getPropertyValue('--fd-background').includes('0 0% 3.9%');
-
+        
+        // Use selected themes instead of hardcoded ones
+        const themeToUse = isDarkMode ? selectedDarkTheme : selectedLightTheme;
+        
         const html = await codeToHtml(code, {
           lang: language,
-          theme: isDarkMode ? 'github-dark' : 'github-light-default',
+          theme: themeToUse,
           transformers: [{
             pre(node) {
               // Remove background styles from pre element
@@ -156,7 +216,7 @@ function ClickableCodeblock({
     return () => {
       observer.disconnect();
     };
-  }, [code, language]);
+  }, [code, language, selectedLightTheme, selectedDarkTheme]);
 
   return (
     <div className="space-y-4 mb-6">
@@ -168,6 +228,70 @@ function ClickableCodeblock({
             lineHeight: '1.5',
           }}
         >
+          {/* Theme Switcher */}
+          <div className="absolute top-2 right-2 z-10 theme-switcher-container">
+            <div className="relative">
+              <button
+                onClick={() => setIsThemeSwitcherOpen(!isThemeSwitcherOpen)}
+                className="p-1.5 rounded-md bg-fd-muted/80 hover:bg-fd-muted text-fd-muted-foreground hover:text-fd-foreground transition-colors border border-fd-border/50 group"
+                title="Choose code syntax highlighting theme for better readability and accessibility"
+                aria-label="Code theme selector for accessibility"
+              >
+                <Palette className="w-4 h-4" />
+                {/* Hover tooltip */}
+                <div className="absolute bottom-full right-0 mb-2 px-2 py-1 bg-fd-popover text-fd-popover-foreground text-xs rounded border border-fd-border opacity-0 group-hover:opacity-100 pointer-events-none whitespace-nowrap z-30">
+                  Choose syntax theme for accessibility
+                </div>
+              </button>
+
+              {isThemeSwitcherOpen && (
+                <div className="absolute top-full right-0 mt-1 bg-fd-background border border-fd-border rounded-md shadow-md min-w-40 z-20">
+                  <div className="p-2">
+                    {/* Title */}
+                    <div className="text-xs font-medium text-fd-foreground mb-2 pb-1 border-b border-fd-border/30">
+                      Code Theme
+                    </div>
+                    
+                    {/* Current mode indicator */}
+                    <div>
+                      <div className="flex items-center gap-1.5 text-xs text-fd-muted-foreground mb-1.5">
+                        <div className={`w-1.5 h-1.5 rounded-full ${document.documentElement.classList.contains('dark') ? 'bg-slate-600' : 'bg-yellow-400'}`}></div>
+                        <span>
+                          {document.documentElement.classList.contains('dark') ? 'Dark Mode' : 'Light Mode'}
+                        </span>
+                      </div>
+                      <div className="space-y-0.5">
+                        {(document.documentElement.classList.contains('dark') ? darkThemes : lightThemes).map((theme) => {
+                          const isDark = document.documentElement.classList.contains('dark');
+                          const isSelected = isDark ? selectedDarkTheme === theme.value : selectedLightTheme === theme.value;
+                          return (
+                            <button
+                              key={theme.value}
+                              onClick={() => {
+                                handleThemeChange(isDark, theme.value);
+                                setIsThemeSwitcherOpen(false);
+                              }}
+                              className={`w-full flex items-center justify-between px-2 py-1 rounded text-xs transition-all duration-150 ${
+                                isSelected 
+                                  ? 'bg-fd-primary text-fd-primary-foreground font-medium' 
+                                  : 'hover:bg-fd-accent hover:text-fd-accent-foreground text-fd-foreground'
+                              }`}
+                              style={{ height: '24px' }}
+                            >
+                              <span className="flex items-center">{theme.label}</span>
+                              {isSelected && (
+                                <span className="flex items-center">✓</span>
+                              )}
+                            </button>
+                          );
+                        })}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
           <div
             ref={codeRef}
             className="[&_*]:!bg-transparent [&_pre]:!bg-transparent [&_code]:!bg-transparent [&_pre]:!leading-6 [&_code]:!leading-6"