improve svg and background

src/components/charts/apexChartConfig.ts

@@ -1,5 +1,8 @@
+import { useBlockchain } from '@/stores';
 import numeral from 'numeral';
 
+const chainStore = useBlockchain()
+
 const themeColors = (theme: string) => {
   if (theme === 'light') {
     return {
@@ -9,7 +12,7 @@ const themeColors = (theme: string) => {
         surface: '#FFFFFF',
         'surface-variant': '#424242',
         'on-surface-variant': '#EEEEEE',
-        primary: '#666CFF',
+        primary: chainStore.current?.themeColor || '#666CFF',
         'primary-darken-1': '#3700B3',
         secondary: '#6D788D',
         'secondary-darken-1': '#018786',
@@ -89,7 +92,7 @@ const themeColors = (theme: string) => {
       surface: '#30334E',
       'surface-variant': '#BDBDBD',
       'on-surface-variant': '#424242',
-      primary: '#666CFF',
+      primary: chainStore.current?.themeColor || '#666CFF',
       'primary-darken-1': '#3700B3',
       secondary: '#6D788D',
       'secondary-darken-1': '#03DAC5',

src/libs/utils.ts

@@ -132,8 +132,8 @@ export function rgbToHsl(color: string) {
   // console.log(r,g,b, '88')
   const max = Math.max(r, g, b);
   const min = Math.min(r, g, b);
-  let h,
-    s,
+  let h = 0,
+    s = 0,
     l = (max + min) / 2;
 
   if (max == min) {

src/pages/index.vue

@@ -7,6 +7,7 @@ import {
 } from '@/stores/useDashboard';
 import ChainSummary from '@/components/ChainSummary.vue';
 import { computed, ref } from 'vue';
+import { useBlockchain } from '@/stores';
 
 const dashboard = useDashboard();
 
@@ -23,12 +24,31 @@ const chains = computed(() => {
     return Object.values(dashboard.chains);
   }
 });
+const chainStore = useBlockchain()
 </script>
 <template>
   <div class="">
     <div class="flex md:!flex-row flex-col items-center justify-center mb-6 mt-14 gap-2">
       <div class="w-16 rounded-full">
-        <img src="/logo.svg" />
+        <svg version="1.0" xmlns="http://www.w3.org/2000/svg" 
+          viewBox="0 0 150.000000 132.000000"
+          preserveAspectRatio="xMidYMid meet">
+          <g transform="translate(0.000000,132.000000) scale(0.100000,-0.100000)"
+          :fill="chainStore.current?.themeColor||'#666CFF'" stroke="none">
+            <path d="M500 1310 l-125 -5 -182 -315 c-100 -173 -182 -321 -182 -329 -1 -7
+            81 -159 181 -337 l183 -324 372 0 371 0 186 325 c102 179 186 330 186 337 0 7
+            -82 157 -182 335 l-183 323 -250 -2 c-137 -1 -306 -5 -375 -8z m588 -454 c61
+            -106 112 -197 112 -201 0 -4 -50 -95 -111 -201 l-112 -194 -231 0 -231 0 -105
+            181 c-58 100 -109 190 -114 200 -6 14 17 63 104 213 l112 196 232 0 231 0 113
+            -194z"/>
+            <path d="M591 1001 l-54 -6 -87 -150 -88 -150 176 -3 c97 -1 181 -1 187 2 9 3
+            165 267 183 308 4 9 -233 7 -317 -1z"/>
+            <path d="M872 824 l-90 -159 36 -66 c113 -201 147 -258 153 -251 8 8 179 302
+            179 307 0 2 -37 68 -83 147 -46 78 -88 151 -94 162 -9 16 -24 -5 -101 -140z"/>
+            <path d="M360 625 c0 -7 148 -263 172 -297 l19 -28 186 0 c101 0 183 3 181 8
+            -1 4 -43 78 -93 165 l-90 157 -187 0 c-104 0 -188 -2 -188 -5z"/>
+          </g>
+        </svg>
       </div>
       <h1 class="text-primary text-3xl md:!text-6xl font-bold">
         Ping dashboard
@@ -67,3 +87,9 @@ const chains = computed(() => {
     </div>
   </div>
 </template>
+
+<style scoped>
+ .logo path{
+  fill: #171d30;
+}
+</style>