fix: fix bug with theme setting

src/app.css

@@ -74,29 +74,33 @@ main > div > div:first-child {
 }
 
 .apply-form > label {
-  color: white;
+  color: var(--green);
 }
 
 .apply-form > p {
-  color: white;
+  color: var(--green);
 }
 
 .apply-input {
   padding: 4px 12px;
   background: transparent;
-  border: 1px solid white;
+  border: 1px solid var(--green);
   margin-bottom: 12px;
 }
 
 .apply-submit {
   padding: 4px 12px;
   background: transparent;
-  color: white;
+  color: var(--green);
-  border: 1px solid white;
+  border: 1px solid var(--green);
   margin-top: 12px;
   margin-bottom: 24px;
 }
 
+.theme-list {
+  white-space: pre-wrap !important;
+}
+
 @media (max-width: 768px) {
   .apply-form {
     flex-direction: column;

src/components/Input.svelte

@@ -13,6 +13,15 @@
   onMount(() => {
     input.focus();
 
+    console.log("dsadas", $theme);
+
+    document.documentElement.style.setProperty(
+      "--text-color",
+      `${$theme.foreground}`
+    );
+
+    document.documentElement.style.setProperty("--green", `${$theme.green}`);
+
     if ($history.length === 0) {
       const command = commands["banner"] as () => string;
 

src/utils/commands.ts

@@ -76,7 +76,7 @@ export const commands: Record<
         let result = themes.map((t) => t.name.toLowerCase()).join(", ");
         result += `You can preview all these themes here: ${packageJson.repository.url}/tree/master/docs/themes`;
 
-        return result;
+        return `<template><span class="theme-list">${result}</span></template>`;
       }
 
       case "set": {
@@ -91,6 +91,13 @@ export const commands: Record<
           return `Theme '${selectedTheme}' not found. Try 'theme ls' to see all available themes.`;
         }
 
+        document.documentElement.style.setProperty(
+          "--text-color",
+          `${t.foreground}`
+        );
+
+        document.documentElement.style.setProperty("--green", `${t.green}`);
+
         theme.set(t);
 
         return `Theme set to ${selectedTheme}`;