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