Skip to content

Commit ed2f736

Browse files
ParleSecParleSec
committed
UPDATE: Dark mode parity on prod UI; init theme early and switch components to theme tokens
1 parent 404aaf4 commit ed2f736

10 files changed

Lines changed: 49 additions & 32 deletions

File tree

‎frontend/public/index.html‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html lang="en">
2+
<html lang="en" class="dark">
33
<head>
44
<meta charset="utf-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover" />
@@ -8,6 +8,21 @@
88
<title>Quantum Field Kit</title>
99
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
1010
<meta name="color-scheme" content="light dark" />
11+
<script>
12+
(function() {
13+
try {
14+
var stored = localStorage.getItem('theme');
15+
var prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
16+
var theme = stored || (prefersDark ? 'dark' : 'quantumlight');
17+
var html = document.documentElement;
18+
var head = document.querySelector('head');
19+
html.setAttribute('data-theme', theme);
20+
if (head) head.setAttribute('data-theme', theme);
21+
if (theme === 'dark') html.classList.add('dark');
22+
else html.classList.remove('dark');
23+
} catch (e) { /* no-op */ }
24+
})();
25+
</script>
1126

1227
<!-- Google Analytics -->
1328
<script async src="https://www.googletagmanager.com/gtag/js?id=G-SZH9MSH6K5"></script>

‎frontend/src/components/plugin/EnhancedPluginParameterForm.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -151,7 +151,7 @@ const EnhancedPluginParameterForm = ({
151151
>
152152
<motion.span
153153
layout
154-
className="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform"
154+
className="inline-block h-4 w-4 transform rounded-full bg-base-100 dark:bg-neutral-200 shadow-sm transition-transform"
155155
animate={{ x: value ? 24 : 4 }}
156156
transition={{ type: "spring", stiffness: 500, damping: 30 }}
157157
/>
@@ -237,7 +237,7 @@ const EnhancedPluginParameterForm = ({
237237
animate={{ opacity: 1, height: 'auto' }}
238238
exit={{ opacity: 0, height: 0 }}
239239
transition={{ duration: 0.3 }}
240-
className="space-y-4 pt-4 border-t border-neutral-200"
240+
className="space-y-4 pt-4 border-t border-neutral-200 dark:border-neutral-700"
241241
>
242242
<div className="flex items-center gap-2 text-sm text-neutral-600">
243243
<HelpCircle size={16} />
@@ -275,7 +275,7 @@ const EnhancedPluginParameterForm = ({
275275
onClick={handleReset}
276276
disabled={loading}
277277
icon={<RotateCcw size={16} />}
278-
className="border-2 border-neutral-400 hover:border-neutral-600 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-700 min-h-[48px] sm:min-h-[44px] sm:flex-shrink-0"
278+
className="border-2 border-neutral-400 hover:border-neutral-600 text-neutral-700 dark:text-neutral-300 hover:bg-base-200 dark:hover:bg-neutral-700 min-h-[48px] sm:min-h-[44px] sm:flex-shrink-0"
279279
>
280280
Reset
281281
</Button>

‎frontend/src/components/plugin/EnhancedPluginResultsPanel.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -194,10 +194,10 @@ const EnhancedPluginResultsPanel = ({ result, loading, onExport, onShare }) => {
194194
initial={{ opacity: 0, y: 20 }}
195195
animate={{ opacity: 1, y: 0 }}
196196
transition={{ duration: 0.5 }}
197-
className={isFullscreen ? 'fixed inset-4 z-50 bg-white rounded-xl shadow-2xl' : ''}
197+
className={isFullscreen ? 'fixed inset-4 z-50 bg-base-100 dark:bg-base-200 rounded-xl shadow-2xl' : ''}
198198
>
199199
<Card variant="elevated" padding="none" className="h-full">
200-
<div className="p-4 sm:p-6 border-b border-neutral-200">
200+
<div className="p-4 sm:p-6 border-b border-neutral-200 dark:border-neutral-700 bg-base-100 dark:bg-base-200">
201201
{/* Main Header */}
202202
<div className="flex items-center justify-between mb-3 sm:mb-0">
203203
<div className="flex items-center gap-2 sm:gap-3 min-w-0 flex-1">
@@ -218,7 +218,7 @@ const EnhancedPluginResultsPanel = ({ result, loading, onExport, onShare }) => {
218218
<div className="sm:hidden flex-shrink-0">
219219
<button
220220
onClick={() => setIsFullscreen(!isFullscreen)}
221-
className="p-2 rounded-lg bg-neutral-100 hover:bg-neutral-200 text-neutral-600 transition-colors min-h-[44px] min-w-[44px] flex items-center justify-center"
221+
className="p-2 rounded-lg bg-base-200 hover:bg-neutral-200 dark:hover:bg-neutral-700 text-neutral-600 dark:text-neutral-200 transition-colors min-h-[44px] min-w-[44px] flex items-center justify-center"
222222
title={isFullscreen ? 'Exit Fullscreen' : 'Fullscreen'}
223223
>
224224
<Maximize2 size={16} />
@@ -277,7 +277,7 @@ const EnhancedPluginResultsPanel = ({ result, loading, onExport, onShare }) => {
277277
flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium whitespace-nowrap transition-all min-h-[44px]
278278
${copied
279279
? 'bg-green-100 text-green-700'
280-
: 'bg-neutral-100 text-neutral-700 hover:bg-neutral-200 disabled:opacity-50'
280+
: 'bg-base-200 text-neutral-700 dark:text-neutral-200 hover:bg-neutral-200 dark:hover:bg-neutral-700 disabled:opacity-50'
281281
}
282282
`}
283283
>

‎frontend/src/components/plugin/QuantumVisualization.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ const QuantumVisualization = ({ result, type = 'auto' }) => {
9595
ref={canvasRef}
9696
width={300}
9797
height={300}
98-
className="border border-neutral-200 rounded-lg bg-white"
98+
className="border border-neutral-200 dark:border-neutral-600 rounded-lg bg-base-100 dark:bg-base-200"
9999
/>
100100
);
101101
};
@@ -117,7 +117,7 @@ const QuantumVisualization = ({ result, type = 'auto' }) => {
117117
className="flex items-center gap-3"
118118
>
119119
<div className="w-12 text-sm font-mono text-neutral-600">|{state}⟩</div>
120-
<div className="flex-1 bg-neutral-100 rounded-full h-6 relative overflow-hidden">
120+
<div className="flex-1 bg-base-200 dark:bg-neutral-800 rounded-full h-6 relative overflow-hidden">
121121
<motion.div
122122
initial={{ width: 0 }}
123123
animate={{ width: `${(probability / maxProb) * 100}%` }}
@@ -177,7 +177,7 @@ const QuantumVisualization = ({ result, type = 'auto' }) => {
177177
<motion.div
178178
initial={{ opacity: 0, scale: 0.95 }}
179179
animate={{ opacity: 1, scale: 1 }}
180-
className="bg-white dark:bg-neutral-900 p-6 rounded-xl border border-neutral-200 dark:border-neutral-700 overflow-hidden"
180+
className="bg-base-100 dark:bg-base-200 p-6 rounded-xl border border-neutral-200 dark:border-neutral-700 overflow-hidden"
181181
>
182182
<div className="mb-4 flex items-center justify-between">
183183
<div>
@@ -192,7 +192,7 @@ const QuantumVisualization = ({ result, type = 'auto' }) => {
192192
{/* Controls */}
193193
<div className="flex items-center gap-2">
194194
{/* Zoom Controls */}
195-
<div className="flex items-center gap-1 sm:gap-2 bg-neutral-100 dark:bg-neutral-800 rounded-lg p-1">
195+
<div className="flex items-center gap-1 sm:gap-2 bg-base-200 dark:bg-neutral-800 rounded-lg p-1">
196196
<button
197197
onClick={handleZoomOut}
198198
className="p-2 sm:p-1 hover:bg-neutral-200 dark:hover:bg-neutral-700 rounded text-neutral-600 dark:text-neutral-400 transition-colors min-h-[44px] sm:min-h-[32px] min-w-[44px] sm:min-w-[32px] flex items-center justify-center"
@@ -245,7 +245,7 @@ const QuantumVisualization = ({ result, type = 'auto' }) => {
245245

246246
<div
247247
ref={containerRef}
248-
className="overflow-auto bg-white dark:bg-neutral-800 rounded-lg border border-neutral-100 dark:border-neutral-600 p-2 sm:p-4 cursor-grab active:cursor-grabbing touch-pan-x touch-pan-y"
248+
className="overflow-auto bg-base-100 dark:bg-neutral-800 rounded-lg border border-neutral-100 dark:border-neutral-600 p-2 sm:p-4 cursor-grab active:cursor-grabbing touch-pan-x touch-pan-y"
249249
style={{
250250
maxHeight: '400px',
251251
scrollbarWidth: 'thin',
@@ -339,16 +339,16 @@ const QuantumVisualization = ({ result, type = 'auto' }) => {
339339
return (
340340
<div className="space-y-6">
341341
{availableVisualizations.length > 1 && (
342-
<div className="flex gap-2 p-1 bg-neutral-100 rounded-lg">
342+
<div className="flex gap-2 p-1 bg-base-200 rounded-lg">
343343
{availableVisualizations.map((viz) => (
344344
<button
345345
key={viz.id}
346346
onClick={() => setActiveVisualization(viz.id)}
347347
className={`
348348
flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium transition-all
349349
${activeVisualization === viz.id
350-
? 'bg-white text-neutral-900 shadow-sm'
351-
: 'text-neutral-600 hover:text-neutral-900 hover:bg-white/50'
350+
? 'bg-base-100 text-neutral-900 dark:text-neutral-100 shadow-sm'
351+
: 'text-neutral-600 dark:text-neutral-300 hover:text-neutral-900 dark:hover:text-neutral-100 hover:bg-base-100/50'
352352
}
353353
`}
354354
>

‎frontend/src/components/plugin/SimpleTabs.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,16 @@ const SimpleTabs = ({ tabs, defaultTab = null }) => {
88
return (
99
<div className="w-full">
1010
{/* Tab Headers */}
11-
<div className="flex bg-neutral-100 rounded-lg p-1 mb-4 gap-1 overflow-x-auto">
11+
<div className="flex bg-base-200 rounded-lg p-1 mb-4 gap-1 overflow-x-auto">
1212
{tabs.map((tab) => (
1313
<button
1414
key={tab.id}
1515
onClick={() => setActiveTab(tab.id)}
1616
className={`
1717
flex items-center gap-2 px-3 py-3 sm:px-4 sm:py-2 rounded-md border-0 text-sm font-medium cursor-pointer transition-all duration-200 whitespace-nowrap min-h-[44px] sm:min-h-[36px] flex-1 sm:flex-initial
1818
${activeTab === tab.id
19-
? 'bg-white text-neutral-900 shadow-sm'
20-
: 'bg-transparent text-neutral-600 hover:text-neutral-800'
19+
? 'bg-base-100 text-neutral-900 dark:text-neutral-100 shadow-sm'
20+
: 'bg-transparent text-neutral-600 dark:text-neutral-300 hover:text-neutral-800 dark:hover:text-neutral-100'
2121
}
2222
`}
2323
>

‎frontend/src/design-system/components/Card.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,10 @@ const Card = forwardRef(({
1313
const baseClasses = 'rounded-xl border transition-all duration-200';
1414

1515
const variants = {
16-
default: 'border-neutral-200 dark:border-neutral-500 shadow-sm bg-white dark:bg-neutral-800',
17-
elevated: 'border-neutral-200 dark:border-neutral-500 shadow-md bg-white dark:bg-neutral-800',
18-
outlined: 'border-neutral-300 dark:border-neutral-400 shadow-none bg-white dark:bg-neutral-800',
19-
glass: 'border-white/20 bg-white/80 dark:bg-neutral-800/80 backdrop-blur-md shadow-lg',
16+
default: 'border-neutral-200 dark:border-neutral-500 shadow-sm bg-base-100 dark:bg-base-200',
17+
elevated: 'border-neutral-200 dark:border-neutral-500 shadow-md bg-base-100 dark:bg-base-200',
18+
outlined: 'border-neutral-300 dark:border-neutral-400 shadow-none bg-base-100 dark:bg-base-200',
19+
glass: 'border-white/20 bg-base-100/80 dark:bg-base-200/80 backdrop-blur-md shadow-lg',
2020
};
2121

2222
const paddings = {

‎frontend/src/design-system/components/Input.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,8 @@ const Input = forwardRef(({
4141
: 'border-neutral-300 hover:border-neutral-400';
4242

4343
const disabledClasses = disabled
44-
? 'bg-neutral-50 text-neutral-500 cursor-not-allowed'
45-
: 'bg-white text-neutral-900';
44+
? 'bg-base-200 text-neutral-500 cursor-not-allowed'
45+
: 'bg-base-100 text-neutral-900 dark:text-neutral-100';
4646

4747
const iconClasses = icon ? (iconPosition === 'left' ? 'pl-10' : 'pr-10') : '';
4848
const passwordToggleClasses = type === 'password' ? 'pr-10' : '';

‎frontend/src/pages/EnhancedPlugin.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@ const EnhancedPlugin = () => {
155155
<motion.header
156156
initial={{ opacity: 0, y: -20 }}
157157
animate={{ opacity: 1, y: 0 }}
158-
className="bg-white/80 backdrop-blur-md border-b border-neutral-200 sticky top-16 z-40"
158+
className="bg-base-100/80 dark:bg-base-200/80 backdrop-blur-md border-b border-neutral-200 dark:border-neutral-700 sticky top-16 z-40"
159159
>
160160
<div className="container mx-auto px-2 sm:px-4 py-3 sm:py-4">
161161
<div className="flex items-center justify-between">
@@ -173,7 +173,7 @@ const EnhancedPlugin = () => {
173173
{/* Mobile back button */}
174174
<button
175175
onClick={() => navigate('/')}
176-
className="sm:hidden p-2 rounded-lg hover:bg-neutral-100 transition-colors"
176+
className="sm:hidden p-2 rounded-lg hover:bg-base-200 dark:hover:bg-neutral-700 transition-colors"
177177
>
178178
<ArrowLeft size={20} />
179179
</button>
@@ -360,13 +360,13 @@ const EnhancedPlugin = () => {
360360
animate={{ opacity: 1, scale: 1, y: 0 }}
361361
exit={{ opacity: 0, scale: 0.95, y: 20 }}
362362
onClick={(e) => e.stopPropagation()}
363-
className="bg-white dark:bg-neutral-900 rounded-2xl sm:rounded-3xl shadow-2xl max-w-6xl w-full max-h-[95vh] sm:max-h-[90vh] overflow-hidden border border-neutral-200 dark:border-neutral-700"
363+
className="bg-base-100 dark:bg-neutral-900 rounded-2xl sm:rounded-3xl shadow-2xl max-w-6xl w-full max-h-[95vh] sm:max-h-[90vh] overflow-hidden border border-neutral-200 dark:border-neutral-700"
364364
>
365365
{/* Enhanced Header */}
366366
<div className="bg-gradient-to-br from-blue-500 via-purple-600 to-indigo-700 p-4 sm:p-6 lg:p-8 text-white">
367367
<div className="flex items-center justify-between">
368368
<div className="flex items-center gap-2 sm:gap-4 min-w-0 flex-1">
369-
<div className="w-10 h-10 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl sm:rounded-2xl bg-white/20 backdrop-blur-sm flex items-center justify-center flex-shrink-0">
369+
<div className="w-10 h-10 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl sm:rounded-2xl bg-base-100/20 dark:bg-neutral-800/20 backdrop-blur-sm flex items-center justify-center flex-shrink-0">
370370
<Lightbulb size={20} className="sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-yellow-200" />
371371
</div>
372372
<div className="min-w-0 flex-1">

‎frontend/src/pages/Glossary.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ function Glossary() {
8787

8888
if (loading) {
8989
return (
90-
<div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50 dark:from-neutral-900 dark:via-neutral-800 dark:to-neutral-900">
90+
<div className="min-h-screen bg-gradient-to-br from-base-200 via-base-100 to-base-200">
9191
<div className="container mx-auto px-4 py-8">
9292
<SkeletonLoader />
9393
</div>
@@ -97,7 +97,7 @@ function Glossary() {
9797

9898
if (error) {
9999
return (
100-
<div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50 dark:from-neutral-900 dark:via-neutral-800 dark:to-neutral-900">
100+
<div className="min-h-screen bg-gradient-to-br from-base-200 via-base-100 to-base-200">
101101
<div className="container mx-auto px-4 py-8">
102102
<Card className="max-w-md mx-auto text-center p-8">
103103
<div className="text-red-500 mb-4">
@@ -116,7 +116,7 @@ function Glossary() {
116116
}
117117

118118
return (
119-
<div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50 dark:from-neutral-900 dark:via-neutral-800 dark:to-neutral-900">
119+
<div className="min-h-screen bg-gradient-to-br from-base-200 via-base-100 to-base-200">
120120
<div className="container mx-auto px-4 py-8">
121121
{/* Header */}
122122
<motion.div

‎frontend/tailwind.config.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ module.exports = {
77
],
88
safelist: [
99
'dark',
10+
'bg-base-100',
11+
'bg-base-200',
1012
'dark:bg-neutral-800',
1113
'dark:text-neutral-100',
1214
'dark:text-neutral-200',

0 commit comments

Comments
 (0)