Merge branch 'milomg-light' into staging

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),
   }

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>

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>
 

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,20 +12,20 @@
         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>
 
       <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" />

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 }})

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>

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>
 

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>

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

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" />

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"

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"
           >