);
-const Light = (props: { name: string; color: string }) => {
+const Light = (props: {
+ name: string;
+ color: {
+ hex: string;
+ rgb: {
+ r: number;
+ g: number;
+ b: number;
+ };
+ };
+}) => {
return (
{props.name}
-
+
{
style={{
background:
'conic-gradient(from 90deg at 50% 50%,' +
- 'rgba(82, 0, 255, 0.00) 110.62499642372131deg,' +
- 'rgba(143, 0, 255, 0.38) 206.25000715255737deg,' +
- 'rgba(77, 0, 203, 0.30) 333.7499928474426deg)',
+ `rgba(${combineColor(
+ props.color.rgb.r,
+ 48,
+ )}, 0, ${combineColor(
+ props.color.rgb.b,
+ 86,
+ )}, 0.00) 110.62499642372131deg,` +
+ `rgba(${props.color.rgb.r + 143}, 0, ${combineColor(
+ props.color.rgb.b,
+ 86,
+ )}, 0.38) 206.25000715255737deg,` +
+ `rgba(${combineColor(
+ props.color.rgb.r,
+ -18,
+ )} , 0, ${combineColor(
+ props.color.rgb.b,
+ 34,
+ )}, 0.30) 333.7499928474426deg)`,
}}
>
![]()
{
{
style={{
background:
'conic-gradient(from 180deg at 50% 50%,' +
- 'rgba(82, 0, 255, 0.00) 110.62499642372131deg,' +
- '#8F00FF 206.25000715255737deg,' +
- 'rgba(77, 0, 203, 0.79) 333.7499928474426deg)',
+ `rgba(${combineColor(
+ props.color.rgb.r,
+ 48,
+ )}, 0, ${combineColor(
+ props.color.rgb.b,
+ 86,
+ )}, 0.00) 110.62499642372131deg,` +
+ `rgba(${props.color.rgb.r + 143}, 0, ${combineColor(
+ props.color.rgb.b,
+ 86,
+ )}, 0.38) 206.25000715255737deg,` +
+ `rgba(${combineColor(
+ props.color.rgb.r,
+ -18,
+ )} , 0, ${combineColor(
+ props.color.rgb.b,
+ 34,
+ )}, 0.76) 333.7499928474426deg)`,
}}
>
![]()
{
);
};
+
+const combineColor = (color: number, color2: number) => {
+ const sum = color + color2;
+ if (sum > 255) {
+ return 255;
+ } else if (sum < 0) {
+ return 0;
+ } else {
+ return sum;
+ }
+};
+
+const hexToRgbString = (hex: string) => {
+ const bigint = parseInt(hex.replace('#', ''), 16);
+ const r = (bigint >> 16) & 255;
+ const g = (bigint >> 8) & 255;
+ const b = bigint & 255;
+
+ return { r, g, b };
+};
diff --git a/apps/client/src/lazy-tauri-api/get-current.ts b/apps/client/src/lazy-tauri-api/get-current.ts
index 03e487a..7018d5c 100644
--- a/apps/client/src/lazy-tauri-api/get-current.ts
+++ b/apps/client/src/lazy-tauri-api/get-current.ts
@@ -20,3 +20,10 @@ export const window = {
return await importGetCurrent();
},
};
+
+export const commands = {
+ async set_color(color: string) {
+ const { invoke } = await import('@tauri-apps/api/tauri');
+ return invoke