Improve icon for dark mode

src/styles/_styles_ovw.scss

@@ -1,5 +1,9 @@
 // global main style
 
+.logo-svg {
+    background-color: #000000;
+}
+
 [data-theme="dark"] {
     $bg-dark: #3c3c3c;
     $bg-darker: darken($bg-dark, 5%);
@@ -12,7 +16,7 @@
         color: $fg-color;
     }
     .card {
-        border-color: $bg-dark;
+        border-color: lighten($bg-dark, 10%);
     }
     .card-body {
         background: $bg-dark;
@@ -65,6 +69,9 @@
         color: $fg-color;
     }
 
+    .logo-svg {
+        background-color: $fg-color;
+    }
     textarea {
         color: $fg-color;
         background: $bg-dark;
@@ -72,6 +79,8 @@
 }
 
 
+
+
 html.ft-theme-transition,
 html.ft-theme-transition *,
 html.ft-theme-transition *:before,

src/views/Home.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="home">
-    <img alt="Freqtrade logo" src="../assets/freqtrade-logo.png" />
+    <!-- <img alt="Freqtrade logo" src="../assets/freqtrade-logo.png" width="450px" class="my-5" /> -->
+    <div alt="Freqtrade logo" class="logo-svg my-5 mx-auto" />
     <div>
       <h1>Welcome to the Freqtrade UI</h1>
     </div>
@@ -26,4 +27,11 @@ export default class Home extends Vue {}
 .home {
   margin-top: 1.5em;
 }
+.logo-svg {
+  -webkit-mask: url(../assets/freqtrade-logo-mask.png) no-repeat center;
+  mask: url(../assets/freqtrade-logo-mask.png) no-repeat center;
+  mask-size: contain;
+  width: 250px;
+  height: 250px;
+}
 </style>