fix: Dark mode map zoom/center buttons should follow map theme

Squashed commit of the following:

commit 67858fe
Author: Friedrich Völkers <friedrich.voelkers@me.com>
Date:   Thu Jan 13 21:36:55 2022 +0100

    Fixed darkmode for drawing tool

commit c427437
Author: Friedrich Völkers <friedrich.voelkers@me.com>
Date:   Tue Jan 4 17:32:40 2022 +0100

    Fixed background color and size

commit 4cbe701
Author: Billy Charlton <charlton@vsp.tu-berlin.de>
Date:   Tue Jan 4 13:38:32 2022 +0100

    make north-arrow button 1px higher

commit 6763fb9
Author: Billy Charlton <charlton@vsp.tu-berlin.de>
Date:   Tue Jan 4 13:21:52 2022 +0100

    fix darkmode border color & north button size

commit b7c75d8
Author: Friedrich Völkers <friedrich.voelkers@me.com>
Date:   Tue Jan 4 07:33:13 2022 +0100

    Fixed border color

commit f2e51e1
Author: Friedrich Völkers <friedrich.voelkers@me.com>
Date:   Mon Jan 3 13:01:35 2022 +0100

    Darkmode finished

commit d3db3c8
Author: Friedrich Völkers <friedrich.voelkers@me.com>
Date:   Sun Jan 2 15:02:10 2022 +0100

    Added Darkmode for buttons

commit 21ab2c4
Author: Friedrich Völkers <friedrich.voelkers@me.com>
Date:   Sun Jan 2 14:59:29 2022 +0100

    Added Darkmode for buttons

src/components/DrawingTool/DrawingTool.vue

@@ -3,8 +3,16 @@
   .map(:id="mapID" v-show="showShapeDrawer")
 
   .map-actions
-    button.button.draw-button.is-tiny(title="Draw" @click="toggleShapeDrawer"
-      :class="{'is-drawing': showShapeDrawer}"
+    button.button.draw-button.is-tiny(v-if="isDark && showShapeDrawer" title="Draw" @click="toggleShapeDrawer"
+      :class="{'is-drawing': showShapeDrawer}" :style="{border: `1px solid rgb(119,119,119)`}"
+    )
+      img(src="./images/draw-icon-dm.png" width=16)
+    button.button.draw-button.is-tiny(v-else-if="isDark && !showShapeDrawer" title="Draw" @click="toggleShapeDrawer"
+      :class="{'is-drawing': showShapeDrawer}" :style="{background: `rgb(43,60,78)`, border: `1px solid rgb(119,119,119)`}"
+    )
+      img(src="./images/draw-icon-dm.png" width=16)
+    button.button.draw-button.is-tiny(v-else title="Draw" @click="toggleShapeDrawer"
+      :class="{'is-drawing': showShapeDrawer}" :style="{border: '1px solid rgb(224,224,224)'}"
     )
       img(src="./images/draw-icon.png" width=16)
 
@@ -22,6 +30,7 @@
 </template>
 
 <script lang="ts">
+// :style="{background: `rgb(43,60,78)`, border: `1px solid rgb(119,119,119)`
 const i18n = {
   messages: {
     en: {
@@ -314,6 +323,11 @@ export default class VueComponent extends Vue {
   border-color: rgb(255, 0, 200);
 }
 
+.draw-button.is-drawing-dark {
+  background-color: rgb(37, 185, 104);
+  border-color: rgb(37, 185, 104);
+}
+
 .map-actions {
   pointer-events: all;
   cursor: pointer;

src/components/ZoomButtons.vue

@@ -5,20 +5,35 @@
 
   .zoom-buttons
     .button-single.button-top
-      img.img-button(
+      img.img-button(v-if="globalState.isDarkMode"
+          :title="$t('in')"
+          @click="zoomIn()"
+          src="@/assets/images/sw_plus_dm.jpg")
+      img.img-button(v-else
           :title="$t('in')"
           @click="zoomIn()"
           src="@/assets/images/sw_plus.jpg")
+
     .button-single
-      img.img-button(@click="zoomOut()"
+      img.img-button(v-if="globalState.isDarkMode" @click="zoomOut()"
+          :title="$t('out')"
+          src="@/assets/images/sw_minus_dm.jpg")
+      img.img-button(v-else @click="zoomOut()"
           :title="$t('out')"
           src="@/assets/images/sw_minus.jpg")
-    .button-single.button-bottom
+
+    .button-single.button-bottom(v-if="globalState.isDarkMode" :style="{ background: `rgb(43,60,78)`, border: '1px solid rgb(119,119,119)'}")
+      img.img-button(v-if="globalState.isDarkMode" @click="setNorth()"
+          :title="$t('center')"
+          src="@/assets/images/sw_north_arrow_dm.png"
+          :style="{transform: `rotate(${arrowRotation}deg)`, background: `rgb(43,60,78)`, height: '21px'}"
+      )
+    .button-single.button-bottom(v-if="!globalState.isDarkMode" :style="{border: '1px solid rgb(224,224,224)'}")
       img.img-button(@click="setNorth()"
           :title="$t('center')"
           src="@/assets/images/sw_north_arrow.png"
-          :style="{transform: `rotate(${arrowRotation}deg)`}"
-    )
+          :style="{transform: `rotate(${arrowRotation}deg)`, height: '21px'}"
+      )
 
 
 </template>
@@ -127,7 +142,7 @@ export default class VueComponent extends Vue {
   height: 24px;
   text-align: center;
   border: var(--borderZoomButtons);
-  background-color: white;
+  background-color: var(--bgBold);
   overflow: hidden;
 }
 
@@ -139,13 +154,15 @@ export default class VueComponent extends Vue {
   border-bottom-width: 0px;
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
+  margin-bottom: -1px;
 }
 
 .button-bottom {
   border-top-width: 0px;
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
-  height: 21px;
+  height: 23px;
+  margin-top: -1px;
 }
 
 .map-scale {

src/styles.scss

@@ -91,7 +91,7 @@ $filterShadow: drop-shadow(0px 2px 4px #22222233);
   --borderDashboard: 3px solid #616169;
   --splitPanel: #2e343f;
   --borderColor: #00000088;
-  --borderZoomButtons: 1px solid var(--borderColor);
+  --borderZoomButtons: 1px solid #777;
   --logoOpacity: opacity(30%);
   --scaleBorder: 1px solid #607894; // #8fabca;
   --scaleBg: #33333360;