style.ts

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>

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");

src/components/ColorProvider.vue → 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>