diff --git a/resources/css/components/fieldtypes/bard.css b/resources/css/components/fieldtypes/bard.css
index 88e8744460f..9dd674dcee6 100644
--- a/resources/css/components/fieldtypes/bard.css
+++ b/resources/css/components/fieldtypes/bard.css
@@ -255,10 +255,10 @@
         @apply fixed inset-0 min-h-screen overflow-scroll border-none rounded-none bg-gray-100 pt-14 dark:bg-gray-850;
 
         & > .bard-editor {
-            @apply relative mx-auto my-6 max-w-5xl rounded-lg bg-white px-8 shadow-ui-md dark:bg-gray-950 dark:shadow-lg;
+            @apply relative mx-auto my-6 max-w-5xl rounded-lg bg-white px-8 shadow-ui-md dark:bg-gray-925 dark:shadow-lg;
         }
         .bard-content {
-            @apply dark:bg-gray-950;
+            @apply dark:bg-gray-925;
         }
 
         .bard-fixed-toolbar {
diff --git a/resources/css/components/page-tree.css b/resources/css/components/page-tree.css
index 3cf0142ac32..8b518ea4e9a 100644
--- a/resources/css/components/page-tree.css
+++ b/resources/css/components/page-tree.css
@@ -49,7 +49,7 @@
 .nav-builder {
     background: none;
     .tree-node {
-        @apply bg-gray-200/45 dark:bg-gray-950;
+        @apply bg-gray-200/45 dark:bg-gray-950/35;
         .tree-node-inner {
             @apply px-1;
         }
diff --git a/resources/css/elements/tables.css b/resources/css/elements/tables.css
index 0c5b73e2014..e944ae4ef22 100644
--- a/resources/css/elements/tables.css
+++ b/resources/css/elements/tables.css
@@ -159,7 +159,7 @@
 /* Row Selection */
 .data-table[data-has-selections] {
     tbody tr[data-row="selected"] td {
-        @apply bg-gray-100 dark:bg-gray-950;
+        @apply bg-gray-100 dark:bg-gray-925;
     }
 }
 
diff --git a/resources/css/ui.css b/resources/css/ui.css
index 1bc00f0e76f..314b964df0d 100644
--- a/resources/css/ui.css
+++ b/resources/css/ui.css
@@ -17,7 +17,7 @@
     --color-gray-850: var(--theme-color-gray-850);
     --color-gray-900: var(--theme-color-gray-900);
     --color-gray-925: var(--theme-color-gray-925);
-    --color-gray-950: var(--theme-color-zinc-950);
+    --color-gray-950: var(--theme-color-gray-950);
     --color-volt: oklch(93.86% 0.2018 122.24);
 
     --color-body-bg: var(--theme-color-body-bg);
@@ -152,8 +152,6 @@
 .dark {
     @theme inline {
         --color-primary-hover: color-mix(in oklch, var(--color-primary) 100%, white 30%);
-        --color-success: var(--color-green-500);
-        --color-gray-950: hsl(240deg 7% 8%);
     }
 }
 
diff --git a/resources/js/components/fieldtypes/bard/Set.vue b/resources/js/components/fieldtypes/bard/Set.vue
index bba41f139f1..581264bb8d6 100644
--- a/resources/js/components/fieldtypes/bard/Set.vue
+++ b/resources/js/components/fieldtypes/bard/Set.vue
@@ -18,9 +18,9 @@
         >
             <div ref="content" hidden />
             <header
-                class="group/header animate-border-color show-focus-within flex items-center rounded-[calc(var(--radius-lg)-1px)] px-1.5 antialiased duration-200 bg-gray-100/50 dark:bg-gray-925 hover:bg-gray-100 dark:hover:bg-gray-950 border-gray-300 dark:shadow-md border-b-1 border-b-transparent"
+                class="group/header animate-border-color show-focus-within flex items-center rounded-[calc(var(--radius-lg)-1px)] px-1.5 antialiased duration-200 bg-gray-100/50 dark:bg-gray-925 hover:bg-gray-100 dark:hover:bg-gray-950/45 border-gray-300 dark:shadow-md border-b-1 border-b-transparent"
                 :class="{
-                    'bg-gray-200/50 dark:bg-gray-950 rounded-b-none border-b-gray-300! dark:border-b-white/10!': !collapsed
+                    'bg-gray-200/50 dark:bg-gray-950/35 rounded-b-none border-b-gray-300! dark:border-b-white/10!': !collapsed
                 }"
             >
                 <Icon data-drag-handle name="handles" class="size-4 cursor-grab text-gray-400" v-if="!isReadOnly" />
diff --git a/resources/js/components/fieldtypes/replicator/Set.vue b/resources/js/components/fieldtypes/replicator/Set.vue
index 73f7ebcddd6..d00b36f1052 100644
--- a/resources/js/components/fieldtypes/replicator/Set.vue
+++ b/resources/js/components/fieldtypes/replicator/Set.vue
@@ -152,9 +152,9 @@ function onAnimationComplete() {
             :data-type="config.handle"
         >
             <header
-                class="group/header animate-border-color flex items-center show-focus-within rounded-[calc(var(--radius-lg)-1px)] px-1.5 antialiased duration-200 bg-gray-100/50 dark:bg-gray-925 hover:bg-gray-100 dark:hover:bg-gray-950 border-gray-300 dark:shadow-md border-b-1 border-b-transparent"
+                class="group/header animate-border-color flex items-center show-focus-within rounded-[calc(var(--radius-lg)-1px)] px-1.5 antialiased duration-200 bg-gray-100/50 dark:bg-gray-925 hover:bg-gray-100 dark:hover:bg-gray-950/45 border-gray-300 dark:shadow-md border-b-1 border-b-transparent"
                 :class="{
-                    'bg-gray-200/50 dark:bg-gray-950 rounded-b-none border-b-gray-300! dark:border-b-white/10!': !collapsed
+                    'bg-gray-200/50 dark:bg-gray-950/35 rounded-b-none border-b-gray-300! dark:border-b-white/10!': !collapsed
                 }"
             >
                 <Icon
diff --git a/resources/js/components/publish/FullscreenHeader.vue b/resources/js/components/publish/FullscreenHeader.vue
index b58f4deb51e..8760c28a866 100644
--- a/resources/js/components/publish/FullscreenHeader.vue
+++ b/resources/js/components/publish/FullscreenHeader.vue
@@ -1,5 +1,5 @@
 <template>
-    <header class="fixed h-12 inset-x-0 top-0 z-max flex items-center justify-between bg-gray-50 dark:bg-gray-950 px-4 shadow-ui-lg dark:shadow-none dark:border-b dark:border-white/10">
+    <header class="fixed h-12 inset-x-0 top-0 z-max flex items-center justify-between bg-gray-50 dark:bg-gray-925 px-4 shadow-ui-lg dark:shadow-none dark:border-b dark:border-white/10">
         <ui-heading class="shrink-0" :text="__(title)" />
         <div class="flex min-w-max items-center gap-4">
             <slot />
diff --git a/resources/js/components/ui/AuthCard.vue b/resources/js/components/ui/AuthCard.vue
index a663d7db958..f4b07cb940a 100644
--- a/resources/js/components/ui/AuthCard.vue
+++ b/resources/js/components/ui/AuthCard.vue
@@ -13,7 +13,7 @@ const hasHeader = computed(() => {
 </script>
 
 <template>
-    <div class="bg-white dark:bg-gray-950 backdrop-blur-[2px] border border-gray-200 dark:border-none rounded-2xl p-2 shadow-[0_8px_5px_-6px_rgba(0,0,0,0.12),_0_3px_8px_0_rgba(0,0,0,0.02),_0_30px_22px_-22px_rgba(39,39,42,0.35)] dark:shadow-[0_8px_5px_-6px_rgba(0,0,0,0.3),_0_3px_8px_0_rgba(0,0,0,0.15),_0_30px_22px_-22px_rgba(0,0,0,0.4)]">
+    <div class="bg-white dark:bg-gray-925 backdrop-blur-[2px] border border-gray-200 dark:border-none rounded-2xl p-2 shadow-[0_8px_5px_-6px_rgba(0,0,0,0.12),_0_3px_8px_0_rgba(0,0,0,0.02),_0_30px_22px_-22px_rgba(39,39,42,0.35)] dark:shadow-[0_8px_5px_-6px_rgba(0,0,0,0.3),_0_3px_8px_0_rgba(0,0,0,0.15),_0_30px_22px_-22px_rgba(0,0,0,0.4)]">
         <div class="relative space-y-3 rounded-xl border border-gray-300 bg-white dark:bg-gray-850 dark:border-gray-700 p-4 shadow-[0_1px_16px_-2px_rgba(63,63,71,0.2)]">
             <header class="flex flex-col justify-center items-center mb-8 py-3" v-if="hasHeader">
                 <ui-card class="p-2! mb-4 flex items-center justify-center" v-if="icon">
diff --git a/resources/js/components/ui/Calendar/Calendar.vue b/resources/js/components/ui/Calendar/Calendar.vue
index d734338cb27..56785b58777 100644
--- a/resources/js/components/ui/Calendar/Calendar.vue
+++ b/resources/js/components/ui/Calendar/Calendar.vue
@@ -93,13 +93,13 @@ const gridStyle = computed(() => {
             <div>
                 <Component
                     :is="components.CalendarPrev"
-                    class="inline-flex size-8 cursor-pointer items-center justify-center rounded-md hover:bg-gray-50 active:scale-90 dark:hover:bg-gray-950"
+                    class="inline-flex size-8 cursor-pointer items-center justify-center rounded-md hover:bg-gray-50 active:scale-90 dark:hover:bg-gray-925"
                 >
                     <Icon name="chevron-left" class="size-4" />
                 </Component>
                 <Component
                     :is="components.CalendarNext"
-                    class="inline-flex size-8 cursor-pointer items-center justify-center rounded-md hover:bg-gray-50 active:scale-90 dark:hover:bg-gray-950"
+                    class="inline-flex size-8 cursor-pointer items-center justify-center rounded-md hover:bg-gray-50 active:scale-90 dark:hover:bg-gray-925"
                 >
                     <Icon name="chevron-right" class="size-4" />
                 </Component>
diff --git a/resources/js/components/ui/Context/Item.vue b/resources/js/components/ui/Context/Item.vue
index 11429a04156..8e087596ed4 100644
--- a/resources/js/components/ui/Context/Item.vue
+++ b/resources/js/components/ui/Context/Item.vue
@@ -34,7 +34,7 @@ const classes = cva({
         'rounded-lg px-1 py-1.5 text-sm antialiased',
         'text-gray-700 dark:text-gray-300',
         'not-data-disabled:cursor-pointer data-disabled:opacity-50',
-        'hover:not-data-disabled:bg-gray-50 dark:hover:not-data-disabled:bg-gray-950 outline-hidden',
+        'hover:not-data-disabled:bg-gray-50 dark:hover:not-data-disabled:bg-gray-925 outline-hidden',
     ],
     variants: {
         variant: {
diff --git a/resources/js/components/ui/Input/GroupPrepend.vue b/resources/js/components/ui/Input/GroupPrepend.vue
index 49dd16f386d..7249efc50b9 100644
--- a/resources/js/components/ui/Input/GroupPrepend.vue
+++ b/resources/js/components/ui/Input/GroupPrepend.vue
@@ -9,7 +9,7 @@ const props = defineProps({
         :class="[
             'flex items-center justify-center',
             'shadow-ui-sm disabled:shadow-none',
-            'border border-gray-300 bg-gray-50 text-gray-600 antialiased dark:border-gray-700 dark:bg-gray-950 dark:text-gray-300',
+            'border border-gray-300 bg-gray-50 text-gray-600 antialiased dark:border-gray-700 dark:bg-gray-925 dark:text-gray-300',
             'rounded-s-lg px-3 text-sm leading-[1.375rem] shrink-0',
         ]"
         data-ui-input-group-prepend
diff --git a/resources/js/components/ui/Listing/Presets.vue b/resources/js/components/ui/Listing/Presets.vue
index 7e3672d0cf4..8f80ff5502a 100644
--- a/resources/js/components/ui/Listing/Presets.vue
+++ b/resources/js/components/ui/Listing/Presets.vue
@@ -174,7 +174,7 @@ function deletePreset() {
 <template>
     <Tabs v-model:modelValue="currentTab">
         <div class="relative flex shrink-0 items-center space-x-2.5 px-2 -mt-2 sm:px-0 starting-style-transition">
-            <TabList class="flex-1 space-x-2.5 !border-gray-200 !dark:border-gray-800">
+            <TabList class="flex-1 space-x-2.5 border-gray-200 !dark:border-gray-800">
                 <PresetTrigger name="all" :text="__('All')" />
                 <PresetTrigger
                     v-for="(preset, handle) in presets"
diff --git a/resources/js/components/ui/Panel/Panel.vue b/resources/js/components/ui/Panel/Panel.vue
index 0a350f3794c..17b3baf2aaa 100644
--- a/resources/js/components/ui/Panel/Panel.vue
+++ b/resources/js/components/ui/Panel/Panel.vue
@@ -14,7 +14,7 @@ const props = defineProps({
 <template>
     <div
         :class="[
-            '@container/panel relative bg-gray-150 [.bg-architectural-lines_&]:backdrop-blur-[10px] dark:bg-gray-950 dark:inset-shadow-2xs dark:inset-shadow-black',
+            '@container/panel relative bg-gray-150 [.bg-architectural-lines_&]:backdrop-blur-[10px] dark:bg-gray-950/35 dark:inset-shadow-2xs dark:inset-shadow-black',
             'w-full rounded-2xl mb-5 max-[600px]:p-1.25 p-1.75 [&:has(>[data-ui-panel-header])]:pt-0 focus-none starting-style-transition starting-style-transition--siblings',
         ]"
         data-ui-panel
diff --git a/resources/js/components/ui/Toggle/Item.vue b/resources/js/components/ui/Toggle/Item.vue
index af57ff22088..4bb144d4757 100644
--- a/resources/js/components/ui/Toggle/Item.vue
+++ b/resources/js/components/ui/Toggle/Item.vue
@@ -48,7 +48,7 @@ const toggleItemClasses = computed(() => {
                     'bg-linear-to-b from-primary/90 to-primary hover:bg-primary-hover text-white border border-primary-border shadow-ui-md inset-shadow-2xs inset-shadow-white/25 data-[state=on]:bg-primary-hover',
                     'dark:from-white dark:to-gray-200 dark:hover:from-gray-200 dark:text-gray-900 dark:border-0 dark:data-[state=on]:from-gray-300 dark:data-[state=on]:to-gray-300',
                 ],
-                filled: 'bg-gray-100 hover:bg-gray-200 dark:bg-gray-700/80 dark:hover:bg-gray-700 data-[state=on]:bg-gray-300 data-[state=on]:border-gray-500 dark:data-[state=on]:bg-gray-950',
+                filled: 'bg-gray-100 hover:bg-gray-200 dark:bg-gray-700/80 dark:hover:bg-gray-700 data-[state=on]:bg-gray-300 data-[state=on]:border-gray-500 dark:data-[state=on]:bg-gray-925',
                 ghost: 'bg-transparent rounded-lg hover:bg-gray-400/10 text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:bg-gray-700/80 dark:hover:text-gray-200 data-[state=on]:bg-gray-400/20 data-[state=on]:text-gray-700 dark:data-[state=on]:bg-gray-700/80 dark:data-[state=on]:text-white',
             },
             size: {