diff --git a/build.ts b/build.ts
index 5e2ee53..620862e 100755
--- a/build.ts
+++ b/build.ts
@@ -14,6 +14,7 @@ Deno.mkdirSync(path.join(__dirname, "dist"), { recursive: true });
 const sassBuilder = (flavor: string, accent: string) => `
 @import "@catppuccin/palette/scss/${flavor}";
 $accent: $${accent};
+$flavor: ${flavor};
 $isDark: ${flavor !== "latte"};
 @import "theme";
 `;
diff --git a/src/_chroma.scss b/src/_chroma.scss
deleted file mode 100644
index 53f153a..0000000
--- a/src/_chroma.scss
+++ /dev/null
@@ -1,296 +0,0 @@
-@use "sass:color";
-
-/* NameBuiltinPseudo */
-.chroma .bp {
-  color: $peach;
-}
-/* Comment */
-.chroma .c {
-  color: $overlay0;
-}
-/* CommentSingle */
-.chroma .c1 {
-  color: $overlay0;
-}
-/* CommentHashbang */
-.chroma .ch {
-  color: $overlay0;
-}
-/* CommentMultiline */
-.chroma .cm {
-  color: $overlay0;
-}
-/* CommentPreproc */
-.chroma .cp {
-  color: $blue;
-}
-/* CommentPreprocFile */
-.chroma .cpf {
-  color: $blue;
-}
-/* CommentSpecial */
-.chroma .cs {
-  color: $overlay0;
-}
-/* LiteralStringDelimiter */
-.chroma .dl {
-  color: $blue;
-}
-/* NameFunctionMagic */
-.chroma .fm {
-}
-/* Generic */
-.chroma .g {
-}
-/* GenericDeleted */
-.chroma .gd {
-  color: $text;
-  background-color: color.change($red, $alpha: 0.15);
-}
-/* GenericEmph */
-.chroma .ge {
-  font-style: italic;
-}
-/* GenericHeading */
-.chroma .gh {
-  color: $sky;
-}
-/* GenericInserted */
-.chroma .gi {
-  color: $text;
-  background-color: color.change($green, $alpha: 0.15);
-}
-/* GenericUnderline */
-.chroma .gl {
-}
-/* GenericOutput */
-.chroma .go {
-  color: $peach;
-}
-/* GenericPrompt */
-.chroma .gp {
-  color: $overlay0;
-  font-weight: bold;
-}
-/* GenericError */
-.chroma .gr {
-  color: $maroon;
-}
-/* GenericStrong */
-.chroma .gs {
-  font-weight: bold;
-}
-/* GenericTraceback */
-.chroma .gt {
-  color: $maroon;
-}
-/* GenericSubheading */
-.chroma .gu {
-  color: $sky;
-}
-/* LiteralNumberIntegerLong */
-.chroma .il {
-  color: $peach;
-}
-/* Keyword */
-.chroma .k {
-  color: $mauve;
-}
-/* KeywordConstant */
-.chroma .kc {
-  color: $yellow;
-}
-/* KeywordDeclaration */
-.chroma .kd {
-  color: $mauve;
-}
-/* KeywordNamespace */
-.chroma .kn {
-  color: $yellow;
-}
-/* KeywordPseudo */
-.chroma .kp {
-  color: $mauve;
-  font-weight: bold;
-}
-/* KeywordReserved */
-.chroma .kr {
-  color: $mauve;
-}
-/* KeywordType */
-.chroma .kt {
-  color: $yellow;
-}
-/* Literal */
-.chroma .l {
-}
-/* LiteralDate */
-.chroma .ld {
-}
-/* LiteralNumber */
-.chroma .m {
-  color: $peach;
-}
-/* LiteralNumberBin */
-.chroma .mb {
-  color: $peach;
-}
-/* LiteralNumberFloat */
-.chroma .mf {
-  color: $peach;
-}
-/* LiteralNumberHex */
-.chroma .mh {
-  color: $peach;
-}
-/* LiteralNumberInteger */
-.chroma .mi {
-  color: $peach;
-}
-/* LiteralNumberOct */
-.chroma .mo {
-  color: $peach;
-}
-/* Name */
-.chroma .n {
-  color: $lavender;
-}
-/* NameAttribute */
-.chroma .na {
-  color: $yellow;
-}
-/* NameBuiltin */
-.chroma .nb {
-  color: $peach;
-}
-/* NameClass */
-.chroma .nc {
-  color: $yellow;
-}
-/* NameDecorator */
-.chroma .nd {
-  color: $pink;
-}
-/* NameException */
-.chroma .ne {
-  color: $maroon;
-}
-/* NameFunction */
-.chroma .nf {
-  color: $blue;
-}
-/* NameEntity */
-.chroma .ni {
-  color: $pink;
-}
-/* NameLabel */
-.chroma .nl {
-  color: $yellow;
-}
-/* NameNamespace */
-.chroma .nn {
-  color: $yellow;
-}
-/* NameConstant */
-.chroma .no {
-  color: $yellow;
-}
-/* NameTag */
-.chroma .nt {
-  color: $mauve;
-}
-/* NameVariable */
-.chroma .nv {
-  color: $peach;
-}
-/* NameOther */
-.chroma .nx {
-  color: $peach;
-}
-/* Operator */
-.chroma .o {
-  color: $sky;
-}
-/* OperatorWord */
-.chroma .ow {
-  color: $sky;
-  font-weight: bold;
-}
-/* Punctuation */
-.chroma .p {
-  color: $overlay2;
-}
-/* NameProperty */
-.chroma .py {
-}
-/* LiteralString */
-.chroma .s {
-  color: $green;
-}
-/* LiteralStringSingle */
-.chroma .s1 {
-  color: $green;
-}
-/* LiteralStringDouble */
-.chroma .s2 {
-  color: $green;
-}
-/* LiteralStringAffix */
-.chroma .sa {
-  color: $green;
-}
-/* LiteralStringBacktick */
-.chroma .sb {
-  color: $green;
-}
-/* LiteralStringChar */
-.chroma .sc {
-  color: $green;
-}
-/* LiteralStringDoc */
-.chroma .sd {
-  color: $green;
-}
-/* LiteralStringEscape */
-.chroma .se {
-  color: $blue;
-}
-/* LiteralStringHeredoc */
-.chroma .sh {
-  color: $green;
-}
-/* LiteralStringInterpol */
-.chroma .si {
-  color: $green;
-}
-/* LiteralStringRegex */
-.chroma .sr {
-  color: $blue;
-}
-/* LiteralStringSymbol */
-.chroma .ss {
-  color: $green;
-}
-/* LiteralStringOther */
-.chroma .sx {
-  color: $green;
-}
-/* NameVariableClass */
-.chroma .vc {
-  color: $yellow;
-}
-/* NameVariableGlobal */
-.chroma .vg {
-  color: $peach;
-}
-/* NameVariableInstance */
-.chroma .vi {
-  color: $yellow;
-}
-/* NameVariableMagic */
-.chroma .vm {
-}
-/* TextWhitespace */
-.chroma .w {
-  color: $surface0;
-}
diff --git a/src/_theme.scss b/src/_theme.scss
index a4b9bd0..9cead1a 100644
--- a/src/_theme.scss
+++ b/src/_theme.scss
@@ -1,5 +1,9 @@
 @use "sass:color";
 
+@mixin chroma($flavor) {
+  @import url("https://raw.githubusercontent.com/catppuccin/chroma/012c54d4b3122128c1523fe7ca2d41e9e11be7e4/dist/#{$flavor}-chroma-style.css");
+}
+
 // context-aware lighten: darkens if dark, lightens if light
 @function ctx_lighten($color, $amount) {
   $multiplier: if($isDark, -1, 1);
@@ -324,6 +328,6 @@ $lvl3: if($isDark, $base, $crust);
   background: color.change($accent, $alpha: 0.3) !important;
 }
 
-@import "chroma";
+@include chroma($flavor);
 @import "codemirror";
 @import "monaco";