fix: bad contrast on chrome/android with the dark theme
Massimo Melina committed
Oct 19, 2025 at 15:53 UTC
f58b972d43e541a9ccb976df96e6116bdb2ec61c
2 files changed
+3
-4
frontend/src/App.ts
+2
-3
@@ -25,7 +25,7 @@ function App() {
25
return h('h1', { style: { textAlign: 'center'} }, messageOnly)
26
if (!ready)
27
return h(Spinner, { style: { margin: 'auto' } })
28
- installScript()
28
+ installScript() // do this only after react has started working
29
return h('div', {
30
...i18nWrapperProps(),
31
...acceptDropFiles((files, to) => {
@@ -51,11 +51,10 @@ function App() {
51
52
let scriptAdded = false
53
function installScript() {
54
- if (scriptAdded) return
54
+ if (scriptAdded) return // only once
55
scriptAdded = true
56
const s = getHFS().customHtml?.script // we don't need frontend-event-generated code, i guess
57
if (!s) return
58
- // it's important that this rendered only once, so we don't even render it, but manipulate dom
58
const el = document.createElement('script')
59
el.type = 'text/javascript'
60
el.text = s
frontend/src/index.scss
+1
-1
@@ -87,7 +87,7 @@ input[type=range] {
87
}
88
input[type=checkbox] {
89
transform: scale(1.7);
90
- accent-color: var(--button-bg);
90
+ accent-color: var(--link); // don't use a dark color here, or chrome on android will fail at using a contrasty color for the checkmark
91
}
92
textarea { font-size: 14pt }
93
label input[type=checkbox] {