Skip to content

Commit 190e8d3

Browse files
antoncodingantoncoding
committed
feat: darkmode
1 parent b3c6114 commit 190e8d3

File tree

12 files changed

+359
-114
lines changed

12 files changed

+359
-114
lines changed

‎src-tauri/src/settings.rs‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ pub struct Settings {
1111
pub first_visit_complete: Option<bool>,
1212
pub shortcut_enabled: Option<bool>,
1313
pub shortcut_keys: Option<String>,
14+
pub theme: Option<String>,
1415
}
1516

1617
impl Default for Settings {
@@ -27,6 +28,7 @@ impl Default for Settings {
2728
first_visit_complete: Some(false),
2829
shortcut_enabled: Some(true),
2930
shortcut_keys: Some("meta+KeyM".to_string()),
31+
theme: Some("light".to_string()),
3032
}
3133
}
3234
}
@@ -51,6 +53,10 @@ impl Settings {
5153
pub fn get_shortcut_keys(&self) -> String {
5254
self.shortcut_keys.clone().unwrap_or_else(|| "meta+KeyM".to_string())
5355
}
56+
57+
pub fn get_theme(&self) -> String {
58+
self.theme.clone().unwrap_or_else(|| "light".to_string())
59+
}
5460
}
5561

5662
pub fn settings_file_path() -> PathBuf {

‎src/App.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { useState, useEffect } from "react";
22
import { invoke } from "@tauri-apps/api/core";
33
import { listen } from "@tauri-apps/api/event";
44
import { isPermissionGranted, requestPermission, sendNotification } from '@tauri-apps/plugin-notification';
5+
import { ThemeProvider } from "./context/ThemeContext";
56
import { Settings } from "./components/ApiSettings";
67
import { PromptSettings } from "./components/PromptSettings";
78
import { Sidebar } from "./components/Sidebar";
@@ -109,7 +110,7 @@ function App() {
109110

110111
const renderContent = () => {
111112
if (loading) {
112-
return <div className="flex items-center justify-center min-h-screen text-slate-600">Loading...</div>;
113+
return <div className="flex items-center justify-center min-h-screen text-text-secondary">Loading...</div>;
113114
}
114115

115116
switch (activeSection) {
@@ -129,7 +130,7 @@ function App() {
129130
};
130131

131132
return (
132-
<>
133+
<ThemeProvider>
133134
<Sidebar
134135
activeSection={activeSection}
135136
onSectionChange={setActiveSection}
@@ -139,7 +140,7 @@ function App() {
139140
{renderContent()}
140141
</div>
141142
</div>
142-
</>
143+
</ThemeProvider>
143144
);
144145
}
145146

‎src/components/ApiSettings.tsx‎

Lines changed: 31 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { useState, useEffect } from "react";
22
import { invoke } from "@tauri-apps/api/core";
33
import { ask, message } from '@tauri-apps/plugin-dialog';
44
import { ShortcutItem } from "./ShortcutItem";
5+
import { ThemeSelector } from "./ThemeSelector";
56
import { useShortcutEditor } from "../hooks/useShortcutEditor";
67
import { backendFormatToShortcut, shortcutToBackendFormat, Shortcut } from "../utils/keyboardUtils";
78

@@ -157,10 +158,10 @@ export function Settings() {
157158
return (
158159
<div className="p-6 space-y-6">
159160
<div className="animate-pulse">
160-
<div className="h-8 bg-slate-200 rounded w-1/3 mb-4"></div>
161+
<div className="h-8 bg-border-primary rounded w-1/3 mb-4"></div>
161162
<div className="space-y-3">
162163
{[...Array(3)].map((_, i) => (
163-
<div key={i} className="h-20 bg-slate-200 rounded"></div>
164+
<div key={i} className="h-20 bg-border-primary rounded"></div>
164165
))}
165166
</div>
166167
</div>
@@ -171,20 +172,20 @@ export function Settings() {
171172
return (
172173
<div className="max-w-2xl mx-auto p-6 space-y-8">
173174
<div>
174-
<h1 className="text-2xl text-slate-800">Settings</h1>
175-
<p className="text-slate-600 mt-1">Configure your Milo preferences</p>
175+
<h1 className="text-2xl text-text-primary">Settings</h1>
176+
<p className="text-text-secondary mt-1">Configure your Milo preferences</p>
176177
</div>
177178

178179
{/* API Key Section */}
179-
<div className="bg-white p-6 rounded-lg border border-slate-200">
180+
<div className="bg-background-secondary p-6 rounded-lg border border-border-primary">
180181
<div className="mb-4">
181-
<h2 className="text-lg text-slate-800">OpenAI API Configuration</h2>
182-
<p className="text-sm text-slate-600">Configure your OpenAI API key for text transformations</p>
182+
<h2 className="text-lg text-text-primary">OpenAI API Configuration</h2>
183+
<p className="text-sm text-text-secondary">Configure your OpenAI API key for text transformations</p>
183184
</div>
184185

185186
<div className="space-y-4">
186187
<div>
187-
<label htmlFor="apiKey" className="block text-sm text-slate-700 mb-2">
188+
<label htmlFor="apiKey" className="block text-sm text-text-primary mb-2">
188189
API Key
189190
</label>
190191
<input
@@ -193,28 +194,38 @@ export function Settings() {
193194
value={apiKey}
194195
onChange={(e) => setApiKey(e.target.value)}
195196
placeholder="sk-..."
196-
className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
197+
className="w-full px-3 py-2 border border-border-primary rounded-lg focus:ring-2 focus:ring-accent-primary focus:border-accent-primary bg-background-primary text-text-primary"
197198
/>
198-
<p className="text-xs text-slate-500 mt-1">
199+
<p className="text-xs text-text-tertiary mt-1">
199200
Your API key is stored securely on your device and never shared.
200201
</p>
201202
</div>
202203

203204
<button
204205
onClick={saveApiKey}
205206
disabled={saving || !apiKey.trim()}
206-
className="px-3 py-2 text-sm bg-gray-100 text-gray-600 hover:bg-gray-200 rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
207+
className="px-3 py-2 text-sm bg-background-tertiary text-text-secondary hover:bg-border-primary rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
207208
>
208209
{saving ? 'Saving...' : 'Save API Key'}
209210
</button>
210211
</div>
211212
</div>
212213

214+
{/* Theme Selection Section */}
215+
<div className="bg-background-secondary p-6 rounded-lg border border-border-primary">
216+
<div className="mb-4">
217+
<h2 className="text-lg text-text-primary">Appearance</h2>
218+
<p className="text-sm text-text-secondary">Choose your preferred theme</p>
219+
</div>
220+
221+
<ThemeSelector />
222+
</div>
223+
213224
{/* Shortcut Configuration Section */}
214-
<div className="bg-white p-6 rounded-lg border border-slate-200">
225+
<div className="bg-background-secondary p-6 rounded-lg border border-border-primary">
215226
<div className="mb-4">
216-
<h2 className="text-lg text-slate-800">Keyboard Shortcut</h2>
217-
<p className="text-sm text-slate-600">Configure the global shortcut to transform clipboard text</p>
227+
<h2 className="text-lg text-text-primary">Keyboard Shortcut</h2>
228+
<p className="text-sm text-text-secondary">Configure the global shortcut to transform clipboard text</p>
218229
</div>
219230

220231
{shortcut.length > 0 && (
@@ -234,21 +245,21 @@ export function Settings() {
234245
</div>
235246

236247
{/* Data Management Section */}
237-
<div className="bg-white p-6 rounded-lg border border-slate-200">
248+
<div className="bg-background-secondary p-6 rounded-lg border border-border-primary">
238249
<div className="mb-4">
239-
<h2 className="text-lg text-slate-800">Data Management</h2>
240-
<p className="text-sm text-slate-600">Manage your transformation history and data</p>
250+
<h2 className="text-lg text-text-primary">Data Management</h2>
251+
<p className="text-sm text-text-secondary">Manage your transformation history and data</p>
241252
</div>
242253

243254
<div className="space-y-4">
244255
<div className="flex items-center justify-between">
245256
<div>
246-
<h3 className="text-sm text-slate-800">Clear History</h3>
247-
<p className="text-xs text-slate-600">Remove all transformation history permanently</p>
257+
<h3 className="text-sm text-text-primary">Clear History</h3>
258+
<p className="text-xs text-text-secondary">Remove all transformation history permanently</p>
248259
</div>
249260
<button
250261
onClick={clearHistory}
251-
className="px-3 py-2 text-sm bg-gray-100 text-gray-600 hover:bg-gray-200 rounded transition-colors"
262+
className="px-3 py-2 text-sm bg-background-tertiary text-text-secondary hover:bg-border-primary rounded transition-colors"
252263
>
253264
Clear All History
254265
</button>

‎src/components/Dashboard.tsx‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -48,10 +48,10 @@ export function Dashboard() {
4848
return (
4949
<div className="p-6 space-y-6">
5050
<div className="animate-pulse">
51-
<div className="h-8 bg-slate-200 rounded w-1/3 mb-4"></div>
51+
<div className="h-8 bg-border-primary rounded w-1/3 mb-4"></div>
5252
<div className="space-y-3">
5353
{[...Array(3)].map((_, i) => (
54-
<div key={i} className="h-20 bg-slate-200 rounded"></div>
54+
<div key={i} className="h-20 bg-border-primary rounded"></div>
5555
))}
5656
</div>
5757
</div>
@@ -63,51 +63,51 @@ export function Dashboard() {
6363
<div className="p-6 space-y-6 max-w-6xl mx-auto">
6464
{/* Header */}
6565
<div className="mb-8">
66-
<h1 className="text-2xl text-slate-800">Dashboard</h1>
67-
<p className="text-slate-600 mt-1">Overview of your transformation activity</p>
66+
<h1 className="text-2xl text-text-primary">Dashboard</h1>
67+
<p className="text-text-secondary mt-1">Overview of your transformation activity</p>
6868
</div>
6969

7070
{/* Usage Stats */}
7171
{usageStats && (
7272
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
73-
<div className="bg-white p-6 rounded-lg border border-slate-200 relative flex flex-col h-32">
74-
<div className="text-3xl text-blue-600 mb-1">{usageStats.total_transformations}</div>
75-
<div className="text-sm text-slate-500 mt-auto mb-2">Transformations</div>
73+
<div className="bg-background-secondary p-6 rounded-lg border border-border-primary relative flex flex-col h-32">
74+
<div className="text-3xl text-accent-primary mb-1">{usageStats.total_transformations}</div>
75+
<div className="text-sm text-text-tertiary mt-auto mb-2">Transformations</div>
7676
</div>
7777

78-
<div className="bg-white p-6 rounded-lg border border-slate-200 relative flex flex-col h-32">
78+
<div className="bg-background-secondary p-6 rounded-lg border border-border-primary relative flex flex-col h-32">
7979
<div className="text-3xl text-green-600 mb-1">{usageStats.total_words_transformed}</div>
80-
<div className="text-sm text-slate-500 mt-auto mb-2">Words</div>
80+
<div className="text-sm text-text-tertiary mt-auto mb-2">Words</div>
8181
</div>
8282

83-
<div className="bg-white p-6 rounded-lg border border-slate-200 relative flex flex-col h-32">
83+
<div className="bg-background-secondary p-6 rounded-lg border border-border-primary relative flex flex-col h-32">
8484
<div className="text-3xl text-purple-600 mb-1">{usageStats.total_sentences_transformed}</div>
85-
<div className="text-sm text-slate-500 mt-auto mb-2">Sentences</div>
85+
<div className="text-sm text-text-tertiary mt-auto mb-2">Sentences</div>
8686
</div>
8787
</div>
8888
)}
8989

9090
{/* Daily Activity Chart */}
91-
<div className="bg-white p-6 rounded-lg border border-slate-200">
91+
<div className="bg-background-secondary p-6 rounded-lg border border-border-primary">
9292
<div className="flex justify-between items-center mb-4">
93-
<h2 className="text-lg text-slate-800">Daily Activity</h2>
93+
<h2 className="text-lg text-text-primary">Daily Activity</h2>
9494
<div className="flex gap-2">
9595
<button
9696
onClick={() => setSelectedPeriod(7)}
97-
className={`px-3 py-1 text-sm rounded ${
97+
className={`px-3 py-1 text-sm rounded transition-colors ${
9898
selectedPeriod === 7
99-
? 'bg-blue-100 text-blue-700'
100-
: 'text-slate-600 hover:bg-slate-100'
99+
? 'bg-accent-primary/10 text-accent-primary'
100+
: 'text-text-secondary hover:bg-background-tertiary'
101101
}`}
102102
>
103103
7 Days
104104
</button>
105105
<button
106106
onClick={() => setSelectedPeriod(30)}
107-
className={`px-3 py-1 text-sm rounded ${
107+
className={`px-3 py-1 text-sm rounded transition-colors ${
108108
selectedPeriod === 30
109-
? 'bg-blue-100 text-blue-700'
110-
: 'text-slate-600 hover:bg-slate-100'
109+
? 'bg-accent-primary/10 text-accent-primary'
110+
: 'text-text-secondary hover:bg-background-tertiary'
111111
}`}
112112
>
113113
30 Days
@@ -136,7 +136,7 @@ export function Dashboard() {
136136
<XAxis
137137
dataKey="displayDate"
138138
fontSize={12}
139-
tick={{ fill: '#64748b' }}
139+
tick={{ fill: 'var(--text-secondary)' }}
140140
axisLine={false}
141141
tickLine={false}
142142
/>
@@ -163,24 +163,24 @@ export function Dashboard() {
163163
}}
164164
labelFormatter={(label) => `Date: ${label}`}
165165
contentStyle={{
166-
backgroundColor: 'rgba(255, 255, 255, 0.95)',
167-
border: '1px solid #e2e8f0',
166+
backgroundColor: 'var(--bg-secondary)',
167+
border: '1px solid var(--border-primary)',
168168
borderRadius: '6px',
169-
color: '#334155',
169+
color: 'var(--text-primary)',
170170
fontSize: '12px',
171171
boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)'
172172
}}
173173
/>
174174
<Bar
175175
dataKey="transformation_count"
176-
fill="#3b82f6"
176+
fill="var(--accent-primary)"
177177
radius={[2, 2, 0, 0]}
178178
/>
179179
</BarChart>
180180
</ResponsiveContainer>
181181
</div>
182182
) : (
183-
<div className="text-slate-500 text-center py-8">No activity data available</div>
183+
<div className="text-text-tertiary text-center py-8">No activity data available</div>
184184
)}
185185
</div>
186186
</div>

0 commit comments

Comments
 (0)