diff --git a/index.js b/index.js
index 58c8d4a..d0c33ed 100644
--- a/index.js
+++ b/index.js
@@ -35,7 +35,7 @@ function setAccent(accentName) {
     logseq.provideStyle({
         key: 'ctp-accent',
         style: `
-          :root:not([data-color]), :root[data-color='none'] {
+          :root:not([data-color]), :root[data-color='none'], :root[data-color='logseq'] {
             --ctp-accent: ${accentMap[accentName]};
           }
         `,
diff --git a/scss/_ctp-vars.scss b/scss/_ctp-vars.scss
index c27430f..0f40b43 100644
--- a/scss/_ctp-vars.scss
+++ b/scss/_ctp-vars.scss
@@ -1,4 +1,4 @@
-:root:not([data-color]), :root[data-color='none'] {
+:root:not([data-color]), :root[data-color='none'], :root[data-color='logseq'] {
   // following are mapped to variables used in logseq
   --ctp-primary-background-color: rgb(var(--ctp-base));
   --ctp-secondary-background-color: rgb(var(--ctp-mantle));
diff --git a/scss/_custom.scss b/scss/_custom.scss
index 0ab4043..704c7ad 100644
--- a/scss/_custom.scss
+++ b/scss/_custom.scss
@@ -1,4 +1,6 @@
 html:not(html[data-color]),
+html[data-theme=light][data-color='logseq'],
+html[data-theme=dark][data-color='logseq'],
 html[data-color='none'] {
     // place for selection to customise elements not supported by default variables
 
@@ -176,7 +178,7 @@ html[data-color='none'] {
     }
 
     html[data-theme=dark] .cp__header a,
-    html[data-theme=dark] .cp__header button,
+    html[data-theme=dark] .cp__header button.button,
     html[data-theme=dark] .cp__right-sidebar-topbar button {
         opacity: 1;
     }
@@ -510,6 +512,9 @@ html[data-color='none'] {
         button.ui__button {
             background: transparent;
         }
+        span.ui__icon {
+            color: var(--ctp-primary-text-color);
+        }
     }
 
     button.ui__button {
@@ -567,4 +572,20 @@ html[data-color='none'] {
         }
 
     }
+
+    .tl-container {
+        --ls-primary-background-color: var(--ctp-primary-background-color);
+        --ls-secondary-background-color: var(--ctp-secondary-background-color);
+        --ls-tertiary-background-color: var(--ctp-tertiary-background-color);
+        --ls-quaternary-background-color: var(--ctp-quaternary-background-color);
+    }
+
+    .tl-button:hover {
+        background-color: var(--ctp-tertiary-background-color);
+    }
+
+    .cp__themes-installed .it.is-active, .cp__themes-installed .it:hover {
+        background-color: var(--ctp-menu-hover-color);
+        opacity: 1;
+    }
 }
\ No newline at end of file
diff --git a/scss/_highlightjs.scss b/scss/_highlightjs.scss
index fc8cfe2..d67e7f3 100644
--- a/scss/_highlightjs.scss
+++ b/scss/_highlightjs.scss
@@ -1,7 +1,6 @@
 @use "@catppuccin/highlightjs/sass/catppuccin.variables";
 
-html:not(html[data-color]),
-html[data-color='none'] {
+html:not(html[data-color]), html[data-color='logseq'], html[data-color='none'] {
     code.hljs {
         background-color: var(--ctp-tertiary-background-color);
     }
diff --git a/scss/_ls-vars.scss b/scss/_ls-vars.scss
index 72a4930..fbc986f 100644
--- a/scss/_ls-vars.scss
+++ b/scss/_ls-vars.scss
@@ -1,40 +1,11 @@
 // Source: https://github.com/logseq/logseq/blob/master/resources/css/common.css
-:root:not([data-color]), :root[data-color='none'] {
-  --ls-error-color: var(--ctp-error-color);
-  --ls-warning-color: var(--ctp-warning-color);
-  --ls-success-color: var(--ctp-success-color);
-  --ls-text-on-accent: rgb(var(--ctp-text));
-
-  .logseq-tldraw {
-    --tl-selectFill: rgba(var(--ctp-tl-selectFill), 0.05);
-    --tl-selectStroke: rgb(var(--ctp-tl-selectStroke));
-  }
-
-  .tl-text-label-inner-wrapper {
-    // this is for overriding the text colors inside shapes (e.g. the label color of a rectangle)
-    --ls-wb-text-color-gray: var(--ctp-wb-shape-label-color-gray);
-    --ls-wb-text-color-red: var(--ctp-wb-shape-label-color-red);
-    --ls-wb-text-color-yellow: var(--ctp-wb-shape-label-color-yellow);
-    --ls-wb-text-color-green: var(--ctp-wb-shape-label-color-green);
-    --ls-wb-text-color-blue: var(--ctp-wb-shape-label-color-blue);
-    --ls-wb-text-color-purple: var(--ctp-wb-shape-label-color-purple);
-    --ls-wb-text-color-pink: var(--ctp-wb-shape-label-color-pink);
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-
-  html:not(html[data-color]),
-  html[data-color='none'] {
-    background-color: rgb(var(--ctp-primary-background-color));
-  }
-
-  html[data-theme='light'] {
-    background-color: transparent;
-  }
-}
-
+.light-theme,
+.dark-theme,
 html:not(html[data-color]),
+html[data-theme='dark'][data-color='logseq'],
+html[data-theme='light'][data-color='logseq'],
+html[data-theme='dark'],
+html[data-theme='light'],
 html[data-color='none'] {
   --ls-primary-background-color: var(--ctp-primary-background-color);
   --ls-secondary-background-color: var(--ctp-secondary-background-color);
@@ -128,7 +99,7 @@ html[data-color='none'] {
   --ls-focus-ring-color: var(--ctp-focus-ring-color);
   --ls-header-button-background: var(--ctp-header-button-background);
 
-  --ls-left-sidebar-active-background: var(--ls-active-primary-color);
+  --ls-left-sidebar-active-background: var(--ctp-color-level-4);
 
   /* Whiteboard */
 
@@ -161,4 +132,38 @@ html[data-color='none'] {
   --ls-color-file-sync-error: rgb(var(--ctp-red));
   --ls-color-file-sync-pending: rgb(var(--ctp-yellow));
   --ls-color-file-sync-idle: rgb(var(--ctp-green));
-;}
\ No newline at end of file
+}
+
+:root:not([data-color]), :root[data-color='none'], :root[data-color='logseq'] {
+  --ls-error-color: var(--ctp-error-color);
+  --ls-warning-color: var(--ctp-warning-color);
+  --ls-success-color: var(--ctp-success-color);
+  --ls-text-on-accent: rgb(var(--ctp-text));
+
+  .logseq-tldraw {
+    --tl-selectFill: rgba(var(--ctp-tl-selectFill), 0.05);
+    --tl-selectStroke: rgb(var(--ctp-tl-selectStroke));
+  }
+
+  .tl-text-label-inner-wrapper {
+    // this is for overriding the text colors inside shapes (e.g. the label color of a rectangle)
+    --ls-wb-text-color-gray: var(--ctp-wb-shape-label-color-gray);
+    --ls-wb-text-color-red: var(--ctp-wb-shape-label-color-red);
+    --ls-wb-text-color-yellow: var(--ctp-wb-shape-label-color-yellow);
+    --ls-wb-text-color-green: var(--ctp-wb-shape-label-color-green);
+    --ls-wb-text-color-blue: var(--ctp-wb-shape-label-color-blue);
+    --ls-wb-text-color-purple: var(--ctp-wb-shape-label-color-purple);
+    --ls-wb-text-color-pink: var(--ctp-wb-shape-label-color-pink);
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+
+html:not(html[data-color]), html[data-color='logseq'], html[data-color='none'] {
+    background-color: rgb(var(--ctp-primary-background-color));
+  }
+
+  html[data-theme='light'] {
+    background-color: transparent;
+  }
+}
diff --git a/scss/_lx-vars.scss b/scss/_lx-vars.scss
index fb36247..fedb625 100644
--- a/scss/_lx-vars.scss
+++ b/scss/_lx-vars.scss
@@ -1,3 +1,58 @@
-:root:not([data-color]), :root[data-color='none'] {
+:root:not([data-color]), :root[data-color='none'], :root[data-theme=dark][data-color='logseq'] {
+    /*
+    --background: 192 100% 11%;
+    --foreground: 0 0% 95%;
+    --accent: 192 80% 10%;
+    --accent-foreground: 255 92% 100%;
+    --primary: 200 97% 37%;
+    --primary-foreground: 255 92% 100%;
+    --ring: 200 97% 37%;
+    --secondary: 203 50% 20%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 192 100% 13%;
+    --card: 192 100% 10%;
+    --card-foreground: 0 0% 95%;
+    --popover: 192 100% 11%;
+    --input: 203 35% 25%;
+    */
+    --border: var(--ctp-surface0-hsl);
+
     --lx-popover-bg: var(--ctp-secondary-background-color);
+}
+
+html[data-color=logseq][data-theme=light] {
+    /*
+    --primary: 200 97% 37%;
+    --primary-foreground: 255 92% 100%;
+    --accent: 200 97% 37%;
+    --accent-foreground: 255 92% 100%;
+    --ring: 200 97% 37%;
+    */
+    --lx-gray-01: initial;
+    --lx-gray-02: initial;
+    --lx-gray-03: initial;
+    --lx-gray-04: initial;
+    --lx-gray-05: initial;
+    --lx-gray-06: initial;
+    --lx-gray-07: initial;
+    --lx-gray-08: initial;
+    --lx-gray-09: initial;
+    --lx-gray-10: initial;
+    --lx-gray-11: initial;
+    --lx-gray-12: initial;
+}
+
+html[data-color=logseq] {
+    --lx-accent-01: initial;
+    --lx-accent-02: initial;
+    --lx-accent-03: initial;
+    --lx-accent-04: initial;
+    --lx-accent-05: initial;
+    --lx-accent-06: initial;
+    --lx-accent-07: initial;
+    --lx-accent-08: initial;
+    --lx-accent-09: initial;
+    --lx-accent-10: initial;
+    --lx-accent-11: initial;
+    --lx-accent-12: initial;
 }
\ No newline at end of file
diff --git a/scss/_theme.scss b/scss/_theme.scss
index a192384..8d8d219 100644
--- a/scss/_theme.scss
+++ b/scss/_theme.scss
@@ -1,4 +1,4 @@
-:root:not([data-color]), :root[data-color='none'] {
+:root:not([data-color]), :root[data-color='none'], :root[data-color='logseq'] {
     // darkest -> lightest (dark theme)
   --color-base-00: rgb(var(--ctp-crust));
   --color-base-10: rgb(var(--ctp-mantle));
diff --git a/scss/_utils.scss b/scss/_utils.scss
new file mode 100644
index 0000000..6d79a47
--- /dev/null
+++ b/scss/_utils.scss
@@ -0,0 +1,26 @@
+@use "@catppuccin/palette/scss/catppuccin" as catppuccin;
+@use 'sass:math';
+
+@function strip-unit($value) {
+  @return math.div($value, ($value * 0 + 1));
+}
+
+@function hex-to-hsl($hexColor) {
+    @return #{math.round(strip-unit(hue($hexColor)))}, #{math.round(saturation($hexColor))}, #{math.round(lightness($hexColor))}
+}
+
+@function hex-to-rgb($hexColor) {
+    @return #{red($hexColor)}, #{green($hexColor)}, #{blue($hexColor)}
+}
+
+@mixin ctp-hsl-vars ($flavor) {
+    @each $color, $hex in map-get(catppuccin.$palette, $flavor) {
+        --ctp-#{$color}-hsl: #{hex-to-hsl($hex)};
+    }
+}
+
+@mixin ctp-rgb-vars ($flavor) {
+    @each $color, $hex in map-get(catppuccin.$palette, $flavor) {
+        --ctp-#{$color}: #{hex-to-rgb($hex)};
+    }
+}
diff --git a/scss/ctp-frappe.scss b/scss/ctp-frappe.scss
index ca15f70..c66dba7 100644
--- a/scss/ctp-frappe.scss
+++ b/scss/ctp-frappe.scss
@@ -1,33 +1,10 @@
 @use "main.scss";
+@use "utils.scss" as utils;
 
-:root:not([data-color]), :root[data-color='none'] {
+:root:not([data-color]), :root[data-color='none'], :root[data-color='logseq'] {
   --ctp-cm-theme: 'ctp-frappe';
-  --ctp-rosewater: 242, 213, 207;
-  --ctp-flamingo: 238, 190, 190;
-  --ctp-pink: 244, 184, 228;
-  --ctp-mauve: 202, 158, 230;
-  --ctp-red: 231, 130, 132;
-  --ctp-maroon: 234, 153, 156;
-  --ctp-peach: 239, 159, 118;
-  --ctp-yellow: 229, 200, 144;
-  --ctp-green: 166, 209, 137;
-  --ctp-teal: 129, 200, 190;
-  --ctp-sky: 153, 209, 219;
-  --ctp-sapphire: 133, 193, 220;
-  --ctp-blue: 140, 170, 238;
-  --ctp-lavender: 186, 187, 241;
-  --ctp-text: 198, 206, 239;
-  --ctp-subtext1: 181, 189, 220;
-  --ctp-subtext0: 165, 172, 201;
-  --ctp-overlay2: 148, 155, 183;
-  --ctp-overlay1: 131, 138, 164;
-  --ctp-overlay0: 115, 120, 145;
-  --ctp-surface2: 98, 103, 126;
-  --ctp-surface1: 81, 86, 108;
-  --ctp-surface0: 65, 69, 89;
-  --ctp-base: 48, 52, 70;
-  --ctp-mantle: 41, 44, 60;
-  --ctp-crust: 35, 38, 52;
+  @include utils.ctp-rgb-vars(frappe);
+  @include utils.ctp-hsl-vars(frappe);
 }
 
 // custom check box checked image
diff --git a/scss/ctp-latte.scss b/scss/ctp-latte.scss
index d5394e2..ea0cf9c 100644
--- a/scss/ctp-latte.scss
+++ b/scss/ctp-latte.scss
@@ -1,33 +1,10 @@
 @use "main.scss";
+@use "utils.scss" as utils;
 
-:root:not([data-color]), :root[data-color='none'] {
+:root:not([data-color]), :root[data-color='none'], :root[data-color='logseq'] {
   --ctp-cm-theme: 'ctp-latte';
-  --ctp-rosewater: 222, 149, 132;
-  --ctp-flamingo: 221, 120, 120;
-  --ctp-pink: 236, 131, 208;
-  --ctp-mauve: 136, 57, 239;
-  --ctp-red: 210, 15, 57;
-  --ctp-maroon: 230, 69, 83;
-  --ctp-peach: 254, 100, 11;
-  --ctp-yellow: 228, 147, 32;
-  --ctp-green: 64, 160, 43;
-  --ctp-teal: 23, 146, 153;
-  --ctp-sky: 4, 165, 229;
-  --ctp-sapphire: 32, 159, 181;
-  --ctp-blue: 42, 110, 245;
-  --ctp-lavender: 114, 135, 253;
-  --ctp-text: 76, 79, 105;
-  --ctp-subtext1: 92, 95, 119;
-  --ctp-subtext0: 108, 111, 133;
-  --ctp-overlay2: 124, 127, 147;
-  --ctp-overlay1: 140, 143, 161;
-  --ctp-overlay0: 156, 160, 176;
-  --ctp-surface2: 172, 176, 190;
-  --ctp-surface1: 188, 192, 204;
-  --ctp-surface0: 204, 208, 218;
-  --ctp-base: 239, 241, 245;
-  --ctp-mantle: 230, 233, 239;
-  --ctp-crust: 220, 224, 232;
+  @include utils.ctp-rgb-vars(latte);
+  @include utils.ctp-hsl-vars(latte);
 }
 
 // custom check box checked image
diff --git a/scss/ctp-macchiato.scss b/scss/ctp-macchiato.scss
index c828eac..bdaf8fa 100644
--- a/scss/ctp-macchiato.scss
+++ b/scss/ctp-macchiato.scss
@@ -1,33 +1,10 @@
 @use "main.scss";
+@use "utils.scss" as utils;
 
-:root:not([data-color]), :root[data-color='none'] {
+:root:not([data-color]), :root[data-color='none'], :root[data-color='logseq'] {
   --ctp-cm-theme: 'ctp-macchiato';
-  --ctp-rosewater: 244, 219, 214;
-  --ctp-flamingo: 240, 198, 198;
-  --ctp-pink: 245, 189, 230;
-  --ctp-mauve: 198, 160, 246;
-  --ctp-red: 237, 135, 150;
-  --ctp-maroon: 238, 153, 160;
-  --ctp-peach: 245, 169, 127;
-  --ctp-yellow: 238, 212, 159;
-  --ctp-green: 166, 218, 149;
-  --ctp-teal: 139, 213, 202;
-  --ctp-sky: 145, 215, 227;
-  --ctp-sapphire: 125, 196, 228;
-  --ctp-blue: 138, 173, 244;
-  --ctp-lavender: 183, 189, 248;
-  --ctp-text: 197, 207, 245;
-  --ctp-subtext1: 179, 188, 224;
-  --ctp-subtext0: 161, 170, 203;
-  --ctp-overlay2: 143, 151, 183;
-  --ctp-overlay1: 125, 132, 162;
-  --ctp-overlay0: 108, 114, 141;
-  --ctp-surface2: 90, 95, 120;
-  --ctp-surface1: 72, 76, 100;
-  --ctp-surface0: 54, 58, 79;
-  --ctp-base: 36, 39, 58;
-  --ctp-mantle: 30, 32, 48;
-  --ctp-crust: 24, 25, 38;
+  @include utils.ctp-rgb-vars(macchiato);
+  @include utils.ctp-hsl-vars(macchiato);
 }
 
 // custom check box checked image
diff --git a/scss/ctp-mocha.scss b/scss/ctp-mocha.scss
index ddfeda2..5d534ea 100644
--- a/scss/ctp-mocha.scss
+++ b/scss/ctp-mocha.scss
@@ -1,33 +1,10 @@
 @use "main.scss";
+@use "utils.scss" as utils;
 
-:root:not([data-color]), :root[data-color='none'] {
+:root:not([data-color]), :root[data-color='none'], :root[data-color='logseq'] {
   --ctp-cm-theme: 'ctp-mocha';
-  --ctp-rosewater: 245, 224, 220;
-  --ctp-flamingo: 242, 205, 205;
-  --ctp-pink: 245, 194, 231;
-  --ctp-mauve: 203, 166, 247;
-  --ctp-red: 243, 139, 168;
-  --ctp-maroon: 235, 160, 172;
-  --ctp-peach: 250, 179, 135;
-  --ctp-yellow: 249, 226, 175;
-  --ctp-green: 166, 227, 161;
-  --ctp-teal: 148, 226, 213;
-  --ctp-sky: 137, 220, 235;
-  --ctp-sapphire: 116, 199, 236;
-  --ctp-blue: 135, 176, 249;
-  --ctp-lavender: 180, 190, 254;
-  --ctp-text: 198, 208, 245;
-  --ctp-subtext1: 179, 188, 223;
-  --ctp-subtext0: 161, 168, 201;
-  --ctp-overlay2: 142, 149, 179;
-  --ctp-overlay1: 123, 129, 157;
-  --ctp-overlay0: 105, 109, 134;
-  --ctp-surface2: 86, 89, 112;
-  --ctp-surface1: 67, 70, 90;
-  --ctp-surface0: 49, 50, 68;
-  --ctp-base: 30, 30, 46;
-  --ctp-mantle: 24, 24, 37;
-  --ctp-crust: 17, 17, 27;
+  @include utils.ctp-rgb-vars(mocha);
+  @include utils.ctp-hsl-vars(mocha);
 }
 
 
diff --git a/scss/ctp-oled.scss b/scss/ctp-oled.scss
index eecb3bb..62c2da8 100644
--- a/scss/ctp-oled.scss
+++ b/scss/ctp-oled.scss
@@ -1,30 +1,10 @@
 @use "main.scss";
+@use "utils.scss" as utils;
 
-:root:not([data-color]), :root[data-color='none'] {
+:root:not([data-color]), :root[data-color='none'], :root[data-color='logseq'] {
   --ctp-cm-theme: 'ctp-oled';
-  --ctp-rosewater: 245, 224, 220;
-  --ctp-flamingo: 242, 205, 205;
-  --ctp-pink: 245, 194, 231;
-  --ctp-mauve: 203, 166, 247;
-  --ctp-red: 243, 139, 168;
-  --ctp-maroon: 235, 160, 172;
-  --ctp-peach: 250, 179, 135;
-  --ctp-yellow: 249, 226, 175;
-  --ctp-green: 166, 227, 161;
-  --ctp-teal: 148, 226, 213;
-  --ctp-sky: 137, 220, 235;
-  --ctp-sapphire: 116, 199, 236;
-  --ctp-blue: 135, 176, 249;
-  --ctp-lavender: 180, 190, 254;
-  --ctp-text: 198, 208, 245;
-  --ctp-subtext1: 179, 188, 223;
-  --ctp-subtext0: 161, 168, 201;
-  --ctp-overlay2: 142, 149, 179;
-  --ctp-overlay1: 123, 129, 157;
-  --ctp-overlay0: 105, 109, 134;
-  --ctp-surface2: 86, 89, 112;
-  --ctp-surface1: 67, 70, 90;
-  --ctp-surface0: 49, 50, 68;
+  @include utils.ctp-rgb-vars(mocha);
+  @include utils.ctp-hsl-vars(mocha);
   --ctp-base: 02, 02, 02;
   --ctp-mantle: 01, 01, 01;
   --ctp-crust: 00, 00, 00;