this repo has no description
No idea why this requires so much code
+117
-40
+13
index.html
+13
index.html
···
19
19
<meta name="mobile-web-app-capable" content="yes" />
20
20
<link rel="canonical" href="%VITE_WEBSITE%" />
21
21
<meta
22
+
name=""
23
+
data-theme-setting="manual"
24
+
content="#242526"
25
+
data-theme-light-color="#fff"
26
+
data-theme-light-color-temp="#ffff"
27
+
data-theme-dark-color="#242526"
28
+
data-theme-dark-color-temp="#242526ff"
29
+
/>
30
+
<meta
22
31
name="theme-color"
32
+
data-theme-setting="auto"
23
33
content="#fff"
34
+
data-content-temp="#ffff"
24
35
media="(prefers-color-scheme: light)"
25
36
/>
26
37
<meta
27
38
name="theme-color"
39
+
data-theme-setting="auto"
28
40
content="#242526"
41
+
data-content-temp="#242526ff"
29
42
media="(prefers-color-scheme: dark)"
30
43
/>
31
44
<meta name="google" content="notranslate" />
+70
-40
src/app.jsx
+70
-40
src/app.jsx
···
193
193
if (isIOS) {
194
194
document.addEventListener('visibilitychange', () => {
195
195
if (document.visibilityState === 'visible') {
196
-
// Get current color scheme
197
-
const colorScheme = window.matchMedia('(prefers-color-scheme: dark)')
198
-
.matches
199
-
? 'dark'
200
-
: 'light';
201
-
// Get current theme-color
202
-
const $meta = document.querySelector(
203
-
`meta[name="theme-color"][media*="${colorScheme}"]`,
204
-
);
205
-
const color = $meta?.getAttribute('content');
206
-
if (color) {
207
-
let tempColor;
208
-
if (/^#/.test(color)) {
209
-
// Assume either #RBG or #RRGGBB
210
-
if (color.length === 4) {
211
-
tempColor = color + 'f';
212
-
} else if (color.length === 7) {
213
-
tempColor = color + 'ff';
214
-
}
196
+
const theme = store.local.get('theme');
197
+
let $meta;
198
+
if (theme) {
199
+
// Get current meta
200
+
$meta = document.querySelector(
201
+
`meta[name="theme-color"][data-theme-setting="manual"]`,
202
+
);
203
+
if ($meta) {
204
+
const color = $meta.content;
205
+
const tempColor =
206
+
theme === 'light'
207
+
? $meta.dataset.themeLightColorTemp
208
+
: $meta.dataset.themeDarkColorTemp;
209
+
$meta.content = tempColor || '';
210
+
setTimeout(() => {
211
+
$meta.content = color;
212
+
}, 10);
215
213
}
216
-
$meta.content = tempColor || '';
217
-
setTimeout(() => {
218
-
$meta.content = color;
219
-
}, 10);
214
+
} else {
215
+
// Get current color scheme
216
+
const colorScheme = window.matchMedia('(prefers-color-scheme: dark)')
217
+
.matches
218
+
? 'dark'
219
+
: 'light';
220
+
// Get current theme-color
221
+
$meta = document.querySelector(
222
+
`meta[name="theme-color"][media*="${colorScheme}"]`,
223
+
);
224
+
if ($meta) {
225
+
const color = $meta.content;
226
+
const tempColor = $meta.dataset.contentTemp;
227
+
$meta.content = tempColor || '';
228
+
setTimeout(() => {
229
+
$meta.content = color;
230
+
}, 10);
231
+
}
220
232
}
221
233
}
222
234
});
223
235
}
224
236
237
+
{
238
+
const theme = store.local.get('theme');
239
+
// If there's a theme, it's NOT auto
240
+
if (theme) {
241
+
// dark | light
242
+
document.documentElement.classList.add(`is-${theme}`);
243
+
document
244
+
.querySelector('meta[name="color-scheme"]')
245
+
.setAttribute('content', theme || 'dark light');
246
+
247
+
// Enable manual theme <meta>
248
+
const $manualMeta = document.querySelector(
249
+
'meta[data-theme-setting="manual"]',
250
+
);
251
+
if ($manualMeta) {
252
+
$manualMeta.name = 'theme-color';
253
+
$manualMeta.content =
254
+
theme === 'light'
255
+
? $manualMeta.dataset.themeLightColor
256
+
: $manualMeta.dataset.themeDarkColor;
257
+
}
258
+
// Disable auto theme <meta>s
259
+
const $autoMetas = document.querySelectorAll(
260
+
'meta[data-theme-setting="auto"]',
261
+
);
262
+
$autoMetas.forEach((m) => {
263
+
m.name = '';
264
+
});
265
+
}
266
+
const textSize = store.local.get('textSize');
267
+
if (textSize) {
268
+
document.documentElement.style.setProperty('--text-size', `${textSize}px`);
269
+
}
270
+
}
271
+
225
272
subscribe(states, (changes) => {
226
273
for (const [action, path, value, prevValue] of changes) {
227
274
// Change #app dataset based on settings.shortcutsViewMode
···
243
290
function App() {
244
291
const [isLoggedIn, setIsLoggedIn] = useState(false);
245
292
const [uiState, setUIState] = useState('loading');
246
-
247
-
useLayoutEffect(() => {
248
-
const theme = store.local.get('theme');
249
-
if (theme) {
250
-
document.documentElement.classList.add(`is-${theme}`);
251
-
document
252
-
.querySelector('meta[name="color-scheme"]')
253
-
.setAttribute('content', theme === 'auto' ? 'dark light' : theme);
254
-
}
255
-
const textSize = store.local.get('textSize');
256
-
if (textSize) {
257
-
document.documentElement.style.setProperty(
258
-
'--text-size',
259
-
`${textSize}px`,
260
-
);
261
-
}
262
-
}, []);
263
293
264
294
useEffect(() => {
265
295
const instanceURL = store.local.get('instanceURL');
+34
src/pages/settings.jsx
+34
src/pages/settings.jsx
···
82
82
83
83
if (theme === 'auto') {
84
84
html.classList.remove('is-light', 'is-dark');
85
+
86
+
// Disable manual theme <meta>
87
+
const $manualMeta = document.querySelector(
88
+
'meta[data-theme-setting="manual"]',
89
+
);
90
+
if ($manualMeta) {
91
+
$manualMeta.name = '';
92
+
}
93
+
// Enable auto theme <meta>s
94
+
const $autoMetas = document.querySelectorAll(
95
+
'meta[data-theme-setting="auto"]',
96
+
);
97
+
$autoMetas.forEach((m) => {
98
+
m.name = 'theme-color';
99
+
});
85
100
} else {
86
101
html.classList.toggle('is-light', theme === 'light');
87
102
html.classList.toggle('is-dark', theme === 'dark');
103
+
104
+
// Enable manual theme <meta>
105
+
const $manualMeta = document.querySelector(
106
+
'meta[data-theme-setting="manual"]',
107
+
);
108
+
if ($manualMeta) {
109
+
$manualMeta.name = 'theme-color';
110
+
$manualMeta.content =
111
+
theme === 'light'
112
+
? $manualMeta.dataset.themeLightColor
113
+
: $manualMeta.dataset.themeDarkColor;
114
+
}
115
+
// Disable auto theme <meta>s
116
+
const $autoMetas = document.querySelectorAll(
117
+
'meta[data-theme-setting="auto"]',
118
+
);
119
+
$autoMetas.forEach((m) => {
120
+
m.name = '';
121
+
});
88
122
}
89
123
document
90
124
.querySelector('meta[name="color-scheme"]')