From dc7c709bfe9514c1958bb4ef6f4da10bdd3941f4 Mon Sep 17 00:00:00 2001
From: Misaki Kasumi <misakikasumi@outlook.com>
Date: Fri, 1 Dec 2023 12:00:08 +0800
Subject: [PATCH] style.ts

---
 src/components/BrightnessPanel.vue            |  5 +---
 src/main.js                                   |  1 +
 .../ColorProvider.vue => style.ts}            | 25 +++++++------------
 3 files changed, 11 insertions(+), 20 deletions(-)
 rename src/{components/ColorProvider.vue => style.ts} (58%)

diff --git a/src/components/BrightnessPanel.vue b/src/components/BrightnessPanel.vue
index 5430264..026416a 100644
--- a/src/components/BrightnessPanel.vue
+++ b/src/components/BrightnessPanel.vue
@@ -1,10 +1,7 @@
 <script setup lang="ts">
-import ColorProvider from "./ColorProvider.vue";
 import MonitorList from "./MonitorList.vue";
 </script>
 
 <template>
-    <ColorProvider>
-        <MonitorList />
-    </ColorProvider>
+    <MonitorList />
 </template>
diff --git a/src/main.js b/src/main.js
index 03cb695..2976689 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,6 +3,7 @@ import { watchThrottled } from "./watchers";
 import monitorManager from "./monitor";
 import BrightnessPanel from "./components/BrightnessPanel.vue";
 import panelState from "./wm";
+import "./style";
 import "./style.global.sass";
 
 createApp(BrightnessPanel).mount("#root");
diff --git a/src/components/ColorProvider.vue b/src/style.ts
similarity index 58%
rename from src/components/ColorProvider.vue
rename to src/style.ts
index 5bb6d54..14678ee 100644
--- a/src/components/ColorProvider.vue
+++ b/src/style.ts
@@ -1,8 +1,7 @@
-<script setup lang="ts">
 import { invoke } from "@tauri-apps/api";
-import { computed, reactive } from "vue";
-import { watchThrottled } from "../watchers";
-import panelState from "../wm";
+import { watchEffect, reactive } from "vue";
+import { watchThrottled } from "./watchers";
+import panelState from "./wm";
 
 interface Color {
     r: number;
@@ -21,19 +20,13 @@ watchThrottled(
     { throttle: 1000, immediate: true },
 );
 
-const style = computed(() => {
-    const style: string[] = [];
+const html: HTMLHtmlElement = document.querySelector(":root")!;
+
+watchEffect(() => {
     for (const [name, { r, g, b }] of Object.entries(colors)) {
-        style.push(
-            `--${name.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase()}:rgb(${r},${g},${b})`,
+        html.style.setProperty(
+            `--${name.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase()}`,
+            `rgb(${r},${g},${b})`,
         );
     }
-    return style.join(";");
 });
-</script>
-
-<template>
-    <div :style="style">
-        <slot />
-    </div>
-</template>