docs

Author: userdocs

docs/src/components/BuildConfigTool.astro

@@ -910,11 +910,56 @@ const advancedOptions = configOptions.filter(
 	}
 </style>
 
-<!-- Prism.js -->
-<link
-	rel="stylesheet"
-	href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-dark.min.css"
-/>
+<!-- Prism.js - Theme-aware loading -->
+<script is:inline>
+	// Load and manage Prism theme switching
+	(function() {
+		let currentPrismLink = null;
+
+		function loadPrismTheme(isLight = false) {
+			// Remove existing Prism theme
+			if (currentPrismLink) {
+				currentPrismLink.remove();
+			}
+
+			// Create new theme link
+			currentPrismLink = document.createElement('link');
+			currentPrismLink.rel = 'stylesheet';
+			currentPrismLink.id = 'prism-theme';
+			currentPrismLink.href = isLight
+				? 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css'
+				: 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-dark.min.css';
+			document.head.appendChild(currentPrismLink);
+		}
+
+		// Initial theme load
+		const initialTheme = document.documentElement.getAttribute('data-theme');
+		loadPrismTheme(initialTheme === 'light');
+
+		// Watch for theme changes
+		const observer = new MutationObserver((mutations) => {
+			mutations.forEach((mutation) => {
+				if (mutation.type === 'attributes' && mutation.attributeName === 'data-theme') {
+					const newTheme = document.documentElement.getAttribute('data-theme');
+					loadPrismTheme(newTheme === 'light');
+
+					// Re-highlight after theme change
+					setTimeout(() => {
+						if (typeof window.Prism !== 'undefined') {
+							window.Prism.highlightAll();
+						}
+					}, 100);
+				}
+			});
+		});
+
+		observer.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: ['data-theme']
+		});
+	})();
+</script>
+
 <script
 	is:inline
 	src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"

docs/src/styles/custom.css

@@ -63,34 +63,34 @@
     --sl-color-accent-low: #e8f5f2;
     --sl-color-accent: #0d4d3f;
     --sl-color-accent-high: #002d26;
-    --sl-color-white: #2a1a36;
-    --sl-color-gray-1: #3d1f5c;
-    --sl-color-gray-2: #4d3570;
-    --sl-color-gray-3: #745294;
-    --sl-color-gray-4: #a685cc;
-    --sl-color-gray-5: #d6c8ea;
-    --sl-color-gray-6: #f5edff;
+    --sl-color-white: #1a1a1a;
+    --sl-color-gray-1: #2a2a2a;
+    --sl-color-gray-2: #333333;
+    --sl-color-gray-3: #555555;
+    --sl-color-gray-4: #777777;
+    --sl-color-gray-5: #999999;
+    --sl-color-gray-6: #bbbbbb;
     --sl-color-gray-7: #e8e4f0;
-    --sl-color-black: #f2f1f1;
+    --sl-color-black: #f8f8f8;
 
     /* Enhanced Light Mode Buttons */
-    --sl-button-bg-primary: #b8d6c7;
-    --sl-button-bg-secondary: #c9b8d4;
+    --sl-button-bg-primary: #d4e8dc;
+    --sl-button-bg-secondary: #e0d4e8;
 
     /* Interactive Elements */
     --react-toggle-checked: #9f4aa8;
 
-    /* Content Areas */
-    --details-1: #b8ccaa;
-    --details-2: #5a1085;
-    --details-3: #e2e2e2;
+    /* Content Areas - Fixed contrast issues */
+    --details-1: #f0f8f4;
+    --details-2: #e8f0f8;
+    --details-3: #f5f5f5;
 
     /* Links with Better Contrast */
     --url-colour: #7a0fa3 !important;
     --url-colour-hover: #1a6b5f !important;
 
     /* Code Styling */
-    --code-inline-background: #e8f5f2;
+    --code-inline-background: #f8faf9;
     --code-inline-color: #1a1a1a;
     --code-inline-border: #4a9b7f;
 
@@ -102,7 +102,7 @@
 
     /* UI Elements */
     --steps-border: #9f4aa8;
-    --modal-url-color: var(--sl-color-black);
+    --modal-url-color: #1a1a1a;
     --modal-url-hover-color: #000;
     --modal-url-bg-color: var(--code-inline-border);
     --modal-url-bg-hv-color: #2ec7bf;
@@ -627,10 +627,6 @@ a[tabindex="-1"]:hover {
     opacity: 1;
 }
 
-:root[data-theme="light"] .starlight-aside {
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-}
 
 :root[data-theme="light"] .react-toggle-track {
     background-color: #d1c2dc !important;