diff --git a/package-lock.json b/package-lock.json
index f6b589a..3381ca1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1594,9 +1594,9 @@
       }
     },
     "node_modules/@tsconfig/node22": {
-      "version": "22.0.1",
-      "resolved": "https://registry.npmjs.org/@tsconfig/node22/-/node22-22.0.1.tgz",
-      "integrity": "sha512-VkgOa3n6jvs1p+r3DiwBqeEwGAwEvnVCg/hIjiANl5IEcqP3G0u5m8cBJspe1t9qjZRlZ7WFgqq5bJrGdgAKMg==",
+      "version": "22.0.2",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node22/-/node22-22.0.2.tgz",
+      "integrity": "sha512-Kmwj4u8sDRDrMYRoN9FDEcXD8UpBSaPQQ24Gz+Gamqfm7xxn+GBR7ge/Z7pK8OXNGyUzbSwJj+TH6B+DS/epyA==",
       "dev": true,
       "license": "MIT"
     },
@@ -1624,9 +1624,9 @@
       }
     },
     "node_modules/@types/node": {
-      "version": "22.15.18",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.15.18.tgz",
-      "integrity": "sha512-v1DKRfUdyW+jJhZNEI1PYy29S2YRxMV5AOO/x/SjKmW0acCIOqmbj6Haf9eHAhsPmrhlHSxEhv/1WszcLWV4cg==",
+      "version": "22.15.20",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.15.20.tgz",
+      "integrity": "sha512-A6BohGFRGHAscJsTslDCA9JG7qSJr/DWUvrvY8yi9IgnGtMxCyat7vvQ//MFa0DnLsyuS3wYTpLdw4Hf+Q5JXw==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
@@ -3048,9 +3048,9 @@
       }
     },
     "node_modules/marked": {
-      "version": "15.0.11",
-      "resolved": "https://registry.npmjs.org/marked/-/marked-15.0.11.tgz",
-      "integrity": "sha512-1BEXAU2euRCG3xwgLVT1y0xbJEld1XOrmRJpUwRCcy7rxhSCwMrmEu9LXoPhHSCJG41V7YcQ2mjKRr5BA3ITIA==",
+      "version": "15.0.12",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-15.0.12.tgz",
+      "integrity": "sha512-8dD6FusOQSrpv9Z1rdNMdlSgQOIP880DHqnohobOmYLElGEqAL/JvxvuxZO16r4HtjTlfPRDC1hbvxC9dPN2nA==",
       "license": "MIT",
       "bin": {
         "marked": "bin/marked.js"
@@ -4094,9 +4094,9 @@
       "license": "MIT"
     },
     "node_modules/tapable": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
-      "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.2.tgz",
+      "integrity": "sha512-Re10+NauLTMCudc7T5WLFLAwDhQ0JWdrMK+9B2M8zR5hRExKmsRDCBA7/aV/pNJFltmBFO5BAMlQFi/vq3nKOg==",
       "license": "MIT",
       "engines": {
         "node": ">=6"
diff --git a/public/CHANGELOG.md b/public/CHANGELOG.md
index 78653fe..04d7f85 100644
--- a/public/CHANGELOG.md
+++ b/public/CHANGELOG.md
@@ -1,5 +1,8 @@
 All notable changes to this project will be documented in this file.
 
+## [1.9.0] - 2025-05-20
+- Fixed splitter UI in dark mode
+
 ## [1.8.0] - 2025-05-18
 - Improved app for mobile users
 - Added PayPal donation link
diff --git a/src/components/SpritesheetSplitter.vue b/src/components/SpritesheetSplitter.vue
index e27aa60..4d8e7fc 100644
--- a/src/components/SpritesheetSplitter.vue
+++ b/src/components/SpritesheetSplitter.vue
@@ -3,49 +3,68 @@
     <div class="space-y-6">
       <div class="flex flex-col space-y-4">
         <div class="flex items-center justify-center mb-4">
-          <img :src="imageUrl" alt="Spritesheet" class="max-w-full max-h-48 sm:max-h-64 border border-gray-300 rounded-lg" :style="settingsStore.pixelPerfect ? { 'image-rendering': 'pixelated' } : {}" />
+          <img :src="imageUrl" alt="Spritesheet" class="max-w-full max-h-48 sm:max-h-64 border border-gray-300 dark:border-gray-600 rounded-lg" :style="settingsStore.pixelPerfect ? { 'image-rendering': 'pixelated' } : {}" />
         </div>
 
         <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
           <div class="space-y-2">
-            <label for="detection-method" class="block text-sm font-medium text-gray-700">Detection Method</label>
-            <select id="detection-method" v-model="detectionMethod" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" data-umami-event="spritesheet-detection-method">
+            <label for="detection-method" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Detection Method</label>
+            <select
+              id="detection-method"
+              v-model="detectionMethod"
+              class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 dark:focus:border-blue-400"
+              data-umami-event="spritesheet-detection-method"
+            >
               <option value="manual">Manual (specify rows and columns)</option>
               <option value="auto">Auto-detect (experimental)</option>
             </select>
           </div>
 
           <div v-if="detectionMethod === 'auto'" class="space-y-2">
-            <label for="sensitivity" class="block text-sm font-medium text-gray-700">Detection Sensitivity</label>
-            <input type="range" id="sensitivity" v-model="sensitivity" min="1" max="100" class="w-full" data-umami-event="spritesheet-sensitivity" />
-            <div class="text-xs text-gray-500 flex justify-between">
+            <label for="sensitivity" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Detection Sensitivity</label>
+            <input type="range" id="sensitivity" v-model="sensitivity" min="1" max="100" class="w-full dark:accent-blue-400" data-umami-event="spritesheet-sensitivity" />
+            <div class="text-xs text-gray-500 dark:text-gray-400 flex justify-between">
               <span>Low</span>
               <span>High</span>
             </div>
           </div>
 
           <div v-if="detectionMethod === 'manual'" class="space-y-2">
-            <label for="rows" class="block text-sm font-medium text-gray-700">Rows</label>
-            <input type="number" id="rows" v-model.number="rows" min="1" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" data-umami-event="spritesheet-rows" />
+            <label for="rows" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Rows</label>
+            <input
+              type="number"
+              id="rows"
+              v-model.number="rows"
+              min="1"
+              class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 dark:focus:border-blue-400"
+              data-umami-event="spritesheet-rows"
+            />
           </div>
 
           <div v-if="detectionMethod === 'manual'" class="space-y-2">
-            <label for="columns" class="block text-sm font-medium text-gray-700">Columns</label>
-            <input type="number" id="columns" v-model.number="columns" min="1" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" data-umami-event="spritesheet-columns" />
+            <label for="columns" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Columns</label>
+            <input
+              type="number"
+              id="columns"
+              v-model.number="columns"
+              min="1"
+              class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 dark:focus:border-blue-400"
+              data-umami-event="spritesheet-columns"
+            />
           </div>
         </div>
 
         <div class="space-y-2">
           <div class="flex items-center">
-            <input type="checkbox" id="remove-empty" v-model="removeEmpty" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" data-umami-event="spritesheet-remove-empty" />
-            <label for="remove-empty" class="ml-2 block text-sm text-gray-700"> Remove empty sprites (transparent/background color) </label>
+            <input type="checkbox" id="remove-empty" v-model="removeEmpty" class="h-4 w-4 text-blue-600 dark:text-blue-400 focus:ring-blue-500 dark:focus:ring-blue-400 border-gray-300 dark:border-gray-600 rounded" data-umami-event="spritesheet-remove-empty" />
+            <label for="remove-empty" class="ml-2 block text-sm text-gray-700 dark:text-gray-300"> Remove empty sprites (transparent/background color) </label>
           </div>
         </div>
 
         <div v-if="previewSprites.length > 0" class="space-y-2">
-          <h3 class="text-sm font-medium text-gray-700">Preview ({{ previewSprites.length }} sprites)</h3>
-          <div class="grid grid-cols-3 sm:grid-cols-6 md:grid-cols-8 gap-2 max-h-40 overflow-y-auto p-2 border border-gray-200 rounded-lg">
-            <div v-for="(sprite, index) in previewSprites" :key="index" class="relative border border-gray-300 rounded bg-gray-100 flex items-center justify-center" :style="{ width: '80px', height: '80px' }">
+          <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300">Preview ({{ previewSprites.length }} sprites)</h3>
+          <div class="grid grid-cols-3 sm:grid-cols-6 md:grid-cols-8 gap-2 max-h-40 overflow-y-auto p-2 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800">
+            <div v-for="(sprite, index) in previewSprites" :key="index" class="relative border border-gray-300 dark:border-gray-600 rounded bg-gray-100 dark:bg-gray-700 flex items-center justify-center" :style="{ width: '80px', height: '80px' }">
               <img :src="sprite.url" alt="Sprite preview" class="max-w-full max-h-full" :style="settingsStore.pixelPerfect ? { 'image-rendering': 'pixelated' } : {}" />
             </div>
           </div>
@@ -53,10 +72,16 @@
       </div>
 
       <div class="flex flex-col-reverse sm:flex-row sm:justify-end space-y-3 space-y-reverse sm:space-y-0 sm:space-x-3">
-        <button @click="cancel" class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" data-umami-event="spritesheet-cancel">Cancel</button>
+        <button
+          @click="cancel"
+          class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800"
+          data-umami-event="spritesheet-cancel"
+        >
+          Cancel
+        </button>
         <button
           @click="confirm"
-          class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+          class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800"
           :disabled="previewSprites.length === 0 || isProcessing"
           data-umami-event="spritesheet-split"
         >