From a56003ec65966779733672935ce22f13bfa6ac7b Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Thu, 8 Jun 2023 21:16:43 +0800
Subject: [PATCH] feat: color convert

---
 chains/mainnet/evmos.json   |  1 -
 chains/mainnet/osmosis.json |  1 -
 src/libs/utils.ts           | 65 +++++++++++++++++++++++++++++++++++++
 src/stores/useBlockchain.ts | 17 +++++++---
 4 files changed, 78 insertions(+), 6 deletions(-)

diff --git a/chains/mainnet/evmos.json b/chains/mainnet/evmos.json
index 40c814ba..737ecf52 100644
--- a/chains/mainnet/evmos.json
+++ b/chains/mainnet/evmos.json
@@ -8,7 +8,6 @@
     "min_tx_fee": "5000000000000000",
     "addr_prefix": "evmos",
     "logo": "/logos/evmos.png",
-    // "theme_color": "159 94% 51%",
     "keplr_features": ["ibc-transfer", "ibc-go", "eth-address-gen", "eth-key-sign"],
     "assets": [{
         "base": "aevmos",
diff --git a/chains/mainnet/osmosis.json b/chains/mainnet/osmosis.json
index 9adc8c60..7a86bf52 100644
--- a/chains/mainnet/osmosis.json
+++ b/chains/mainnet/osmosis.json
@@ -9,7 +9,6 @@
     "min_tx_fee": "800",
     "addr_prefix": "osmo",
     "logo": "/logos/osmosis.jpg",
-    // "theme_color": "99 40% 21%",
     "assets": [{
         "base": "uosmo",
         "symbol": "OSMO",
diff --git a/src/libs/utils.ts b/src/libs/utils.ts
index 427bc105..93dc185d 100644
--- a/src/libs/utils.ts
+++ b/src/libs/utils.ts
@@ -102,3 +102,68 @@ export function isHexAddress(v: any) {
   // return re.test(v)
   return v.length === 28;
 }
+
+export function hexToRgb(hex: string) {
+  // remove '#'
+  hex = hex.replace('#', '');
+  // red
+  const r = parseInt(hex.substring(0, 2), 16);
+  // green
+  const g = parseInt(hex.substring(2, 4), 16);
+  // blue
+  const b = parseInt(hex.substring(4, 6), 16);
+
+  return {
+    color: 'rgb(' + r + ', ' + g + ', ' + b + ')',
+    r,
+    g,
+    b,
+  };
+}
+
+export function rgbToHsl(color: string) {
+  color = color.replace('rgb(', '');
+  color = color.replace(')', '');
+  const colorList = color.split(',') || [0, 0, 0];
+  // console.log(colorList, 'colorList')
+  const r = parseInt(colorList?.[0]) / 255;
+  const g = parseInt(colorList?.[1]) / 255;
+  const b = parseInt(colorList?.[2]) / 255;
+  // console.log(r,g,b, '88')
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h,
+    s,
+    l = (max + min) / 2;
+
+  if (max == min) {
+    h = 0;
+    s = 0;
+  } else {
+    var d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0);
+        break;
+      case g:
+        h = (b - r) / d + 2;
+        break;
+      case b:
+        h = (r - g) / d + 4;
+        break;
+    }
+    h = h / 6;
+  }
+
+  h = Math.round(h * 360);
+  s = Math.round(s * 100);
+  l = Math.round(l * 100);
+  return {
+    color: 'hsl(' + h + ', ' + s + '%, ' + l + '%)',
+    value: h + ' ' + s + ' ' + l,
+    h,
+    s,
+    l,
+  };
+}
diff --git a/src/stores/useBlockchain.ts b/src/stores/useBlockchain.ts
index 0fc9bc50..7820587b 100644
--- a/src/stores/useBlockchain.ts
+++ b/src/stores/useBlockchain.ts
@@ -5,7 +5,12 @@ import {
   type Endpoint,
   EndpointType,
 } from './useDashboard';
-import type { NavGroup, NavLink, NavSectionTitle, VerticalNavItems } from '@/layouts/types';
+import type {
+  NavGroup,
+  NavLink,
+  NavSectionTitle,
+  VerticalNavItems,
+} from '@/layouts/types';
 import { useRouter } from 'vue-router';
 import { CosmosRestClient } from '@/libs/client';
 import {
@@ -18,6 +23,7 @@ import {
 } from '.';
 import { useBlockModule } from '@/modules/[chain]/block/block';
 import { DEFAULT } from '@/libs';
+import { hexToRgb, rgbToHsl } from '@/libs/utils';
 
 export const useBlockchain = defineStore('blockchain', {
   state: () => {
@@ -61,8 +67,12 @@ export const useBlockchain = defineStore('blockchain', {
       const routes = router?.getRoutes() || [];
       if (this.current && routes) {
         if (this.current?.themeColor) {
-          document.body.style.setProperty('--p', `${this.current?.themeColor}`);
-        }else {
+          const { color } = hexToRgb(this.current?.themeColor);
+          const { h, s, l } = rgbToHsl(color);
+          const themeColor = h + ' ' + s + '% ' + l +'%';
+          document.body.style.setProperty('--p', `${themeColor}`);
+          // document.body.style.setProperty('--p', `${this.current?.themeColor}`);
+        } else {
           document.body.style.setProperty('--p', '237.65 100% 70%');
         }
         currNavItem = [
@@ -71,7 +81,6 @@ export const useBlockchain = defineStore('blockchain', {
             icon: { image: this.current.logo, size: '22' },
             i18n: false,
             badgeContent: this.isConsumerChain ? 'Consumer' : undefined,
-            themeColor: this.current?.themeColor,
             badgeClass: 'bg-error',
             children: routes
               .filter((x) => x.meta.i18n) // defined menu name