Просмотр исходного кода

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).
Terrance 1 год назад
Родитель
Сommit
acc5d2675b
2 измененных файлов с 28 добавлено и 0 удалено
  1. 14 0
      gui/black/assets/css/theme.css
  2. 14 0
      gui/dark/assets/css/theme.css

+ 14 - 0
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;
+}

+ 14 - 0
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;
+}