From c3835f45c57d9ebdb2d583ffc5b6be2def1bf9da Mon Sep 17 00:00:00 2001
From: Franzz <francois@lutran.fr>
Date: Wed, 13 May 2026 13:23:10 +0200
Subject: [PATCH] Remove hard-coded colors in vue

---
 src/components/project.vue          | 14 +++++++++++---
 src/styles/_color.scss              |  4 +++-
 src/styles/_page.project.panel.scss |  2 +-
 src/styles/_page.project.scss       | 16 +++++++++++-----
 4 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/components/project.vue b/src/components/project.vue
index 6010946..2ff8776 100644
--- a/src/components/project.vue
+++ b/src/components/project.vue
@@ -41,7 +41,7 @@ export default {
 			map: null,
 			lightbox: null,
 			hikes: {
-				colors:{'main':'#00ff78', 'off-track':'#0000ff', 'hitchhiking':'#FF7814'},
+				colors: {},
 				width: 4
 			},
 			popup: {content: null, element: null}
@@ -117,6 +117,11 @@ export default {
 			this.posts = [];
 			//this.baseMap = null;
 			this.baseMaps = {};
+			this.hikes.colors = {
+				'main': this.getStyleProperty('--track-main'),
+				'off-track': this.getStyleProperty('--track-off-track'),
+				'hitchhiking': this.getStyleProperty('--track-hitchhiking')
+			};
 		},
 		initLightbox() {
 			if(!this.lightbox) {
@@ -185,8 +190,8 @@ export default {
 					version: 8,
 					projection: {type: 'globe'},
 					sky: {
-						'sky-color': '#000000',
-						'horizon-color': '#ffffff',
+						'sky-color': this.getStyleProperty('--space'),
+						'horizon-color': this.getStyleProperty('--horizon'),
 						'sky-horizon-blend': 0.35,
 						'atmosphere-blend': 0.8
 					},
@@ -500,6 +505,9 @@ export default {
 			if(iDuration > 0) this.map.easeTo({padding: asPadding, duration: iDuration});
 			else this.map.jumpTo({padding: asPadding});
 		},
+		getStyleProperty(sProperty) {
+			return getComputedStyle(this.$el).getPropertyValue(sProperty).trim();
+		},
 		isMarkerVisible(oLngLat){
 			return !!this.map && this.map.getBounds().contains(oLngLat);
 		},
diff --git a/src/styles/_color.scss b/src/styles/_color.scss
index 69b069d..94f921e 100644
--- a/src/styles/_color.scss
+++ b/src/styles/_color.scss
@@ -41,7 +41,9 @@ $title: 			$default;
 $subtitle: 			#999;
 $download-hover:	#0078A8;
 
-//Legend colors
+//Map colors
+$space:				#000000;
+$horizon:			#FFFFFF;
 $legend:			$default;
 $main-track:		$message-flashy;
 $off-track:			#0000ff;
diff --git a/src/styles/_page.project.panel.scss b/src/styles/_page.project.panel.scss
index 05d485c..ebb243d 100644
--- a/src/styles/_page.project.panel.scss
+++ b/src/styles/_page.project.panel.scss
@@ -205,7 +205,7 @@ $panel-actual-width: min($panel-width, #{$panel-width-max});
 	}
 
 	#background {
-		background: color.$loader-bg;
+		background: color.$space;
 		position: absolute;
 		left: 0;
 		top: 0;
diff --git a/src/styles/_page.project.scss b/src/styles/_page.project.scss
index 1c6ca83..cd65c90 100644
--- a/src/styles/_page.project.scss
+++ b/src/styles/_page.project.scss
@@ -6,10 +6,16 @@
 @use '@styles/page.project.feed' as feed;
 @use '@styles/page.project.settings' as settings;
 
-#projects {
-	overflow: hidden;
-	position: absolute;
-	top: 0;
+#projects {
+	--space: #{color.$space};
+	--horizon: #{color.$horizon};
+	--track-main: #{color.$main-track};
+	--track-off-track: #{color.$off-track};
+	--track-hitchhiking: #{color.$hitchhiking};
+
+	overflow: hidden;
+	position: absolute;
+	top: 0;
 	left: 0;
 	width: 100%;
 	height: 100%;
@@ -77,4 +83,4 @@
 			}
 		}
 	}
-}
\ No newline at end of file
+}