research/statebuddy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

improve dark mode colors + fix dark logo in chrome

Browse source
This commit is contained in:
Joeri Exelmans 2025-11-13 22:01:02 +01:00
parent e3b88b7d89
commit e29559e46d
4 changed files with 25 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/App/App.css
View file

@ -47,7 +47,7 @@ details:has(+ details) {
} }
.toolbar input { .toolbar input {
height: 20px; height: 22px;
} }
.toolbar div { .toolbar div {
vertical-align: bottom; vertical-align: bottom;

2
src/App/App.tsx
View file

@ -174,7 +174,7 @@ export function App() {
{/* Right: sidebar */} {/* Right: sidebar */}
<div style={{ <div style={{
flex: '0 0 content', flex: '0 0 content',
borderLeft: '1px solid lightgrey', borderLeft: '1px solid var(--separator-color)',
overflowY: "auto", overflowY: "auto",
overflowX: "auto", overflowX: "auto",
maxWidth: 'min(400px, 50vw)', maxWidth: 'min(400px, 50vw)',

13
src/Logo/Logo.tsx
View file

File diff suppressed because one or more lines are too long

19
src/index.css
View file

@ -8,17 +8,19 @@ html, body {
:root { :root {
color-scheme: light dark; 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); --text-color: light-dark(black, white);
--error-color: light-dark(rgb(163, 0, 0), rgb(255, 82, 82)); --error-color: light-dark(rgb(163, 0, 0), rgb(255, 82, 82));
--error-bg-color: light-dark(lightpink, rgb(75, 0, 0)); --error-bg-color: light-dark(lightpink, rgb(75, 0, 0));
--error-hover-bg-color: light-dark(rgb(102, 0, 0), rgb(238, 153, 153)); --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)); --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-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)); --separator-color: light-dark(lightgrey, rgb(44, 44, 44));
--inactive-bg-color: light-dark(#f7f7f7, rgb(29, 29, 29)); --inactive-bg-color: light-dark(#f7f7f7, rgb(29, 29, 29));
--inactive-fg-color: light-dark(grey, rgb(70, 70, 70)); --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)); --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-inactive-color: light-dark(grey, grey);
--status-ok-color: light-dark(forestgreen, forestgreen); --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)); --firing-transition-color: light-dark(rgba(255, 128, 9, 1), rgba(255, 128, 9, 1));
--associated-color: light-dark(green, rgb(186, 245, 119)); --associated-color: light-dark(green, rgb(186, 245, 119));
--bottom-panel-bg-color: light-dark(rgb(255, 249, 235), rgb(24, 40, 70)); --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)); --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-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-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)); --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)); --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 { div#root {
height: 100%; height: 100%;
} }
@ -63,7 +74,7 @@ kbd:active { transform: translateY(1px); }
input { input {
/* border: solid blue 2px; */ /* border: solid blue 2px; */
accent-color: var(--light-accent-color); accent-color: var(--accent-opaque-color);
} }
::selection { ::selection {