Skip to content

Commit 2f2510c

Browse files
aine-etkeaine-etke
authored
Make loader screen honor preferred color scheme (#1037)
* Make loader color-scheme aware * update readme
1 parent ab845cd commit 2f2510c

File tree

3 files changed

+99
-14
lines changed

3 files changed

+99
-14
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,7 @@ The following changes are already implemented:
146146
* 🇮🇷 [Fix loading of Persian localization](https://github.com/etkecc/synapse-admin/commit/737ec69b16da62e515be12778c46823f6525df4e#diff-26ad4b834941d9b19ebf9db8082bd202aaf72ea0ddea85f5a8a0cb3c729cc6f2)
147147
* 🔖 [Sync page title and document title](https://github.com/etkecc/synapse-admin/pull/1032)
148148
* [Restyle Sidebar Menu](https://github.com/etkecc/synapse-admin/pull/1036)
149+
* [Make loader screen honor preferred color scheme](https://github.com/etkecc/synapse-admin/pull/1037)
149150

150151
#### exclusive for [etke.cc](https://etke.cc) customers
151152

‎index.html‎

Lines changed: 70 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,41 @@
33
<head>
44
<meta charset="utf-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1" />
6-
<meta name="theme-color" content="#000000" />
6+
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#fafafa" />
7+
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#313131" />
78
<meta name="description" content="Synapse Admin" />
89
<!--
910
manifest.json provides metadata used when your web app is installed on a
1011
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
1112
-->
12-
<link rel="manifest" href="./manifest.json" />
13+
<link
14+
rel="manifest"
15+
href="./manifest.json"
16+
media="(prefers-color-scheme: light)"
17+
data-scheme="light"
18+
/>
19+
<link
20+
rel="manifest"
21+
href="./manifest-dark.json"
22+
media="(prefers-color-scheme: dark)"
23+
data-scheme="dark"
24+
/>
1325
<link rel="shortcut icon" href="./favicon.ico" />
1426
<title>Synapse Admin</title>
1527
<style>
28+
:root {
29+
color-scheme: light dark;
30+
--loader-bg: #fafafa;
31+
--loader-fg: #283593;
32+
}
33+
34+
@media (prefers-color-scheme: dark) {
35+
:root {
36+
--loader-bg: #313131;
37+
--loader-fg: #90caf9;
38+
}
39+
}
40+
1641
body {
1742
margin: 0;
1843
padding: 0;
@@ -34,7 +59,7 @@
3459
bottom: 0;
3560
left: 0;
3661
right: 0;
37-
background-color: #fafafa;
62+
background-color: var(--loader-bg);
3863
}
3964

4065
/* CSS Spinner from https://projects.lukehaas.me/css-loaders/ */
@@ -46,7 +71,7 @@
4671
}
4772

4873
.loader {
49-
color: #283593;
74+
color: var(--loader-fg);
5075
font-size: 11px;
5176
text-indent: -99999em;
5277
margin: 55px auto;
@@ -68,7 +93,7 @@
6893
.loader:before {
6994
width: 5.2em;
7095
height: 10.2em;
71-
background: #fafafa;
96+
background: var(--loader-bg);
7297
border-radius: 10.2em 0 0 10.2em;
7398
top: -0.1em;
7499
left: -0.1em;
@@ -81,7 +106,7 @@
81106
.loader:after {
82107
width: 5.2em;
83108
height: 10.2em;
84-
background: #fafafa;
109+
background: var(--loader-bg);
85110
border-radius: 0 10.2em 10.2em 0;
86111
top: -0.1em;
87112
left: 5.1em;
@@ -124,5 +149,43 @@
124149
<script type="module" src="/src/index.tsx"></script>
125150
<span id="js-version" style="display: none;"></span>
126151
</body>
127-
<script>document.getElementById("js-version").textContent = __SYNAPSE_ADMIN_VERSION__</script>
152+
<script>
153+
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
154+
const schemeLinks = {
155+
light: document.querySelector('link[rel="manifest"][data-scheme="light"]'),
156+
dark: document.querySelector('link[rel="manifest"][data-scheme="dark"]'),
157+
};
158+
const schemeHrefs = {
159+
light: schemeLinks.light?.getAttribute("href"),
160+
dark: schemeLinks.dark?.getAttribute("href"),
161+
};
162+
163+
const ensureManifestLink = () => {
164+
let active = document.querySelector('link[rel="manifest"][data-active="true"]');
165+
if (!active) {
166+
active = document.createElement("link");
167+
active.setAttribute("rel", "manifest");
168+
active.setAttribute("data-active", "true");
169+
document.head.appendChild(active);
170+
}
171+
return active;
172+
};
173+
174+
const updateManifest = () => {
175+
const nextHref = mediaQuery.matches ? schemeHrefs.dark : schemeHrefs.light;
176+
if (!nextHref) return;
177+
const active = ensureManifestLink();
178+
active.setAttribute("href", nextHref);
179+
};
180+
181+
updateManifest();
182+
schemeLinks.light?.remove();
183+
schemeLinks.dark?.remove();
184+
if (typeof mediaQuery.addEventListener === "function") {
185+
mediaQuery.addEventListener("change", updateManifest);
186+
} else if (typeof mediaQuery.addListener === "function") {
187+
mediaQuery.addListener(updateManifest);
188+
}
189+
document.getElementById("js-version").textContent = __SYNAPSE_ADMIN_VERSION__;
190+
</script>
128191
</html>

‎vite.config.ts‎

Lines changed: 28 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,14 @@ export default defineConfig({
2727
ifMeta: false,
2828
ifLog: false,
2929
ifGlobal: true,
30-
outputFile: version => ({
31-
path: "manifest.json",
32-
content: JSON.stringify({
30+
outputFile: version => {
31+
const base = {
3332
name: "Synapse Admin",
33+
short_name: "Synapse Admin",
3434
version: version,
3535
description: "Synapse Admin is an admin console for synapse Matrix homeserver with additional features.",
36+
lang: "en",
37+
dir: "auto",
3638
categories: ["productivity", "utilities"],
3739
orientation: "landscape",
3840
icons: [
@@ -49,11 +51,30 @@ export default defineConfig({
4951
},
5052
],
5153
start_url: ".",
54+
scope: ".",
55+
id: ".",
5256
display: "standalone",
53-
theme_color: "#000000",
54-
background_color: "#ffffff",
55-
}),
56-
}),
57+
};
58+
59+
return [
60+
{
61+
path: "manifest.json",
62+
content: JSON.stringify({
63+
...base,
64+
theme_color: "#fafafa",
65+
background_color: "#fafafa",
66+
}),
67+
},
68+
{
69+
path: "manifest-dark.json",
70+
content: JSON.stringify({
71+
...base,
72+
theme_color: "#313131",
73+
background_color: "#313131",
74+
}),
75+
},
76+
];
77+
},
5778
}),
5879
],
5980
});

0 commit comments

Comments
 (0)