From f18cf545b96e9b32ef55c63c1ae0acafbf66fc24 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Colomb?= <src@andre.colomb.de>
Date: Sun, 6 Oct 2024 00:48:19 +0200
Subject: [PATCH] fix(gui): improve device ID readability in black and dark
 themes (fixes #9757) (#9758)

---
 gui/black/assets/css/theme.css                  | 1 -
 gui/dark/assets/css/theme.css                   | 3 +--
 gui/default/syncthing/device/idqrModalView.html | 2 +-
 3 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/gui/black/assets/css/theme.css b/gui/black/assets/css/theme.css
index 1e280a952..ae3e56525 100644
--- a/gui/black/assets/css/theme.css
+++ b/gui/black/assets/css/theme.css
@@ -224,7 +224,6 @@ code.ng-binding{
 }
 
 .well, .form-control[readonly="readonly"], .popover { /* read-only fields*/
-    color: #666 !important;
     border-color: #444 !important;
     background-color: #111 !important;
 }
diff --git a/gui/dark/assets/css/theme.css b/gui/dark/assets/css/theme.css
index 26ab0f898..0876bb08a 100644
--- a/gui/dark/assets/css/theme.css
+++ b/gui/dark/assets/css/theme.css
@@ -228,7 +228,6 @@ code.ng-binding{
 }
 
 .well, .form-control[readonly="readonly"], .popover { /* read-only fields*/
-    color: #666 !important;
     border-color: #424242 !important;
     background-color: #3B3B3B !important;
 }
@@ -289,4 +288,4 @@ code.ng-binding{
 /* Remote Devices 'connection type'-icon color set to #aaa */
 .reception {
     filter: invert(77%) sepia(0%) saturate(724%) hue-rotate(146deg) brightness(91%) contrast(85%);
-}
\ No newline at end of file
+}
diff --git a/gui/default/syncthing/device/idqrModalView.html b/gui/default/syncthing/device/idqrModalView.html
index c988ae299..2398c9b30 100644
--- a/gui/default/syncthing/device/idqrModalView.html
+++ b/gui/default/syncthing/device/idqrModalView.html
@@ -1,6 +1,6 @@
 <modal id="idqr" status="info" icon="fas fa-qrcode" heading="{{'Device Identification' | translate}} - {{deviceName(currentDevice)}}" large="yes" closeable="yes">
   <div class="modal-body text-center">
-    <div class="well well-sm text-monospace select-on-click">{{currentDevice.deviceID}}</div>
+    <div class="well well-sm text-monospace select-on-click"><strong>{{currentDevice.deviceID}}</strong></div>
     <div ng-if="currentDevice.deviceID">
       <img class="img-thumbnail" ng-src="qr/?text={{currentDevice.deviceID}}" height="328" width="328" alt="{{'QR code' | translate}}" />
       <div class="btn-group-vertical" style="vertical-align: top;">