diff --git a/packages/ui/src/Checkbox/Item.vue b/packages/ui/src/Checkbox/Item.vue
index 641c7962083..478a0f0e3d8 100644
--- a/packages/ui/src/Checkbox/Item.vue
+++ b/packages/ui/src/Checkbox/Item.vue
@@ -35,8 +35,8 @@ const checkboxClasses = computed(() => {
             'shadow-ui-xs mt-0.5 cursor-default rounded-sm border border-gray-400/75 bg-white',
             'dark:bg-gray-500 dark:border-gray-900',
             'data-[state=checked]:border-ui-accent-bg data-[state=checked]:bg-ui-accent-bg',
-            'dark:border-none dark:data-[state=checked]:bg-dark-ui-accent-bg dark:data-[state=checked]:border-dark-ui-accent-bg',
-            'dark:data-[disabled]:bg-dark-ui-accent-bg/60 dark:data-[disabled]:border-dark-ui-accent-bg/70',
+            'dark:border-none',
+            'dark:data-[disabled]:bg-ui-accent-bg/60 dark:data-[disabled]:border-ui-accent-bg/70',
             'dark:data-[disabled]:text-gray-400 dark:data-[disabled]:cursor-not-allowed',
             'shrink-0'
         ],
diff --git a/packages/ui/src/Radio/Item.vue b/packages/ui/src/Radio/Item.vue
index d0ada2af6be..6c80eb2a7bd 100644
--- a/packages/ui/src/Radio/Item.vue
+++ b/packages/ui/src/Radio/Item.vue
@@ -28,7 +28,7 @@ const id = useId();
                 class="
                     relative flex h-full w-full items-center justify-center rounded-[50%]
                     border border-ui-accent-bg after:block after:h-[0.5rem] after:w-[0.5rem] after:rounded-[50%]
-                    after:bg-ui-accent-bg after:content-[''] dark:border-none dark:after:bg-dark-ui-accent-bg
+                    after:bg-ui-accent-bg after:content-[''] dark:border-none
                 "
             />
         </RadioGroupItem>
diff --git a/packages/ui/src/Switch.vue b/packages/ui/src/Switch.vue
index 88aad03849d..574b79221b8 100644
--- a/packages/ui/src/Switch.vue
+++ b/packages/ui/src/Switch.vue
@@ -17,8 +17,7 @@ const switchRootClasses = cva({
         'relative flex rounded-full shrink-0 border-2',
         'transition-colors cursor-pointer',
         'data-[state=checked]:shadow-inner data-[state=checked]:border-switch-bg data-[state=checked]:bg-switch-bg',
-        'dark:data-[state=checked]:border-dark-switch-bg dark:data-[state=checked]:bg-dark-switch-bg',
-        'data-[state=unchecked]:border-transparent dark:data-[state=checked]:border-dark-switch-bg dark:[.publish-fields_&]:data-[state=checked]:border-gray-800',
+        'data-[state=unchecked]:border-transparent dark:[.publish-fields_&]:data-[state=checked]:border-gray-800',
         'data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700'
     ],
     variants: {
diff --git a/packages/ui/src/ui.css b/packages/ui/src/ui.css
index 220db0be33a..3c4ab143c5e 100644
--- a/packages/ui/src/ui.css
+++ b/packages/ui/src/ui.css
@@ -21,21 +21,13 @@
 
     --color-body-bg: var(--theme-color-body-bg);
     --color-body-border: var(--theme-color-body-border);
-    --color-dark-body-bg: var(--theme-color-dark-body-bg);
-    --color-dark-body-border: var(--theme-color-dark-body-border);
     --color-content-border: var(--theme-color-content-border);
-    --color-dark-content-bg: var(--theme-color-dark-content-bg);
-    --color-dark-content-border: var(--theme-color-dark-content-border);
     --color-global-header-bg: var(--theme-color-global-header-bg);
-    --color-dark-global-header-bg: var(--theme-color-dark-global-header-bg);
     --color-progress-bar: var(--theme-color-progress-bar);
     --color-focus-outline: var(--theme-color-focus-outline);
     --color-ui-accent-bg: var(--theme-color-ui-accent-bg);
     --color-ui-accent-text: var(--theme-color-ui-accent-text);
-    --color-dark-ui-accent-bg: var(--theme-color-dark-ui-accent-bg);
-    --color-dark-ui-accent-text: var(--theme-color-dark-ui-accent-text);
     --color-switch-bg: var(--theme-color-switch-bg);
-    --color-dark-switch-bg: var(--theme-color-dark-switch-bg);
 
     /* Temp */
     --color-dark-100: #dfe1e5;
diff --git a/resources/css/app.css b/resources/css/app.css
index ecf837f4776..34af4e8d3d7 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -63,7 +63,7 @@
 
 @layer components {
     .content-card {
-        @apply min-h-full px-2 sm:px-6 md:px-12 pb-6 border dark:bg-dark-content-bg dark:border-y-0 dark:border-r-0 border-content-border dark:border-dark-content-border sm:rounded-2xl sm:rounded-r-xl sm:dark:rounded-none;
+        @apply min-h-full px-2 sm:px-6 md:px-12 pb-6 border dark:border-y-0 dark:border-r-0 border-content-border sm:rounded-2xl sm:rounded-r-xl sm:dark:rounded-none;
         background: var(--theme-color-content-bg);
         .nav-closed & {
             @apply sm:rounded-xl;
@@ -72,7 +72,4 @@
             }
         }
     }
-    .dark .content-card {
-        background: var(--theme-color-dark-content-bg);
-    }
 }
diff --git a/resources/css/components/fieldtypes/bard.css b/resources/css/components/fieldtypes/bard.css
index 5f0d677c7d7..43440a7f454 100644
--- a/resources/css/components/fieldtypes/bard.css
+++ b/resources/css/components/fieldtypes/bard.css
@@ -207,7 +207,7 @@
     }
 
     .bard-footer-toolbar {
-        @apply flex items-center justify-between rounded-b-lg border-t bg-white p-2 text-xs text-gray-700 shadow-none dark:border-dark-300 dark:bg-dark-800 dark:text-dark-175;
+        @apply flex items-center justify-between rounded-b-lg border-t bg-white p-2 text-xs text-gray-700 shadow-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-400;
         padding: 8px 12px;
 
         .bard-fullscreen & {
diff --git a/resources/css/components/fieldtypes/table.css b/resources/css/components/fieldtypes/table.css
index 2d69e30f936..8e3ca696245 100644
--- a/resources/css/components/fieldtypes/table.css
+++ b/resources/css/components/fieldtypes/table.css
@@ -64,7 +64,7 @@ Table Fieldtype
         @apply outline-hidden dark:bg-gray-900;
 
         th {
-            @apply bg-gray-50 p-2 text-sm font-medium text-gray-700 text-start border-r border-b border-gray-300 dark:border-dark-600 dark:bg-gray-925 dark:text-gray-100 overflow-hidden;
+            @apply bg-gray-50 p-2 text-sm font-medium text-gray-700 text-start border-r border-b border-gray-300 dark:border-gray-700 dark:bg-gray-925 dark:text-gray-100 overflow-hidden;
 
             tr:first-child & {
                 @apply rounded-tl-lg;
@@ -101,7 +101,7 @@ Table Fieldtype
         }
 
         td {
-            @apply border-b p-0 dark:border-dark-600 border-e;
+            @apply border-b p-0 dark:border-gray-700 border-e;
 
             &:first-child.grid-cell {
                 @apply ps-4;
diff --git a/resources/css/components/pagination.css b/resources/css/components/pagination.css
index 9db91ac38c2..7a1e25137f1 100644
--- a/resources/css/components/pagination.css
+++ b/resources/css/components/pagination.css
@@ -9,7 +9,7 @@
         @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;
 
         &:hover {
-            @apply bg-gray-100 text-gray-900 dark:bg-dark-700 dark:text-dark-100;
+            @apply bg-gray-100 text-gray-900 dark:bg-gray-850 dark:text-dark-100;
         }
     }
 
@@ -26,7 +26,7 @@
     }
 
     li.current a {
-        @apply bg-gray-100 text-blue-600 shadow-inner dark:bg-dark-700 dark:text-dark-blue-100;
+        @apply bg-gray-100 text-blue-600 shadow-inner dark:bg-gray-850 dark:text-dark-blue-100;
     }
 }
 
diff --git a/resources/css/components/publish.css b/resources/css/components/publish.css
index 3dbfb94c23b..eda5e9a31d4 100644
--- a/resources/css/components/publish.css
+++ b/resources/css/components/publish.css
@@ -111,7 +111,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-dark-700;
+    @apply rounded-t-lg border-b border-gray-400 bg-gray-100 dark:border-dark-900 dark:bg-gray-850;
 }
 
 .publish-section-header-inner {
diff --git a/resources/css/elements/base.css b/resources/css/elements/base.css
index 81ad66e8fda..2a0f54caf9b 100644
--- a/resources/css/elements/base.css
+++ b/resources/css/elements/base.css
@@ -115,7 +115,7 @@ code:not(pre *) {
     color: hsl(from var(--theme-color-ui-accent-bg) h s 30);
     background: hsl(from var(--theme-color-ui-accent-bg) h s l / 0.08);
     &:where(.dark, .dark *) {
-        color: hsl(from var(--theme-color-dark-ui-accent-bg) h s 90);
-        background: hsl(from var(--theme-color-dark-ui-accent-bg) h s 10 / 0.5);
+        color: hsl(from var(--theme-color-ui-accent-bg) h s 90);
+        background: hsl(from var(--theme-color-ui-accent-bg) h s 10 / 0.5);
     }
 }
\ No newline at end of file
diff --git a/resources/js/components/assets/Browser/Table.vue b/resources/js/components/assets/Browser/Table.vue
index 738b1b80fd8..ddc97dddaee 100644
--- a/resources/js/components/assets/Browser/Table.vue
+++ b/resources/js/components/assets/Browser/Table.vue
@@ -101,7 +101,7 @@
                         @click.native.stop="$emit('edit-asset', asset)"
                     />
                     <button
-                        class="cursor-pointer normal-nums select-none group-hover:text-ui-accent-text/80 dark:group-hover:text-dark-ui-accent-text text-start"
+                        class="cursor-pointer normal-nums select-none group-hover:text-ui-accent-text/80 dark:group-hover:text-ui-accent-text text-start"
                         @click="$emit('edit-asset', asset)"
                     >
                         {{ isSearching ? asset.path : asset.basename }}
diff --git a/resources/js/components/assets/Editor/Editor.vue b/resources/js/components/assets/Editor/Editor.vue
index e00814f3d4b..6a3c2ea24fe 100644
--- a/resources/js/components/assets/Editor/Editor.vue
+++ b/resources/js/components/assets/Editor/Editor.vue
@@ -17,7 +17,7 @@
                         v-tooltip.right="__('Open in a new window')"
                         :aria-label="__('Open in a new window')"
                     >
-                        <ui-icon name="folder-photos" class="size-5 group-hover:text-ui-accent-text/80 dark:group-hover:text-dark-ui-accent-text/80" />
+                        <ui-icon name="folder-photos" class="size-5 group-hover:text-ui-accent-text/80" />
                         <span class="text-sm group-hover:text-ui-accent-text/80 dark:text-gray-400 dark:group-hover:text-gray-200">
                             {{ asset.path }}
                         </span>
diff --git a/resources/js/components/assets/Selector.vue b/resources/js/components/assets/Selector.vue
index ca334d69a28..b7f7415c7cf 100644
--- a/resources/js/components/assets/Selector.vue
+++ b/resources/js/components/assets/Selector.vue
@@ -44,7 +44,7 @@
                 </AssetBrowser>
             </div>
 
-            <div class="flex items-center justify-between border-t bg-gray-100 dark:bg-dark-700 dark:border-dark-600 px-4 py-2 sm:p-4">
+            <div class="flex items-center justify-between border-t bg-gray-100 dark:bg-gray-850 dark:border-gray-700 px-4 py-2 sm:p-4">
                 <div
                     class="dark:text-gray-200 text-sm text-gray-700"
                     v-text="
diff --git a/resources/js/components/blueprints/ImportField.vue b/resources/js/components/blueprints/ImportField.vue
index 9ef96e84020..1ee2a305b06 100644
--- a/resources/js/components/blueprints/ImportField.vue
+++ b/resources/js/components/blueprints/ImportField.vue
@@ -6,10 +6,10 @@
                     <ui-icon name="handles" class="blueprint-drag-handle size-4 cursor-grab text-gray-300 dark:text-gray-600" />
                     <div class="flex flex-1 items-center justify-between">
                         <div class="flex flex-1 items-center py-2">
-                            <ui-icon class="size-4 me-2 text-ui-accent-text/80 dark:text-dark-ui-accent-text/80" name="fieldsets" />
+                            <ui-icon class="size-4 me-2 text-ui-accent-text/80" name="fieldsets" />
                             <div class="flex items-center gap-2">
                             <!-- @TODO: Show fieldset.title -->
-                                <button class="cursor-pointer overflow-hidden text-ellipsis text-sm text-ui-accent-text hover:text-ui-accent-text/80 dark:text-dark-ui-accent-text dark:hover:text-dark-ui-accent-text/80" v-text="field.fieldset" @click="$emit('edit')" />
+                                <button class="cursor-pointer overflow-hidden text-ellipsis text-sm text-ui-accent-text hover:text-ui-accent-text/80" v-text="field.fieldset" @click="$emit('edit')" />
                                 <ui-icon name="link" class="text-gray-400" />
                                 <span class="text-gray-500 font-mono text-2xs" v-text="__('Fieldset')" />
                             </div>
diff --git a/resources/js/components/blueprints/RegularField.vue b/resources/js/components/blueprints/RegularField.vue
index f7121a7b067..1197d825a6f 100644
--- a/resources/js/components/blueprints/RegularField.vue
+++ b/resources/js/components/blueprints/RegularField.vue
@@ -10,7 +10,7 @@
                         v-tooltip="tooltipText"
                     />
                     <div class="flex items-center gap-2">
-                        <button class="cursor-pointer overflow-hidden text-ellipsis text-sm hover:text-ui-accent-text dark:hover:text-dark-ui-accent-text text-start" type="button" v-text="__(labelText)" @click="$emit('edit')" />
+                        <button class="cursor-pointer overflow-hidden text-ellipsis text-sm hover:text-ui-accent-text text-start" type="button" v-text="__(labelText)" @click="$emit('edit')" />
                         <ui-icon v-if="isReferenceField" name="link" class="text-gray-400" />
                         <span v-if="isReferenceField" class="text-gray-500 font-mono text-2xs cursor-help" v-text="__('Field')" v-tooltip="__('Imported from: :reference', { reference: field.field_reference })" />
                     </div>
diff --git a/resources/js/components/entries/calendar/Month.vue b/resources/js/components/entries/calendar/Month.vue
index 7a81c4b717c..dc28014806e 100644
--- a/resources/js/components/entries/calendar/Month.vue
+++ b/resources/js/components/entries/calendar/Month.vue
@@ -50,7 +50,7 @@ const dateNumberClasses = (weekDate, selected, today, outsideView) => ({
     'text-gray-400 dark:text-gray-600': outsideView,
     'text-gray-900 dark:text-white': !outsideView,
     'text-white bg-blue-600': props.selectedDate && props.selectedDate.toString() === weekDate.toString(),
-    'text-ui-accent-text dark:text-dark-ui-accent-text': today
+    'text-ui-accent-text': today
 });
 
 const entryStatusClasses = (status) => ({
diff --git a/resources/js/components/field-validation/Builder.vue b/resources/js/components/field-validation/Builder.vue
index 18dad417c75..d7310b28343 100644
--- a/resources/js/components/field-validation/Builder.vue
+++ b/resources/js/components/field-validation/Builder.vue
@@ -22,7 +22,7 @@
                 <a :href="laravelDocsLink" target="_blank">{{ __('Learn more') }}</a>
                 <span v-if="helpBlock" class="italic text-gray-500 ltr:float-right rtl:float-left">
                     {{ __('Example') }}:
-                    <span class="italic text-ui-accent-text dark:text-dark-ui-accent-text">{{ helpBlock }}</span>
+                    <span class="italic text-ui-accent-text">{{ helpBlock }}</span>
                 </span>
             </Description>
 
diff --git a/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue b/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue
index cf90836dbab..312c60c1a69 100644
--- a/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue
+++ b/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue
@@ -102,7 +102,7 @@
                         @dragstart="$emit('focus')"
                     >
                         <div
-                            class="bg-white relative grid gap-4 2xl:gap-10 p-3 relative rounded-xl border border-gray-300 border-t-0 rounded-t-none dark:bg-gray-850 dark:border-dark-500"
+                            class="bg-white relative grid gap-4 2xl:gap-10 p-3 relative rounded-xl border border-gray-300 border-t-0 rounded-t-none dark:bg-gray-850 dark:border-gray-700"
                             :class="{ 'rounded-t-none': !isReadOnly && (showPicker || uploads.length) }"
                             ref="assets"
                             style="grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));"
diff --git a/resources/js/components/fieldtypes/replicator/AddSetButton.vue b/resources/js/components/fieldtypes/replicator/AddSetButton.vue
index d519b161fca..11bf3d6bac5 100644
--- a/resources/js/components/fieldtypes/replicator/AddSetButton.vue
+++ b/resources/js/components/fieldtypes/replicator/AddSetButton.vue
@@ -2,7 +2,7 @@
     <set-picker :enabled="enabled" :sets="groups" :align="variant === 'between' ? 'center' : 'start'" @added="addSet">
         <template #trigger>
             <div class="flex relative pt-2" :class="{ 'pt-6': showConnector }" v-if="variant === 'button'">
-                <div v-if="showConnector" class="absolute group-hover:opacity-0 transition-opacity delay-25 duration-125 inset-y-0 h-full left-3.5 border-l-1 border-gray-400 dark:border-gray-600 border-dashed z-0 dark:bg-dark-700" />
+                <div v-if="showConnector" class="absolute group-hover:opacity-0 transition-opacity delay-25 duration-125 inset-y-0 h-full left-3.5 border-l-1 border-gray-400 dark:border-gray-600 border-dashed z-0 dark:bg-gray-850" />
                 <Button v-if="enabled" size="sm" :text="label" icon="plus" class="relative z-2" />
             </div>
             <div
@@ -12,7 +12,7 @@
             >
                 <div
                     v-if="showConnector"
-                    class="absolute group-hover:opacity-0 transition-opacity delay-10 duration-250 inset-y-0 left-3.5 border-l-1 border-gray-400 dark:border-gray-600 border-dashed z-0 dark:bg-dark-700"
+                    class="absolute group-hover:opacity-0 transition-opacity delay-10 duration-250 inset-y-0 left-3.5 border-l-1 border-gray-400 dark:border-gray-600 border-dashed z-0 dark:bg-gray-850"
                     :class="isFirst ? 'h-[50%] top-[50%] opacity-50' : 'h-full opacity-100'"
                 />
                 <button class="w-full absolute inset-0 h-full opacity-0 group-hover:opacity-100 transition-opacity delay-10 duration-250 cursor-pointer">
diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index 9626e8cf9a3..97fbb986cd9 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -16,7 +16,7 @@
                         @close="toggleFullscreen"
                     />
 
-                    <section :class="{ 'dark:bg-dark-700 mt-14 bg-gray-200 p-4': fullScreenMode }">
+                    <section :class="{ 'dark:bg-gray-850 mt-14 bg-gray-200 p-4': fullScreenMode }">
                         <sortable-list
                             :model-value="value"
                             :vertical="true"
diff --git a/resources/js/components/global-header/Header.vue b/resources/js/components/global-header/Header.vue
index 376459104e9..eb98c10fc39 100644
--- a/resources/js/components/global-header/Header.vue
+++ b/resources/js/components/global-header/Header.vue
@@ -8,7 +8,7 @@ import UserDropdown from './UserDropdown.vue';
 </script>
 
 <template>
-    <header class="h-14 bg-global-header-bg dark:bg-dark-global-header-bg flex justify-between space-x-2 items-center text-white px-2 lg:px-4 fixed overflow-x-auto top-0 inset-x-0 z-(--z-index-global-header)">
+    <header class="h-14 bg-global-header-bg flex justify-between space-x-2 items-center text-white px-2 lg:px-4 fixed overflow-x-auto top-0 inset-x-0 z-(--z-index-global-header)">
         <a class="c-skip-link z-(--z-index-global-header) px-4 py-2 bg-blue-800 text-sm top-2.5 left-2.25 fixed opacity-0 -translate-y-24 focus:translate-y-0 focus:opacity-100 rounded-md" href="#main">
             {{ __('Skip to sidebar') }}
         </a>
diff --git a/resources/js/components/modals/ConfirmationModal.vue b/resources/js/components/modals/ConfirmationModal.vue
index a93c064822d..d7e319013cb 100644
--- a/resources/js/components/modals/ConfirmationModal.vue
+++ b/resources/js/components/modals/ConfirmationModal.vue
@@ -66,7 +66,7 @@ function submit() {
     <Modal ref="modal" :title="__(title)" :open="modalOpen" @update:open="updateModalOpen">
         <div
             v-if="busy"
-            class="pointer-events-none absolute inset-0 flex select-none items-center justify-center bg-white bg-opacity-75 dark:bg-dark-700"
+            class="pointer-events-none absolute inset-0 flex select-none items-center justify-center bg-white bg-opacity-75 dark:bg-gray-850"
         >
             <Icon name="loading" />
         </div>
diff --git a/resources/js/components/revision-history/Revision.vue b/resources/js/components/revision-history/Revision.vue
index b43615c0c35..211e06cdfee 100644
--- a/resources/js/components/revision-history/Revision.vue
+++ b/resources/js/components/revision-history/Revision.vue
@@ -4,7 +4,7 @@
         :class="{
             'status-working-copy': revision.action === 'working',
             'status-published': revision.attributes.published,
-            'border border-ui-accent-bg dark:border-dark-ui-accent-bg/90 rounded-lg py-2.5 bg-[hsl(from_var(--theme-color-ui-accent-bg)_h_s_97)] dark:bg-[hsl(from_var(--theme-color-dark-ui-accent-bg)_h_40_20)]': revision.attributes.current,
+            'border border-ui-accent-bg dark:border-ui-accent-bg/90 rounded-lg py-2.5 bg-[hsl(from_var(--theme-color-ui-accent-bg)_h_s_97)] dark:bg-[hsl(from_var(--theme-color-ui-accent-bg)_h_40_20)]': revision.attributes.current,
             'bg-gradient-to-b from-transparent from-60% to-white dark:to-gray-800 -mt-1': isLast,
         }"
         v-tooltip="revision.attributes.current ? __('Current Revision') : null"
diff --git a/resources/js/components/structures/Branch.vue b/resources/js/components/structures/Branch.vue
index a17a2598cb2..e5c347983bc 100644
--- a/resources/js/components/structures/Branch.vue
+++ b/resources/js/components/structures/Branch.vue
@@ -37,9 +37,9 @@
                 <div v-if="page.collection && editable" class="flex items-center gap-2">
                     <Icon name="navigation" class="size-3.5 text-gray-500" />
                     <div>
-                        <Link :href="page.collection.create_url" v-text="__('Add')" class="hover:text-ui-accent-text dark:hover:text-dark-ui-accent-text" />
+                        <Link :href="page.collection.create_url" v-text="__('Add')" class="hover:text-ui-accent-text" />
                         <span class="mx-1 text-gray-400 dark:text-gray-500">/</span>
-                        <Link :href="page.collection.edit_url" v-text="__('Edit')" class="hover:text-ui-accent-text dark:hover:text-dark-ui-accent-text" />
+                        <Link :href="page.collection.edit_url" v-text="__('Edit')" class="hover:text-ui-accent-text" />
                     </div>
                 </div>
             </div>
diff --git a/resources/js/components/structures/PageEditor.vue b/resources/js/components/structures/PageEditor.vue
index 9ad3a1b0ad2..6b75d448aa6 100644
--- a/resources/js/components/structures/PageEditor.vue
+++ b/resources/js/components/structures/PageEditor.vue
@@ -1,6 +1,6 @@
 <template>
     <stack narrow name="page-tree-linker" :before-close="shouldClose" @closed="$emit('closed')" v-slot="{ close }">
-        <div class="flex h-full flex-col bg-gray-100 dark:bg-dark-700">
+        <div class="flex h-full flex-col bg-gray-100 dark:bg-gray-850">
             <header
                 class="flex items-center justify-between border-b bg-white py-2 text-lg font-medium shadow-md dark:border-dark-950 dark:bg-dark-600 ltr:pl-6 ltr:pr-3 rtl:pl-3 rtl:pr-6"
             >
@@ -10,7 +10,7 @@
 
             <div v-if="loading" class="relative flex-1 overflow-auto">
                 <div
-                    class="absolute inset-0 z-10 flex items-center justify-center bg-white bg-opacity-75 text-center dark:bg-dark-700"
+                    class="absolute inset-0 z-10 flex items-center justify-center bg-white bg-opacity-75 text-center dark:bg-gray-850"
                 >
                     <Icon name="loading" />
                 </div>
diff --git a/resources/js/pages/auth/Login.vue b/resources/js/pages/auth/Login.vue
index 7775f3fc5a9..f5be63b0709 100644
--- a/resources/js/pages/auth/Login.vue
+++ b/resources/js/pages/auth/Login.vue
@@ -105,7 +105,7 @@ onMounted(() => {
                     <template #actions>
                         <Link
                             :href="forgotPasswordUrl"
-                            class="text-ui-accent-text text-sm hover:text-ui-accent-text/80 dark:text-dark-ui-accent-text dark:hover:text-dark-ui-accent-text/80"
+                            class="text-ui-accent-text text-sm hover:text-ui-accent-text/80"
                             tabindex="6"
                             v-text="__('Forgot password?')"
                         />
diff --git a/resources/js/pages/auth/passwords/Email.vue b/resources/js/pages/auth/passwords/Email.vue
index e8499df16f5..39ca03b48db 100644
--- a/resources/js/pages/auth/passwords/Email.vue
+++ b/resources/js/pages/auth/passwords/Email.vue
@@ -47,7 +47,7 @@ defineProps(['action', 'loginUrl']);
     <div class="mt-4 w-full text-center dark:mt-6">
         <Link
             :href="loginUrl"
-            class="text-ui-accent-text text-sm hover:text-ui-accent-text/80 dark:text-dark-ui-accent-text dark:hover:text-dark-ui-accent-text/80"
+            class="text-ui-accent-text text-sm hover:text-ui-accent-text/80"
             v-text="__('I remember my password')"
         />
     </div>
diff --git a/resources/js/pages/auth/passwords/Reset.vue b/resources/js/pages/auth/passwords/Reset.vue
index f535747d0c3..4f1dccc8edc 100644
--- a/resources/js/pages/auth/passwords/Reset.vue
+++ b/resources/js/pages/auth/passwords/Reset.vue
@@ -68,7 +68,7 @@ const submit = () => {
     <div class="mt-4 w-full text-center dark:mt-6">
         <Link
             :href="loginUrl"
-            class="text-ui-accent-text text-sm hover:text-ui-accent-text/80 dark:text-dark-ui-accent-text dark:hover:text-dark-ui-accent-text/80"
+            class="text-ui-accent-text text-sm hover:text-ui-accent-text/80"
             v-text="__('Back to login')"
         />
     </div>
diff --git a/resources/js/pages/layout/Layout.vue b/resources/js/pages/layout/Layout.vue
index 50ed0ee6836..98146aa1554 100644
--- a/resources/js/pages/layout/Layout.vue
+++ b/resources/js/pages/layout/Layout.vue
@@ -9,7 +9,7 @@ import { provide, watch, ref } from 'vue';
 import useBodyClasses from './body-classes.js';
 import useStatamicPageProps from '@/composables/page-props.js';
 
-useBodyClasses('bg-global-header-bg dark:bg-dark-global-header-bg font-sans leading-normal text-gray-900 dark:text-white');
+useBodyClasses('bg-global-header-bg font-sans leading-normal text-gray-900 dark:text-white');
 
 const props = defineProps({
     additionalBreadcrumbs: { type: Array, default: () => [] },
@@ -29,7 +29,7 @@ provide('layout', {
         <LicensingAlert />
         <Header />
 
-        <main id="main" class="flex bg-body-bg dark:bg-dark-body-bg dark:border-t rounded-t-2xl dark:border-dark-body-border fixed top-14 inset-x-0 bottom-0 min-h-[calc(100vh-3.5rem)]">
+        <main id="main" class="flex bg-body-bg dark:border-t dark:border-body-border rounded-t-2xl fixed top-14 inset-x-0 bottom-0 min-h-[calc(100vh-3.5rem)]">
             <Nav />
             <div id="main-content" class="main-content sm:p-2 h-full flex-1 overflow-y-auto rounded-t-2xl">
                 <div id="content-card" class="relative content-card min-h-full">
diff --git a/resources/views/partials/head.blade.php b/resources/views/partials/head.blade.php
index c954d5e5ef1..a4a43141da0 100644
--- a/resources/views/partials/head.blade.php
+++ b/resources/views/partials/head.blade.php
@@ -47,9 +47,13 @@
 @endforeach
 
 <style>
-:root {
-    {{ \Statamic\CP\Color::cssVariables() }}
-}
+    :root {
+        {{ \Statamic\CP\Color::cssVariables() }}
+
+        &.dark {
+            {{ \Statamic\CP\Color::cssVariables(dark: true) }}
+        }
+    }
 </style>
 
 @stack('head')
diff --git a/src/CP/Color.php b/src/CP/Color.php
index 9ae8edbe4ae..062a51c32bd 100644
--- a/src/CP/Color.php
+++ b/src/CP/Color.php
@@ -361,9 +361,9 @@ class Color
     public const Transparent = 'transparent';
     public const Volt = 'oklch(93.86% 0.2018 122.24)';
 
-    public static function defaults(): array
+    public static function defaults(bool $dark = false): array
     {
-        return [
+        return collect([
             'primary' => self::Indigo[700],
             'gray-50' => self::Zinc[50],
             'gray-100' => self::Zinc[100],
@@ -378,6 +378,19 @@ public static function defaults(): array
             'gray-900' => self::Zinc[900],
             'gray-925' => self::Zinc[925],
             'gray-950' => self::Zinc[950],
+            'dark-gray-50' => self::Zinc[50],
+            'dark-gray-100' => self::Zinc[100],
+            'dark-gray-200' => self::Zinc[200],
+            'dark-gray-300' => self::Zinc[300],
+            'dark-gray-400' => self::Zinc[400],
+            'dark-gray-500' => self::Zinc[500],
+            'dark-gray-600' => self::Zinc[600],
+            'dark-gray-700' => self::Zinc[700],
+            'dark-gray-800' => self::Zinc[800],
+            'dark-gray-850' => self::Zinc[850],
+            'dark-gray-900' => self::Zinc[900],
+            'dark-gray-925' => self::Zinc[925],
+            'dark-gray-950' => self::Zinc[950],
             'success' => self::Green[400],
             'danger' => self::Red[600],
             'body-bg' => self::Zinc[100],
@@ -389,35 +402,50 @@ public static function defaults(): array
             'dark-content-bg' => self::Zinc[900],
             'dark-content-border' => self::Zinc[950],
             'global-header-bg' => self::Zinc[800],
-            'dark-global-header-bg' => self::Zinc[800],
             'progress-bar' => self::Indigo[700],
             'focus-outline' => self::Blue[400],
             'ui-accent-bg' => self::Indigo[700],
             'ui-accent-text' => 'var(--theme-color-ui-accent-bg)',
-            'dark-ui-accent-bg' => self::Indigo[700],
             'dark-ui-accent-text' => self::Indigo[400],
             'switch-bg' => 'var(--theme-color-ui-accent-bg)',
-            'dark-switch-bg' => 'var(--theme-color-dark-ui-accent-bg)',
-        ];
+        ])
+            ->filter(fn ($color, $name) => str($name)->startsWith('dark-') ? $dark : ! $dark)
+            ->all();
     }
 
-    public static function theme(): array
+    public static function theme(bool $dark = false): array
     {
         $config = config('statamic.cp.theme', []);
 
-        foreach ($config['grays'] ?? [] as $shade => $value) {
-            $config["gray-{$shade}"] = $value;
+        foreach ($config[$dark ? 'dark-grays' : 'grays'] ?? [] as $shade => $value) {
+            $colorHandle = $dark ? 'dark-gray' : 'gray';
+            $config["{$colorHandle}-{$shade}"] = $value;
         }
 
+        $darkColors = static::defaults(dark: true);
+
         return collect(static::defaults())
-            ->map(fn ($color, $name) => $config[$name] ?? $color)
+            ->mapWithKeys(function ($color, $name) use ($config, $dark, $darkColors) {
+                $key = $dark ? "dark-{$name}" : $name;
+
+                $value = $dark
+                    ? $config[$key] ?? $darkColors[$key] ?? null
+                    : $config[$key] ?? $color;
+
+                return [$key => $value];
+            })
+            ->filter()
             ->all();
     }
 
-    public static function cssVariables(): string
+    public static function cssVariables(bool $dark = false): string
     {
-        return collect(static::theme())
-            ->map(fn ($color, $name) => "--theme-color-{$name}: {$color};")
-            ->implode(PHP_EOL.'    ');
+        return collect(static::theme($dark))
+            ->map(function ($color, $name) use ($dark) {
+                $name = $dark ? str($name)->remove('dark-') : $name;
+
+                return "--theme-color-{$name}: {$color};";
+            })
+            ->implode(PHP_EOL.($dark ? "\t\t\t" : "\t\t"));
     }
 }
diff --git a/tests/CP/ColorTest.php b/tests/CP/ColorTest.php
index 19580c7b50c..360e15ac188 100644
--- a/tests/CP/ColorTest.php
+++ b/tests/CP/ColorTest.php
@@ -12,6 +12,7 @@ class ColorTest extends TestCase
     public function theme_has_defaults()
     {
         $this->assertEquals(Color::defaults(), Color::theme());
+        $this->assertEquals(Color::defaults(dark: true), Color::theme(dark: true));
     }
 
     #[Test]
@@ -20,10 +21,11 @@ public function theme_set_to_a_string_does_nothing()
         config(['statamic.cp.theme' => 'rad']);
 
         $this->assertEquals(Color::defaults(), Color::theme());
+        $this->assertEquals(Color::defaults(dark: true), Color::theme(dark: true));
     }
 
     #[Test]
-    public function the_theme_can_be_customized()
+    public function the_light_theme_can_be_customized()
     {
         config(['statamic.cp.theme' => ['primary' => Color::Sky[500]]]);
 
@@ -31,12 +33,29 @@ public function the_theme_can_be_customized()
             ...Color::defaults(),
             'primary' => Color::Sky[500],
         ], Color::theme());
+
+        $this->assertEquals(Color::defaults(dark: true), Color::theme(dark: true));
     }
 
     #[Test]
-    public function grays_can_be_set_together()
+    public function the_dark_theme_can_be_customized()
     {
-        config(['statamic.cp.theme' => ['grays' => Color::Slate]]);
+        config(['statamic.cp.theme' => ['dark-primary' => Color::Sky[700]]]);
+
+        $this->assertEquals([
+            ...Color::defaults(dark: true),
+            'dark-primary' => Color::Sky[700],
+        ], Color::theme(dark: true));
+
+        $this->assertEquals(Color::defaults(), Color::theme());
+    }
+
+    #[Test]
+    public function grays_can_be_set_together_light_mode()
+    {
+        config(['statamic.cp.theme' => [
+            'grays' => Color::Slate,
+        ]]);
 
         $this->assertEquals([
             ...Color::defaults(),
@@ -54,5 +73,62 @@ public function grays_can_be_set_together()
             'gray-925' => Color::Slate[925],
             'gray-950' => Color::Slate[950],
         ], Color::theme());
+
+        $this->assertEquals(Color::defaults(dark: true), Color::theme(dark: true));
+    }
+
+    #[Test]
+    public function grays_can_be_set_together_dark_mode()
+    {
+        config(['statamic.cp.theme' => [
+            'dark-grays' => Color::Stone,
+        ]]);
+
+        $this->assertEquals([
+            ...Color::defaults(dark: true),
+            'dark-gray-50' => Color::Stone[50],
+            'dark-gray-100' => Color::Stone[100],
+            'dark-gray-200' => Color::Stone[200],
+            'dark-gray-300' => Color::Stone[300],
+            'dark-gray-400' => Color::Stone[400],
+            'dark-gray-500' => Color::Stone[500],
+            'dark-gray-600' => Color::Stone[600],
+            'dark-gray-700' => Color::Stone[700],
+            'dark-gray-800' => Color::Stone[800],
+            'dark-gray-850' => Color::Stone[850],
+            'dark-gray-900' => Color::Stone[900],
+            'dark-gray-925' => Color::Stone[925],
+            'dark-gray-950' => Color::Stone[950],
+        ], Color::theme(dark: true));
+
+        $this->assertEquals(Color::defaults(), Color::theme());
+    }
+
+    #[Test]
+    public function dark_mode_variable_can_be_overridden_even_if_it_doesnt_exist_in_the_default()
+    {
+        config(['statamic.cp.theme' => [
+            'dark-focus-outline' => 'purple',
+        ]]);
+
+        $this->assertEquals([
+            ...Color::defaults(dark: true),
+            'dark-focus-outline' => 'purple',
+        ], Color::theme(dark: true));
+    }
+
+    #[Test]
+    public function it_outputs_css_variables()
+    {
+        config(['statamic.cp.theme' => [
+            'primary' => 'lightfoo',
+            'dark-primary' => 'darkfoo',
+        ]]);
+
+        $this->assertStringContainsString('--theme-color-primary: lightfoo;', Color::cssVariables());
+        $this->assertStringNotContainsString('--theme-color-primary: darkfoo', Color::cssVariables());
+
+        $this->assertStringContainsString('--theme-color-primary: darkfoo;', Color::cssVariables(dark: true));
+        $this->assertStringNotContainsString('--theme-color-primary: lightfoo', Color::cssVariables(dark: true));
     }
 }