feat: theme editable playground

catppuccin · Jun 16, 2023 · 3adcd2d · 3adcd2d
1 parent 7ef570d
commit 3adcd2d
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 32 deletions.
diff --git a/palette/catppuccin-highlight.scss b/palette/catppuccin-highlight.scss
@@ -2,31 +2,34 @@
 // The problem is that `.mocha code.hljs` is overriding the colours but `.mocha code` works perfectly
 // Until then, make sure you manually edit the files to remove that properly
 
+@use "@catppuccin/palette/scss/catppuccin";
+
 .mocha {
-  code {
-    color: #cdd6f4;
-    background: #181825;
-  }
   @import "@catppuccin/highlightjs/sass/catppuccin-mocha";
 }
 .macchiato {
-  code {
-    color: #cad3f5;
-    background: #1e2030;
-  }
   @import "@catppuccin/highlightjs/sass/catppuccin-macchiato";
 }
 .frappe {
-  code {
-    color: #c6d0f5;
-    background: #292c3c;
-  }
   @import "@catppuccin/highlightjs/sass/catppuccin-frappe";
 }
 .latte {
-  code {
-    color: #4c4f69;
-    background: #e6e9ef;
-  }
   @import "@catppuccin/highlightjs/sass/catppuccin-latte";
 }
+
+@each $flavour, $colour in catppuccin.$palette {
+  .#{$flavour} {
+    code {
+      color: map-get($colour, "text");
+      background: map-get($colour, "mantle");
+    }
+    .ace_gutter {
+      color: map-get($colour, "overlay1");
+      background: map-get($colour, "mantle");
+    }
+    .ace_gutter-active-line.ace_gutter-cell {
+      color: map-get($colour, "pink");
+      background: map-get($colour, "mantle");
+    }
+  }
+}
diff --git a/src/bin/assets/catppuccin-highlight.css b/src/bin/assets/catppuccin-highlight.css
@@ -1,7 +1,3 @@
-.mocha code {
-  color: #cdd6f4;
-  background: #181825;
-}
 .mocha code .hljs-keyword {
   color: #cba6f7;
 }
@@ -141,10 +137,6 @@
   background: rgba(243, 139, 168, 0.15);
 }
 
-.macchiato code {
-  color: #cad3f5;
-  background: #1e2030;
-}
 .macchiato code .hljs-keyword {
   color: #c6a0f6;
 }
@@ -284,10 +276,6 @@
   background: rgba(237, 135, 150, 0.15);
 }
 
-.frappe code {
-  color: #c6d0f5;
-  background: #292c3c;
-}
 .frappe code .hljs-keyword {
   color: #ca9ee6;
 }
@@ -427,10 +415,6 @@
   background: rgba(231, 130, 132, 0.15);
 }
 
-.latte code {
-  color: #4c4f69;
-  background: #e6e9ef;
-}
 .latte code .hljs-keyword {
   color: #8839ef;
 }
@@ -569,3 +553,55 @@
   color: #d20f39;
   background: rgba(210, 15, 57, 0.15);
 }
+
+.mocha code {
+  color: #cdd6f4;
+  background: #181825;
+}
+.mocha .ace_gutter {
+  color: #7f849c;
+  background: #181825;
+}
+.mocha .ace_gutter-active-line.ace_gutter-cell {
+  color: #f5c2e7;
+  background: #181825;
+}
+
+.macchiato code {
+  color: #cad3f5;
+  background: #1e2030;
+}
+.macchiato .ace_gutter {
+  color: #8087a2;
+  background: #1e2030;
+}
+.macchiato .ace_gutter-active-line.ace_gutter-cell {
+  color: #f5bde6;
+  background: #1e2030;
+}
+
+.frappe code {
+  color: #c6d0f5;
+  background: #292c3c;
+}
+.frappe .ace_gutter {
+  color: #838ba7;
+  background: #292c3c;
+}
+.frappe .ace_gutter-active-line.ace_gutter-cell {
+  color: #f4b8e4;
+  background: #292c3c;
+}
+
+.latte code {
+  color: #4c4f69;
+  background: #e6e9ef;
+}
+.latte .ace_gutter {
+  color: #8c8fa1;
+  background: #e6e9ef;
+}
+.latte .ace_gutter-active-line.ace_gutter-cell {
+  color: #ea76cb;
+  background: #e6e9ef;
+}