Repository: syncthing/syncthing (language: go)

Issue:
Disabled checkbox panels don't respect dark theme
### What happened?

A minor cosmetic issue which can be seen e.g. for introducer/auto-accept options of an untrusted device:

![image](https://github.com/user-attachments/assets/c18c0e64-4b81-46fb-9950-c513359bb34a)

These styles are defined in overrides.css, and could perhaps do with `@media (prefers-color-scheme: dark)` variants:

https://github.com/syncthing/syncthing/blob/cc09f0170df7df8775b6f9419c85d1faa7319599/gui/default/assets/css/overrides.css#L530-L540

### Syncthing version

v1.27.12

### Platform & operating system

Windows 10

### Browser version

Firefox 132.0

### Relevant log output

_No response_
Disabled checkbox panels don't respect dark theme
### What happened?

A minor cosmetic issue which can be seen e.g. for introducer/auto-accept options of an untrusted device:

![image](https://github.com/user-attachments/assets/c18c0e64-4b81-46fb-9950-c513359bb34a)

These styles are defined in overrides.css, and could perhaps do with `@media (prefers-color-scheme: dark)` variants:

https://github.com/syncthing/syncthing/blob/cc09f0170df7df8775b6f9419c85d1faa7319599/gui/default/assets/css/overrides.css#L530-L540

### Syncthing version

v1.27.12

### Platform & operating system

Windows 10

### Browser version

Firefox 132.0

### Relevant log output

_No response_


Discussion / hints:
The main problem here is that the `disabled` attribute used on a `div` in itself is invalid HTML.

> The disabled attribute is supported by `<button>`, `<fieldset>`, `<optgroup>`, `<option>`, `<select>`, `<textarea>` and `<input>`.

See: https://developer.mozilla.org/docs/Web/HTML/Attributes/disabled

However, it's used like that in the GUI all over the place, so it wouldn't be feasible to change the code in one place only. Even though adding those styles to other themes means basically expanding on the current hack, it's likely the easiest solution…
The main problem here is that the `disabled` attribute used on a `div` in itself is invalid HTML.

> The disabled attribute is supported by `<button>`, `<fieldset>`, `<optgroup>`, `<option>`, `<select>`, `<textarea>` and `<input>`.

See: https://developer.mozilla.org/docs/Web/HTML/Attributes/disabled

However, it's used like that in the GUI all over the place, so it wouldn't be feasible to change the code in one place only. Even though adding those styles to other themes means basically expanding on the current hack, it's likely the easiest solution…

Fix patch:
diff --git a/gui/black/assets/css/theme.css b/gui/black/assets/css/theme.css
index ae3e5652570..52588ade8e0 100644
--- a/gui/black/assets/css/theme.css
+++ b/gui/black/assets/css/theme.css
@@ -277,3 +277,17 @@ code.ng-binding{
 .reception {
     filter: invert(77%) sepia(0%) saturate(724%) hue-rotate(146deg) brightness(91%) contrast(85%);
 }
+
+/* Disabled checkbox panels */
+
+.checkbox[disabled] {
+    background-color: #222222;
+}
+
+.checkbox[disabled] * {
+    color: #666666;
+}
+
+.checkbox[disabled] .help-block {
+    color: #666666 !important;
+}
diff --git a/gui/dark/assets/css/theme.css b/gui/dark/assets/css/theme.css
index 0876bb08a81..a3ac43dbfd7 100644
--- a/gui/dark/assets/css/theme.css
+++ b/gui/dark/assets/css/theme.css
@@ -289,3 +289,17 @@ code.ng-binding{
 .reception {
     filter: invert(77%) sepia(0%) saturate(724%) hue-rotate(146deg) brightness(91%) contrast(85%);
 }
+
+/* Disabled checkbox panels */
+
+.checkbox[disabled] {
+    background-color: #3B3B3B;
+}
+
+.checkbox[disabled] * {
+    color: #999999;
+}
+
+.checkbox[disabled] .help-block {
+    color: #999999 !important;
+}


Test patch: