update colors

Author: Ivan Semochkin

src/app.css

@@ -136,26 +136,29 @@ input[type='search'] {
 }
 
 body {
-    --bg-body: #121210;
+    --bg-body: #160F1D;
     --bg-interface: #22192B;
 
-	--bg-start: #96E458;
-	--bg-end: #E3A359;
-	--bg-visited: #7EA151;
+	--bg-start: #7084E9;
 
-	--bg-path: #B651BF;
-    --bg-wall: #C2444C;
+    --bg-end: #E39B48;
 
-    --bg-weight-1: #6143B7;
-    --bg-weight-2: #6F4ECF;
-    --bg-weight-3: #8463E3;
+	--bg-visited: #4D368F;
+
+	--bg-path: #5568CD;
+
+    --bg-wall: #D0424B;
+
+    --bg-weight-1: #2A943B;
+    --bg-weight-2: #56A73B;
+    --bg-weight-3: #74C358;
 
     --bg-weight-tool: var(--bg-weight-2);
 	--bg-wall-tool: var(--bg-wall);
 
 
 	--bg-select: hsl(0, 0%, 3%);
-	--bg-tool-border: hsl(227, 25%, 15%);
+	--bg-tool-border: #F0E8F4;
 	--select-active: hsl(215, 80%, 35%);
 
 	--color-weight: hsl(218, 13%, 88%);
@@ -168,5 +171,5 @@ body.dark {
 }
 
 body.light {
-	--bg-not-visited: #E0DCE4;
+	--bg-not-visited: #F0E8F4;
 }

src/lib/Components/AlgoSelect.svelte

@@ -49,6 +49,7 @@
 		font-size: 24px;
 		color: white;
 		position: relative;
+		border-bottom: 2px solid var(--bg-tool-border);
 		font-weight: bold;
 	}
 

src/lib/Components/Node.svelte

@@ -1,31 +1,59 @@
 <script lang="ts">
 	import { animationQ } from '$lib/stores/animation';
+	import { theme } from '$lib/stores/theme';
 	import type { Node } from '$lib/types';
 	import { startNodeKey, endNodeKey, selectedNodeKey, walls, weight } from '../stores/nodes';
 
 	export let key: string;
 	export let node: Node;
 
-	const getCurrentWeight = () => {
+	const getLightWeight = (key) => {
 		let currentWeight = $weight.get(key);
-		console.log('currentWeight', currentWeight);
+		if (!currentWeight) {
+			return '';
+		}
+
+		let prefix;
+
+		if (currentWeight <= 3) {
+			prefix = 3;
+		} else if (currentWeight <= 7) {
+			prefix = 2;
+		} else {
+			prefix = 1;
+		}
 
+		return `var(--bg-weight-${prefix})`;
+	};
+
+	const getDarkWeight = (key) => {
+		let currentWeight = $weight.get(key);
 		if (!currentWeight) {
 			return '';
-		} else if (currentWeight <= 3) {
-			return 'bg-weight-1';
+		}
+
+		let prefix;
+
+		if (currentWeight <= 3) {
+			prefix = 1;
 		} else if (currentWeight <= 7) {
-			return 'bg-weight-2';
+			prefix = 2;
 		} else {
-			return 'bg-weight-3';
+			prefix = 3;
 		}
+
+		return `var(--bg-weight-${prefix})`;
 	};
 </script>
 
 <div
 	id={key}
 	data-type="node"
-	style="--weight-dynamic-bg:{$weight.has(key) ? `var(--${getCurrentWeight()})` : ''}"
+	style="--weight-dynamic-bg:{$weight.has(key) && $theme === 'light'
+		? getLightWeight(key)
+		: $weight.has(key) && $theme === 'dark'
+			? getDarkWeight(key)
+			: ''}"
 	class="node"
 	class:visited={node.visited}
 	class:startNode={$startNodeKey === key}

src/lib/Components/Tools/Tool.svelte

@@ -31,7 +31,7 @@
 	.border {
 		position: absolute;
 		transition: 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
-		background-color: var(--bg-body);
+		background-color: var(--bg-tool-border);
 		height: 3px;
 		width: 10px;
 		bottom: 0;

src/lib/stores/nodes.ts

@@ -2,59 +2,47 @@ import { writable } from 'svelte/store';
 
 // Walls
 const createWallsStore = () => {
-	const { subscribe, update, set } = writable(new Set<string>());
-	return {
-		subscribe,
-		addWall: (key: string) =>
-			update((current) => {
-				current.add(key);
-				return current;
-			}),
-		removeWall: (key: string) =>
-			update((current) => {
-				current.delete(key);
-				return current;
-			}),
-		reset: () => set(new Set())
-	};
+    const { subscribe, update, set } = writable(new Set<string>());
+    return {
+        subscribe,
+        addWall: (key: string) =>
+            update((current) => {
+                current.add(key);
+                return current;
+            }),
+        removeWall: (key: string) =>
+            update((current) => {
+                current.delete(key);
+                return current;
+            }),
+        reset: () => set(new Set())
+    };
 };
 
 const createWeightStore = () => {
-	const { subscribe, update, set } = writable(new Map<string, number>());
-	return {
-		subscribe,
-		addWeight: (key: string) => {
-			update((current) => {
-				const weightedNode = current.get(key);
-				if (weightedNode) {
-					current.set(key, Math.min(9, weightedNode + 1));
-				} else {
-					current.set(key, 1);
-				}
-
-				return current;
-			});
-		},
-		removeWeight: (key: string) => {
-			update((current) => {
-				const weightedNode = current.get(key);
-
-				if (!weightedNode) {
-					return current;
-				}
-
-				const nextWeight = weightedNode - 1;
-
-				if (nextWeight <= 0) {
-					current.delete(key);
-				} else {
-					current.set(key, nextWeight);
-				}
-				return current;
-			});
-		},
-		reset: () => set(new Map())
-	};
+    const { subscribe, update, set } = writable(new Map<string, number>());
+    return {
+        subscribe,
+        addWeight: (key: string) => {
+            update((current) => {
+                const weightedNode = current.get(key);
+                if (weightedNode) {
+                    current.set(key, Math.min(9, weightedNode + 1));
+                } else {
+                    current.set(key, 1);
+                }
+
+                return current;
+            });
+        },
+        removeWeight: (key: string) => {
+            update((current) => {
+                current.delete(key);
+                return current
+            })
+        },
+        reset: () => set(new Map())
+    };
 };
 
 // Start Node
@@ -70,6 +58,6 @@ export const walls = createWallsStore();
 export const weight = createWeightStore();
 
 export const resetNodes = () => {
-	walls.reset();
-	weight.reset();
+    walls.reset();
+    weight.reset();
 };