Remove hard-coded colors in vue

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);
 		},

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;

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;

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 @@
 			}
 		}
 	}
-}
+}