From f4dd2b53b548507d72f22aee699eafe4c6f166eb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sascha=20I=C3=9Fbr=C3=BCcker?= Date: Tue, 24 Sep 2024 21:42:52 +0200 Subject: [PATCH] Fix select dropdown menu background in dark theme (#858) --- bookmarks/styles/theme-dark.css | 7 +++++++ bookmarks/styles/theme/forms.css | 10 ++++++++++ 2 files changed, 17 insertions(+) diff --git a/bookmarks/styles/theme-dark.css b/bookmarks/styles/theme-dark.css index 48585f2..bec8ca3 100644 --- a/bookmarks/styles/theme-dark.css +++ b/bookmarks/styles/theme-dark.css @@ -141,3 +141,10 @@ --bookmark-actions-weight: 400; --bulk-actions-bg-color: var(--contrast-5); } + +/* Try to force dark color scheme for all native elements (e.g. upload button +in file inputs, native select dropdown). For the select dropdown some browsers +ignore this and use whatever users have configured in their system settings. */ +:root { + color-scheme: dark; +} diff --git a/bookmarks/styles/theme/forms.css b/bookmarks/styles/theme/forms.css index e07f6f2..0a5b6ae 100644 --- a/bookmarks/styles/theme/forms.css +++ b/bookmarks/styles/theme/forms.css @@ -197,6 +197,16 @@ textarea.form-input { no-repeat right 0.35rem center / 0.4rem 0.5rem; padding-right: calc(var(--control-icon-size) + var(--control-padding-x)); } + + /* Options */ + & option { + /* On Windows with Chrome / Edge, options seems to use the same + background color as the select. However for the dark theme the + background is a semi-transparent white, resulting in an opaque white + background for the dropdown. Use the modal background color to force + a dark background instead. */ + background: var(--modal-container-bg-color); + } } /* Form element: Checkbox and Radio */