Skip to content

feat: add dark mode toggle #43

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
JavaZeroo merged 5 commits into from
Aug 25, 2025
Merged

feat: add dark mode toggle #43

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4187fac
feat: add dark mode support
JavaZeroo Aug 25, 2025
efa6520
feat: improve dark mode styling
JavaZeroo Aug 25, 2025
ab527b3
feat: add system auto theme and fix preset select dark styles
JavaZeroo Aug 25, 2025
7948a58
chore: remove unused header import
JavaZeroo Aug 25, 2025
a4bfdca
fix: guard matchMedia in theme toggle tests
JavaZeroo Aug 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 30 additions & 29 deletions src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ import { RegexControls } from './components/RegexControls';
import { FileList } from './components/FileList';
import ChartContainer from './components/ChartContainer';
import { ComparisonControls } from './components/ComparisonControls';
import { Header } from './components/Header';
import { FileConfigModal } from './components/FileConfigModal';
import { ThemeToggle } from './components/ThemeToggle';
import { PanelLeftClose, PanelLeftOpen } from 'lucide-react';
import { mergeFilesWithReplacement } from './utils/mergeFiles.js';

Expand Down Expand Up @@ -194,14 +194,14 @@ function App() {
}, [handleGlobalDragEnter, handleGlobalDragOver, handleGlobalDragLeave, handleGlobalDrop]);

return (
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 relative page-fade-in">
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-700 relative page-fade-in">
{/* 全页面拖拽覆盖层 */}
{globalDragOver && (
<div
className="fixed inset-0 bg-blue-600 bg-opacity-95 z-50 flex items-center justify-center backdrop-blur-sm drag-overlay-fade-in"
className="fixed inset-0 bg-blue-600 dark:bg-blue-950 bg-opacity-95 z-50 flex items-center justify-center backdrop-blur-sm drag-overlay-fade-in"
>
<div
className="bg-white rounded-xl shadow-2xl p-8 text-center max-w-md mx-4 border-4 border-dashed border-blue-300 drag-modal-scale-in"
<div
className="bg-white dark:bg-gray-800 rounded-xl shadow-2xl p-8 text-center max-w-md mx-4 border-4 border-dashed border-blue-300 dark:border-blue-700 drag-modal-scale-in"
>
<div className="mb-6">
<div className="relative">
Expand All @@ -226,13 +226,13 @@ function App() {
</div>
</div>
</div>
<h3 className="text-xl font-bold text-gray-900 mb-3">
<h3 className="text-xl font-bold text-gray-900 dark:text-gray-100 mb-3">
🎯 释放文件以上传
</h3>
<p className="text-sm text-gray-600 mb-2">
<p className="text-sm text-gray-600 dark:text-gray-300 mb-2">
支持 <span className="font-semibold text-blue-600">所有文本格式</span> 文件
</p>
<p className="text-xs text-gray-500">
<p className="text-xs text-gray-500 dark:text-gray-400">
拖拽到页面任意位置即可快速上传文件
</p>
</div>
Expand All @@ -242,7 +242,7 @@ function App() {
{!sidebarVisible && (
<button
onClick={() => setSidebarVisible(true)}
className="fixed top-3 left-3 z-40 p-2 bg-white rounded-full shadow-md text-gray-600 hover:text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500"
className="fixed top-3 left-3 z-40 p-2 bg-white dark:bg-gray-800 rounded-full shadow-md text-gray-600 dark:text-gray-200 hover:text-gray-800 dark:hover:text-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500"
aria-label="显示工具栏"
>
<PanelLeftOpen size={20} aria-hidden="true" />
Expand All @@ -263,32 +263,33 @@ function App() {
aria-label="控制面板"
>
{/* 标题信息 */}
<div className="bg-white rounded-lg shadow-md p-3">
<div className="card">
<div className="flex items-center gap-2 mb-2">
<div className="p-2 bg-blue-100 rounded-lg">
<div className="p-2 bg-blue-100 dark:bg-blue-900 rounded-lg">
<svg className="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
</svg>
</div>
<h1 className="text-lg font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-blue-600 via-purple-500 to-indigo-600 animate-gradient-slow">
Log Analyzer
</h1>
<ThemeToggle className="ml-auto" />
<button
onClick={() => setSidebarVisible(false)}
className="ml-auto p-1 text-gray-400 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 rounded"
className="p-1 text-gray-400 hover:text-gray-600 dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 rounded"
aria-label="隐藏工具栏"
>
<PanelLeftClose size={16} aria-hidden="true" />
</button>
</div>
<p className="text-sm text-gray-600 mb-3">
<p className="text-sm text-gray-600 dark:text-gray-300 mb-3">
📊 分析和可视化大模型训练日志中的损失函数和梯度范数数据
</p>

{/* 状态和链接按钮 */}
<div className="flex items-center gap-2" role="group" aria-label="工具状态和链接">
<span
className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800"
<span
className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
aria-label="当前为在线版本"
>
<span aria-hidden="true">🌐</span>
Expand All @@ -298,7 +299,7 @@ function App() {
href="https://github.com/JavaZeroo/log-parser"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-700 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
className="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-700 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
aria-label="访问 GitHub 仓库（在新窗口中打开）"
>
<svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
Expand Down Expand Up @@ -334,26 +335,26 @@ function App() {
/>
)}

<section className="bg-white rounded-lg shadow-md p-3" aria-labelledby="display-options-heading">
<h3
<section className="card" aria-labelledby="display-options-heading">
<h3
id="display-options-heading"
className="text-base font-semibold text-gray-800 mb-2"
className="card-title mb-2"
>
🎛️ 显示选项
</h3>
<div className="space-y-3">
<div>
<h4 className="text-xs font-medium text-gray-700 mb-2">📊 图表显示</h4>
<p className="text-xs text-gray-500">上传文件后自动展示所有已配置的指标图表</p>
<h4 className="text-xs font-medium text-gray-700 dark:text-gray-300 mb-2">📊 图表显示</h4>
<p className="text-xs text-gray-500 dark:text-gray-400">上传文件后自动展示所有已配置的指标图表</p>
</div>

<div className="border-t pt-3">
<h4 className="text-xs font-medium text-gray-700 mb-2">基准线设置</h4>
<div className="border-t border-gray-200 dark:border-gray-700 pt-3">
<h4 className="text-xs font-medium text-gray-700 dark:text-gray-300 mb-2">基准线设置</h4>
<div className="space-y-3">
<div>
<label
<label
htmlFor="relative-baseline"
className="block text-xs font-medium text-gray-700 mb-1"
className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1"
>
相对误差 Baseline
</label>
Expand All @@ -363,7 +364,7 @@ function App() {
step="0.001"
value={relativeBaseline}
onChange={(e) => setRelativeBaseline(parseFloat(e.target.value) || 0)}
className="w-full px-2 py-1 text-xs border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none"
className="input-field"
placeholder="0.002"
aria-describedby="relative-baseline-description"
/>
Expand All @@ -376,9 +377,9 @@ function App() {
</div>

<div>
<label
<label
htmlFor="absolute-baseline"
className="block text-xs font-medium text-gray-700 mb-1"
className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1"
>
绝对误差 Baseline
</label>
Expand All @@ -388,7 +389,7 @@ function App() {
step="0.001"
value={absoluteBaseline}
onChange={(e) => setAbsoluteBaseline(parseFloat(e.target.value) || 0)}
className="w-full px-2 py-1 text-xs border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none"
className="input-field"
placeholder="0.005"
aria-describedby="absolute-baseline-description"
/>
Expand Down
12 changes: 6 additions & 6 deletions src/components/ChartContainer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -532,8 +532,8 @@ export default function ChartContainer({

if (parsedData.length === 0) {
return (
<div className="bg-white rounded-lg shadow-md p-8">
<div className="text-center text-gray-500">
<div className="card p-8">
<div className="text-center text-gray-500 dark:text-gray-400">
<p className="text-lg mb-2">📊 暂无数据</p>
<p>📁 请上传日志文件开始分析</p>
</div>
Expand All @@ -559,8 +559,8 @@ export default function ChartContainer({

if (metrics.length === 0) {
return (
<div className="bg-white rounded-lg shadow-md p-8">
<div className="text-center text-gray-500">
<div className="card p-8">
<div className="text-center text-gray-500 dark:text-gray-400">
<p className="text-lg mb-2 font-medium">🎯 请选择要显示的图表</p>
</div>
</div>
Expand Down Expand Up @@ -639,8 +639,8 @@ export default function ChartContainer({
</ResizablePanel>
{comparisonChart}
{stats && (
<div className="bg-white rounded-lg shadow-md p-3">
<h4 className="text-sm font-medium text-gray-700 mb-1">{key} 差值统计</h4>
<div className="card">
<h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{key} 差值统计</h4>
<div className="space-y-1 text-xs">
<p>平均误差 (normal): {stats.meanNormal.toFixed(6)}</p>
<p>平均误差 (absolute): {stats.meanAbsolute.toFixed(6)}</p>
Expand Down
26 changes: 13 additions & 13 deletions src/components/ComparisonControls.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,16 @@ export function ComparisonControls({
];

return (
<section className="bg-white rounded-lg shadow-md p-3" aria-labelledby="comparison-controls-heading">
<section className="card" aria-labelledby="comparison-controls-heading">
<div className="flex items-center gap-2 mb-2">
<BarChart2
size={16}
className="text-gray-600"
<BarChart2
size={16}
className="text-gray-600 dark:text-gray-300"
aria-hidden="true"
/>
<h3
<h3
id="comparison-controls-heading"
className="text-base font-semibold text-gray-800"
className="card-title"
>
⚖️ 对比模式
</h3>
Expand All @@ -31,26 +31,26 @@ export function ComparisonControls({
<fieldset className="space-y-2">
<legend className="sr-only">选择数据对比模式</legend>
{modes.map(mode => (
<label
key={mode.value}
className="flex items-center cursor-pointer hover:bg-gray-50 p-1 rounded"
<label
key={mode.value}
className="flex items-center cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 p-1 rounded"
>
<input
type="radio"
name="compareMode"
value={mode.value}
checked={compareMode === mode.value}
onChange={(e) => onCompareModeChange(e.target.value)}
className="text-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
className="radio"
aria-describedby={`mode-${mode.value}-description`}
/>
<div className="ml-2">
<div className="text-xs font-medium text-gray-700">
<div className="text-xs font-medium text-gray-700 dark:text-gray-300">
{mode.label}
</div>
<div
<div
id={`mode-${mode.value}-description`}
className="text-xs text-gray-500"
className="text-xs text-gray-500 dark:text-gray-400"
>
{mode.description}
</div>
Expand Down
Loading