Skip to content

Commit 620b3fa

Browse files
G07chaG07cha
committed
feat: dark mode
1 parent 0905a36 commit 620b3fa

2 files changed

Lines changed: 161 additions & 51 deletions

File tree

‎packages/web-extension/assets/tailwind.css‎

Lines changed: 159 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,193 @@
11
@import "tailwindcss";
22

3+
@layer base {
4+
html,
5+
body {
6+
height: 100vh;
7+
margin: 0;
8+
padding: 0;
9+
}
10+
11+
:root {
12+
height: 100%;
13+
}
14+
15+
:root {
16+
/* Light theme */
17+
--primary: #000000;
18+
--secondary: #666666;
19+
--tertiary: #9ca3af;
20+
21+
--border-primary: var(--color-tertiary);
22+
--border-primary-hover: #6b7280;
23+
24+
/* Secondary Borders - Supporting borders, separators */
25+
--border-secondary: var(--color-secondary);
26+
--border-secondary-hover: #4b5563;
27+
28+
/* Tertiary Borders - Subtle borders, light separators */
29+
--border-tertiary: var(--color-tertiary);
30+
--border-tertiary-hover: #374151;
31+
32+
/* Primary Text - Main content, headers, important elements */
33+
--text-primary: #242424;
34+
35+
/* Secondary Text - Supporting content, labels, descriptions */
36+
--text-secondary: #d1d5db;
37+
38+
/* Tertiary Text - Subtle content, placeholders, disabled states */
39+
--text-tertiary: #9ca3af;
40+
41+
/* ===== CONTAINER COLORS ===== */
42+
43+
/* Primary Containers - Main panels, cards, primary backgrounds */
44+
--container-primary: #ffffff;
45+
--container-primary-hover: #f8f9fa;
46+
47+
/* ===== STATUS COLORS ===== */
48+
49+
/* Success Colors */
50+
--success: #54bc4a;
51+
--success-light: #68cc5c;
52+
--success-bg: rgb(84 188 74 / 0.8);
53+
--success-bg-hover: rgb(84 188 74);
54+
--success-border: rgb(84 188 74 / 0.3);
55+
56+
/* Info Colors */
57+
--info: #646cff;
58+
--info-light: #7c84ff;
59+
--info-bg: rgb(100 108 255 / 0.1);
60+
--info-bg-hover: rgb(100 108 255 / 0.2);
61+
--info-border: rgb(100 108 255 / 0.3);
62+
63+
/* Warning Colors */
64+
--warning: #f1c40f;
65+
--warning-light: #f4d03f;
66+
--warning-bg: rgb(241 196 15 / 0.1);
67+
--warning-bg-hover: rgb(241 196 15 / 0.2);
68+
--warning-border: rgb(241 196 15 / 0.3);
69+
70+
/* Error Colors */
71+
--error: #e74c3c;
72+
--error-light: #ec7063;
73+
--error-bg: rgb(231 76 60 / 0.1);
74+
--error-bg-hover: rgb(231 76 60 / 0.2);
75+
--error-border: rgb(231 76 60 / 0.3);
76+
77+
/* Neutral Colors */
78+
--neutral: #9ca3af;
79+
--neutral-light: #cbd5e1;
80+
--neutral-bg: var(--color-gray-100);
81+
--neutral-bg-hover: var(--color-gray-200);
82+
--neutral-border: rgb(156 163 175 / 0.3);
83+
84+
/* Dark theme */
85+
@media (prefers-color-scheme: dark) {
86+
--primary: #ffffff;
87+
--secondary: #a0a0a0;
88+
--tertiary: #6b7280;
89+
90+
--border-primary: #374151;
91+
--border-primary-hover: #4b5563;
92+
93+
/* Secondary Borders - Supporting borders, separators */
94+
--border-secondary: #4b5563;
95+
--border-secondary-hover: #6b7280;
96+
97+
/* Tertiary Borders - Subtle borders, light separators */
98+
--border-tertiary: #4b5563;
99+
--border-tertiary-hover: #6b7280;
100+
101+
/* Primary Text - Main content, headers, important elements */
102+
--text-primary: #e5e5e5;
103+
104+
/* Secondary Text - Supporting content, labels, descriptions */
105+
--text-secondary: #a0a0a0;
106+
107+
/* Tertiary Text - Subtle content, placeholders, disabled states */
108+
--text-tertiary: #6b7280;
109+
110+
/* ===== CONTAINER COLORS ===== */
111+
112+
/* Primary Containers - Main panels, cards, primary backgrounds */
113+
--container-primary: #1a1a1a;
114+
--container-primary-hover: #2a2a2a;
115+
116+
/* Neutral Colors */
117+
--neutral: #6b7280;
118+
--neutral-light: #9ca3af;
119+
--neutral-bg: #374151;
120+
--neutral-bg-hover: #4b5563;
121+
--neutral-border: rgb(107 114 128 / 0.3);
122+
}
123+
}
124+
}
125+
3126
@theme {
4-
--color-primary: #000000;
5-
--color-secondary: #666666;
6-
--color-tertiary: #9ca3af;
127+
--color-primary: var(--primary);
128+
--color-secondary: var(--secondary);
129+
--color-tertiary: var(--tertiary);
7130

8131
--color-border-primary: var(--color-tertiary);
9-
--color-border-primary-hover: #6b7280;
132+
--color-border-primary-hover: var(--border-primary-hover);
10133

11134
/* Secondary Borders - Supporting borders, separators */
12135
--color-border-secondary: var(--color-secondary);
13-
--color-border-secondary-hover: #4b5563;
136+
--color-border-secondary-hover: var(--border-secondary-hover);
14137

15138
/* Tertiary Borders - Subtle borders, light separators */
16139
--color-border-tertiary: var(--color-tertiary);
17-
--color-border-tertiary-hover: #374151;
140+
--color-border-tertiary-hover: var(--border-tertiary-hover);
18141

19142
/* Primary Text - Main content, headers, important elements */
20-
--color-text-primary: #242424;
143+
--color-text-primary: var(--text-primary);
21144

22145
/* Secondary Text - Supporting content, labels, descriptions */
23-
--color-text-secondary: #d1d5db;
146+
--color-text-secondary: var(--text-secondary);
24147

25148
/* Tertiary Text - Subtle content, placeholders, disabled states */
26-
--color-text-tertiary: #9ca3af;
149+
--color-text-tertiary: var(--text-tertiary);
27150

28151
/* ===== CONTAINER COLORS ===== */
29152

30153
/* Primary Containers - Main panels, cards, primary backgrounds */
31-
--color-container-primary: #ffffff;
32-
--color-container-primary-hover: #f8f9fa;
154+
--color-container-primary: var(--container-primary);
155+
--color-container-primary-hover: var(--container-primary-hover);
33156

34157
/* ===== STATUS COLORS ===== */
35158

36159
/* Success Colors */
37-
--color-success: #54bc4a;
38-
--color-success-light: #68cc5c;
39-
--color-success-bg: rgb(84 188 74 / 0.8);
40-
--color-success-bg-hover: rgb(84 188 74);
41-
--color-success-border: rgb(84 188 74 / 0.3);
160+
--color-success: var(--success);
161+
--color-success-light: var(--success-light);
162+
--color-success-bg: var(--success-bg);
163+
--color-success-bg-hover: var(--success-bg-hover);
164+
--color-success-border: var(--success-border);
42165

43166
/* Info Colors */
44-
--color-info: #646cff;
45-
--color-info-light: #7c84ff;
46-
--color-info-bg: rgb(100 108 255 / 0.1);
47-
--color-info-bg-hover: rgb(100 108 255 / 0.2);
48-
--color-info-border: rgb(100 108 255 / 0.3);
167+
--color-info: var(--info);
168+
--color-info-light: var(--info-light);
169+
--color-info-bg: var(--info-bg);
170+
--color-info-bg-hover: var(--info-bg-hover);
171+
--color-info-border: var(--info-border);
49172

50173
/* Warning Colors */
51-
--color-warning: #f1c40f;
52-
--color-warning-light: #f4d03f;
53-
--color-warning-bg: rgb(241 196 15 / 0.1);
54-
--color-warning-bg-hover: rgb(241 196 15 / 0.2);
55-
--color-warning-border: rgb(241 196 15 / 0.3);
174+
--color-warning: var(--warning);
175+
--color-warning-light: var(--warning-light);
176+
--color-warning-bg: var(--warning-bg);
177+
--color-warning-bg-hover: var(--warning-bg-hover);
178+
--color-warning-border: var(--warning-border);
56179

57180
/* Error Colors */
58-
--color-error: #e74c3c;
59-
--color-error-light: #ec7063;
60-
--color-error-bg: rgb(231 76 60 / 0.1);
61-
--color-error-bg-hover: rgb(231 76 60 / 0.2);
62-
--color-error-border: rgb(231 76 60 / 0.3);
181+
--color-error: var(--error);
182+
--color-error-light: var(--error-light);
183+
--color-error-bg: var(--error-bg);
184+
--color-error-bg-hover: var(--error-bg-hover);
185+
--color-error-border: var(--error-border);
63186

64187
/* Neutral Colors */
65-
--color-neutral: #9ca3af;
66-
--color-neutral-light: #cbd5e1;
67-
--color-neutral-bg: var(--color-gray-100);
68-
--color-neutral-bg-hover: var(--color-gray-200);
69-
--color-neutral-border: rgb(156 163 175 / 0.3);
70-
}
71-
72-
@layer base {
73-
html,
74-
body {
75-
height: 100vh;
76-
margin: 0;
77-
padding: 0;
78-
}
79-
80-
#root {
81-
height: 100%;
82-
}
188+
--color-neutral: var(--neutral);
189+
--color-neutral-light: var(--neutral-light);
190+
--color-neutral-bg: var(--neutral-bg);
191+
--color-neutral-bg-hover: var(--neutral-bg-hover);
192+
--color-neutral-border: var(--neutral-border);
83193
}

‎packages/web-extension/entrypoints/devtools-panel/App.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ export default function App() {
114114
: undefined;
115115

116116
return (
117-
<div className="flex flex-col h-full overflow-hidden bg-container-primary">
117+
<div className="flex flex-col h-full overflow-hidden bg-container-primary text-primary">
118118
{(wsStatus === ConnectionStatus.Error ||
119119
(reconnectAttempt > 5 &&
120120
(wsStatus === ConnectionStatus.Connecting ||
@@ -134,7 +134,7 @@ export default function App() {
134134
<label className="flex gap-2 items-center">
135135
View:
136136
<select
137-
className="border p-2 border-border-primary rounded hover:bg-container-primary-hover bg-container-primary text-primary"
137+
className="border p-2 border-border-primary rounded hover:bg-container-primary-hover bg-container-primary"
138138
name="Span filter"
139139
onChange={(event) =>
140140
setSpanFilter(event.currentTarget.value as SpanFilter)

0 commit comments

Comments
 (0)