From ea5602f5d825e60bca39ea2afc5f37a24de6db43 Mon Sep 17 00:00:00 2001 From: Arseny Lisin Date: Tue, 21 Feb 2023 13:59:12 +0200 Subject: [PATCH] Fix dark theme bugs --- client/src/components/App/index.css | 6 ++++++ client/src/components/Logs/Logs.css | 8 ++++++++ client/src/components/ui/Tabler.css | 6 +++--- 3 files changed, 17 insertions(+), 3 deletions(-) diff --git a/client/src/components/App/index.css b/client/src/components/App/index.css index b20bd424723..4be3044ac8e 100644 --- a/client/src/components/App/index.css +++ b/client/src/components/App/index.css @@ -30,6 +30,9 @@ --loading-bg: rgba(255, 255, 255, 0.48); --font-family-monospace: Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace; --font-size-disable-autozoom: 1rem; + --alert-message-color: #24426c; + --alert-message-border: #cbdbf2; + --alert-message-bg: #dae5f5; } [data-theme="dark"] { @@ -59,6 +62,9 @@ --detailed-info-color: #fff; --gray300: #f3f3f3; --loading-bg: #131313; + --alert-message-color: #e6e6e6; + --alert-message-border: #363648; + --alert-message-bg: #363648; } body { diff --git a/client/src/components/Logs/Logs.css b/client/src/components/Logs/Logs.css index bf0689e64c4..273eeb0c76b 100644 --- a/client/src/components/Logs/Logs.css +++ b/client/src/components/Logs/Logs.css @@ -130,6 +130,10 @@ background-color: transparent !important; } +[data-theme="dark"] .form-control--transparent option { + background-color: var(--card-bgcolor); +} + .input-group-search { background-color: transparent; position: relative; @@ -400,6 +404,10 @@ background-color: var(--logs__row--blue-bgcolor); } +[data-theme="dark"] .logs__row--blue .logs__text--link { + color: var(--white); +} + .logs__row--green { background-color: var(--green-pale); } diff --git a/client/src/components/ui/Tabler.css b/client/src/components/ui/Tabler.css index a8eab1ec5f9..dcb9002a1a0 100644 --- a/client/src/components/ui/Tabler.css +++ b/client/src/components/ui/Tabler.css @@ -5047,9 +5047,9 @@ tbody.collapse.show { } .alert-primary { - color: #24426c; - background-color: #dae5f5; - border-color: #cbdbf2; + color: var(--alert-message-color); + background-color: var(--alert-message-bg); + border-color: var(--alert-message-border); } .alert-primary hr {