overide teal color with --primary-color if defined

src/assets/resources/semantic-ui-2.4.2/semantic.min.css

@@ -2925,7 +2925,7 @@ body .ui.inverted::-webkit-scrollbar-thumb:hover {
 }
 .ui.teal.button, .ui.teal.buttons .button {
-    background-color: #00b5ad;
+    background-color: var(--primary-color, #00b5ad);
     color: #fff;
     text-shadow: none;
     background-image: none
@@ -2961,9 +2961,9 @@ body .ui.inverted::-webkit-scrollbar-thumb:hover {
 }
 .ui.basic.teal.button, .ui.basic.teal.buttons .button {
-    -webkit-box-shadow: 0 0 0 1px #00b5ad inset!important;
-    box-shadow: 0 0 0 1px #00b5ad inset!important;
-    color: #00b5ad!important
+    -webkit-box-shadow: 0 0 0 1px var(--primary-color, #00b5ad) inset!important;
+    box-shadow: 0 0 0 1px var(--primary-color, #00b5ad) inset!important;
+    color: var(--primary-color, #00b5ad)!important
 }
 .ui.basic.teal.button:hover, .ui.basic.teal.buttons .button:hover {
@@ -5517,7 +5517,7 @@ a.ui.inverted.green.header:hover {
 }
 .ui.teal.header {
-    color: #00b5ad!important
+    color: var(--primary-color, #00b5ad)!important
 }
 a.ui.teal.header:hover {
@@ -5525,7 +5525,7 @@ a.ui.teal.header:hover {
 }
 .ui.teal.dividing.header {
-    border-bottom: 2px solid #00b5ad
+    border-bottom: 2px solid var(--primary-color, #00b5ad)
 }
 .ui.inverted.teal.header {
@@ -6028,7 +6028,7 @@ i.inverted.bordered.green.icon, i.inverted.circular.green.icon {
 }
 i.teal.icon {
-    color: #00b5ad!important
+    color: var(--primary-color, #00b5ad)!important
 }
 i.inverted.teal.icon {
@@ -6036,7 +6036,7 @@ i.inverted.teal.icon {
 }
 i.inverted.bordered.teal.icon, i.inverted.circular.teal.icon {
-    background-color: #00b5ad!important;
+    background-color: var(--primary-color, #00b5ad)!important;
     color: #fff!important
 }
@@ -12659,8 +12659,8 @@ a.ui.active.label:hover, a.ui.labels .active.label:hover {
 }
 .ui.teal.label, .ui.teal.labels .label {
-    background-color: #00b5ad!important;
-    border-color: #00b5ad!important;
+    background-color: var(--primary-color, #00b5ad)!important;
+    border-color: var(--primary-color, #00b5ad)!important;
     color: #fff!important
 }
@@ -12680,8 +12680,8 @@ a.ui.active.label:hover, a.ui.labels .active.label:hover {
 .ui.basic.teal.label {
     background: none #fff!important;
-    color: #00b5ad!important;
-    border-color: #00b5ad!important
+    color: var(--primary-color, #00b5ad)!important;
+    border-color: var(--primary-color, #00b5ad)!important
 }
 .ui.basic.teal.labels a.label:hover, a.ui.basic.teal.label:hover {
@@ -15299,11 +15299,11 @@ ol.ui.list li[value]:before {
 }
 .ui.teal.segment:not(.inverted) {
-    border-top: 2px solid #00b5ad!important
+    border-top: 2px solid var(--primary-color, #00b5ad)!important
 }
 .ui.inverted.teal.segment {
-    background-color: #00b5ad!important;
+    background-color: var(--primary-color, #00b5ad)!important;
     color: #fff!important
 }
@@ -17828,7 +17828,7 @@ ol.ui.list li[value]:before {
 }
 .ui.grid>.row>.teal.column, .ui.grid>.teal.column, .ui.grid>.teal.row {
-    background-color: #00b5ad!important;
+    background-color: var(--primary-color, #00b5ad)!important;
     color: #fff
 }
@@ -19356,8 +19356,8 @@ ol.ui.list li[value]:before {
 }
 .ui.menu .teal.active.item, .ui.teal.menu .active.item {
-    border-color: #00b5ad!important;
-    color: #00b5ad!important
+    border-color: var(--primary-color, #00b5ad)!important;
+    color: var(--primary-color, #00b5ad)!important
 }
 .ui.blue.menu .active.item, .ui.menu .blue.active.item {
@@ -19546,7 +19546,7 @@ ol.ui.list li[value]:before {
 }
 .ui.inverted.menu .teal.active.item, .ui.inverted.teal.menu {
-    background-color: #00b5ad
+    background-color: var(--primary-color, #00b5ad)
 }
 .ui.inverted.teal.menu .item:before {
@@ -21017,11 +21017,11 @@ ol.ui.list li[value]:before {
 }
 .ui.teal.table {
-    border-top: .2em solid #00b5ad
+    border-top: .2em solid var(--primary-color, #00b5ad)
 }
 .ui.inverted.teal.table {
-    background-color: #00b5ad!important;
+    background-color: var(--primary-color, #00b5ad)!important;
     color: #fff!important
 }
@@ -22040,8 +22040,8 @@ ol.ui.list li[value]:before {
 }
 .ui.cards>.teal.card, .ui.teal.card, .ui.teal.cards>.card {
-    -webkit-box-shadow: 0 0 0 1px #d4d4d5, 0 2px 0 0 #00b5ad, 0 1px 3px 0 #d4d4d5;
-    box-shadow: 0 0 0 1px #d4d4d5, 0 2px 0 0 #00b5ad, 0 1px 3px 0 #d4d4d5
+    -webkit-box-shadow: 0 0 0 1px #d4d4d5, 0 2px 0 0 var(--primary-color, #00b5ad), 0 1px 3px 0 #d4d4d5;
+    box-shadow: 0 0 0 1px #d4d4d5, 0 2px 0 0 var(--primary-color, #00b5ad), 0 1px 3px 0 #d4d4d5
 }
 .ui.cards>.teal.card:hover, .ui.teal.card:hover, .ui.teal.cards>.card:hover {
@@ -23551,7 +23551,7 @@ ol.ui.list li[value]:before {
 }
 .ui.statistics .teal.statistic>.value, .ui.teal.statistic>.value, .ui.teal.statistics .statistic>.value {
-    color: #00b5ad
+    color: var(--primary-color, #00b5ad)
 }
 .ui.blue.statistic>.value, .ui.blue.statistics .statistic>.value, .ui.statistics .blue.statistic>.value {
@@ -27565,7 +27565,7 @@ a.ui.nag {
 }
 .ui.teal.progress .bar {
-    background-color: #00b5ad
+    background-color: var(--primary-color, #00b5ad)
 }
 .ui.teal.inverted.progress .bar {

src/assets/styles/sidebar-layers.css

@@ -61,7 +61,7 @@
 
 .sidebar-container.expanded .layers-icon svg path,
 .sidebar-container.closing .layers-icon svg path {
-  fill: #00b5ad;
+  fill: var(--primary-color, #00b5ad);
 }
 
 @keyframes open-sidebar {
@@ -131,7 +131,7 @@
 }
 
 .layers-icon:hover svg path {
-  fill: #00b5ad;
+  fill: var(--primary-color, #00b5ad);
 }
 
 .basemaps-title {