diff --git a/client/src/components/App/index.css b/client/src/components/App/index.css index b20bd424..e11400b9 100644 --- a/client/src/components/App/index.css +++ b/client/src/components/App/index.css @@ -30,6 +30,11 @@ --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; + --checkbox-bg: #e2e2e2; + --radio-bg: #ffffff; } [data-theme="dark"] { @@ -59,6 +64,11 @@ --detailed-info-color: #fff; --gray300: #f3f3f3; --loading-bg: #131313; + --alert-message-color: #e6e6e6; + --alert-message-border: #363648; + --alert-message-bg: #363648; + --checkbox-bg: #a4a4a4; + --radio-bg: #a4a4a4; } body { diff --git a/client/src/components/Logs/Logs.css b/client/src/components/Logs/Logs.css index bf0689e6..273eeb0c 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/Checkbox.css b/client/src/components/ui/Checkbox.css index 2a556fb0..111f0af0 100644 --- a/client/src/components/ui/Checkbox.css +++ b/client/src/components/ui/Checkbox.css @@ -48,7 +48,7 @@ height: 20px; min-width: 20px; margin-right: 10px; - background-color: #e2e2e2; + background-color: var(--checkbox-bg); background-repeat: no-repeat; background-position: center center; background-size: 12px 10px; diff --git a/client/src/components/ui/Tabler.css b/client/src/components/ui/Tabler.css index a8eab1ec..3ac81476 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 { @@ -5089,9 +5089,9 @@ tbody.collapse.show { } .alert-info { - color: #24587e; - background-color: #daeefc; - border-color: #cbe7fb; + color: var(--alert-message-color); + background-color: var(--alert-message-bg); + border-color: var(--alert-message-border); } .alert-info hr { @@ -14317,7 +14317,7 @@ textarea[cols] { .custom-control-label:before { border: 1px solid rgba(0, 40, 100, 0.12); - background-color: #fff; + background-color: var(--radio-bg); background-size: 0.5rem; }