Added a separate file for color variables

src/app.css

@@ -1,3 +1,4 @@
+@import url('./themes/colors.css');
 body {
   background-color: red;
 }

src/themes/colors.css

@@ -0,0 +1,11 @@
+:root {
+  --link-color: #646cff;
+  --link-hover-color: #535bf2;
+  --background-color: #12082b;
+  --header-background-color: #1f1145;
+  --content-background-color: #0d0620;
+  --text-color: white;
+  --border-color: #8054f0;
+  --indicator-inactive-color: #4a4a4a;
+  --indicator-active-color: #8054f0;
+}

src/themes/theme.css

@@ -3,18 +3,6 @@
   src: url(https://witchcraft.systems/ProggyCleanNerdFont-Regular.ttf);
 }
 
-:root {
-  --link-color: #646cff;
-  --link-hover-color: #535bf2;
-  --background-color: #12082b;
-  --header-background-color: #1f1145;
-  --content-background-color: #0d0620;
-  --text-color: white;
-  --border-color: #8054f0;
-  --indicator-inactive-color: #4a4a4a;
-  --indicator-active-color: #8054f0;
-}
-
 ::-webkit-scrollbar {
   width: 0px;
   background: transparent;

theming.ts

@@ -11,6 +11,7 @@ export const themePlugin = (): Plugin => {
         name: 'theme-generator',
         transform(code, id) {
             if (id.endsWith('app.css')) {
+                const colorsCode = Deno.readTextFileSync(Deno.cwd() + '/src/themes/colors.css');
                 // Read the theme file and replace the contents of app.css with it
                 // Needs full path to the file
                 const themeCode = Deno.readTextFileSync(Deno.cwd() + '/src/themes/' + themeFile);
@@ -18,7 +19,7 @@ export const themePlugin = (): Plugin => {
 
                 // and add a comment at the top
                 const themeComment = `/* Generated from ${themeFile} */\n`;
-                const themeCodeWithComment = themeComment + themeCode;
+                const themeCodeWithComment = themeComment + colorsCode + themeCode;
                 // Return the theme code as the new contents of app.css
                 return {
                     code: themeCodeWithComment,