diff --git a/resources/css/components/assets.css b/resources/css/components/assets.css
index 248c2d9efe1..fb421e429e0 100644
--- a/resources/css/components/assets.css
+++ b/resources/css/components/assets.css
@@ -33,8 +33,8 @@
     background: rgba(255, 255, 255, 0.9);
 
     .dark & {
-        @apply bg-dark-900/90;
-        border-color: var(--color-dark-600);
+        @apply bg-gray-900/90;
+        border-color: var(--color-gray-700);
     }
 }
 
@@ -42,7 +42,7 @@
    ========================================================================== */
 
 .asset-table-listing {
-    @apply relative overflow-hidden rounded-sm border dark:border-dark-900;
+    @apply relative overflow-hidden rounded-sm border dark:border-gray-900;
 
     table {
         @apply m-0 w-full select-none rounded-b border-none;
@@ -52,7 +52,7 @@
     }
 
     tbody tr:not(:last-child) {
-        @apply border-b dark:border-dark-900;
+        @apply border-b dark:border-gray-900;
     }
 
     tbody tr td {
diff --git a/resources/css/components/blueprints.css b/resources/css/components/blueprints.css
index 0c52cd49521..f0eee4ae81d 100644
--- a/resources/css/components/blueprints.css
+++ b/resources/css/components/blueprints.css
@@ -28,10 +28,10 @@
 }
 
 .blueprint-add-section-button {
-    @apply relative flex w-full items-center justify-center rounded-lg border border-dashed border-gray-500 text-gray-700 dark:border-dark-200 dark:text-dark-150;
+    @apply relative flex w-full items-center justify-center rounded-lg border border-dashed border-gray-500 text-gray-700 dark:border-gray-500 dark:text-gray-300;
 
     &:hover {
-        @apply border-gray text-gray-925 dark:border-dark-175 dark:text-dark-100;
+        @apply border-gray text-gray-925 dark:border-gray-400 dark:text-gray-200;
     }
 
     .blueprint-section-draggable-zone {
diff --git a/resources/css/components/fieldtypes/assets.css b/resources/css/components/fieldtypes/assets.css
index acf5856d715..f07290edd8f 100644
--- a/resources/css/components/fieldtypes/assets.css
+++ b/resources/css/components/fieldtypes/assets.css
@@ -7,7 +7,7 @@
 }
 
 .assets-fieldtype .assets-fieldtype-picker {
-    @apply flex flex-wrap items-center rounded-sm border bg-gray-200 px-4 py-2 dark:border-dark-900 dark:bg-dark-650;
+    @apply flex flex-wrap items-center rounded-sm border bg-gray-200 px-4 py-2 dark:border-gray-900 dark:bg-gray-800;
 
     &.is-expanded {
         @apply rounded-b-none border-b-0;
diff --git a/resources/css/components/fieldtypes/bard.css b/resources/css/components/fieldtypes/bard.css
index 249a3d0016d..d8cedf0797c 100644
--- a/resources/css/components/fieldtypes/bard.css
+++ b/resources/css/components/fieldtypes/bard.css
@@ -471,7 +471,7 @@
             .tableWrapper &,
             blockquote > .tableWrapper &,
             :is(ol, ul) li > .tableWrapper & {
-                @apply m-0 mb-4 w-full overflow-hidden bg-white text-sm dark:bg-dark-500 border-collapse table-fixed;
+                @apply m-0 mb-4 w-full overflow-hidden bg-white text-sm dark:bg-gray-600 border-collapse table-fixed;
 
                 th {
                     @apply bg-gray-200 font-bold dark:bg-gray-600 text-start;
diff --git a/resources/css/components/fieldtypes/grid.css b/resources/css/components/fieldtypes/grid.css
index d78adc7b870..107723272eb 100644
--- a/resources/css/components/fieldtypes/grid.css
+++ b/resources/css/components/fieldtypes/grid.css
@@ -2,7 +2,7 @@
 =================================================== */
 @layer ui {
     .grid-table {
-        @apply bg-white dark:bg-gray-900 relative w-full rounded-lg border shadow-ui-sm outline-hidden dark:border-gray-700 dark:text-dark-150 text-start;
+        @apply bg-white dark:bg-gray-900 relative w-full rounded-lg border shadow-ui-sm outline-hidden dark:border-gray-700 dark:text-gray-300 text-start;
         border-collapse: separate;
         border-spacing: 0;
         table-layout: auto;
diff --git a/resources/css/components/fieldtypes/markdown.css b/resources/css/components/fieldtypes/markdown.css
index f85aa694f2a..4ce20efc524 100644
--- a/resources/css/components/fieldtypes/markdown.css
+++ b/resources/css/components/fieldtypes/markdown.css
@@ -19,7 +19,7 @@
   ========================================================================== */
 
 .markdown-fieldtype .cm-header {
-    @apply text-gray-900 dark:text-dark-150;
+    @apply text-gray-900 dark:text-gray-300;
 
     &.cm-header-1 {
         @apply text-lg;
@@ -35,11 +35,11 @@
 }
 
 .markdown-fieldtype .cm-quote {
-    @apply text-sm italic text-gray-900 dark:text-dark-150;
+    @apply text-sm italic text-gray-900 dark:text-gray-300;
 }
 
 .markdown-fieldtype .cm-variable-2 {
-    @apply text-gray-900 dark:text-dark-150;
+    @apply text-gray-900 dark:text-gray-300;
 }
 
 .markdown-fieldtype .CodeMirror {
diff --git a/resources/css/components/fieldtypes/width.css b/resources/css/components/fieldtypes/width.css
index 6bfb9b754d3..04215a93ad0 100644
--- a/resources/css/components/fieldtypes/width.css
+++ b/resources/css/components/fieldtypes/width.css
@@ -5,18 +5,18 @@
     @apply relative flex h-5 w-12 cursor-pointer;
 
     .field-width-label {
-        @apply pointer-events-none absolute inset-0 z-10 flex w-full items-center justify-center text-center text-4xs font-bold text-gray-700 dark:text-dark-150;
+        @apply pointer-events-none absolute inset-0 z-10 flex w-full items-center justify-center text-center text-4xs font-bold text-gray-700 dark:text-gray-300;
     }
 
     .field-width-notch {
-        @apply relative flex-1 border border-gray-400 dark:border-dark-300 ltr:border-l-0 rtl:border-r-0;
+        @apply relative flex-1 border border-gray-400 dark:border-gray-600 ltr:border-l-0 rtl:border-r-0;
 
         &:first-of-type {
             @apply ltr:rounded-l-sm ltr:border-l rtl:rounded-r-sm rtl:border-r;
         }
 
         &.filled {
-            @apply -my-px border-gray-400 bg-white dark:border-dark-400 dark:bg-dark-575 ltr:border-r-0 ltr:pr-px rtl:border-l-0 rtl:pl-px;
+            @apply -my-px border-gray-400 bg-white dark:border-gray-600 dark:bg-gray-700 ltr:border-r-0 ltr:pr-px rtl:border-l-0 rtl:pl-px;
         }
 
         &.selected {
@@ -32,13 +32,13 @@
     @apply mt-px h-9 w-16;
 
     .field-width-notch {
-        @apply border-y-gray-500 border-r-gray-400 bg-gray-200 dark:border-dark-700 dark:border-y-dark-750 dark:bg-dark-550;
+        @apply border-y-gray-500 border-r-gray-400 bg-gray-200 dark:border-gray-800 dark:border-y-gray-800 dark:bg-gray-700;
         &:last-child {
-            @apply border-r-gray-500 dark:border-dark-750 ltr:rounded-r-sm rtl:rounded-l-sm;
+            @apply border-r-gray-500 dark:border-gray-800 ltr:rounded-r-sm rtl:rounded-l-sm;
         }
 
         &.filled {
-            @apply border-gray-500 bg-linear-to-b from-white to-gray-100 dark:border-dark-750 dark:from-dark-300 dark:to-dark-400;
+            @apply border-gray-500 bg-linear-to-b from-white to-gray-100 dark:border-gray-800 dark:from-gray-600 dark:to-gray-600;
         }
     }
 
diff --git a/resources/css/components/index-fields.css b/resources/css/components/index-fields.css
index 9d8c52be1d2..01bbe1e5aed 100644
--- a/resources/css/components/index-fields.css
+++ b/resources/css/components/index-fields.css
@@ -23,7 +23,7 @@
 }
 
 .status-index-field {
-    @apply inline-block shrink justify-center rounded-full bg-gray-200/55 px-2 py-0.5 text-center text-xs text-gray-900 dark:bg-gray-300/8 dark:text-dark-150;
+    @apply inline-block shrink justify-center rounded-full bg-gray-200/55 px-2 py-0.5 text-center text-xs text-gray-900 dark:bg-gray-300/8 dark:text-gray-300;
 
     &.status-published:not(.status-private) {
         @apply bg-green-200 text-green-900 dark:bg-green-300/6 dark:text-green-300;
@@ -40,6 +40,6 @@
 
     .role-index-field-item,
     .groups-index-field-item {
-        @apply mb-1 line-clamp-1 inline-block rounded-sm border bg-gray-100 px-1 text-2xs dark:border-dark-900 dark:bg-gray-700;
+        @apply mb-1 line-clamp-1 inline-block rounded-sm border bg-gray-100 px-1 text-2xs dark:border-gray-900 dark:bg-gray-700;
     }
 }
diff --git a/resources/css/components/notifications.css b/resources/css/components/notifications.css
index 45cfb86ce26..bc28e0a99e9 100644
--- a/resources/css/components/notifications.css
+++ b/resources/css/components/notifications.css
@@ -13,7 +13,7 @@
 }
 
 .toasted-container .toasted.statamic {
-    @apply mt-4 rounded-xl bg-white p-0 text-base text-gray-900 shadow dark:bg-dark-900 dark:text-dark-100;
+    @apply mt-4 rounded-xl bg-white p-0 text-base text-gray-900 shadow dark:bg-gray-900 dark:text-gray-200;
     height: 45px;
 
     i {
@@ -29,15 +29,15 @@
     }
 
     &.default i {
-        @apply bg-gray-800 dark:bg-dark-900;
+        @apply bg-gray-800 dark:bg-gray-900;
     }
 
     .action {
-        @apply m-0 flex h-full items-center px-4 text-xl font-normal text-gray-600 dark:text-dark-150 ms-2 opacity-50;
+        @apply m-0 flex h-full items-center px-4 text-xl font-normal text-gray-600 dark:text-gray-300 ms-2 opacity-50;
         /* Compensate for the "x" button being a slightly bigger font-size */
         transform: translateY(-1.5px);
         &:hover {
-            @apply text-gray-900 no-underline dark:text-dark-100;
+            @apply text-gray-900 no-underline dark:text-gray-200;
         }
     }
 }
\ No newline at end of file
diff --git a/resources/css/components/pagination.css b/resources/css/components/pagination.css
index 7a1e25137f1..0ddd36f734d 100644
--- a/resources/css/components/pagination.css
+++ b/resources/css/components/pagination.css
@@ -6,15 +6,15 @@
     @apply flex list-none items-center justify-center overflow-hidden rounded-sm p-0 shadow dark:shadow-lg;
 
     li a {
-        @apply block h-full bg-white px-3 py-2 text-gray-900 dark:border-dark-900 dark:bg-dark-600 dark:text-dark-150 ltr:border-r rtl:border-l;
+        @apply block h-full bg-white px-3 py-2 text-gray-900 dark:border-gray-900 dark:bg-gray-700 dark:text-gray-300 ltr:border-r rtl:border-l;
 
         &:hover {
-            @apply bg-gray-100 text-gray-900 dark:bg-gray-850 dark:text-dark-100;
+            @apply bg-gray-100 text-gray-900 dark:bg-gray-850 dark:text-gray-200;
         }
     }
 
     li > .unclickable {
-        @apply block h-full bg-white px-3 py-2 text-gray-500 dark:border-dark-900 dark:bg-dark-600 dark:text-dark-200 ltr:border-r rtl:border-l;
+        @apply block h-full bg-white px-3 py-2 text-gray-500 dark:border-gray-900 dark:bg-gray-700 dark:text-gray-500 ltr:border-r rtl:border-l;
 
         &:hover {
             cursor: text;
diff --git a/resources/css/components/popover.css b/resources/css/components/popover.css
index f04c114aac1..ba3667cb7f9 100644
--- a/resources/css/components/popover.css
+++ b/resources/css/components/popover.css
@@ -55,12 +55,12 @@
 }
 
 .rotating-dots-button {
-    @apply flex items-center justify-center rounded-full text-gray-700 dark:text-dark-150;
+    @apply flex items-center justify-center rounded-full text-gray-700 dark:text-gray-300;
     height: 20px;
     width: 20px;
 
     &:hover {
-        @apply text-gray-925 dark:text-dark-100;
+        @apply text-gray-925 dark:text-gray-200;
     }
 
     &:focus {
diff --git a/resources/css/components/preview.css b/resources/css/components/preview.css
index 8a2d0c6d677..857fc52ab44 100644
--- a/resources/css/components/preview.css
+++ b/resources/css/components/preview.css
@@ -5,7 +5,7 @@
 .live-preview-header {
     @apply 
         relative flex h-13 items-center justify-between py-2 shadow-md ps-7 pe-4
-        bg-white dark:bg-dark-800 border-b border-gray-300 dark:border-gray-700
+        bg-white dark:bg-gray-850 border-b border-gray-300 dark:border-gray-700
     ;
     z-index: 2;
 }
@@ -16,7 +16,7 @@
 }
 
 .live-preview-editor {
-    @apply relative flex h-full bg-white dark:bg-dark-800;
+    @apply relative flex h-full bg-white dark:bg-gray-850;
     z-index: 3;
 }
 
@@ -35,7 +35,7 @@
 }
 
 .live-preview .tabs-container {
-    @apply mb-0 bg-gray-300 dark:bg-dark-550;
+    @apply mb-0 bg-gray-300 dark:bg-gray-700;
     @apply @4xl/live-preview:mb-6;
 }
 
diff --git a/resources/css/components/publish.css b/resources/css/components/publish.css
index 992c187f9a8..9dcd0227e5a 100644
--- a/resources/css/components/publish.css
+++ b/resources/css/components/publish.css
@@ -120,7 +120,7 @@ Here flexbox is much better suited to create a layout that grows to fill space.
 }
 
 .publish-section-header {
-    @apply rounded-t-lg border-b border-gray-400 bg-gray-100 dark:border-dark-900 dark:bg-gray-850;
+    @apply rounded-t-lg border-b border-gray-400 bg-gray-100 dark:border-gray-900 dark:bg-gray-850;
 }
 
 .publish-section-header-inner {
diff --git a/resources/css/components/tabs.css b/resources/css/components/tabs.css
index 2755ce55be1..e6706a5b0e3 100644
--- a/resources/css/components/tabs.css
+++ b/resources/css/components/tabs.css
@@ -3,11 +3,11 @@
    ========================================================================== */
 
 .tabs-container {
-    @apply relative mb-6 flex w-full border-b text-sm dark:border-dark-500;
+    @apply relative mb-6 flex w-full border-b text-sm dark:border-gray-600;
 
     .fade-left,
     .fade-right {
-        @apply pointer-events-none absolute inset-y-0 z-2 w-4 from-gray-300 dark:from-dark-800;
+        @apply pointer-events-none absolute inset-y-0 z-2 w-4 from-gray-300 dark:from-gray-850;
     }
 
     .fade-left {
@@ -21,7 +21,7 @@
 
 .card .tabs-container .fade-left,
 .card .tabs-container .fade-right {
-    @apply from-white dark:from-dark-600;
+    @apply from-white dark:from-gray-700;
 }
 
 .tabs {
@@ -32,9 +32,9 @@
 }
 
 .tab-button {
-    @apply flex shrink-0 select-none items-center whitespace-nowrap border-b-2 border-transparent px-2 py-2 text-gray-700 dark:text-dark-150;
+    @apply flex shrink-0 select-none items-center whitespace-nowrap border-b-2 border-transparent px-2 py-2 text-gray-700 dark:text-gray-300;
     &:hover {
-        @apply text-gray-900 dark:text-dark-100;
+        @apply text-gray-900 dark:text-gray-200;
     }
     &:focus-visible {
         @apply rounded-t outline-hidden ring-2 ring-inset ring-blue-500 dark:ring-dark-blue-100;
@@ -57,14 +57,14 @@
   ========================================================================== */
 
 .pill-tab {
-    @apply flex items-center rounded-sm px-2 py-1 text-gray-700 focus:outline-hidden dark:text-dark-175;
+    @apply flex items-center rounded-sm px-2 py-1 text-gray-700 focus:outline-hidden dark:text-gray-400;
 
     &:hover {
-        @apply text-gray-900 dark:text-dark-100;
+        @apply text-gray-900 dark:text-gray-200;
     }
 
     &.active {
-        @apply bg-blue-100 text-blue-900 dark:bg-dark-400 dark:text-dark-150;
+        @apply bg-blue-100 text-blue-900 dark:bg-gray-600 dark:text-gray-300;
     }
 }
 
diff --git a/resources/css/core/typography.css b/resources/css/core/typography.css
index 50f918d9a0d..6f75b1a5dfc 100644
--- a/resources/css/core/typography.css
+++ b/resources/css/core/typography.css
@@ -77,7 +77,7 @@
 }
 
 body {
-    @apply font-sans text-base tracking-normal text-gray-900 dark:text-white;
+    @apply font-sans text-base tracking-normal text-gray-900 dark:text-gray-50;
     font-variant: common-ligatures tabular-nums;
     font-feature-settings:
         'zero',
diff --git a/resources/css/core/utilities.css b/resources/css/core/utilities.css
index 4ab4fe7b542..9f95efe8e51 100644
--- a/resources/css/core/utilities.css
+++ b/resources/css/core/utilities.css
@@ -170,7 +170,7 @@
     background: rgba(255, 255, 255, 0.9);
 
     .dark & {
-        @apply bg-dark-600/90;
+        @apply bg-gray-700/90;
     }
 
     .inner {
diff --git a/resources/css/dark.css b/resources/css/dark.css
index 49254c6317a..64ee69737ff 100644
--- a/resources/css/dark.css
+++ b/resources/css/dark.css
@@ -2,13 +2,13 @@
 
 .dark {
     input:-webkit-autofill {
-        -webkit-box-shadow: inset 0 0 0 50px var(--color-dark-250);
-        -webkit-text-fill-color: var(--color-dark-150);
+        -webkit-box-shadow: inset 0 0 0 50px var(--color-gray-500);
+        -webkit-text-fill-color: var(--color-gray-300);
 
         &:focus,
         &:active {
-            -webkit-box-shadow: inset 0 0 0 50px var(--color-dark-200) !important;
-            -webkit-text-fill-color: var(--color-dark-100);
+            -webkit-box-shadow: inset 0 0 0 50px var(--color-gray-500) !important;
+            -webkit-text-fill-color: var(--color-gray-200);
         }
     }
 
diff --git a/resources/css/ui.css b/resources/css/ui.css
index f0c41e2fd8f..16816ecbe18 100644
--- a/resources/css/ui.css
+++ b/resources/css/ui.css
@@ -96,28 +96,6 @@
     --color-rose-850: oklch(0.433 0.174 11.985);
     --color-rose-925: oklch(0.3862 0.1498 10.413);
 
-    /* Temp */
-    --color-dark-100: #dfe1e5;
-    --color-dark-150: #bbbdc0;
-    --color-dark-175: #93979a;
-    --color-dark-200: #5f6163;
-    --color-dark-250: #555759;
-    --color-dark-275: #515356;
-    --color-dark-300: #4e5157;
-    --color-dark-350: #43454a;
-    --color-dark-400: #414245;
-    --color-dark-500: #404143;
-    --color-dark-550: #3b3f41;
-    --color-dark-575: #393b40;
-    --color-dark-600: #2b2d30;
-    --color-dark-650: #242628;
-    --color-dark-700: #212223;
-    --color-dark-750: #22242a;
-    --color-dark-800: #1e1f22;
-    --color-dark-900: #171717;
-    --color-dark-950: #161616;
-    --color-dark-975: #131314;
-
     --color-dark-blue-100: #2870F5;
     --color-dark-blue-125: #1e68f1;
     --color-dark-blue-150: #1f67ec;
diff --git a/resources/js/components/assets/Editor/Editor.vue b/resources/js/components/assets/Editor/Editor.vue
index abe2b5771cb..58468aadd00 100644
--- a/resources/js/components/assets/Editor/Editor.vue
+++ b/resources/js/components/assets/Editor/Editor.vue
@@ -1,7 +1,7 @@
 <template>
     <Stack size="full" open inset ref="stack" :before-close="shouldClose" @update:open="$emit('closed')" :show-close-button="false">
         <div
-            class="asset-editor relative flex h-full flex-col rounded-sm bg-gray-100 dark:bg-dark-800"
+            class="asset-editor relative flex h-full flex-col rounded-sm bg-gray-100 dark:bg-gray-850"
             :class="isImage ? 'is-image' : 'is-file'"
         >
             <div v-if="loading" class="loading">
diff --git a/resources/js/components/assets/Editor/FocalPointEditor.vue b/resources/js/components/assets/Editor/FocalPointEditor.vue
index c16952e7ca6..f91f801f5a0 100644
--- a/resources/js/components/assets/Editor/FocalPointEditor.vue
+++ b/resources/js/components/assets/Editor/FocalPointEditor.vue
@@ -45,7 +45,7 @@
                         <Button variant="primary" :text="__('Finish')" @click="select" />
                     </div>
                 </div>
-                <h6 class="rounded-b bg-gray-100  p-4 text-center  dark:bg-dark-800">
+                <h6 class="rounded-b bg-gray-100  p-4 text-center  dark:bg-gray-850">
                     {{ __('messages.focal_point_previews_are_examples') }}
                 </h6>
             </Card>
diff --git a/resources/js/components/blueprints/LinkFields.vue b/resources/js/components/blueprints/LinkFields.vue
index 0ad2b96c410..80756ea5e28 100644
--- a/resources/js/components/blueprints/LinkFields.vue
+++ b/resources/js/components/blueprints/LinkFields.vue
@@ -27,14 +27,14 @@
                                 <div class="flex items-center">
                                     <span
                                         v-text="option.fieldset"
-                                        class="text-2xs text-gray-500 dark:text-dark-150 ltr:mr-2 rtl:ml-2"
+                                        class="text-2xs text-gray-500 dark:text-gray-300 ltr:mr-2 rtl:ml-2"
                                     />
                                     <span v-text="option.label" />
                                 </div>
                             </template>
                             <template #no-options>
                                 <div
-                                    class="px-4 py-2 text-sm text-gray-700 dark:text-dark-200 ltr:text-left rtl:text-right"
+                                    class="px-4 py-2 text-sm text-gray-700 dark:text-gray-500 ltr:text-left rtl:text-right"
                                     v-text="__('No options to choose from.')"
                                 />
                             </template>
@@ -50,9 +50,9 @@
                     />
 
                     <div class="my-4 flex items-center">
-                        <div class="flex-1 border-b border-gray-300 dark:border-dark-200" />
-                        <div class="mx-4 text-2xs text-gray-600 dark:text-dark-175" v-text="__('or')"></div>
-                        <div class="flex-1 border-b border-gray-300 dark:border-dark-200" />
+                        <div class="flex-1 border-b border-gray-300 dark:border-gray-500" />
+                        <div class="mx-4 text-2xs text-gray-600 dark:text-gray-400" v-text="__('or')"></div>
+                        <div class="flex-1 border-b border-gray-300 dark:border-gray-500" />
                     </div>
 
                     <Field
@@ -69,7 +69,7 @@
                         >
                             <template #no-options>
                                 <div
-                                    class="px-4 py-2 text-sm text-gray-700 dark:text-dark-200 ltr:text-left rtl:text-right"
+                                    class="px-4 py-2 text-sm text-gray-700 dark:text-gray-500 ltr:text-left rtl:text-right"
                                     v-text="__('No options to choose from.')"
                                 />
                             </template>
diff --git a/resources/js/components/field-conditions/Builder.vue b/resources/js/components/field-conditions/Builder.vue
index f78c7d6ef44..895c9484e88 100644
--- a/resources/js/components/field-conditions/Builder.vue
+++ b/resources/js/components/field-conditions/Builder.vue
@@ -25,7 +25,7 @@
                 @removed="remove(index)"
             />
 
-            <div class="border-t pt-6 dark:border-dark-900" v-if="hasConditions && isStandard">
+            <div class="border-t pt-6 dark:border-gray-900" v-if="hasConditions && isStandard">
                 <Button :text="__('Add Condition')" @click="add" />
             </div>
         </div>
diff --git a/resources/js/components/field-conditions/Condition.vue b/resources/js/components/field-conditions/Condition.vue
index c4794abc566..213a2f3649b 100644
--- a/resources/js/components/field-conditions/Condition.vue
+++ b/resources/js/components/field-conditions/Condition.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="flex flex-wrap items-center border-t space-x-4 py-4 dark:border-dark-900">
+    <div class="flex flex-wrap items-center border-t space-x-4 py-4 dark:border-gray-900">
         <Description v-if="index === 0" class="w-full mb-4" :text="__('messages.field_conditions_field_instructions')" />
 
         <div class="mb-2 w-full md:mb-0 md:w-1/3">
@@ -18,7 +18,7 @@
                         <span v-text="option.label" />
                         <span
                             v-text="option.value"
-                            class="font-mono text-2xs text-gray-500 dark:text-dark-150"
+                            class="font-mono text-2xs text-gray-500 dark:text-gray-300"
                             :class="{ 'ml-2': option.label }"
                         />
                     </div>
diff --git a/resources/js/components/fieldtypes/GroupFieldtype.vue b/resources/js/components/fieldtypes/GroupFieldtype.vue
index efc8dde3b22..fcfcab4ceac 100644
--- a/resources/js/components/fieldtypes/GroupFieldtype.vue
+++ b/resources/js/components/fieldtypes/GroupFieldtype.vue
@@ -11,7 +11,7 @@
                 </publish-field-fullscreen-header>
                 <section :class="{ 'mt-14 p-4': fullScreenMode }">
                     <div :class="{
-                        'bg-white dark:bg-gray-800 dark:border-dark-900 rounded-lg border': config.border,
+                        'bg-white dark:bg-gray-800 dark:border-gray-900 rounded-lg border': config.border,
                         'hidden' : isCollapsed && !fullScreenMode
                     }">
                         <FieldsProvider
diff --git a/resources/js/components/fieldtypes/assets/AssetRow.vue b/resources/js/components/fieldtypes/assets/AssetRow.vue
index 301fbc0416b..b8dbbdc2009 100644
--- a/resources/js/components/fieldtypes/assets/AssetRow.vue
+++ b/resources/js/components/fieldtypes/assets/AssetRow.vue
@@ -1,6 +1,6 @@
 <template>
     <!-- Safari doesn't support `position: relative` on `<tr>` elements, but these two properties can be used as an alternative. Source: https://mtsknn.fi/blog/relative-tr-in-safari/ transform: translate(0); clip-path: inset(0); -->
-    <tr class="group relative cursor-grab bg-white hover:bg-gray-50 dark:bg-gray-900 dark:hover:bg-gray-900 border-b dark:border-dark-500 last:border-b-0" style="transform: translate(0); clip-path: inset(0);">
+    <tr class="group relative cursor-grab bg-white hover:bg-gray-50 dark:bg-gray-900 dark:hover:bg-gray-900 border-b dark:border-gray-600 last:border-b-0" style="transform: translate(0); clip-path: inset(0);">
         <td class="flex gap-2 sm:gap-3 h-full items-center p-3">
             <div
                 v-if="canShowSvg"
diff --git a/resources/js/components/fieldtypes/bard/Image.vue b/resources/js/components/fieldtypes/bard/Image.vue
index b363460a8a0..dbb9abb52da 100644
--- a/resources/js/components/fieldtypes/bard/Image.vue
+++ b/resources/js/components/fieldtypes/bard/Image.vue
@@ -12,7 +12,7 @@
             </div>
 
             <div
-                class="flex flex-wrap items-center justify-center gap-2 border-t px-2 py-2 text-center text-2xs text-white @container/toolbar dark:border-dark-900 dark:text-dark-150"
+                class="flex flex-wrap items-center justify-center gap-2 border-t px-2 py-2 text-center text-2xs text-white @container/toolbar dark:border-gray-900 dark:text-gray-300"
             >
                 <Button v-if="!src" size="sm" icon="folder-photos" :text="__('Choose Image')" @click="openSelector" />
 
@@ -24,7 +24,7 @@
 
             <div
                 v-if="showingAltEdit"
-                class="flex items-center rounded-b border-t p-2 dark:border-dark-900"
+                class="flex items-center rounded-b border-t p-2 dark:border-gray-900"
                 @paste.stop
             >
                 <Input
diff --git a/resources/js/components/inputs/relationship/Selector.vue b/resources/js/components/inputs/relationship/Selector.vue
index a4d7a4ca21b..efa28469d29 100644
--- a/resources/js/components/inputs/relationship/Selector.vue
+++ b/resources/js/components/inputs/relationship/Selector.vue
@@ -100,7 +100,7 @@
                 </div>
             </template>
 
-            <footer class="flex items-center justify-between border-t dark:border-dark-900 bg-gray-100 dark:bg-gray-800 p-4 rounded-es-xl">
+            <footer class="flex items-center justify-between border-t dark:border-gray-900 bg-gray-100 dark:bg-gray-800 p-4 rounded-es-xl">
                 <ui-badge
                     v-text="
                         hasMaxSelections
diff --git a/resources/js/components/structures/PageEditor.vue b/resources/js/components/structures/PageEditor.vue
index d11eae64b29..02fe429723f 100644
--- a/resources/js/components/structures/PageEditor.vue
+++ b/resources/js/components/structures/PageEditor.vue
@@ -20,7 +20,7 @@
             <div v-if="!loading" class="flex-1 overflow-auto px-1 pt-4">
                 <div
                     v-if="saving"
-                    class="absolute inset-0 z-10 flex items-center justify-center bg-white bg-opacity-75 dark:bg-dark-500"
+                    class="absolute inset-0 z-10 flex items-center justify-center bg-white bg-opacity-75 dark:bg-gray-600"
                 >
                     <Icon name="loading" />
                 </div>
@@ -42,7 +42,7 @@
 
             <div
                 v-if="!loading && (!readOnly || type === 'entry')"
-                class="flex flex-wrap flex-row-reverse gap-2 items-end justify-between border-t bg-gray-200 p-4 dark:border-dark-900 dark:bg-dark-600"
+                class="flex flex-wrap flex-row-reverse gap-2 items-end justify-between border-t bg-gray-200 p-4 dark:border-gray-900 dark:bg-gray-700"
             >
                 <div class="flex flex-wrap justify-end" v-if="!readOnly">
                     <Button variant="ghost" class="me-2" :text="__('Cancel')" @click="confirmClose" />
diff --git a/resources/js/components/ui/LivePreview/LivePreview.vue b/resources/js/components/ui/LivePreview/LivePreview.vue
index 79886dcfd58..52de68f3ef6 100644
--- a/resources/js/components/ui/LivePreview/LivePreview.vue
+++ b/resources/js/components/ui/LivePreview/LivePreview.vue
@@ -299,7 +299,7 @@ Statamic.$events.$on(`live-preview.${name.value}.refresh`, () => {
         <div class="live-preview fixed flex flex-col">
             <transition name="live-preview-header-slide">
                 <div v-show="headerVisible" class="live-preview-header">
-                    <div class="dark:text-dark-150 text-base font-medium text-gray-700 ltr:mr-4 rtl:ml-4">
+                    <div class="dark:text-gray-300 text-base font-medium text-gray-700 ltr:mr-4 rtl:ml-4">
                         {{ __('Live Preview') }}
                     </div>
                     <div class="flex items-center gap-x-2">
diff --git a/resources/js/pages/utilities/Index.vue b/resources/js/pages/utilities/Index.vue
index 31733f64f6a..617c16b7831 100644
--- a/resources/js/pages/utilities/Index.vue
+++ b/resources/js/pages/utilities/Index.vue
@@ -18,7 +18,7 @@ defineProps(['utilities']);
                     v-for="utility in utilities"
                     :key="utility.url"
                     :href="utility.url"
-                    class="group w-full items-start rounded-md border border-transparent px-2 py-3 lg:p-4 hover:bg-gray-100 dark:hover:border-dark-400 dark:hover:bg-dark-575 md:flex lg:w-1/2"
+                    class="group w-full items-start rounded-md border border-transparent px-2 py-3 lg:p-4 hover:bg-gray-100 dark:hover:bg-gray-800 md:flex lg:w-1/2"
                 >
                     <div class="size-6 text-gray-400 mt-1 mb-2 me-4" v-html="utility.icon" />
                     <div class="flex-1 md:me-6">