diff --git a/index.html b/index.html
index 8165fad..a6f9ff8 100644
--- a/index.html
+++ b/index.html
@@ -64,11 +64,11 @@
     }
 
     .bar_button {
-      @apply mx-2 px-2 py-2 flex inline bg-selection_background text-selection_foreground rounded-lg hover:bg-background hover:text-foreground
+      @apply mx-2 px-2 py-2 flex inline rounded-lg bg-background text-foreground  hover:bg-foreground hover:text-background
     }
 
     .side_button {
-      @apply px-2 py-2 bg-selection_background text-selection_foreground rounded-lg hover:bg-background hover:text-foreground
+      @apply px-2 py-2 bg-background text-foreground rounded-lg hover:bg-foreground hover:text-background
     }
 
     .subtitle {
@@ -83,16 +83,10 @@
   <body id="all" class="z-0 overflow-y-hidden bg-black">
 		<!-- The header is hidden on smaller devices -->
     <header class="py-0 block">
-      <div id="topbar" class="mx-auto flex flex-wrap pl-2 py-1 flex-row items-center bg-selection_background text-selection_foreground">
+      <div id="topbar" class="mx-auto flex flex-wrap pl-2 py-1 flex-row items-center bg-background text-selection_foreground">
         <a class="flex title-font font-medium items-center mb-0 text-selection_foreground">
-          <img id="topos-logo" src="topos_frog.svg" class="w-12 h-12 text-selection_foreground p-2 rounded-full" alt="Topos Frog Logo"/>
-         <input id="universe-viewer" class="
-          hidden transparent 
-          xl:block ml-4 
-          text-2xl 
-          text-selection_foreground 
-          placeholder-current
-          bg-selection_background" id="renamer" type="text" placeholder="Topos">
+          <img id="topos-logo" src="topos_frog.svg" class="w-12 h-12 text-selection_foreground p-2 rounded-full bg-foreground" alt="Topos Frog Logo"/>
+         <input id="universe-viewer" class="hidden transparent xl:block ml-4 text-2xl bg-background" id="renamer" type="text" placeholder="Topos">
         </a>
 
         <nav class="py-2 flex flex-wrap items-center text-base absolute right-0">
@@ -477,7 +471,7 @@
 					flex flex-col items-center w-14
 					h-screen py-2 border-r 
 					rtl:border-l max-h-fit
-					rtl:border-r-0 bg-selection_background
+					rtl:border-r-0 bg-background
 					border-neutral-700 border-none"
 				>
         <nav class="flex flex-col space-y-6">
diff --git a/src/DomElements.ts b/src/DomElements.ts
index 3e177d6..1b98eb9 100644
--- a/src/DomElements.ts
+++ b/src/DomElements.ts
@@ -72,25 +72,25 @@ export const createDocumentationStyle = (app: Editor) => {
    */
 
   return {
-    h1: "text-white lg:text-4xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-4 mb-4 border-b-4 pt-4 pb-3 px-2",
-    h2: "text-white lg:text-3xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-4 mb-4 border-b-2 pt-12 pb-3 px-2",
-    h3: "text-white lg:text-2xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 border-l-2 border-b-2 lg:mb-4 mb-4 pb-2 px-2 lg:mt-16",
+    h1: "text-brightwhite lg:text-4xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-4 mb-4 border-b-4 pt-4 pb-3 px-2",
+    h2: "text-brightwhite lg:text-3xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-4 mb-4 border-b-2 pt-12 pb-3 px-2",
+    h3: "text-brightwhite lg:text-2xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 border-l-2 border-b-2 lg:mb-4 mb-4 pb-2 px-2 lg:mt-16",
     ul: "text-underline ml-12",
-    li: "list-disc lg:text-2xl text-base text-white lg:mx-4 mx-2 my-4 my-2 leading-normal",
-    p: "lg:text-2xl text-base text-white lg:mx-6 mx-2 my-4 leading-normal",
+    li: "list-disc lg:text-2xl text-base text-foreground_selection lg:mx-4 mx-2 my-4 my-2 leading-normal",
+    p: "lg:text-2xl text-base text-background_selection lg:mx-6 mx-2 my-4 leading-normal",
     warning:
       "animate-pulse lg:text-2xl font-bold text-rose-600 lg:mx-6 mx-2 my-4 leading-normal",
     a: "lg:text-2xl text-base text-orange-300",
     code: `lg:my-4 sm:my-1 text-base lg:text-xl block whitespace-pre overflow-x-hidden`,
     icode:
-      "lg:my-1 my-1 lg:text-xl sm:text-xs text-white font-mono bg-neutral-600",
-    ic: "lg:my-1 my-1 lg:text-xl sm:text-xs text-white font-mono bg-neutral-600",
+      "lg:my-1 my-1 lg:text-xl sm:text-xs text-foreground_selection font-mono bg-neutral-600",
+    ic: "lg:my-1 my-1 lg:text-xl sm:text-xs text-foreground_selection font-mono bg-neutral-600",
     blockquote: "text-neutral-200 border-l-4 border-neutral-500 pl-4 my-4 mx-4",
     details:
-      "lg:mx-20 py-2 px-6 lg:text-2xl text-white border-l-8 box-border bg-neutral-900",
+      "lg:mx-20 py-2 px-6 lg:text-2xl text-foreground_selection border-l-8 box-border bg-neutral-900",
     summary: "font-semibold text-xl",
     table:
-      "justify-center lg:my-12 my-2 lg:mx-12 mx-2 lg:text-2xl text-base w-full text-left text-white border-collapse",
+      "justify-center lg:my-12 my-2 lg:mx-12 mx-2 lg:text-2xl text-base w-full text-left text-foreground_selection border-collapse",
     thead:
       "text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400",
     th: "",
diff --git a/src/main.ts b/src/main.ts
index f716378..ff2aa29 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -210,7 +210,7 @@ export class Editor {
     loadUniverserFromUrl(this);
 
     // Set the color scheme for the application
-    // this.readTheme(this.settings.theme);
+    this.readTheme(this.settings.theme);
   }
 
   private getBuffer(type: string): any {
diff --git a/src/style.css b/src/style.css
index fa629f8..8e37f7b 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1441,6 +1441,11 @@ video {
   color: rgb(var(--brightred) / var(--tw-text-opacity));
 }
 
+.text-brightwhite {
+  --tw-text-opacity: 1;
+  color: rgb(var(--brightwhite) / var(--tw-text-opacity));
+}
+
 .underline {
   text-decoration-line: underline;
 }
