From 0aeabbc2181927ca91338b99064b92314e444a43 Mon Sep 17 00:00:00 2001
From: Venessa Kuchenik <vkuchenik@contractor.usgs.gov>
Date: Thu, 31 Jul 2025 09:23:40 -0700
Subject: [PATCH] more dark mode colors

---
 .../layout/Canvas/views/GlobalMapCanvas.jsx      |  1 -
 client/src/css/leaflet-darkmode.css              | 11 -----------
 client/src/theme.js                              | 16 +++++++++++++---
 3 files changed, 13 insertions(+), 15 deletions(-)
 delete mode 100644 client/src/css/leaflet-darkmode.css

diff --git a/client/src/components/layout/Canvas/views/GlobalMapCanvas.jsx b/client/src/components/layout/Canvas/views/GlobalMapCanvas.jsx
index 8cdaf5c..7190735 100644
--- a/client/src/components/layout/Canvas/views/GlobalMapCanvas.jsx
+++ b/client/src/components/layout/Canvas/views/GlobalMapCanvas.jsx
@@ -1,7 +1,6 @@
 import React from "react";
 import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
 import 'leaflet/dist/leaflet.css';
-import 'src/css/leaflet-darkmode.css';
 
 export default function GlobalMapCanvas() {
   const position = [45.61142478054226, -122.49630033167544]; // [latitude, longitude]
diff --git a/client/src/css/leaflet-darkmode.css b/client/src/css/leaflet-darkmode.css
deleted file mode 100644
index 370d56f..0000000
--- a/client/src/css/leaflet-darkmode.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/* map dark mode */
-.dark-mode-leaflet .leaflet-tile,
-.dark-mode-leaflet .leaflet-control-zoom-in,
-.dark-mode-leaflet .leaflet-control-zoom-out,
-.dark-mode-leaflet .leaflet-control-attribution {
-  filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
-}
-
-.dark-mode-leaflet .leaflet-container {
-  background-color: #1e1e1e; /* dark background for seamless look */
-}
\ No newline at end of file
diff --git a/client/src/theme.js b/client/src/theme.js
index ff33a94..ba8c4b7 100644
--- a/client/src/theme.js
+++ b/client/src/theme.js
@@ -102,6 +102,12 @@ const config = defineConfig({
     boxShadow: "0 0 10px #c0d2e3ff !important",
     opacity: "1 !important",
     borderRadius: "5px",
+    _dark: {
+      background: "#393c3fff !important",
+      borderColor: "#000000ff !important",
+      boxShadow: "0 0 10px #16181bff !important",
+      opacity: "1 !important",
+      },
     },
     ".react-resizable-handle-se": {
       zIndex: "1",
@@ -109,13 +115,19 @@ const config = defineConfig({
     "*": {
       scrollbarWidth: "thin",
       scrollbarColor: "#a0aec0 transparent",
+      _dark: {
+        scrollbarColor: "#474747ff transparent",
+      }
     },
     "::-webkit-scrollbar": {
       width: "8px",
     },
     "::-webkit-scrollbar-thumb": {
-      backgroundColor:" rgba(100, 100, 100, 0.4)",
+      backgroundColor: "rgba(100, 100, 100, 0.4)",
       borderRadius: "4px",
+      _dark: {
+        backgroundColor: "rgba(35, 35, 35, 0.81)",
+      }
     },
     "::-webkit-scrollbar-track": {
       background: "transparent",
@@ -147,9 +159,7 @@ const config = defineConfig({
         base100: { value: {base: "#f6f9faff", _dark: "#1617199e"}},
         base200: { value: {base: "#e6ecf1ff", _dark: "#242424"}},
         base300: { value: {base: "#d3dae4ff", _dark: "#0a0b0bff"}},
-        // primary: { value: {base: "#9cd855", _dark: "#629631"}},
         primary: { value: {base: "#2B98F8", _dark: "#2B98F8"}},
-        // primaryLt: { value: {base: "#c9e9a0", _dark: "#92948e"}},
         primaryLt: { value: {base: "#98cdffff", _dark: "#98cdffff"}},
         secondaryBG: { value: {base: "#EDF1F1", _dark: "#121212"}},
         border: {value: {base: "#000000", _dark: "#CBCBCB"}},