fix: dark mode (Timeline, Activity, Raw Data) (#575)

* Set a proper background color for `.vis-tooltip` in dark mode * Correctly darken uncategorized event rectangles on hover * Add dark mode icons for sorting arrows
ActivityWatch · May 12, 2024 · 05c25c9 · 05c25c9 · github-actions · May 12, 2024
1 parent 80db006
commit 05c25c9
Showing 1 changed file with 20 additions and 0 deletions.
diff --git a/static/dark.css b/static/dark.css
@@ -166,6 +166,10 @@ hr {
   color: #e9ebf0 !important;
 }
 
+.vis-tooltip {
+  background-color: #282c32 !important;
+}
+
 #visualization *, svg,
 .nav.nav-tabs,
 .btn-outline-secondary {
@@ -181,6 +185,10 @@ svg.appsummary g rect[style="fill: rgb(204, 204, 204);"] {
   fill: #666666 !important;
 }
 
+svg.appsummary g rect[style="fill: rgb(184, 184, 184);"] {
+  fill: #555555 !important;
+}
+
 svg path[style="fill: rgb(255, 255, 255);"] {
   fill: #23272d !important;
 }
@@ -220,4 +228,16 @@ div[style="color: rgb(85, 85, 85); font-size: 0.9em;"] {
 
 .bg-light {
   background-color: #1a1d24 !important;
+}
+
+[aria-sort="none"] {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' preserveAspectRatio='none' fill='white' opacity='.4'%3E%3Cpath d='m51 1 25 23 24 22H1l25-22zm0 100 25-23 24-22H1l25 22z'/%3E%3C/svg%3E") !important;
+}
+
+[aria-sort="ascending"] {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' preserveAspectRatio='none' fill='white'%3E%3Cpath opacity='.8' d='m51 1 25 23 24 22H1l25-22z'/%3E%3Cpath opacity='.4' d='m51 101 25-23 24-22H1l25 22z'/%3E%3C/svg%3E") !important;
+}
+
+[aria-sort="descending"] {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' preserveAspectRatio='none' fill='white'%3E%3Cpath opacity='.4' d='m51 1 25 23 24 22H1l25-22z'/%3E%3Cpath opacity='.8' d='m51 101 25-23 24-22H1l25 22z'/%3E%3C/svg%3E") !important;
 }