feat: add dark colors

jsdelivr · Sep 23, 2024 · 11fbb23 · 11fbb23
1 parent f18449b
commit 11fbb23
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 19 deletions.
diff --git a/assets/css/base.css b/assets/css/base.css
@@ -38,17 +38,17 @@
   --bluegray-800: #37404c;
   --bluegray-900: #282e38;
 
-  --dark-50: #f8fafc; /**/
-  --dark-100: #f1f5f9; /**/
-  --dark-200: #e2e8f0; /**/
-  --dark-300: #cbd5e1; /**/
+  --dark-50: #f8fafc;
+  --dark-100: #f1f5f9;
+  --dark-200: #e2e8f0;
+  --dark-300: #cbd5e1;
   --dark-400: #4f6180;
   --dark-500: #33415a;
   --dark-600: #2d3c59;
   --dark-700: #1a2842;
   --dark-800: #17233a;
   --dark-900: #162034;
-  --dark-950: #131728; /**/
+  --dark-950: #131728;
 
   --sidebar-border: #4f6180;
   --table-border: #2d3c59;

diff --git a/utils/dark-map-styles.json b/utils/dark-map-styles.json
@@ -4,7 +4,7 @@
 		"elementType": "geometry",
 		"stylers": [
 			{
-				"color": "#ff0000"
+				"color": "#131728"
 			},
 			{
 				"lightness": 0
@@ -16,7 +16,7 @@
 		"elementType": "geometry",
 		"stylers": [
 			{
-				"color": "#00ff00"
+				"color": "#2d3c59"
 			},
 			{
 				"lightness": 0
@@ -28,7 +28,7 @@
 		"elementType": "geometry.stroke",
 		"stylers": [
 			{
-				"color": "#0000ff"
+				"color": "#17233a"
 			},
 			{
 				"lightness": 0

diff --git a/utils/init-google-map.ts b/utils/init-google-map.ts
@@ -9,7 +9,6 @@ const DEFAULT_MARKER_COLOR = '#17d4a7';
 
 const INITIAL_MAP_STYLES = mapStyles;
 const MODERATE_MAP_STYLES = [
-	...INITIAL_MAP_STYLES,
 	{
 		elementType: 'labels.text.stroke',
 		stylers: [{ visibility: 'on' }],
@@ -23,26 +22,32 @@ const MODERATE_MAP_STYLES = [
 	},
 ];
 const DETAILED_MAP_STYLES = [
-	...MODERATE_MAP_STYLES,
 	{
 		featureType: 'road',
 		stylers: [{ visibility: 'on' }],
 	},
 ];
-const INITIAL_MAP_STYLES_DARK = [ ...INITIAL_MAP_STYLES, ...darkMapStyles ];
-const MODERATE_MAP_STYLES_DARK = [ ...MODERATE_MAP_STYLES, ...darkMapStyles ];
-const DETAILED_MAP_STYLES_DARK = [ ...DETAILED_MAP_STYLES, ...darkMapStyles ];
+const INITIAL_MAP_STYLES_DARK = darkMapStyles;
+const MODERATE_MAP_STYLES_DARK = [{
+	elementType: 'labels.text.stroke',
+	stylers: [
+		{ visibility: 'on' },
+		{ color: '#131728' },
+	],
+}];
 
 const stylesByTheme = {
 	light: {
+		background: '#ffffff',
 		initial: INITIAL_MAP_STYLES,
-		moderate: MODERATE_MAP_STYLES,
-		detailed: DETAILED_MAP_STYLES,
+		moderate: [ ...INITIAL_MAP_STYLES, ...MODERATE_MAP_STYLES ],
+		detailed: [ ...INITIAL_MAP_STYLES, ...MODERATE_MAP_STYLES, ...DETAILED_MAP_STYLES ],
 	},
 	dark: {
-		initial: INITIAL_MAP_STYLES_DARK,
-		moderate: MODERATE_MAP_STYLES_DARK,
-		detailed: DETAILED_MAP_STYLES_DARK,
+		background: '#131728',
+		initial: [ ...INITIAL_MAP_STYLES, ...INITIAL_MAP_STYLES_DARK ],
+		moderate: [ ...INITIAL_MAP_STYLES, ...MODERATE_MAP_STYLES, ...INITIAL_MAP_STYLES_DARK, ...MODERATE_MAP_STYLES_DARK ],
+		detailed: [ ...INITIAL_MAP_STYLES, ...MODERATE_MAP_STYLES, ...DETAILED_MAP_STYLES, ...INITIAL_MAP_STYLES_DARK, ...MODERATE_MAP_STYLES_DARK ],
 	},
 };
 
@@ -64,7 +69,7 @@ export const initGoogleMap = async (probe: Probe) => {
 	const style = stylesByTheme[auth.theme];
 
 	map = new Map(element, {
-		backgroundColor: '#fafafa',
+		backgroundColor: style.background,
 		styles: style.initial,
 		zoom: MAP_ZOOM_REG,
 		center: { lat: probe.latitude, lng: probe.longitude },