A fork of https://github.com/crosspoint-reader/crosspoint-reader
style: Phase 1 - Simple light dark themes (#1006)
## Summary
* **What is the goal of this PR?** (e.g., Implements the new feature for
file uploading.)
Implement automatic dark theme on server files.
Instead of a big change proposed in
https://github.com/crosspoint-reader/crosspoint-reader/pull/837, this PR
introduces a simple implementation of light/dark themes.
* **What changes are included?**
- Choose `#6e9a82` as accent color (taken from
)
- Implement a very basic media query for dark themes (`@media
(prefers-color-scheme: dark)`)
- Update style using CSS variables
## Additional Context
* Add any other information that might be helpful for the reviewer
(e.g., performance implications, potential risks,
specific areas to focus on).
We can think of it as a incremental enhancement, this is the first phase
of a series of PRs (hopefully).
Next steps/Phases:
1. Light/Dark themes (this PR)
2. Load external CSS file to avoid duplication
3. HTML enhancement (for example, use dialog element instead of divs)
4. Use SVG instead of emojis
5. Use Vite + Typescript to improve DX and have better minification
---
### AI Usage
While CrossPoint doesn't have restrictions on AI tools in contributing,
please be transparent about their usage as it
helps set the right context for reviewers.
Did you use AI tools to help write this code? _**< YES | PARTIALLY | NO
>**_
---------
Co-authored-by: carlosbonadeo <carlosbonadeo@skyscanner.net>
authored by
Carlos Bonadeo
carlosbonadeo
and committed by
GitHub
88537769
36967945
+146
-81
+58
-45
src/network/html/FilesPage.html
+58
-45
src/network/html/FilesPage.html
···
5
5
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
6
<title>CrossPoint Reader - Files</title>
7
7
<style>
8
+
:root {
9
+
--font-color: #333;
10
+
--bg: #f5f5f5;
11
+
--title-color: #2c3e50;
12
+
--card-bg: #FFF;
13
+
--label-color: #7f8c8d;
14
+
--border-color: #eee;
15
+
--accent-color: rgb(110, 154, 130);
16
+
--accent-color-10: rgba(110, 154, 130, 0.1);
17
+
--accent-hover-color: #5a8c73;
18
+
}
19
+
@media (prefers-color-scheme: dark) {
20
+
:root {
21
+
--font-color: #f5f5f5;
22
+
--bg: #333;
23
+
--title-color: #ecf0f1;
24
+
--card-bg: #444;
25
+
--label-color: #bdc3c7;
26
+
--border-color: #555;
27
+
color-scheme: dark;
28
+
}
29
+
}
8
30
body {
9
31
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
10
32
Oxygen, Ubuntu, sans-serif;
11
33
max-width: 800px;
12
34
margin: 0 auto;
13
35
padding: 20px;
14
-
background-color: #f5f5f5;
15
-
color: #333;
36
+
background-color: var(--bg);
37
+
color: var(--font-color);
16
38
}
17
39
h1 {
18
-
color: #2c3e50;
40
+
color: var(--title-color);
19
41
margin-bottom: 5px;
20
42
}
21
43
h2 {
22
-
color: #34495e;
44
+
color: var(--title-color);
23
45
margin-top: 0;
24
46
}
25
47
.card {
26
-
background: white;
48
+
background: var(--card-bg);
27
49
border-radius: 8px;
28
50
padding: 20px;
29
51
margin: 15px 0;
···
37
59
gap: 15px;
38
60
margin-bottom: 20px;
39
61
padding-bottom: 15px;
40
-
border-bottom: 2px solid #3498db;
62
+
border-bottom: 2px solid var(--accent-color);
41
63
}
42
64
.page-header-left {
43
65
display: flex;
···
46
68
flex-wrap: wrap;
47
69
}
48
70
.breadcrumb-inline {
49
-
color: #7f8c8d;
71
+
color: var(--label-color);
50
72
font-size: 1.1em;
51
73
}
52
74
.breadcrumb-inline a {
53
-
color: #3498db;
75
+
color: var(--accent-color);
54
76
text-decoration: none;
55
77
}
56
78
.breadcrumb-inline a:hover {
···
58
80
}
59
81
.breadcrumb-inline .sep {
60
82
margin: 0 6px;
61
-
color: #bdc3c7;
83
+
color: var(--border-color);
62
84
}
63
85
.breadcrumb-inline .current {
64
-
color: #2c3e50;
86
+
color: var(--title-color);
65
87
font-weight: 500;
66
88
}
67
89
.nav-links {
68
90
margin: 20px 0;
91
+
display: flex;
92
+
gap: 10px;
69
93
}
70
94
.nav-links a {
71
-
display: inline-block;
72
95
padding: 10px 20px;
73
-
background-color: #3498db;
74
-
color: white;
96
+
color: var(--font-color);
75
97
text-decoration: none;
76
98
border-radius: 4px;
77
-
margin-right: 10px;
99
+
}
100
+
.nav-links a.active {
101
+
background-color: var(--accent-color);
102
+
color: white;
78
103
}
79
-
.nav-links a:hover {
80
-
background-color: #2980b9;
104
+
.nav-links a:not(.active):hover {
105
+
background-color: var(--accent-hover-color);
106
+
color: white;
81
107
}
82
108
/* Action buttons */
83
109
.action-buttons {
···
125
151
display: flex;
126
152
}
127
153
.modal {
128
-
background: white;
154
+
background: var(--card-bg);
129
155
border-radius: 8px;
130
156
padding: 25px;
131
157
max-width: 450px;
···
134
160
}
135
161
.modal h3 {
136
162
margin: 0 0 15px 0;
137
-
color: #2c3e50;
163
+
color: var(--title-color);
138
164
}
139
165
.modal-close {
140
166
float: right;
···
142
168
border: none;
143
169
font-size: 1.5em;
144
170
cursor: pointer;
145
-
color: #7f8c8d;
171
+
color: var(--label-color);
146
172
line-height: 1;
147
173
}
148
174
.modal-close:hover {
149
-
color: #2c3e50;
175
+
color: var(--title-color);
150
176
}
151
177
.file-table {
152
178
width: 100%;
···
156
182
.file-table td {
157
183
padding: 12px;
158
184
text-align: left;
159
-
border-bottom: 1px solid #eee;
185
+
border-bottom: 1px solid var(--border-color);
160
186
}
161
187
.file-table th {
162
-
background-color: #f8f9fa;
163
188
font-weight: 600;
164
-
color: #7f8c8d;
189
+
color: var(--label-color);
165
190
}
166
191
.file-table tr:hover {
167
-
background-color: #f8f9fa;
168
-
}
169
-
.epub-file {
170
-
background-color: #e8f6e9 !important;
171
-
}
172
-
.epub-file:hover {
173
-
background-color: #d4edda !important;
174
-
}
175
-
.folder-row {
176
-
background-color: #fff9e6 !important;
177
-
}
178
-
.folder-row:hover {
179
-
background-color: #fff3cd !important;
192
+
background-color: var(--accent-color-10);
180
193
}
181
194
.epub-badge {
182
195
display: inline-block;
···
200
213
margin-right: 8px;
201
214
}
202
215
.folder-link {
203
-
color: #2c3e50;
216
+
color: var(--accent-color);
204
217
text-decoration: none;
205
218
cursor: pointer;
206
219
}
207
220
.folder-link:hover {
208
-
color: #3498db;
221
+
color: var(--accent-hover-color);
209
222
text-decoration: underline;
210
223
}
211
224
.upload-form {
···
233
246
cursor: not-allowed;
234
247
}
235
248
.file-info {
236
-
color: #7f8c8d;
249
+
color: var(--label-color);
237
250
font-size: 0.85em;
238
251
margin: 8px 0;
239
252
}
···
267
280
.contents-title {
268
281
font-size: 1.1em;
269
282
font-weight: 600;
270
-
color: #34495e;
283
+
color: var(--title-color);
271
284
margin: 0;
272
285
}
273
286
.summary-inline {
274
-
color: #7f8c8d;
287
+
color: var(--label-color);
275
288
font-size: 0.9em;
276
289
}
277
290
#progress-container {
···
295
308
text-align: center;
296
309
margin-top: 5px;
297
310
font-size: 0.9em;
298
-
color: #7f8c8d;
311
+
color: var(--label-color);
299
312
}
300
313
.folder-form {
301
314
margin-top: 10px;
···
455
468
}
456
469
.delete-item-name {
457
470
font-weight: 600;
458
-
color: #2c3e50;
471
+
color: var(--title-color);
459
472
word-break: break-all;
460
473
}
461
474
.delete-btn-confirm {
···
483
496
margin-top: 10px;
484
497
}
485
498
.delete-btn-cancel:hover {
486
-
background-color: #7f8c8d;
499
+
background-color: var(--label-color);
487
500
}
488
501
.rename-btn-confirm {
489
502
background-color: #3498db;
···
627
640
<body>
628
641
<div class="nav-links">
629
642
<a href="/">Home</a>
630
-
<a href="/files">File Manager</a>
643
+
<a href="/files" class="active">File Manager</a>
631
644
<a href="/settings">Settings</a>
632
645
</div>
633
646
+42
-16
src/network/html/HomePage.html
+42
-16
src/network/html/HomePage.html
···
5
5
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
6
<title>CrossPoint Reader</title>
7
7
<style>
8
+
:root {
9
+
--font-color: #333;
10
+
--bg: #f5f5f5;
11
+
--title-color: #2c3e50;
12
+
--card-bg: #FFF;
13
+
--label-color: #7f8c8d;
14
+
--border-color: #eee;
15
+
--accent-color: rgb(110, 154, 130);
16
+
--accent-hover-color: #5a8c73;
17
+
}
18
+
@media (prefers-color-scheme: dark) {
19
+
:root {
20
+
--font-color: #f5f5f5;
21
+
--bg: #333;
22
+
--title-color: #ecf0f1;
23
+
--card-bg: #444;
24
+
--label-color: #bdc3c7;
25
+
--border-color: #555;
26
+
color-scheme: dark;
27
+
}
28
+
}
8
29
body {
9
30
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
10
31
Oxygen, Ubuntu, sans-serif;
11
32
max-width: 800px;
12
33
margin: 0 auto;
13
34
padding: 20px;
14
-
background-color: #f5f5f5;
15
-
color: #333;
35
+
background-color: var(--bg);
36
+
color: var(--font-color);
16
37
}
17
38
h1 {
18
-
color: #2c3e50;
19
-
border-bottom: 2px solid #3498db;
39
+
color: var(--title-color);
40
+
border-bottom: 2px solid var(--accent-color);
20
41
padding-bottom: 10px;
21
42
}
22
43
h2 {
23
-
color: #34495e;
44
+
color: var(--title-color);
24
45
margin-top: 0;
25
46
}
26
47
.card {
27
-
background: white;
48
+
background: var(--card-bg);
28
49
border-radius: 8px;
29
50
padding: 20px;
30
51
margin: 15px 0;
···
33
54
.info-row {
34
55
display: flex;
35
56
justify-content: space-between;
57
+
align-items: center;
36
58
padding: 8px 0;
37
-
border-bottom: 1px solid #eee;
59
+
border-bottom: 1px solid var(--border-color);
38
60
}
39
61
.info-row:last-child {
40
62
border-bottom: none;
41
63
}
42
64
.label {
43
65
font-weight: 600;
44
-
color: #7f8c8d;
66
+
color: var(--label-color);
45
67
}
46
68
.value {
47
-
color: #2c3e50;
69
+
color: var(--title-color);
48
70
}
49
71
.status {
50
72
display: inline-block;
···
56
78
}
57
79
.nav-links {
58
80
margin: 20px 0;
81
+
display: flex;
82
+
gap: 10px;
59
83
}
60
84
.nav-links a {
61
-
display: inline-block;
62
85
padding: 10px 20px;
63
-
background-color: #3498db;
64
-
color: white;
86
+
color: var(--font-color);
65
87
text-decoration: none;
66
88
border-radius: 4px;
67
-
margin-right: 10px;
68
89
}
69
-
.nav-links a:hover {
70
-
background-color: #2980b9;
90
+
.nav-links a.active {
91
+
background-color: var(--accent-color);
92
+
color: white;
93
+
}
94
+
.nav-links a:not(.active):hover {
95
+
background-color: var(--accent-hover-color);
96
+
color: white;
71
97
}
72
98
</style>
73
99
</head>
···
75
101
<h1>📚 CrossPoint Reader</h1>
76
102
77
103
<div class="nav-links">
78
-
<a href="/">Home</a>
104
+
<a href="/" class="active">Home</a>
79
105
<a href="/files">File Manager</a>
80
106
<a href="/settings">Settings</a>
81
107
</div>
+46
-20
src/network/html/SettingsPage.html
+46
-20
src/network/html/SettingsPage.html
···
5
5
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
6
<title>CrossPoint Reader - Settings</title>
7
7
<style>
8
+
:root {
9
+
--font-color: #333;
10
+
--bg: #f5f5f5;
11
+
--title-color: #2c3e50;
12
+
--card-bg: #FFF;
13
+
--label-color: #7f8c8d;
14
+
--border-color: #eee;
15
+
--accent-color: rgb(110, 154, 130);
16
+
--accent-hover-color: #5a8c73;
17
+
--toggle-bg: #ccc;
18
+
}
19
+
@media (prefers-color-scheme: dark) {
20
+
:root {
21
+
--font-color: #f5f5f5;
22
+
--bg: #333;
23
+
--title-color: #ecf0f1;
24
+
--card-bg: #444;
25
+
--label-color: #bdc3c7;
26
+
--border-color: #555;
27
+
--toggle-bg: #666;
28
+
color-scheme: dark;
29
+
}
30
+
}
8
31
body {
9
32
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
10
33
Oxygen, Ubuntu, sans-serif;
11
34
max-width: 800px;
12
35
margin: 0 auto;
13
36
padding: 20px;
14
-
background-color: #f5f5f5;
15
-
color: #333;
37
+
background-color: var(--bg);
38
+
color: var(--font-color);
16
39
}
17
40
h1 {
18
-
color: #2c3e50;
19
-
border-bottom: 2px solid #3498db;
41
+
color: var(--title-color);
42
+
border-bottom: 2px solid var(--accent-color);
20
43
padding-bottom: 10px;
21
44
}
22
45
h2 {
23
-
color: #34495e;
46
+
color: var(--title-color);
24
47
margin-top: 0;
25
48
}
26
49
.card {
27
-
background: white;
50
+
background: var(--card-bg);
28
51
border-radius: 8px;
29
52
padding: 20px;
30
53
margin: 15px 0;
···
32
55
}
33
56
.nav-links {
34
57
margin: 20px 0;
58
+
display: flex;
59
+
gap: 10px;
35
60
}
36
61
.nav-links a {
37
-
display: inline-block;
38
62
padding: 10px 20px;
39
-
background-color: #3498db;
40
-
color: white;
63
+
color: var(--font-color);
41
64
text-decoration: none;
42
65
border-radius: 4px;
43
-
margin-right: 10px;
66
+
}
67
+
.nav-links a.active {
68
+
background-color: var(--accent-color);
69
+
color: white;
44
70
}
45
-
.nav-links a:hover {
46
-
background-color: #2980b9;
71
+
.nav-links a:not(.active):hover {
72
+
background-color: var(--accent-hover-color);
73
+
color: white;
47
74
}
48
75
.setting-row {
49
76
display: flex;
50
77
justify-content: space-between;
51
78
align-items: center;
52
79
padding: 10px 0;
53
-
border-bottom: 1px solid #eee;
80
+
border-bottom: 1px solid var(--border-color);
54
81
}
55
82
.setting-row:last-child {
56
83
border-bottom: none;
57
84
}
58
85
.setting-name {
59
86
font-weight: 500;
60
-
color: #2c3e50;
87
+
color: var(--label-color);
61
88
flex: 1;
62
89
min-width: 0;
63
90
padding-right: 12px;
···
73
100
border: 1px solid #ddd;
74
101
border-radius: 4px;
75
102
font-size: 0.95em;
76
-
background: white;
103
+
background: var(--card-bg);
77
104
}
78
105
.setting-control select {
79
106
min-width: 160px;
···
101
128
position: absolute;
102
129
cursor: pointer;
103
130
top: 0; left: 0; right: 0; bottom: 0;
104
-
background-color: #ccc;
131
+
background-color: var(--toggle-bg);
105
132
border-radius: 26px;
106
133
transition: 0.3s;
107
134
}
···
117
144
transition: 0.3s;
118
145
}
119
146
.toggle-switch input:checked + .toggle-slider {
120
-
background-color: #27ae60;
147
+
background-color: var(--accent-color);
121
148
}
122
149
.toggle-switch input:checked + .toggle-slider:before {
123
150
transform: translateX(22px);
···
194
221
}
195
222
.nav-links a {
196
223
padding: 8px 12px;
197
-
margin-right: 6px;
198
224
font-size: 0.9em;
199
225
}
200
226
.setting-row {
···
205
231
.setting-control input[type="text"],
206
232
.setting-control input[type="password"] {
207
233
min-width: 0;
208
-
width: 100%;
234
+
width: unset;
209
235
}
210
236
}
211
237
</style>
···
216
242
<div class="nav-links">
217
243
<a href="/">Home</a>
218
244
<a href="/files">File Manager</a>
219
-
<a href="/settings">Settings</a>
245
+
<a href="/settings" class="active">Settings</a>
220
246
</div>
221
247
222
248
<div id="message" class="message"></div>