Skip to content

Commit 5f5c68b

Browse files
ImTheKaiImTheKai
committed
Add dark and light theme and a button to change it to the menue
Signed-off-by: Kai Wagner <[email protected]>
1 parent ff23e6b commit 5f5c68b

File tree

12 files changed

+325
-97
lines changed

12 files changed

+325
-97
lines changed

‎app/assets/stylesheets/base/root.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ body {
22
font-family: var(--font-sans);
33
color: var(--color-text-secondary);
44
background-color: var(--color-bg-page);
5+
transition: background-color var(--transition-normal), color var(--transition-normal);
56
}
67

78
.container {

‎app/assets/stylesheets/colors.css‎

Lines changed: 160 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,178 @@
1+
:root {
2+
color-scheme: light;
13

4+
/* Indigo-based palette */
5+
--color-primary-50: #eef2ff;
6+
--color-primary-100: #e0e7ff;
7+
--color-primary-200: #c7d2fe;
8+
--color-primary-300: #a5b4fc;
9+
--color-primary-500: #6366f1;
10+
--color-primary-600: #4f46e5;
11+
--color-primary-700: #4338ca;
12+
--color-primary-900: #312e81;
213

3-
:root {
4-
/* https://paletton.com/#uid=63S0u0kaVz84jP27qHbeJtFiHpX */
5-
--color-primary-1: #C6CBE1;
6-
--color-primary-2: #A3ABCD;
7-
--color-primary-3: #8089B6;
8-
--color-primary-4: #696CA1;
9-
--color-primary-5: #45528D;
10-
11-
--color-secondary1-1: #CFC6E1;
12-
--color-secondary1-2: #B0A2CD;
13-
--color-secondary1-3: #917EB6;
14-
--color-secondary1-4: #755FA2;
15-
--color-secondary1-5: #5B438D;
16-
17-
--color-secondary2-1: #BFD4DB;
18-
--color-secondary2-2: #98B9C4;
19-
--color-secondary2-3: #719BA9;
20-
--color-secondary2-4: #528394;
21-
--color-secondary2-5: #396F81;
22-
23-
/* Color Palette - Grays */
14+
--color-primary-1: #f5f7ff;
15+
--color-primary-2: #e7ebff;
16+
--color-primary-3: #d5dcff;
17+
--color-primary-4: #b7c4fb;
18+
--color-primary-5: #8c99e6;
19+
20+
--color-secondary1-1: #f3e8ff;
21+
--color-secondary1-2: #e9d5ff;
22+
--color-secondary1-3: #d8b4fe;
23+
--color-secondary1-4: #c084fc;
24+
25+
--color-secondary2-1: #dbeafe;
26+
--color-secondary2-2: #bfdbfe;
27+
--color-secondary2-3: #93c5fd;
28+
--color-secondary2-4: #60a5fa;
29+
--color-secondary2-5: #3b82f6;
30+
31+
--color-gray-25: #f8fafc;
2432
--color-gray-50: #f8fafc;
25-
--color-gray-100: #f1f5f9;
26-
--color-gray-200: #e2e8f0;
27-
--color-gray-300: #d1d5db;
28-
--color-gray-400: #9ca3af;
33+
--color-gray-100: #e2e8f0;
34+
--color-gray-300: #cbd5e1;
2935
--color-gray-500: #64748b;
3036
--color-gray-600: #475569;
31-
--color-gray-700: #374151;
37+
--color-gray-700: #334155;
3238
--color-gray-800: #1e293b;
3339
--color-gray-900: #0f172a;
3440

41+
--color-text-primary: #0f172a;
42+
--color-text-secondary: #1f2937;
43+
--color-text-muted: #6b7280;
44+
--color-text-link: var(--color-primary-700);
45+
--color-text-link-hover: var(--color-primary-900);
46+
--color-text-contrast: #f8fafc;
47+
--color-text-button: #0f172a;
48+
3549
--color-bg-page: var(--color-primary-1);
36-
--color-bg-input: var(--color-primary-1);
37-
--color-bg-container: var(--color-primary-3);
38-
--color-bg-hover: var(--color-primary-4);
39-
--color-bg-sidebar: var(--color-primary-3);
50+
--color-bg-input: #f8fafc;
51+
--color-bg-container: #ffffff;
52+
--color-bg-card: #ffffff;
53+
--color-bg-hover: var(--color-primary-2);
54+
--color-bg-sidebar: #f3f4ff;
4055
--color-bg-sidebar-header: var(--color-primary-2);
4156
--color-bg-table-header: var(--color-primary-2);
42-
--color-bg-nav: var(--color-primary-4);
43-
--color-border: var(--color-primary-5);
44-
--color-bg-button: var(--color-secondary2-2);
45-
--color-bg-button-hover: var(--color-secondary2-1);
57+
--color-bg-nav: #0f172a;
58+
--color-bg-button: var(--color-primary-2);
59+
--color-bg-button-hover: var(--color-primary-3);
60+
--color-bg-icon: var(--color-secondary1-2);
61+
--color-bg-icon-status: var(--color-secondary2-2);
62+
--color-bg-hoverbox: #eef2ff;
63+
--color-bg-contributor: var(--color-secondary1-2);
64+
--color-bg-committer: var(--color-secondary2-2);
65+
--color-bg-activity-team: var(--color-secondary2-2);
66+
--color-bg-activity-user: var(--color-secondary2-1);
4667

68+
--color-border: #cdd5e7;
69+
--color-border-focus: var(--color-primary-500);
4770
--color-border-contributor: var(--color-secondary2-2);
4871
--color-border-new: var(--color-secondary1-1);
4972
--color-border-aware: var(--color-secondary1-2);
5073
--color-border-reading: var(--color-secondary1-3);
51-
--color-border-read: var(--color-secondary1-4);
74+
--color-border-read: var(--color-secondary2-3);
5275

53-
--color-bg-icon: var(--color-secondary1-2);
54-
--color-bg-icon-status: var(--color-secondary2-2);
55-
--color-bg-hoverbox: var(--color-secondary2-1);
56-
--color-bg-contributor: var(--color-secondary1-2);
57-
--color-bg-committer: var(--color-secondary1-1);
58-
--color-bg-activity-team: var(--color-secondary2-2);
59-
--color-bg-activity-user: var(--color-secondary2-1);
76+
--color-warning-bg: #fef3c7;
77+
--color-warning: #f59e0b;
78+
--color-warning-text: #92400e;
79+
--color-info: #38bdf8;
80+
--color-info-soft: #e0f2fe;
81+
--color-danger: #ef4444;
82+
--color-danger-soft: #fee2e2;
83+
--color-purple: #7c3aed;
84+
--color-success: #16a34a;
85+
--color-success-soft: #dcfce7;
86+
--color-note-soft: #fef9c3;
87+
88+
--shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.12);
89+
}
90+
91+
:root[data-theme="dark"] {
92+
color-scheme: dark;
93+
94+
--color-primary-50: #161b33;
95+
--color-primary-100: #1d2440;
96+
--color-primary-200: #222c52;
97+
--color-primary-300: #2c3669;
98+
--color-primary-500: #6f7ee8;
99+
--color-primary-600: #8b9cf5;
100+
--color-primary-700: #c7d2fe;
101+
--color-primary-900: #e0e7ff;
102+
103+
--color-primary-1: #0b1220;
104+
--color-primary-2: #0f172a;
105+
--color-primary-3: #131f35;
106+
--color-primary-4: #1b2743;
107+
--color-primary-5: #223055;
108+
109+
--color-secondary1-1: #2b2244;
110+
--color-secondary1-2: #372b59;
111+
--color-secondary1-3: #45356f;
112+
--color-secondary1-4: #564086;
113+
114+
--color-secondary2-1: #16263c;
115+
--color-secondary2-2: #1d2f4d;
116+
--color-secondary2-3: #254165;
117+
--color-secondary2-4: #2f4f7a;
118+
--color-secondary2-5: #3a5f93;
119+
120+
--color-gray-25: #0b1220;
121+
--color-gray-50: #0f172a;
122+
--color-gray-100: #111827;
123+
--color-gray-300: #1f2937;
124+
--color-gray-500: #94a3b8;
125+
--color-gray-600: #cbd5e1;
126+
--color-gray-700: #e2e8f0;
127+
--color-gray-800: #e5e7eb;
128+
--color-gray-900: #f8fafc;
129+
130+
--color-text-primary: #e2e8f0;
131+
--color-text-secondary: #cbd5e1;
132+
--color-text-muted: #94a3b8;
133+
--color-text-link: #c7d2fe;
134+
--color-text-link-hover: #e0e7ff;
135+
--color-text-contrast: #f8fafc;
136+
--color-text-button: #e2e8f0;
137+
138+
--color-bg-page: var(--color-primary-1);
139+
--color-bg-input: #111827;
140+
--color-bg-container: var(--color-primary-2);
141+
--color-bg-card: #111827;
142+
--color-bg-hover: #1f2937;
143+
--color-bg-sidebar: var(--color-primary-2);
144+
--color-bg-sidebar-header: #111827;
145+
--color-bg-table-header: #111827;
146+
--color-bg-nav: #0b1220;
147+
--color-bg-button: #223055;
148+
--color-bg-button-hover: #2e3b66;
149+
--color-bg-icon: #1f2937;
150+
--color-bg-icon-status: #2b375c;
151+
--color-bg-hoverbox: #1a2337;
152+
--color-bg-contributor: #1f2545;
153+
--color-bg-committer: #1c2f4f;
154+
--color-bg-activity-team: #18253d;
155+
--color-bg-activity-user: #142235;
156+
157+
--color-border: #1f2937;
158+
--color-border-focus: #818cf8;
159+
--color-border-contributor: #2b375c;
160+
--color-border-new: #3a5f93;
161+
--color-border-aware: #564086;
162+
--color-border-reading: #254165;
163+
--color-border-read: #2f4f7a;
164+
165+
--color-warning-bg: #3a2c17;
166+
--color-warning: #f59e0b;
167+
--color-warning-text: #fcd34d;
168+
--color-info: #38bdf8;
169+
--color-info-soft: #10253b;
170+
--color-danger: #ef4444;
171+
--color-danger-soft: #3a1f24;
172+
--color-purple: #c084fc;
173+
--color-success: #22c55e;
174+
--color-success-soft: #1b2b1e;
175+
--color-note-soft: #3a3216;
176+
177+
--shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.45);
60178
}

‎app/assets/stylesheets/components/activities.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@
1919
}
2020

2121
.activity-card.is-unread {
22-
border-color: #bfdbfe;
23-
background: #eff6ff;
22+
border-color: var(--color-primary-200);
23+
background: var(--color-primary-50);
2424
}
2525

2626
.activity-meta {
@@ -39,8 +39,8 @@
3939

4040
.activity-unread-badge {
4141
padding: 2px 8px;
42-
background: #2563eb;
43-
color: white;
42+
background: var(--color-primary-600);
43+
color: var(--color-text-contrast);
4444
border-radius: 999px;
4545
font-size: var(--font-size-xs);
4646
}

‎app/assets/stylesheets/components/form.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ input {
44
width: 100%;
55
padding: var(--spacing-4);
66
margin: var(--spacing-4) 0;
7-
border: var(--border-width) solid var(--color-gray-300);
7+
border: var(--border-width) solid var(--color-border);
88
border-radius: var(--border-radius-md);
99
font-size: var(--font-size-base);
1010
display: block;

‎app/assets/stylesheets/components/messages.css‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@
5151
height: 42px;
5252
border-radius: 50%;
5353
border: var(--border-width) solid var(--color-border);
54-
background: white;
54+
background: var(--color-bg-card);
5555
}
5656

5757
.author-details {
@@ -93,7 +93,7 @@
9393
transition: background-color 0.3s ease, color 0.3s ease;
9494

9595
&.is-read {
96-
background: var(--color-gray-25, #f8f8f8);
96+
background: var(--color-bg-hover);
9797
}
9898
}
9999

@@ -103,7 +103,7 @@
103103
& .button-secondary {
104104
padding: var(--spacing-2) var(--spacing-4);
105105
border: var(--border-width) solid var(--color-border);
106-
background: white;
106+
background: var(--color-bg-card);
107107
border-radius: var(--border-radius-sm);
108108
cursor: pointer;
109109
}
@@ -151,7 +151,7 @@
151151
}
152152

153153
& .message-diff {
154-
background: var(--color-gray-100);
154+
background: var(--color-bg-hover);
155155
border: var(--border-width) solid var(--color-border);
156156
border-radius: var(--border-radius-sm);
157157
padding: var(--spacing-3);
@@ -217,7 +217,7 @@
217217

218218
.attachment {
219219
padding: var(--spacing-2) var(--spacing-3);
220-
background: var(--color-gray-100);
220+
background: var(--color-bg-hover);
221221
border-radius: var(--border-radius-sm);
222222
margin-bottom: var(--spacing-2);
223223
}
@@ -257,7 +257,7 @@
257257
.import-log {
258258
margin-top: var(--spacing-2);
259259
padding: var(--spacing-2);
260-
background: var(--color-gray-100);
260+
background: var(--color-bg-hover);
261261
border-radius: var(--border-radius-sm);
262262
font-size: var(--font-size-xs);
263263
color: var(--color-gray-500);

0 commit comments

Comments
 (0)