fix: set accent color in prod

catppuccin · Feb 5, 2023 · 6c8082a · 6c8082a
1 parent 819842d
commit 6c8082a
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 87 deletions.
diff --git a/index.js b/index.js
@@ -1,20 +1,20 @@
 let timer = null;
 const accentMap = {
-    "Full palette" : "ctp-full-palette", // undefined css var name
-    "Rosewater"    : "ctp-accent-rosewater",
-    "Flamingo"     : "ctp-accent-flamingo",
-    "Pink"         : "ctp-accent-pink",
-    "Mauve"        : "ctp-accent-mauve",
-    "Red"          : "ctp-accent-red",
-    "Maroon"       : "ctp-accent-maroon",
-    "Peach"        : "ctp-accent-peach",
-    "Yellow"       : "ctp-accent-yellow",
-    "Green"        : "ctp-accent-green",
-    "Teal"         : "ctp-accent-teal",
-    "Sky"          : "ctp-accent-sky",
-    "Sapphire"     : "ctp-accent-sapphire",
-    "Blue"         : "ctp-accent-blue",
-    "Lavendar"     : "ctp-accent-lavendar"
+    "Full palette" : "unset", // undefined css var name
+    "Rosewater"    : "var(--ctp-rosewater)",
+    "Flamingo"     : "var(--ctp-flamingo)",
+    "Pink"         : "var(--ctp-pink)",
+    "Mauve"        : "var(--ctp-mauve)",
+    "Red"          : "var(--ctp-red)",
+    "Maroon"       : "var(--ctp-maroon)",
+    "Peach"        : "var(--ctp-peach)",
+    "Yellow"       : "var(--ctp-yellow)",
+    "Green"        : "var(--ctp-green)",
+    "Teal"         : "var(--ctp-teal)",
+    "Sky"          : "var(--ctp-sky)",
+    "Sapphire"     : "var(--ctp-sapphire)",
+    "Blue"         : "var(--ctp-blue)",
+    "Lavender"     : "var(--ctp-lavender)"
 };
 
 const accentClasses = Object.values(accentMap);
@@ -39,17 +39,14 @@ const settings = [
 ];
 
 function setAccent(accentName) {
-    let rootEl = parent.document.querySelector(':root'); 
-
-    if (rootEl.classList.contains(accentMap[accentName])) return false;
-
-    for (let accentClass of accentClasses) {
-        if (rootEl.classList.contains(accentClass)) {
-            rootEl.classList.remove(accentClass);
-        }
-    }
-    rootEl.classList.add(accentMap[accentName]);
-    return true;
+    logseq.provideStyle({
+        key: 'ctp-accent',
+        style: `
+          :root {
+            --ctp-accent: ${accentMap[accentName]};
+          }
+        `,
+    });
 }
 
 function reloadCss() {

diff --git a/scss/_theme.scss b/scss/_theme.scss
@@ -11,65 +11,4 @@
   --color-base-80: rgb(var(--ctp-overlay2));
   --color-base-90: rgb(var(--ctp-subtext0));
   --color-base-100: rgb(var(--ctp-text));
-}
-
-// Accents
-.ctp-full-palette {
-  --ctp-accent: unset;
-}
-
-.ctp-accent-rosewater {
-  --ctp-accent: var(--ctp-rosewater);
-}
-
-.ctp-accent-flamingo {
-  --ctp-accent: var(--ctp-flamingo);
-}
-
-.ctp-accent-pink {
-  --ctp-accent: var(--ctp-pink);
-}
-
-.ctp-accent-mauve {
-  --ctp-accent: var(--ctp-mauve);
-}
-
-.ctp-accent-red {
-  --ctp-accent: var(--ctp-red);
-}
-
-.ctp-accent-maroon {
-  --ctp-accent: var(--ctp-maroon);
-}
-
-.ctp-accent-peach {
-  --ctp-accent: var(--ctp-peach);
-}
-
-.ctp-accent-yellow {
-  --ctp-accent: var(--ctp-yellow);
-}
-
-.ctp-accent-green {
-  --ctp-accent: var(--ctp-green);
-}
-
-.ctp-accent-teal {
-  --ctp-accent: var(--ctp-teal);
-}
-
-.ctp-accent-sky {
-  --ctp-accent: var(--ctp-sky);
-}
-
-.ctp-accent-sapphire {
-  --ctp-accent: var(--ctp-sapphire);
-}
-
-.ctp-accent-blue {
-  --ctp-accent: var(--ctp-blue);
-}
-
-.ctp-accent-lavender {
-  --ctp-accent: var(--ctp-lavender);
 }