From e29559e46dfbd7c639083b5c01e063b8a0530f94 Mon Sep 17 00:00:00 2001 From: Joeri Exelmans Date: Thu, 13 Nov 2025 22:01:02 +0100 Subject: [PATCH] improve dark mode colors + fix dark logo in chrome --- src/App/App.css | 2 +- src/App/App.tsx | 2 +- src/Logo/Logo.tsx | 15 ++++++++------- src/index.css | 19 +++++++++++++++---- 4 files changed, 25 insertions(+), 13 deletions(-) diff --git a/src/App/App.css b/src/App/App.css index 73965d8..5bc6051 100644 --- a/src/App/App.css +++ b/src/App/App.css @@ -47,7 +47,7 @@ details:has(+ details) { } .toolbar input { - height: 20px; + height: 22px; } .toolbar div { vertical-align: bottom; diff --git a/src/App/App.tsx b/src/App/App.tsx index d0ac4d8..bd89a9b 100644 --- a/src/App/App.tsx +++ b/src/App/App.tsx @@ -174,7 +174,7 @@ export function App() { {/* Right: sidebar */}
- + + + + + + + @@ -1563,12 +1569,7 @@ export function Logo() { - - - - - - + diff --git a/src/index.css b/src/index.css index 9b7ef7d..14779eb 100644 --- a/src/index.css +++ b/src/index.css @@ -8,17 +8,19 @@ html, body { :root { color-scheme: light dark; - --background-color: light-dark(white, rgb(0, 0, 0)); + --background-color: light-dark(white, rgb(31, 33, 36)); --text-color: light-dark(black, white); --error-color: light-dark(rgb(163, 0, 0), rgb(255, 82, 82)); --error-bg-color: light-dark(lightpink, rgb(75, 0, 0)); --error-hover-bg-color: light-dark(rgb(102, 0, 0), rgb(238, 153, 153)); --light-accent-color: light-dark(rgba(0,0,255,0.2), rgba(78, 186, 248, 0.377)); --accent-border-color: light-dark(blue, rgb(64, 185, 255)); + --accent-opaque-color: rgba(78, 186, 248, 1); --separator-color: light-dark(lightgrey, rgb(44, 44, 44)); --inactive-bg-color: light-dark(#f7f7f7, rgb(29, 29, 29)); --inactive-fg-color: light-dark(grey, rgb(70, 70, 70)); - --button-bg-color: light-dark(#fcfcfc, rgb(20, 20, 20)); + --button-bg-color: light-dark(#fcfcfc, rgb(44, 50, 63)); + --textbox-bg-color: light-dark(white, rgb(36, 41, 40)); --modal-backdrop-color: light-dark(rgba(200,200,200,0.7), rgba(23, 22, 32, 0.849)); --status-inactive-color: light-dark(grey, grey); --status-ok-color: light-dark(forestgreen, forestgreen); @@ -31,14 +33,23 @@ html, body { --firing-transition-color: light-dark(rgba(255, 128, 9, 1), rgba(255, 128, 9, 1)); --associated-color: light-dark(green, rgb(186, 245, 119)); --bottom-panel-bg-color: light-dark(rgb(255, 249, 235), rgb(24, 40, 70)); - --summary-hover-bg-color: light-dark(#eee, #242424); + --summary-hover-bg-color: light-dark(#eee, #313131); --internal-event-bg-color: light-dark(rgb(255, 218, 252), rgb(99, 27, 94)); --input-event-bg-color: light-dark(rgb(224, 247, 209), rgb(59, 95, 37)); --input-event-hover-bg-color: light-dark(rgb(195, 224, 176), rgb(59, 88, 40)); --input-event-active-bg-color: light-dark(rgb(176, 204, 158), rgb(77, 117, 53)); --output-event-bg-color: light-dark(rgb(230, 249, 255), rgb(28, 83, 104)); + + background-color: var(--background-color); + color: var(--text-color); } +input { + background-color: var(--textbox-bg-color); + border: 1px solid var(--separator-color); +} + + div#root { height: 100%; } @@ -63,7 +74,7 @@ kbd:active { transform: translateY(1px); } input { /* border: solid blue 2px; */ - accent-color: var(--light-accent-color); + accent-color: var(--accent-opaque-color); } ::selection {