feat: color convert

This commit is contained in:
Alisa | Side.one 2023-06-08 21:16:43 +08:00
parent bbdb0bc845
commit a56003ec65
4 changed files with 78 additions and 6 deletions

View File

@ -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",

View File

@ -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",

View File

@ -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,
};
}

View File

@ -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,7 +67,11 @@ 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}`);
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%');
}
@ -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