From acc5d2675b210ac42348ef0f62dc378ec42bd882 Mon Sep 17 00:00:00 2001
From: Terrance <git@terrance.allofti.me>
Date: Tue, 22 Oct 2024 13:03:32 +0100
Subject: [PATCH] fix(gui): add dark scheme styles for disabled checkboxes
 (fixes #9776) (#9777)

### Purpose

Fixes #9776 by tweaking the text/background colours of disabled checkbox
panels when dark mode is enabled.

It was [noted on that
issue](https://github.com/syncthing/syncthing/issues/9776#issuecomment-2424828520)
that there's a bigger issue around the correctness of using the
`disabled` attribute on a `<div>` in the first place, but this PR does
not attempt to change that.

### Testing

I've hooked up the GUI files against a release build as suggested below.

### Screenshots

Using the dark theme, or the default theme with a system dark scheme:


![image](https://github.com/user-attachments/assets/3c6bfa77-cc7a-4f3e-a5c2-83daf54dcc34)

Using the black theme:


![image](https://github.com/user-attachments/assets/768db657-aa52-4db0-8455-5194a00fc143)

These borrow the colours from dark theme text inputs and black theme
tabs for a consistent look (initially I tried the text colour of
disabled text inputs, but that produced some poor contrast).
---
 gui/black/assets/css/theme.css | 14 ++++++++++++++
 gui/dark/assets/css/theme.css  | 14 ++++++++++++++
 2 files changed, 28 insertions(+)

diff --git a/gui/black/assets/css/theme.css b/gui/black/assets/css/theme.css
index ae3e56525..52588ade8 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 0876bb08a..a3ac43dbf 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;
+}