diff --git a/src/components/EditorBody.vue b/src/components/EditorBody.vue
index 29501e3..434d81f 100644
--- a/src/components/EditorBody.vue
+++ b/src/components/EditorBody.vue
@@ -1,12 +1,12 @@
 <template>
   <div
     ref="scroll"
-    class="font-mono text-sm flex-auto flex-grow overflow-auto flex pt-2"
+    class="font-mono text-sm flex-auto flex-grow overflow-auto flex bg-neutral-200 dark:bg-neutral-900 pt-2"
     @scroll="handleScroll"
     @resize="updateBounds"
   >
     <div
-      class="w-20 pr-4 mr-2 text-xs text-slate-400 font-medium shrink-0 z-10 absolute left-0 bg-neutral-900 pt-2"
+      class="w-20 pr-4 mr-2 text-xs text-slate-400 font-medium shrink-0 z-10 absolute left-0 pt-2"
       @click.self
       @wheel.stop
       :style="{ top: `${state.lineOffset}px` }"
@@ -154,8 +154,8 @@ function lineStyling(i: number): Record<string, boolean> {
   const isStopped = index === stoppedIndex.value
 
   return {
-    'bg-breakpoint-neutral': breakpoint && !isStopped,
-    'bg-breakpoint-stopped': isStopped,
+    'dark:bg-breakpoint-neutral bg-breakpoint-neutral-light': breakpoint && !isStopped,
+    'dark:bg-breakpoint-stopped bg-breakpoint-stopped-light': isStopped,
     'bg-yellow-500 bg-opacity-5':
       !breakpoint && !isStopped && !(tab()?.writable ?? true),
   }
diff --git a/src/components/ErrorOverlay.vue b/src/components/ErrorOverlay.vue
index 8f70424..da18adc 100644
--- a/src/components/ErrorOverlay.vue
+++ b/src/components/ErrorOverlay.vue
@@ -9,7 +9,7 @@
   >
     <div
       v-if="props.highlight.message"
-      class="mt-6 py-2 px-4 w-auto bg-neutral-900 rounded shadow-xl absolute z-30 text-red-400 font-medium font-sans hidden group-hover:block"
+      class="mt-6 py-2 px-4 w-auto dark:bg-neutral-900 bg-neutral-200 rounded shadow-xl absolute z-30 text-red-400 font-medium font-sans hidden group-hover:block"
     >
       {{ props.highlight.message }}
     </div>
diff --git a/src/components/ExportModal.vue b/src/components/ExportModal.vue
index c1376e1..f1c1885 100644
--- a/src/components/ExportModal.vue
+++ b/src/components/ExportModal.vue
@@ -1,13 +1,13 @@
 <template>
   <Modal :show="props.show" @close="emit('close')">
     <div
-      class="max-w-2xl bg-neutral-900 rounded-xl px-8 py-6 mx-auto flex flex-col shadow pointer-events-auto overflow-y-scroll max-h-[84vh]"
+      class="max-w-2xl dark:bg-neutral-900 bg-neutral-200 rounded-xl px-8 py-6 mx-auto flex flex-col shadow pointer-events-auto overflow-y-scroll max-h-[84vh]"
     >
-      <div class="text-2xl font-semibold flex items-center bg-neutral-900 w-full my-2 shrink-0">
+      <div class="text-2xl font-semibold flex items-center dark:bg-neutral-900 bg-neutral-200 w-full my-2 shrink-0">
         <DocumentArrowUpIcon class="w-7 h-7 mr-3 shrink-0" /> Export Regions
 
         <button
-          class="w-8 h-8 ml-auto rounded hover:bg-slate-800 text-slate-300 shrink-0 flex items-center justify-center"
+          class="w-8 h-8 ml-auto rounded dark:hover:bg-slate-800 hover:bg-slate-300 dark:text-slate-300 text-slate-800 shrink-0 flex items-center justify-center"
           @click="emit('close')"
         >
           <XMarkIcon class="w-4 h-4" />
@@ -19,7 +19,7 @@
           Output Format
         </div>
 
-        <div class="text-gray-300 text-sm mt-1">
+        <div class="dark:text-gray-300 text-gray-800 text-sm mt-1">
           Plain format will export binary,
           while HexV3 is designed for use with Logism Evolution.
         </div>
@@ -40,7 +40,7 @@
           Bit Encoding
         </div>
 
-        <div class="text-gray-300 text-sm mt-1">
+        <div class="dark:text-gray-300 text-gray-800 text-sm mt-1">
           Encoding type for HexV3 export.
           For 32-bit memory modules, try using 32-bit Little Endian.
         </div>
@@ -68,7 +68,7 @@
           Continuous Export
         </div>
 
-        <div class="text-gray-300 text-sm mt-1">
+        <div class="dark:text-gray-300 text-gray-800 text-sm mt-1">
           A continuous export will create one large file with all regions back to back.
         </div>
 
diff --git a/src/components/FindWindow.vue b/src/components/FindWindow.vue
index f79d08f..cc0db20 100644
--- a/src/components/FindWindow.vue
+++ b/src/components/FindWindow.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="find.state.show" class="py-2 h-12 relative w-full block shrink-0">
     <div
-      class="flex items-center h-12 border-b border-neutral-700 bg-neutral-900 w-full absolute top-0 z-30"
+      class="flex items-center h-12 border-b border-neutral-700 dark:bg-neutral-900 bg-neutral-200 w-full absolute top-0 z-30"
     >
       <label for="find" class="text-xs font-bold px-4 py-2">Find</label>
       <input
@@ -12,12 +12,12 @@
         spellcheck="false"
         @keydown.enter="jumpToNext()"
         @keydown.esc.prevent="close()"
-        class="text-xs font-mono bg-neutral-800 text-neutral-300 px-2 py-1 w-64 rounded"
+        class="text-xs font-mono dark:bg-neutral-800 bg-neutral-300 dark:text-neutral-300 text-neutral-700 px-2 py-1 w-64 rounded"
         v-model="find.state.text"
       />
 
       <div class="flex px-2 space-x-1">
-        <button class="p-1 rounded hover:bg-neutral-700" @click="jumpToNext()">
+        <button class="p-1 rounded dark:hover:bg-neutral-700 hover:bg-neutral-300" @click="jumpToNext()">
           <ArrowRightIcon class="w-4 h-4" />
         </button>
       </div>
@@ -25,7 +25,7 @@
       <div class="text-neutral-600 text-sm">{{ count }} matches</div>
 
       <button
-        class="w-12 h-12 ml-auto hover:bg-slate-800 text-slate-300 shrink-0 flex items-center justify-center"
+        class="w-12 h-12 ml-auto dark:hover:bg-slate-800 hover:bg-slate-300 dark:text-slate-300 text-slate-800 shrink-0 flex items-center justify-center"
         @click="close()"
       >
         <XMarkIcon class="w-4 h-4" />
diff --git a/src/components/GotoOverlay.vue b/src/components/GotoOverlay.vue
index 0312b75..53cb125 100644
--- a/src/components/GotoOverlay.vue
+++ b/src/components/GotoOverlay.vue
@@ -9,10 +9,10 @@
   >
     <div
       v-if="props.highlight.message"
-      class="mt-6 py-2 px-4 w-auto bg-neutral-700 rounded shadow-xl absolute z-30 text-gray-300 font-medium font-sans flex items-center"
+      class="mt-6 py-2 px-4 w-auto dark:bg-neutral-700 bg-neutral-300 rounded shadow-xl absolute z-30 dark:text-gray-300 text-gray-800 font-medium font-sans flex items-center"
     >
       Jump to
-      <span class="text-gray-200 font-bold font-mono">{{
+      <span class="dark:text-gray-200 text-gray-800 font-bold font-mono">{{
         props.highlight.message.label
       }}</span>
       (line {{ props.highlight.message.line + 1 }})
diff --git a/src/components/SaveModal.vue b/src/components/SaveModal.vue
index 24cca84..4a11c95 100644
--- a/src/components/SaveModal.vue
+++ b/src/components/SaveModal.vue
@@ -1,7 +1,7 @@
 <template>
   <Modal :show="!!props.dialog.state.tab">
     <div
-      class="max-w-lg bg-neutral-900 rounded-xl px-8 py-6 mx-auto flex flex-col shadow"
+      class="max-w-lg dark:bg-neutral-900 bg-neutral-200 rounded-xl px-8 py-6 mx-auto flex flex-col shadow"
     >
       <div>Would you like to save changes made to this file?</div>
 
@@ -14,7 +14,7 @@
           @click="props.dialog.selectSave()"
           ref="saveButton"
           id="save-modal-save"
-          class="mr-4 mt-4 w-24 bg-slate-800 hover:bg-slate-700 transition-colors duration-150 px-4 py-2 rounded"
+          class="mr-4 mt-4 w-24 dark:bg-slate-800 dark:hover:bg-slate-700 bg-slate-400 hover:bg-slate-500 transition-colors duration-150 px-4 py-2 rounded"
         >
           Save
         </button>
@@ -23,7 +23,7 @@
           @click="props.dialog.selectDiscard()"
           ref="discardButton"
           id="save-modal-discard"
-          class="mr-8 mt-4 w-28 bg-neutral-800 hover:bg-neutral-700 transition-colors duration-150 px-4 py-2 rounded"
+          class="mr-8 mt-4 w-28 dark:bg-slate-800 dark:hover:bg-slate-700 bg-slate-400 hover:bg-slate-500 transition-colors duration-150 px-4 py-2 rounded"
         >
           Don't Save
         </button>
@@ -32,7 +32,7 @@
           @click="props.dialog.selectDismiss()"
           ref="dismissButton"
           id="save-modal-dismiss"
-          class="mt-4 w-24 bg-neutral-800 hover:bg-neutral-700 transition-colors duration-150 px-4 py-2 rounded"
+          class="mt-4 w-24 dark:bg-slate-800 dark:hover:bg-slate-700 bg-slate-400 hover:bg-slate-500 transition-colors duration-150 px-4 py-2 rounded"
         >
           Cancel
         </button>
diff --git a/src/components/SettingsModal.vue b/src/components/SettingsModal.vue
index 0dd7289..04a4d52 100644
--- a/src/components/SettingsModal.vue
+++ b/src/components/SettingsModal.vue
@@ -1,13 +1,13 @@
 <template>
   <Modal :show="props.show" @close="emit('close')">
     <div
-      class="max-w-2xl bg-neutral-900 rounded-xl px-8 py-6 mx-auto flex flex-col shadow pointer-events-auto overflow-y-scroll max-h-[84vh]"
+      class="max-w-2xl dark:bg-neutral-900 bg-neutral-200 rounded-xl px-8 py-6 mx-auto flex flex-col shadow pointer-events-auto overflow-y-scroll max-h-[84vh]"
     >
-      <div class="text-2xl font-semibold flex items-center bg-neutral-900 w-full my-2 shrink-0">
+      <div class="text-2xl font-semibold flex items-center dark:bg-neutral-900 bg-neutral-200 w-full my-2 shrink-0">
         <CogIcon class="w-7 h-7 mr-3 shrink-0" /> Settings
 
         <button
-          class="w-8 h-8 ml-auto rounded hover:bg-slate-800 text-slate-300 shrink-0 flex items-center justify-center"
+          class="w-8 h-8 ml-auto rounded dark:hover:bg-slate-800 hover:bg-slate-300 dark:text-slate-300 text-slate-800 shrink-0 flex items-center justify-center"
           @click="emit('close')"
         >
           <XMarkIcon class="w-4 h-4" />
@@ -19,7 +19,7 @@
           Tab Size
         </div>
 
-        <div class="text-gray-300 text-sm mt-1">
+        <div class="dark:text-gray-300 text-gray-800 text-sm mt-1">
           Number of spaces that make up one tab (when the tab key is hit).
         </div>
 
@@ -31,7 +31,7 @@
 <!--          Font Size-->
 <!--        </div>-->
 
-<!--        <div class="text-gray-300 text-sm mt-1">-->
+<!--        <div class="dark:text-gray-300 text-gray-800 text-sm mt-1">-->
 <!--          Adjust the size of the text in the editor window.-->
 <!--        </div>-->
 
@@ -43,7 +43,7 @@
 <!--          Console Font Size-->
 <!--        </div>-->
 
-<!--        <div class="text-gray-300 text-sm mt-1">-->
+<!--        <div class="dark:text-gray-300 text-gray-800 text-sm mt-1">-->
 <!--          Adjust the size of the text in the debug console.-->
 <!--        </div>-->
 
@@ -55,7 +55,7 @@
           Time Travel
         </div>
 
-        <div class="text-gray-300 text-sm mt-1">
+        <div class="dark:text-gray-300 text-gray-800 text-sm mt-1">
           When enabled, allows fpr stepping backwards when running your program. Enabling may affect performance.
         </div>
 
@@ -71,7 +71,7 @@
           Enter Autocomplete
         </div>
 
-        <div class="text-gray-300 text-sm mt-1">
+        <div class="dark:text-gray-300 text-gray-800 text-sm mt-1">
           When enabled, autocomplete suggestions will be taken if the user presses the enter key.
         </div>
 
@@ -81,7 +81,26 @@
           v-model="settings.editor.enterAutocomplete"
         />
       </div>
+
+
+      <div class="mt-8">
+        <div class="font-bold uppercase text-sm">
+          Dark Mode
+        </div>
+
+        <div class="dark:text-gray-300 text-gray-800 text-sm mt-1">
+          When disabled, use light mode.
+        </div>
+
+        <ToggleField
+          class="my-2"
+          title="Use Dark Mode"
+          v-model="settings.editor.darkMode"
+        />
+      </div>
     </div>
+
+    
   </Modal>
 </template>
 
diff --git a/src/components/Suggestions.vue b/src/components/Suggestions.vue
index b42a82e..6bfee32 100644
--- a/src/components/Suggestions.vue
+++ b/src/components/Suggestions.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="suggestions.state.results.length"
-    class="w-80 h-40 text-sm font-mono overflow-hidden rounded-lg mt-6 p-2 bg-neutral-900 border border-neutral-800 absolute mx-[-0.08rem] z-20"
+    class="w-80 h-40 text-sm font-mono overflow-hidden rounded-lg mt-6 p-2 dark:bg-neutral-900 bg-neutral-200 border border-neutral-800 absolute mx-[-0.08rem] z-20"
     :style="{
       left: `${position.offsetX}px`,
       top: `${position.offsetY}px`,
@@ -18,7 +18,7 @@
         v-for="(suggestion, index) in suggestions.state.results"
         :key="index"
         class="w-full h-6 rounded px-2 flex items-center cursor-pointer transition-colors duration-150"
-        :class="{ 'bg-neutral-700': index === suggestions.state.index }"
+        :class="{ 'dark:bg-neutral-700 bg-neutral-300': index === suggestions.state.index }"
         @click.stop="suggestions.state.index = index"
         @dblclick.stop="merge(index)"
       >
@@ -50,7 +50,7 @@
         <div class="ml-auto flex items-center">
           <span
             v-if="suggestion.name"
-            class="text-neutral-500 mr-2 text-xs max-w-[12rem] shrink truncate"
+            class="dark:text-neutral-500 text-neutral-800 mr-2 text-xs max-w-[12rem] shrink truncate"
           >
             {{ suggestion.name }}
           </span>
diff --git a/src/components/Tab.vue b/src/components/Tab.vue
index 836eda0..70cd56e 100644
--- a/src/components/Tab.vue
+++ b/src/components/Tab.vue
@@ -1,8 +1,8 @@
 <template>
   <button
-    class="hover:bg-neutral-800 text-slate-300 flex items-center transition-[border-color] duration-200 space-x-4 h-10 px-6 text-xs font-medium border-b-2"
+    class="dark:hover:bg-neutral-700 hover:bg-neutral-300 dark:text-slate-300 text-slate-800 flex items-center transition-[border-color] duration-200 space-x-4 h-10 px-6 text-xs font-medium border-b-2"
     :class="{
-      'border-orange-400 bg-neutral-800': props.selected,
+      'border-orange-400 dark:bg-neutral-800': props.selected,
       'border-transparent': !props.selected,
     }"
   >
@@ -16,7 +16,7 @@
       class="ml-3 translate-x-1 w-4 h-4 hover:bg-orange-400 text-lg p-0.5 hover:text-black rounded-full text-center group"
     >
       <span
-        class="w-2 h-2 block rounded-full bg-gray-300 mx-auto"
+        class="w-2 h-2 block rounded-full dark:bg-gray-300 bg-gray-700 mx-auto"
         :class="{ 'block group-hover:hidden': marked, hidden: !marked }"
       />
       <XMarkIcon
diff --git a/src/components/TabBar.vue b/src/components/TabBar.vue
index 996db0b..23ca920 100644
--- a/src/components/TabBar.vue
+++ b/src/components/TabBar.vue
@@ -5,7 +5,7 @@
     <ExportOverlay :show="showExportRegionsDialog" @close="showExportRegionsDialog = false" />
 
     <div
-      class="h-10 flex items-start bg-neutral-900 w-full fixed z-20 top-0"
+      class="h-10 flex items-start dark:bg-neutral-900 bg-neutral-200 w-full fixed z-20 top-0 shadow-md"
     >
       <div class="flex flex-grow overflow-x-auto no-scrollbar items-start">
         <Tab
@@ -23,7 +23,7 @@
         />
 
         <button
-          class="w-10 h-10 hover:bg-slate-800 text-slate-300 shrink-0 flex items-center justify-center font-black"
+          class="w-10 h-10 dark:hover:bg-slate-800 hover:bg-slate-300 dark:text-slate-300 text-slate-800 shrink-0 flex items-center justify-center font-black"
           @click="create"
         >
           <PlusIcon class="w-4 h-4" />
diff --git a/src/components/TabBarItems.vue b/src/components/TabBarItems.vue
index e3ff3e6..9c8261d 100644
--- a/src/components/TabBarItems.vue
+++ b/src/components/TabBarItems.vue
@@ -2,7 +2,7 @@
   <div v-if="profile ?? false" class="flex items-center">
     <button
       v-if="!consoleData.execution && tab()?.profile?.kind === 'asm'"
-      class="w-10 h-10 hover:bg-slate-800 shrink-0 flex items-center justify-center font-black text-sky-300"
+      class="w-10 h-10 dark:hover:bg-slate-800 hover:bg-slate-300 shrink-0 flex items-center justify-center font-black dark:text-sky-300 text-sky-700"
       @click="build()"
       title="Build"
     >
@@ -11,7 +11,7 @@
 
     <button
       v-if="!!consoleData.execution"
-      class="w-10 h-10 hover:bg-slate-800 shrink-0 flex items-center justify-center font-black text-red-300"
+      class="w-10 h-10 dark:hover:bg-slate-800 hover:bg-slate-300 shrink-0 flex items-center justify-center font-black dark:text-red-300 text-red-700"
       @click="stop()"
       title="Stop"
     >
@@ -20,7 +20,7 @@
 
     <button
       v-if="!!consoleData.execution"
-      class="w-10 h-10 hover:bg-slate-800 shrink-0 flex items-center justify-center font-black text-yellow-200"
+      class="w-10 h-10 dark:hover:bg-slate-800 hover:bg-slate-300 shrink-0 flex items-center justify-center font-black dark:text-yellow-200 text-yellow-800"
       @click="pause()"
       title="Pause"
     >
@@ -32,8 +32,8 @@
       class="w-10 h-10 shrink-0 flex items-center justify-center font-black"
       @click="rewind()"
       :class="{
-        'text-gray-300 cursor-default': !allowRewind,
-        'text-teal-300 hover:bg-slate-800': allowRewind,
+        'dark:text-gray-300 text-gray-700 cursor-default': !allowRewind,
+        'dark:text-teal-300 text-teal-700 dark:hover:bg-slate-800 hover:bg-slate-300': allowRewind,
       }"
       :disabled="!allowRewind"
       title="Step Back"
@@ -46,8 +46,8 @@
       class="w-10 h-10 shrink-0 flex items-center justify-center font-black"
       @click="step()"
       :class="{
-        'text-gray-300 cursor-default': !allowResume,
-        'text-teal-300 hover:bg-slate-800': allowResume,
+        'dark:text-gray-300 text-gray-700 cursor-default': !allowResume,
+        'dark:text-teal-300 text-teal-700 dark:hover:bg-slate-800 hover:bg-slate-300': allowResume,
       }"
       :disabled="!allowResume"
       title="Step"
@@ -58,8 +58,8 @@
     <button
       class="w-10 h-10 shrink-0 flex items-center justify-center font-black"
       :class="{
-        'text-gray-300 cursor-default bg-neutral-800': !allowResume,
-        'text-green-300 hover:bg-slate-800': allowResume,
+        'dark:text-gray-300 text-gray-700 cursor-default dark:bg-neutral-800 bg-neutral-400': !allowResume,
+        'dark:text-green-300 text-green-700 dark:hover:bg-slate-800 hover:bg-slate-300': allowResume,
       }"
       @click="resume()"
       :disabled="!allowResume"
diff --git a/src/components/console/BitmapTab.vue b/src/components/console/BitmapTab.vue
index 328144d..773f99a 100644
--- a/src/components/console/BitmapTab.vue
+++ b/src/components/console/BitmapTab.vue
@@ -10,7 +10,7 @@
         Bitmap Display
       </div>
 
-      <div class="text-neutral-300 ml-2">
+      <div class="dark:text-neutral-300 text-neutral-700 ml-2">
         <div class="py-1">
           <label class="inline-block font-bold pr-4 w-32">Display Width</label>
 
@@ -61,10 +61,10 @@
           />
 
           <button
-            class="rounded px-2 py-1 border border-neutral-700 font-bold text-xs ml-4 active:bg-slate-700"
+            class="rounded px-2 py-1 border border-neutral-700 font-bold text-xs ml-4 dark:active:bg-slate-700 active:bg-slate-300"
             :class="{
-              'bg-slate-800': settings.bitmap.address === gp,
-              'hover:bg-slate-800': settings.bitmap.address !== gp,
+              'dark:bg-slate-800 bg-slate-200': settings.bitmap.address === gp,
+              'dark:hover:bg-slate-800 bg-slate-200': settings.bitmap.address !== gp,
             }"
             @click="settings.bitmap.address = gp"
           >
diff --git a/src/components/console/BreakTab.vue b/src/components/console/BreakTab.vue
index fa59d10..3565416 100644
--- a/src/components/console/BreakTab.vue
+++ b/src/components/console/BreakTab.vue
@@ -5,7 +5,7 @@
     </div>
 
     <div class="flex">
-      <div v-if="!state.instructions && !state.stack" class="px-8 text-neutral-500">
+      <div v-if="!state.instructions && !state.stack" class="px-8 dark:text-neutral-500 text-neutral-800">
         To view debug information, set breakpoints or pause during execution.
       </div>
 
@@ -19,8 +19,8 @@
               @click="stepOne()"
               title="Step One"
               :class="{
-                'text-gray-300 cursor-default': !allowResume,
-                'text-sky-300 hover:bg-slate-800': allowResume,
+                'dark:text-gray-300 text-gray-800 cursor-default': !allowResume,
+                'dark:text-sky-300 text-sky-800 dark:hover:bg-slate-800 hover:bg-slate-400': allowResume,
               }"
               :disabled="!allowResume"
             >
@@ -34,7 +34,7 @@
               :class="{'opacity-0': state.instructions.currentIndex !== index}"
             />
 
-            <span class="text-sky-400 font-bold">
+            <span class="dark:text-sky-400 text-sky-600 font-bold">
               {{ instruction?.name || 'unk' }}
             </span>
 
@@ -79,7 +79,7 @@
           Stack
         </span>
 
-        <div class="flex items-center text-neutral-500 border-b border-gray-700 p-2">
+        <div class="flex items-center dark:text-neutral-500 text-neutral-800 border-b border-gray-700 p-2">
           <div class="w-10">
 
           </div>
@@ -94,15 +94,15 @@
         </div>
 
         <div v-for="value in state.stack.elements" class="flex items-center font-mono my-1">
-          <div class="w-10 text-xs text-purple-300">
+          <div class="w-10 text-xs dark:text-purple-300 text-purple-700">
             {{ value.address === state.stack?.sp ? '$sp' : '' }}
           </div>
 
-          <div class="w-28 px-2 py-1 text-neutral-400 hover:bg-neutral-800 rounded">
+          <div class="w-28 px-2 py-1 text-neutral-400 dark:hover:bg-neutral-800 hover:bg-neutral-300 rounded">
             0x{{ value.address.toString(16).padStart(8, '0') }}
           </div>
 
-          <div class="w-32 px-2 py-1 select-all hover:bg-neutral-800 rounded">
+          <div class="w-32 px-2 py-1 select-all dark:hover:bg-neutral-800 hover:bg-neutral-300 rounded">
             0x{{ value.value.toString(16).padStart(8, '0') }}
           </div>
         </div>
@@ -131,10 +131,10 @@ const allowResume = computed(
       consoleData.mode !== ExecutionModeType.Running)
 )
 
-const systemColor = 'text-purple-300'
-const valueColor = 'text-red-300'
-const temporaryColor = 'text-cyan-300'
-const savedColor = 'text-green-300'
+const systemColor = 'dark:text-purple-300 text-purple-700'
+const valueColor = 'dark:text-red-300 text-red-700'
+const temporaryColor = 'dark:text-cyan-300 text-cyan-700'
+const savedColor = 'dark:text-green-300 text-green-700'
 
 const registers = [
   { name: '$zero', color: systemColor },
diff --git a/src/components/console/Console.vue b/src/components/console/Console.vue
index e6035b4..645c7c5 100644
--- a/src/components/console/Console.vue
+++ b/src/components/console/Console.vue
@@ -8,7 +8,7 @@
 
     <div
       ref="grabber"
-      class="w-full fixed bottom-0 z-30 bg-neutral-900 border-t border-neutral-700 flex flex-col max-h-screen"
+      class="w-full fixed bottom-0 z-30 dark:bg-neutral-900 bg-neutral-200 border-t border-neutral-700 flex flex-col max-h-screen"
       :style="{
         height: `${properties.height}px`,
         opacity: properties.height > closingHeight ? '1' : '0',
@@ -58,7 +58,7 @@
         />
 
         <button
-          class="w-10 h-10 ml-auto hover:bg-slate-800 text-slate-300 shrink-0 flex items-center justify-center"
+          class="w-10 h-10 ml-auto dark:hover:bg-slate-800 hover:bg-slate-300 dark:text-slate-300 text-slate-800 shrink-0 flex items-center justify-center"
           @click="close"
         >
           <XMarkIcon class="w-4 h-4" />
@@ -112,16 +112,16 @@ const modeString = computed(() => {
 const modeClass = computed(() => {
   switch (consoleData.mode) {
     case ExecutionModeType.Running:
-      return 'text-teal-100 border-teal-500 border'
+      return 'dark:text-teal-100 text-teal-800 border-teal-500 border'
     case ExecutionModeType.Breakpoint:
     case ExecutionModeType.Invalid:
-      return 'text-red-100 border-red-400 border'
+      return 'dark:text-red-100 text-red-800 border-red-400 border'
     case ExecutionModeType.Paused:
-      return 'text-yellow-100 border-yellow-400 border'
+      return 'dark:text-yellow-100 text-yellow-800 border-yellow-400 border'
     case ExecutionModeType.Finished:
-      return 'text-lime-100 border-lime-500 border'
+      return 'dark:text-lime-100 text-lime-800 border-lime-500 border'
     default:
-      return 'text-white'
+      return 'dark:text-white text-black'
   }
 })
 
diff --git a/src/components/console/ConsoleTab.vue b/src/components/console/ConsoleTab.vue
index 4a9f455..617a10f 100644
--- a/src/components/console/ConsoleTab.vue
+++ b/src/components/console/ConsoleTab.vue
@@ -319,23 +319,23 @@ onMounted(updateBounds)
 function stylingFor(type: ConsoleType): string {
   switch (type) {
     case ConsoleType.Stdout:
-      return 'text-teal-100 border-teal-700'
+      return 'dark:text-teal-100 dark:border-teal-700 text-teal-800 border-teal-200'
     case ConsoleType.Stderr:
-      return 'text-red-200 border-red-700'
+      return 'dark:text-red-200 dark:border-red-700 text-red-800 border-red-200'
     case ConsoleType.Success:
-      return 'text-green-400 border-green-700'
+      return 'dark:text-green-400 border-green-700 text-green-700 border-green-200'
     case ConsoleType.Error:
-      return 'text-red-400 border-red-700'
+      return 'dark:text-red-400 dark:border-red-700 text-red-600 border-red-200'
     case ConsoleType.Info:
-      return 'text-orange-300 border-orange-700'
+      return 'dark:text-orange-300 dark:border-orange-700 text-orange-700 border-orange-200'
     case ConsoleType.Secondary:
-      return 'text-gray-500 border-gray-700'
+      return 'dark:text-gray-500 dark:border-gray-700 text-gray-500 border-gray-200'
     case ConsoleType.Editing:
-      return 'text-lime-400 border-neutral-700'
+      return 'dark:text-lime-400 dark:border-neutral-700 text-lime-600 border-lime-200'
     case ConsoleType.Submitted:
-      return 'text-lime-500 font-black border-green-700'
+      return 'dark:text-lime-500 font-black dark:border-green-700 text-lime-700 border-lime-200'
     default:
-      return 'text-orange-500'
+      return 'dark:text-orange-500 text-orange-500'
   }
 }
 
diff --git a/src/components/console/MemoryTab.vue b/src/components/console/MemoryTab.vue
index bee0718..e75fbf3 100644
--- a/src/components/console/MemoryTab.vue
+++ b/src/components/console/MemoryTab.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="text-sm flex flex-col grow overflow-hidden content-start">
     <div
-      class="flex items-center py-2 border-b border-neutral-700 bg-neutral-900 w-full"
+      class="flex items-center py-2 border-b border-neutral-700 dark:bg-neutral-900 bg-neutral-200 w-full"
     >
       <label for="address" class="text-xs font-bold px-4 py-2">Address</label>
       <input
         id="address"
         type="text"
-        class="text-xs font-mono bg-neutral-800 text-neutral-300 px-2 py-1 w-40 rounded"
+        class="text-xs font-mono dark:bg-neutral-800 bg-neutral-300 dark:text-neutral-300 text-neutral-800 px-2 py-1 w-40 rounded"
         v-model="settings.memory.address"
       />
 
@@ -30,7 +30,7 @@
       <label for="data-type" class="text-xs font-bold px-4 py-2">Type</label>
       <select
         id="data-type"
-        class="appearance-none text-xs bg-neutral-800 text-neutral-300 px-2 py-1 w-40 rounded"
+        class="appearance-none text-xs dark:bg-neutral-800 bg-neutral-300 dark:text-neutral-300 text-neutral-800 px-2 py-1 w-40 rounded"
         :value="settings.memory.mode"
         @input="setMode"
       >
@@ -41,7 +41,7 @@
     </div>
 
     <div class="text-right pt-4 overflow-auto grow shrink flex flex-col">
-      <div class="flex font-bold text-neutral-500">
+      <div class="flex font-bold dark:text-neutral-500 text-neutral-800">
         <div class="w-32 px-2 py-1 shrink-0">Address</div>
 
         <div
@@ -59,7 +59,7 @@
           :key="index"
           class="flex font-mono"
         >
-          <div class="w-32 px-2 py-1 text-neutral-500 shrink-0">
+          <div class="w-32 px-2 py-1 dark:text-neutral-500 text-neutral-800 shrink-0">
             {{ row.header }}
           </div>
 
@@ -70,7 +70,7 @@
             :model-value="item"
             :bytes="unitSize"
             @update:model-value="value => setAddress(row.address, index, value, settings.memory.mode)"
-            classes="bg-transparent hover:bg-neutral-700 w-28 flex items-center px-2 py-1 shrink-0 select-all"
+            classes="bg-transparent dark:hover:bg-neutral-700 hover:bg-neutral-300 w-28 flex items-center px-2 py-1 shrink-0 select-all"
           />
         </div>
       </div>
@@ -78,7 +78,7 @@
         <div
           class="flex font-mono"
         >
-          <div class="w-32 px-2 py-1 text-neutral-500 shrink-0">
+          <div class="w-32 px-2 py-1 dark:text-neutral-500 text-neutral-800 shrink-0">
             {{ settings.memory.address }}
           </div>
 
diff --git a/src/components/console/NumberField.vue b/src/components/console/NumberField.vue
index 33d6848..6445718 100644
--- a/src/components/console/NumberField.vue
+++ b/src/components/console/NumberField.vue
@@ -2,7 +2,7 @@
   <span class="inline-block relative group">
     <input
       type="text"
-      class="font-mono bg-neutral-800 text-neutral-300 px-2 py-1 rounded"
+      class="font-mono dark:bg-neutral-900 bg-neutral-300 dark:text-neutral-300 text-neutral-800 px-2 py-1 rounded"
       spellcheck="false"
       :class="[
         state.error !== null ? 'ring-2 ring-red-500' : '',
@@ -16,7 +16,7 @@
 
     <span
       v-if="state.error"
-      class="absolute top-6 py-2 px-4 bg-neutral-900 rounded shadow-xl z-30 w-80 text-red-400 font-medium font-sans hidden group-hover:block"
+      class="absolute top-6 py-2 px-4 dark:bg-neutral-900 bg-neutral-200 rounded shadow-xl z-30 w-80 text-red-400 font-medium font-sans hidden group-hover:block"
     >
       {{ state.error }}
     </span>
diff --git a/src/components/console/RegisterItem.vue b/src/components/console/RegisterItem.vue
index c06f5ed..42d345b 100644
--- a/src/components/console/RegisterItem.vue
+++ b/src/components/console/RegisterItem.vue
@@ -11,7 +11,7 @@
       v-if="props.value !== undefined"
       :classes="`
               pl-2 py-1 rounded
-              hover:bg-neutral-800 select-all cursor-text
+              dark:hover:bg-neutral-800 hover:bg-neutral-300 select-all cursor-text
               w-28 bg-transparent
               text-sm
               ${props.marked ? 'text-orange-200' : 'text-gray-100'}`"
diff --git a/src/components/console/RegistersTab.vue b/src/components/console/RegistersTab.vue
index 4306bb3..12b4e9f 100644
--- a/src/components/console/RegistersTab.vue
+++ b/src/components/console/RegistersTab.vue
@@ -33,7 +33,7 @@
     <div class="w-full h-12" />
 
     <div
-      class="absolute border border-neutral-800 bottom-0 right-0 bg-neutral-900 rounded text-neutral-300 text-xs mr-6 mb-6 overflow-hidden"
+      class="absolute border border-neutral-800 bottom-0 right-0 dark:bg-neutral-900 bg-neutral-200 rounded text-neutral-800 text-xs mr-6 mb-6 overflow-hidden"
     >
       <button
         class="px-3 py-1 transition-colors"
@@ -75,9 +75,9 @@ import RegisterItem from './RegisterItem.vue'
 
 function buttonClasses(format: RegisterFormat) {
   if (settings.registers.format === format) {
-    return 'hover:bg-slate-800 bg-neutral-800'
+    return 'hover:text-neutral-300 dark:text-neutral-300 text-neutral-300 hover:bg-slate-800 bg-neutral-800'
   } else {
-   return 'hover:bg-slate-700'
+   return 'hover:text-neutral-300 dark:text-neutral-300 text-neutral-800 hover:bg-slate-700'
   }
 }
 
@@ -133,19 +133,19 @@ interface OutlinedSection {
 const sections = [
   {
     name: 'System',
-    classes: 'text-purple-300',
+    classes: 'dark:text-purple-300 text-purple-700',
     indices: [0, 1, 26, 27, 28, 29, 30, 31],
     system: true,
   },
-  { name: 'Values', classes: 'text-red-300', indices: [2, 3, 4, 5, 6, 7] },
+  { name: 'Values', classes: 'dark:text-red-300 text-red-700', indices: [2, 3, 4, 5, 6, 7] },
   {
     name: 'Temporary',
-    classes: 'text-cyan-300',
+    classes: 'dark:text-cyan-300 text-cyan-700',
     indices: [8, 9, 10, 11, 12, 13, 14, 15, 24, 25],
   },
   {
     name: 'Saved',
-    classes: 'text-green-300',
+    classes: 'dark:text-green-300 text-green-700',
     indices: [16, 17, 18, 19, 20, 21, 22, 23],
   },
 ] as OutlinedSection[]
diff --git a/src/components/console/TestsTab.vue b/src/components/console/TestsTab.vue
index 9c68bce..7cf511e 100644
--- a/src/components/console/TestsTab.vue
+++ b/src/components/console/TestsTab.vue
@@ -18,7 +18,7 @@
     </div>
 
     <div class="w-full">
-      <div v-if="!state.items.length" class="bg-neutral-800 w-full rounded-lg p-4 flex items-center mb-2">
+      <div v-if="!state.items.length" class="dark:bg-neutral-800 bg-neutral-300 w-full rounded-lg p-4 flex items-center mb-2">
         <ExclamationCircleIcon class="w-6 h-6 mr-4" />
 
         No tests configured.
@@ -26,7 +26,7 @@
 
       <div
         v-for="item in state.items" :key="item.name"
-        class="bg-neutral-800 w-full rounded-lg px-4 py-3 flex items-center mb-2.5"
+        class="dark:bg-neutral-800 bg-neutral-300 w-full rounded-lg px-4 py-3 flex items-center mb-2.5"
       >
         <div v-if="item.result === 'Unset'">
           <EllipsisHorizontalCircleIcon class="w-5 h-5 text-blue-400" />
diff --git a/src/components/console/ToggleField.vue b/src/components/console/ToggleField.vue
index e601f57..9bd8d9a 100644
--- a/src/components/console/ToggleField.vue
+++ b/src/components/console/ToggleField.vue
@@ -1,14 +1,14 @@
 <template>
   <button
-    class="text-neutral-300 px-4 py-3 rounded-lg flex items-center transition-colors"
-    :class="{ [props.classes]: true, 'bg-neutral-800': !props.modelValue, 'bg-slate-800': props.modelValue }"
+    class="dark:text-neutral-300 text-neutral-800 px-4 py-3 rounded-lg flex items-center transition-colors"
+    :class="{ [props.classes]: true, 'dark:bg-neutral-800 bg-neutral-300': !props.modelValue, 'dark:bg-slate-800 bg-slate-300': props.modelValue }"
     @click="emit('update:modelValue', !props.modelValue)"
   >
     <span
       class="w-4 h-4 block rounded ring-2 ring-neutral-600 mr-4 flex items-center justify-center"
       :class="{'animate-bump ring-slate-600': props.modelValue}"
     >
-      <CheckIcon v-if="props.modelValue" class="text-gray-300 font-bold w-3 h-3" />
+      <CheckIcon v-if="props.modelValue" class="dark:text-gray-300 text-gray-800 font-bold w-3 h-3" />
     </span>
 
     <span class="text-sm uppercase font-bold">
diff --git a/src/style.css b/src/style.css
index f20c1d8..d5bd5d4 100644
--- a/src/style.css
+++ b/src/style.css
@@ -12,8 +12,7 @@ body {
 
   @apply overflow-auto;
 
-  @apply bg-neutral-900;
-  @apply text-slate-100;
+  @apply dark:text-slate-100 text-slate-900;
 }
 
 #app {
diff --git a/src/utils/languages/language.ts b/src/utils/languages/language.ts
index e548aa6..617248a 100644
--- a/src/utils/languages/language.ts
+++ b/src/utils/languages/language.ts
@@ -30,17 +30,17 @@ export interface Token {
 
 export const style = {
   known: 'font-bold',
-  comment: 'text-neutral-400',
-  hard: 'text-yellow-400',
-  label: 'text-amber-400',
-  directive: 'text-red-400',
-  parameter: 'text-orange-300',
-  instruction: 'text-sky-400',
-  register: 'text-orange-300',
-  numeric: 'text-teal-300',
-  symbol: 'text-white',
-  text: 'text-lime-300',
-  nothing: 'text-white',
+  comment: 'dark:text-neutral-400 text-neutral-500',
+  hard: 'dark:text-yellow-400 text-yellow-700',
+  label: 'dark:text-amber-400 text-amber-700',
+  directive: 'dark:text-red-400 text-red-700',
+  parameter: 'dark:text-orange-300 text-orange-800',
+  instruction: 'dark:text-sky-400 text-sky-700',
+  register: 'dark:text-orange-300 text-orange-800',
+  numeric: 'dark:text-teal-300 text-teal-800',
+  symbol: 'dark:text-white text-black',
+  text: 'dark:text-lime-300 text-lime-800',
+  nothing: 'dark:text-white text-black',
 }
 
 function mapStyle(type: TokenType): string {
diff --git a/src/utils/settings.ts b/src/utils/settings.ts
index 7eba4fb..ac53015 100644
--- a/src/utils/settings.ts
+++ b/src/utils/settings.ts
@@ -23,6 +23,7 @@ export interface EditorSettings {
   fontSize: number
   consoleFontSize: number
   enterAutocomplete: boolean
+  darkMode: boolean
 }
 
 export enum RegisterFormat {
@@ -67,7 +68,8 @@ function defaultSettings(): Settings {
       tabSize: 4,
       fontSize: 22,
       consoleFontSize: 16,
-      enterAutocomplete: true
+      enterAutocomplete: true,
+      darkMode: true
     },
     bitmap: {
       displayWidth: 64,
@@ -151,5 +153,11 @@ export function useSettings(): Settings {
     { deep: true }
   )
 
+  watch(
+    () => state.editor.darkMode,
+    (darkMode) => document.body.classList.toggle('dark', darkMode),
+    { immediate: true },
+  )
+
   return state
 }
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 121c608..f15e44c 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,5 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  darkMode: ['selector'],
+
   content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
 
   theme: {
@@ -9,7 +11,9 @@ module.exports = {
       },
       colors: {
         'breakpoint-neutral': '#2b1515',
+        'breakpoint-neutral-light': '#e0cccc',
         'breakpoint-stopped': '#3f3b18',
+        'breakpoint-stopped-light': '#e0decc',
         'readonly-neutral': '#2b2b15',
       },