Skip to content

Commit 9f039c7

Browse files
Boshenclaude
Boshen
and
claude
committed
fix: make all graphs dark mode compatible and remove dark mode toggle
- Fixed white backgrounds in charts (RolldownStats, MinificationBenchmarks, NpmDownloads) - Updated all chart colors to use currentColor and CSS variables - Made all stat cards and containers dark mode compatible - Removed dark mode toggle button (now uses system preferences only) - Ensured consistent styling across all components 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
1 parent 456f280 commit 9f039c7

File tree

4 files changed

+89
-120
lines changed

4 files changed

+89
-120
lines changed

‎apps/dashboard/src/MinificationBenchmarks.tsx‎

Lines changed: 33 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ function MinificationBenchmarks({}: MinificationBenchmarksProps) {
8080
return (
8181
<div
8282
key={library}
83-
className='bg-white border border-gray-200 rounded-xl px-6 py-6 shadow-sm transition-all duration-300 hover:shadow-md hover:-translate-y-0.5'
83+
className='bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-xl px-6 py-6 shadow-sm transition-all duration-300 hover:shadow-md hover:-translate-y-0.5'
8484
>
8585
<h3 className='mb-4 text-xl font-bold text-slate-800 capitalize text-center pb-2 border-b-2 border-slate-200'>
8686
{library}
@@ -93,27 +93,26 @@ function MinificationBenchmarks({}: MinificationBenchmarksProps) {
9393
</h4>
9494
<ResponsiveContainer width='100%' height={300}>
9595
<BarChart data={timeData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
96-
<CartesianGrid strokeDasharray='3 3' stroke='#e5e7eb' />
96+
<CartesianGrid strokeDasharray='3 3' className='stroke-slate-200 dark:stroke-slate-700' />
9797
<XAxis
9898
dataKey='name'
99-
tick={{ fill: '#374151', fontSize: 11 }}
100-
axisLine={{ stroke: '#d1d5db' }}
101-
tickLine={{ stroke: '#d1d5db' }}
99+
tick={{ fill: 'currentColor', fontSize: 11 }}
100+
axisLine={{ stroke: 'currentColor', opacity: 0.2 }}
101+
tickLine={{ stroke: 'currentColor', opacity: 0.2 }}
102102
angle={-45}
103103
textAnchor='end'
104104
height={60}
105105
/>
106106
<YAxis
107-
tick={{ fill: '#374151', fontSize: 11 }}
108-
axisLine={{ stroke: '#d1d5db' }}
109-
tickLine={{ stroke: '#d1d5db' }}
107+
tick={{ fill: 'currentColor', fontSize: 11 }}
108+
axisLine={{ stroke: 'currentColor', opacity: 0.2 }}
109+
tickLine={{ stroke: 'currentColor', opacity: 0.2 }}
110110
/>
111111
<Tooltip
112112
contentStyle={{
113-
backgroundColor: 'white',
114-
border: '1px solid #d1d5db',
113+
backgroundColor: 'var(--tooltip-bg)',
114+
border: '1px solid var(--tooltip-border)',
115115
borderRadius: '0.5rem',
116-
color: '#111827',
117116
boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
118117
}}
119118
formatter={(value: any) => [`${value}ms`, 'Minification Time']}
@@ -123,7 +122,7 @@ function MinificationBenchmarks({}: MinificationBenchmarksProps) {
123122
dataKey='value'
124123
position='top'
125124
formatter={(label: React.ReactNode) => `${label}ms`}
126-
style={{ fontSize: '12px', fill: '#374151' }}
125+
style={{ fontSize: '12px', fill: 'currentColor' }}
127126
/>
128127
</Bar>
129128
</BarChart>
@@ -137,27 +136,26 @@ function MinificationBenchmarks({}: MinificationBenchmarksProps) {
137136
</h4>
138137
<ResponsiveContainer width='100%' height={300}>
139138
<BarChart data={compressionData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
140-
<CartesianGrid strokeDasharray='3 3' stroke='#e5e7eb' />
139+
<CartesianGrid strokeDasharray='3 3' className='stroke-slate-200 dark:stroke-slate-700' />
141140
<XAxis
142141
dataKey='name'
143-
tick={{ fill: '#374151', fontSize: 11 }}
144-
axisLine={{ stroke: '#d1d5db' }}
145-
tickLine={{ stroke: '#d1d5db' }}
142+
tick={{ fill: 'currentColor', fontSize: 11 }}
143+
axisLine={{ stroke: 'currentColor', opacity: 0.2 }}
144+
tickLine={{ stroke: 'currentColor', opacity: 0.2 }}
146145
angle={-45}
147146
textAnchor='end'
148147
height={60}
149148
/>
150149
<YAxis
151-
tick={{ fill: '#374151', fontSize: 11 }}
152-
axisLine={{ stroke: '#d1d5db' }}
153-
tickLine={{ stroke: '#d1d5db' }}
150+
tick={{ fill: 'currentColor', fontSize: 11 }}
151+
axisLine={{ stroke: 'currentColor', opacity: 0.2 }}
152+
tickLine={{ stroke: 'currentColor', opacity: 0.2 }}
154153
/>
155154
<Tooltip
156155
contentStyle={{
157-
backgroundColor: 'white',
158-
border: '1px solid #d1d5db',
156+
backgroundColor: 'var(--tooltip-bg)',
157+
border: '1px solid var(--tooltip-border)',
159158
borderRadius: '0.5rem',
160-
color: '#111827',
161159
boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
162160
}}
163161
formatter={(value: any, _name: any, props: any) => [
@@ -170,7 +168,7 @@ function MinificationBenchmarks({}: MinificationBenchmarksProps) {
170168
dataKey='value'
171169
position='top'
172170
formatter={(label: React.ReactNode) => `${label}%`}
173-
style={{ fontSize: '10px', fill: '#374151' }}
171+
style={{ fontSize: '10px', fill: 'currentColor' }}
174172
/>
175173
</Bar>
176174
</BarChart>
@@ -184,34 +182,34 @@ function MinificationBenchmarks({}: MinificationBenchmarksProps) {
184182

185183
<div className='grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6'>
186184
{/* Minification statistics */}
187-
<div className='bg-white border border-slate-200 px-7 py-7 rounded-xl shadow-sm border-l-4 border-l-blue-500 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md'>
188-
<h3 className='mb-3 text-slate-500 text-sm font-semibold uppercase tracking-widest'>Libraries Tested</h3>
189-
<p className='mb-3 text-4xl font-bold text-slate-800 tracking-tight leading-tight'>
185+
<div className='bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 px-7 py-7 rounded-xl shadow-sm border-l-4 border-l-blue-500 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md'>
186+
<h3 className='mb-3 text-slate-500 dark:text-slate-400 text-sm font-semibold uppercase tracking-widest'>Libraries Tested</h3>
187+
<p className='mb-3 text-4xl font-bold text-slate-800 dark:text-slate-100 tracking-tight leading-tight'>
190188
{Object.keys(minificationData).length}
191189
</p>
192190
<span className='text-sm font-semibold px-3 py-1.5 rounded-lg inline-flex items-center gap-1 text-emerald-700 bg-emerald-100 bg-opacity-100 border border-emerald-200 border-opacity-200'>
193191
JavaScript Libraries
194192
</span>
195193
</div>
196-
<div className='bg-white border border-slate-200 px-7 py-7 rounded-xl shadow-sm border-l-4 border-l-blue-500 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md'>
197-
<h3 className='mb-3 text-slate-500 text-sm font-semibold uppercase tracking-widest'>Minifiers Compared</h3>
198-
<p className='mb-3 text-4xl font-bold text-slate-800 tracking-tight leading-tight'>
194+
<div className='bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 px-7 py-7 rounded-xl shadow-sm border-l-4 border-l-blue-500 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md'>
195+
<h3 className='mb-3 text-slate-500 dark:text-slate-400 text-sm font-semibold uppercase tracking-widest'>Minifiers Compared</h3>
196+
<p className='mb-3 text-4xl font-bold text-slate-800 dark:text-slate-100 tracking-tight leading-tight'>
199197
{popularMinifiers.length}
200198
</p>
201199
<span className='text-sm font-semibold px-3 py-1.5 rounded-lg inline-flex items-center gap-1 text-emerald-700 bg-emerald-100 bg-opacity-100 border border-emerald-200 border-opacity-200'>
202200
Popular Tools
203201
</span>
204202
</div>
205-
<div className='bg-white border border-slate-200 px-7 py-7 rounded-xl shadow-sm border-l-4 border-l-blue-500 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md'>
206-
<h3 className='mb-3 text-slate-500 text-sm font-semibold uppercase tracking-widest'>Fastest Minifier</h3>
207-
<p className='mb-3 text-4xl font-bold text-slate-800 tracking-tight leading-tight'>OXC</p>
203+
<div className='bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 px-7 py-7 rounded-xl shadow-sm border-l-4 border-l-blue-500 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md'>
204+
<h3 className='mb-3 text-slate-500 dark:text-slate-400 text-sm font-semibold uppercase tracking-widest'>Fastest Minifier</h3>
205+
<p className='mb-3 text-4xl font-bold text-slate-800 dark:text-slate-100 tracking-tight leading-tight'>OXC</p>
208206
<span className='text-sm font-semibold px-3 py-1.5 rounded-lg inline-flex items-center gap-1 text-emerald-700 bg-emerald-100 bg-opacity-100 border border-emerald-200 border-opacity-200'>
209207
Rust-based
210208
</span>
211209
</div>
212-
<div className='bg-white border border-slate-200 px-7 py-7 rounded-xl shadow-sm border-l-4 border-l-blue-500 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md'>
213-
<h3 className='mb-3 text-slate-500 text-sm font-semibold uppercase tracking-widest'>Best Compression</h3>
214-
<p className='mb-3 text-4xl font-bold text-slate-800 tracking-tight leading-tight'>UglifyJS</p>
210+
<div className='bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 px-7 py-7 rounded-xl shadow-sm border-l-4 border-l-blue-500 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md'>
211+
<h3 className='mb-3 text-slate-500 dark:text-slate-400 text-sm font-semibold uppercase tracking-widest'>Best Compression</h3>
212+
<p className='mb-3 text-4xl font-bold text-slate-800 dark:text-slate-100 tracking-tight leading-tight'>UglifyJS</p>
215213
<span className='text-sm font-semibold px-3 py-1.5 rounded-lg inline-flex items-center gap-1 text-emerald-700 bg-emerald-100 bg-opacity-100 border border-emerald-200 border-opacity-200'>
216214
Traditional Leader
217215
</span>

‎apps/dashboard/src/NpmDownloads.tsx‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -22,15 +22,15 @@ function NpmDownloads({}: NpmDownloadsProps) {
2222
return (
2323
<>
2424
<main className='max-w-6xl mx-auto px-8 py-8 flex flex-col gap-8'>
25-
<div className='bg-white border border-slate-200 px-8 py-8 rounded-xl shadow-sm'>
26-
<h2 className='mb-6 text-slate-800 text-3xl font-bold tracking-tight'>NPM Weekly Downloads</h2>
25+
<div className='bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 px-8 py-8 rounded-xl shadow-sm'>
26+
<h2 className='mb-6 text-slate-800 dark:text-slate-100 text-3xl font-bold tracking-tight'>NPM Weekly Downloads</h2>
2727

28-
<div className='mx-auto mb-8 rounded-lg border border-slate-200 bg-white shadow-sm max-w-lg w-fit'>
28+
<div className='mx-auto mb-8 rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 shadow-sm max-w-lg w-fit'>
2929
<ul className='list-none p-0 m-0'>
3030
{packages.map((packageName) => (
3131
<li
3232
key={packageName}
33-
className='flex items-center justify-between px-4 py-2 border-b border-slate-200 transition-all duration-200 cursor-pointer gap-3 min-w-fit hover:bg-slate-50 focus:outline-2 focus:outline-blue-500 focus:outline-offset-[-2px] focus:bg-slate-50 last:border-b-0'
33+
className='flex items-center justify-between px-4 py-2 border-b border-slate-200 dark:border-slate-700 transition-all duration-200 cursor-pointer gap-3 min-w-fit hover:bg-slate-50 dark:hover:bg-slate-700 focus:outline-2 focus:outline-blue-500 focus:outline-offset-[-2px] focus:bg-slate-50 dark:focus:bg-slate-700 last:border-b-0'
3434
onClick={() => handleCardClick(packageName)}
3535
role='button'
3636
tabIndex={0}
@@ -41,7 +41,7 @@ function NpmDownloads({}: NpmDownloadsProps) {
4141
}
4242
}}
4343
>
44-
<span className='font-mono text-sm font-medium text-gray-700 bg-slate-100 px-2 py-1 rounded border border-slate-300 min-w-fit whitespace-nowrap'>
44+
<span className='font-mono text-sm font-medium text-gray-700 dark:text-gray-300 bg-slate-100 dark:bg-slate-700 px-2 py-1 rounded border border-slate-300 dark:border-slate-600 min-w-fit whitespace-nowrap'>
4545
{packageName}
4646
</span>
4747
<img
@@ -57,30 +57,30 @@ function NpmDownloads({}: NpmDownloadsProps) {
5757
</div>
5858

5959
<div className='grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6'>
60-
<div className='bg-white border border-slate-200 px-7 py-7 rounded-xl shadow-sm border-l-4 border-l-blue-500 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md'>
61-
<h3 className='mb-3 text-slate-500 text-sm font-semibold uppercase tracking-widest'>Total Packages</h3>
62-
<p className='mb-3 text-4xl font-bold text-slate-800 tracking-tight leading-tight'>{packages.length}</p>
60+
<div className='bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 px-7 py-7 rounded-xl shadow-sm border-l-4 border-l-blue-500 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md'>
61+
<h3 className='mb-3 text-slate-500 dark:text-slate-400 text-sm font-semibold uppercase tracking-widest'>Total Packages</h3>
62+
<p className='mb-3 text-4xl font-bold text-slate-800 dark:text-slate-100 tracking-tight leading-tight'>{packages.length}</p>
6363
<span className='text-sm font-semibold px-3 py-1.5 rounded-lg inline-flex items-center gap-1 text-emerald-700 bg-emerald-100 bg-opacity-100 border border-emerald-200 border-opacity-200'>
6464
NPM Packages
6565
</span>
6666
</div>
67-
<div className='bg-white border border-slate-200 px-7 py-7 rounded-xl shadow-sm border-l-4 border-l-blue-500 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md'>
68-
<h3 className='mb-3 text-slate-500 text-sm font-semibold uppercase tracking-widest'>Registry</h3>
69-
<p className='mb-3 text-4xl font-bold text-slate-800 tracking-tight leading-tight'>NPM</p>
67+
<div className='bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 px-7 py-7 rounded-xl shadow-sm border-l-4 border-l-blue-500 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md'>
68+
<h3 className='mb-3 text-slate-500 dark:text-slate-400 text-sm font-semibold uppercase tracking-widest'>Registry</h3>
69+
<p className='mb-3 text-4xl font-bold text-slate-800 dark:text-slate-100 tracking-tight leading-tight'>NPM</p>
7070
<span className='text-sm font-semibold px-3 py-1.5 rounded-lg inline-flex items-center gap-1 text-emerald-700 bg-emerald-100 bg-opacity-100 border border-emerald-200 border-opacity-200'>
7171
Public Registry
7272
</span>
7373
</div>
74-
<div className='bg-white border border-slate-200 px-7 py-7 rounded-xl shadow-sm border-l-4 border-l-blue-500 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md'>
75-
<h3 className='mb-3 text-slate-500 text-sm font-semibold uppercase tracking-widest'>Update Frequency</h3>
76-
<p className='mb-3 text-4xl font-bold text-slate-800 tracking-tight leading-tight'>Weekly</p>
74+
<div className='bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 px-7 py-7 rounded-xl shadow-sm border-l-4 border-l-blue-500 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md'>
75+
<h3 className='mb-3 text-slate-500 dark:text-slate-400 text-sm font-semibold uppercase tracking-widest'>Update Frequency</h3>
76+
<p className='mb-3 text-4xl font-bold text-slate-800 dark:text-slate-100 tracking-tight leading-tight'>Weekly</p>
7777
<span className='text-sm font-semibold px-3 py-1.5 rounded-lg inline-flex items-center gap-1 text-emerald-700 bg-emerald-100 bg-opacity-100 border border-emerald-200 border-opacity-200'>
7878
Auto Updated
7979
</span>
8080
</div>
81-
<div className='bg-white border border-slate-200 px-7 py-7 rounded-xl shadow-sm border-l-4 border-l-blue-500 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md'>
82-
<h3 className='mb-3 text-slate-500 text-sm font-semibold uppercase tracking-widest'>Data Source</h3>
83-
<p className='mb-3 text-4xl font-bold text-slate-800 tracking-tight leading-tight'>Shields.io</p>
81+
<div className='bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 px-7 py-7 rounded-xl shadow-sm border-l-4 border-l-blue-500 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md'>
82+
<h3 className='mb-3 text-slate-500 dark:text-slate-400 text-sm font-semibold uppercase tracking-widest'>Data Source</h3>
83+
<p className='mb-3 text-4xl font-bold text-slate-800 dark:text-slate-100 tracking-tight leading-tight'>Shields.io</p>
8484
<span className='text-sm font-semibold px-3 py-1.5 rounded-lg inline-flex items-center gap-1 text-emerald-700 bg-emerald-100 bg-opacity-100 border border-emerald-200 border-opacity-200'>
8585
Live Data
8686
</span>

0 commit comments

Comments
 (0)