dark mode for the grid

fixie-ai · Apr 16, 2024 · be29bbf · be29bbf
1 parent cc8dd01
commit be29bbf
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 1 deletion.
diff --git a/website/src/components/DataGrid.astro b/website/src/components/DataGrid.astro
@@ -6,6 +6,14 @@ import 'ag-grid-community/styles/ag-theme-quartz.css';
 <style>
   .ag-theme-quartz {
     font-family: monospace;
+    --ag-background-color: rgb(245 245 244);
+    --ag-header-background-color: rgb(245 245 244);
+  }
+
+  .ag-theme-quartz-dark {
+    font-family: monospace;
+    --ag-background-color: rgb(28 25 23);
+    --ag-header-background-color: rgb(28 25 23);
   }
 </style>
 

diff --git a/website/src/components/Navbar.astro b/website/src/components/Navbar.astro
@@ -55,12 +55,23 @@ const data = await fs.readFile(url, 'utf8');
 						el.checked = checked;
 					}
 				});
-				if (lightSwitch.checked) {
+				if (lightSwitch.checked) {	// Dark mode
 					document.documentElement.classList.add('dark');
 					localStorage.setItem('dark-mode', 'true');
+
+					// Change the data grid
+					const myElement = document.getElementById('myGrid');
+					myElement.classList.remove('ag-theme-quartz');
+					myElement.classList.add('ag-theme-quartz-dark');
+
 				} else {
 					document.documentElement.classList.remove('dark');
 					localStorage.setItem('dark-mode', 'false');
+
+					// Change the data grid
+					const myElement = document.getElementById('myGrid');
+					myElement.classList.remove('ag-theme-quartz-dark');
+					myElement.classList.add('ag-theme-quartz');
 				}
 			});
 		});