diff --git a/resources/css/components/array.css b/resources/css/components/array.css
index 1266e738a2..4dcedbc5cd 100644
--- a/resources/css/components/array.css
+++ b/resources/css/components/array.css
@@ -7,9 +7,9 @@
 }
 
 .array-table-wrapper {
-    @apply border rounded overflow-hidden;
+    @apply border dark:border-dark-900 rounded overflow-hidden;
     &:focus-within {
-        @apply ring-2 ring-blue-300;
+        @apply ring-2 ring-blue-300 dark:ring-dark-blue-100;
     }
 }
 .array-table {
@@ -20,12 +20,12 @@
 
     tr:not(:last-child) {
         th, td {
-            @apply border-b;
+            @apply border-b dark:border-dark-900;
         }
     }
 
     th {
-        @apply rtl:border-l ltr:border-r p-2 bg-gray-300;
+        @apply rtl:border-l ltr:border-r dark:border-dark-900 p-2 bg-gray-300 dark:bg-dark-500;
     }
 
     td {
@@ -54,12 +54,12 @@
     }
 
     td:focus-within {
-        @apply bg-gray-200;
+        @apply bg-gray-200 dark:bg-dark-600;
     }
 
     /* Read Only */
     .read-only-field & {
-        th { @apply text-gray-500; }
-        tr td { @apply bg-gray-200; }
+        th { @apply text-gray-500 dark:text-dark-150; }
+        tr td { @apply bg-gray-200 dark:bg-dark-600; }
     }
 }
diff --git a/resources/css/components/assets.css b/resources/css/components/assets.css
index a59e3cf64b..90c27667c9 100644
--- a/resources/css/components/assets.css
+++ b/resources/css/components/assets.css
@@ -34,7 +34,7 @@
    ========================================================================== */
 
 .asset-table-listing {
-    @apply border rounded relative overflow-hidden;
+    @apply border dark:border-dark-900 rounded relative overflow-hidden;
 
 
     table {
@@ -45,7 +45,7 @@
     }
 
     tbody tr:not(:last-child) {
-        @apply border-b;
+        @apply border-b dark:border-dark-900;
     }
 
     tbody tr td {
@@ -84,7 +84,7 @@
   ========================================================================== */
 
 .asset-grid-listing {
-    @apply bg-white grid relative p-4 gap-4;
+    @apply bg-white dark:bg-dark-800 grid relative p-4 gap-4;
     grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
 }
 
@@ -93,7 +93,7 @@
    ========================================================================== */
 
 .asset-tile {
-    @apply bg-white relative min-w-0 flex items-center flex-col justify-between cursor-pointer border rounded;
+    @apply bg-white dark:bg-dark-500 relative min-w-0 flex items-center flex-col justify-between cursor-pointer border rounded border-dark-200;
 
     .asset-thumb {
         @apply flex justify-center items-center w-full h-full rounded;
@@ -112,7 +112,7 @@
     }
 
     .asset-meta {
-        @apply border-t w-full text-2xs text-gray-700;
+        @apply border-t dark:border-dark-200 w-full text-2xs text-gray-700 dark:text-dark-100;
     }
 
     .asset-filename {
@@ -125,12 +125,12 @@
 }
 
 .asset-tile.selected {
-    @apply border-blue;
+    @apply border-blue dark:border-dark-blue-100;
     box-shadow: 0 0 0 1px theme('colors.blue.DEFAULT');
 }
 
 .asset-thumbnail {
-    @apply border border-white;
+    @apply border border-white dark:border-dark-950;
 }
 
 /* The Asset Editor
diff --git a/resources/css/components/blueprints.css b/resources/css/components/blueprints.css
index be798ec828..24ebbc81aa 100644
--- a/resources/css/components/blueprints.css
+++ b/resources/css/components/blueprints.css
@@ -25,7 +25,7 @@
     @apply relative mb-2 px-1 z-10 outline-none text-sm;
 
     .blueprint-section-field-inner {
-        @apply relative border rounded bg-gray-200 shadow-sm flex outline-none z-10;
+        @apply relative border dark:border-dark-300 rounded bg-gray-200 dark:bg-dark-550 shadow-sm flex outline-none z-10;
     }
 
     &.draggable-source--is-dragging {
@@ -44,6 +44,10 @@
         top: -3px; left: 6px ; right: 0 ; bottom: 3px; z-index: 1;
 
         [dir="rtl"] & { left: 0 ; right: 6px ; }
+
+        .dark & {
+            @apply border-dark-300 bg-dark-550;
+        }
     }
 }
 
@@ -65,10 +69,10 @@
 }
 
 .blueprint-add-section-button {
-    @apply relative w-full border border-gray-500 border-dashed rounded-lg flex justify-center items-center text-gray-700;
+    @apply relative w-full border border-gray-500 dark:border-dark-200 border-dashed rounded-lg flex justify-center items-center text-gray-700 dark:text-dark-150;
 
     &:hover {
-        @apply border-gray text-gray-950;
+        @apply border-gray dark:border-dark-175 text-gray-950 dark:text-dark-100;
     }
 
     .blueprint-section-draggable-zone {
diff --git a/resources/css/components/cards.css b/resources/css/components/cards.css
index 019f7b8ea1..cb280c3263 100644
--- a/resources/css/components/cards.css
+++ b/resources/css/components/cards.css
@@ -3,7 +3,7 @@
    ========================================================================== */
 
 .card {
-    @apply shadow bg-white rounded-md p-2;
+    @apply shadow bg-white rounded-md p-2 dark:bg-dark-600 dark:shadow-dark;
 }
 
 @screen md {
diff --git a/resources/css/components/dark-mode-toggle.css b/resources/css/components/dark-mode-toggle.css
new file mode 100644
index 0000000000..35879ace61
--- /dev/null
+++ b/resources/css/components/dark-mode-toggle.css
@@ -0,0 +1,95 @@
+/* ==========================================================================
+   DARK MODE TOGGLE
+   ========================================================================== */
+
+label.dark-mode-toggle {
+    margin: 0 10px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    direction: ltr;
+
+    .toggle-checkbox {
+        position: absolute;
+        opacity: 0;
+        cursor: pointer;
+        height: 0;
+        width: 0;
+    }
+
+    .toggle-slot {
+        position: relative;
+        height: 2em;
+        width: 4em;
+        border: 1px solid #e4e7ec;
+        border-radius: 2em;
+        background-color: white;
+        transition: background-color 250ms;
+    }
+
+    .toggle-checkbox:checked ~ .toggle-slot {
+        background-color: #374151;
+        border: 1px solid #09192a;
+    }
+
+    .toggle-button {
+        transform: translate(0.4em, 0.35em);
+        position: absolute;
+        height: 1.2em;
+        width: 1.2em;
+        border-radius: 50%;
+        background-color: #ffeccf;
+        box-shadow: inset 0 0 0 1px #ffbb52;
+        transition: background-color 250ms, border-color 250ms, transform 500ms cubic-bezier(0.26, 2, 0.46, 0.71);
+    }
+
+    .toggle-checkbox:checked ~ .toggle-slot .toggle-button {
+        background-color: #485367;
+        box-shadow: inset 0 0 0 1px rgba(5 21 37 / 37%);
+        transform: translate(2.15em, 0.35em);
+    }
+
+    .sun-icon {
+        position: absolute;
+        height: 1.2em;
+        width: 1.2em;
+        color: #ffbb52;
+    }
+
+    .sun-icon-wrapper {
+        position: absolute;
+        height: 1.2em;
+        width: 1.2em;
+        opacity: 1;
+        transform: translate(2.2em, 0.3em) rotate(15deg);
+        transform-origin: 50% 50%;
+        transition: opacity 150ms, transform 500ms cubic-bezier(0.26, 2, 0.46, 0.71);
+    }
+
+    .toggle-checkbox:checked ~ .toggle-slot .sun-icon-wrapper {
+        opacity: 0;
+        transform: translate(3em, 2em) rotate(0deg);
+    }
+
+    .moon-icon {
+        position: absolute;
+        height: 1.2em;
+        width: 1.2em;
+        color: white;
+    }
+
+    .moon-icon-wrapper {
+        position: absolute;
+        height: 1.2em;
+        width: 1.2em;
+        opacity: 0;
+        transform: translate(2em, 0.2em) rotate(0deg);
+        transform-origin: 50% 50%;
+        transition: opacity 150ms, transform 500ms cubic-bezier(0.26, 2.5, 0.46, 0.71);
+    }
+
+    .toggle-checkbox:checked ~ .toggle-slot .moon-icon-wrapper {
+        opacity: 1;
+        transform: translate(0.4em, 0.3em) rotate(-15deg);
+    }
+}
diff --git a/resources/css/components/fieldtypes/assets.css b/resources/css/components/fieldtypes/assets.css
index a2d38bba6f..ae372e528d 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-col @sm:flex-row items-start @sm:items-center px-4 py-2 bg-gray-200 border rounded;
+    @apply flex flex-col @sm:flex-row items-start @sm:items-center px-4 py-2 bg-gray-200 dark:bg-dark-700 border dark:border-dark-900 rounded;
 
     &.is-expanded {
         @apply border-b-0 rounded-b-none;
diff --git a/resources/css/components/fieldtypes/bard.css b/resources/css/components/fieldtypes/bard.css
index f464f55b43..5fd80477bc 100644
--- a/resources/css/components/fieldtypes/bard.css
+++ b/resources/css/components/fieldtypes/bard.css
@@ -1,11 +1,11 @@
 .bard-fieldtype-wrapper {
-    @apply border rounded relative outline-none;
+    @apply border dark:border-dark-900 rounded relative outline-none;
 
     * { outline: none; }
 }
 
 .bard-editor {
-    @apply text-gray-800 bg-gray-100 shadow-inner p-0 relative rounded;
+    @apply text-gray-800 dark:text-dark-150 bg-gray-100 dark:bg-dark-800 shadow-inner p-0 relative rounded;
 }
 
 .bard-editor .ProseMirror {
@@ -13,7 +13,7 @@
     @apply @md/bard:p-2 text-md leading-normal;
     @apply @lg/bard:p-4;
     &:focus {
-        @apply ring-2 ring-inset ring-blue-200;
+        @apply ring-2 ring-inset ring-blue-200 dark:ring-blue-600;
     }
 }
 
@@ -23,7 +23,7 @@
 
 /*  Modes */
 .bard-editor.mode\:read-only .ProseMirror {
-    @apply bg-gray-300 text-gray-700;
+    @apply bg-gray-300 dark:bg-dark-600 text-gray-700 dark:text-dark-175;
 }
 
 .bard-editor.mode\:minimal .ProseMirror {
@@ -39,21 +39,21 @@
 }
 
 .bard-fixed-toolbar {
-    @apply bg-white shadow-none rounded-t border-b text-sm flex items-start justify-between p-1 z-5 top-0;
+    @apply bg-white dark:bg-dark-500 shadow-none rounded-t border-b dark:border-dark-300 text-sm flex items-start justify-between p-1 z-5 top-0;
 
     .bard-toolbar-button {
-        @apply text-gray-800 rounded px-1 flex text-center justify-center items-center text-base h-8 w-8 m-0;
+        @apply text-gray-800 dark:text-dark-150 rounded px-1 flex text-center justify-center items-center text-base h-8 w-8 m-0;
         svg {
             @apply w-auto h-4;
         }
     }
 
     .bard-toolbar-button:hover {
-        @apply bg-gray-200;
+        @apply bg-gray-200 dark:bg-dark-700;
     }
 
     .bard-toolbar-button.active {
-        @apply bg-gray-300 text-black;
+        @apply bg-gray-300 dark:bg-dark-800 text-black dark:text-dark-100;
     }
 
     .bard-toolbar-button:focus {
@@ -63,7 +63,7 @@
     .bard-toolbar-button:disabled {
         @apply opacity-50;
         &:hover {
-            @apply text-gray-800;
+            @apply text-gray-800 dark:text-dark-100;
         }
     }
 
@@ -167,7 +167,7 @@
 }
 
 .bard-footer-toolbar {
-    @apply bg-white shadow-none text-gray-700 rounded-b border-t text-xs p-2 flex items-center justify-between;
+    @apply bg-white dark:bg-dark-550 shadow-none text-gray-700 dark:text-dark-175 rounded-b border-t dark:border-dark-300 text-xs p-2 flex items-center justify-between;
     padding: 8px 12px;
 
     .bard-fullscreen & {
@@ -206,14 +206,14 @@
    ========================================================================== */
 
 .bard-fullscreen {
-    @apply fixed bg-gray-200 inset-0 min-h-screen overflow-scroll rounded-none pt-16;
+    @apply fixed bg-gray-200 dark:bg-dark-700 inset-0 min-h-screen overflow-scroll rounded-none pt-16;
 
     & > .bard-editor {
-        @apply bg-white shadow max-w-xl mx-auto rounded relative my-6 px-8;
+        @apply bg-white dark:bg-dark-800 shadow dark:shadow-dark max-w-xl mx-auto rounded relative my-6 px-8;
     }
 
     & > .bard-fixed-toolbar {
-        @apply shadow h-12 fixed w-full bg-gradient-to-b from-white to-gray-100;
+        @apply shadow dark:shadow-dark h-12 fixed w-full bg-gradient-to-b from-white to-gray-100 dark:from-dark-400 dark:to-dark-500;
         padding: 7px 8px;
         top: 0;
         z-index: 999;
@@ -265,7 +265,7 @@
 
 .bard-fieldtype .bard-content > {
     p {
-        @apply text-gray-800;
+        @apply text-gray-800 dark:text-dark-150;
         word-break: break-all;
         word-break: break-word;
 
@@ -287,7 +287,7 @@
         em, i { font-style: italic }
 
         a {
-            @apply text-blue underline break-words;
+            @apply text-blue dark:text-dark-blue-100 underline break-words;
         }
 
         a:active,
@@ -315,7 +315,7 @@
     }
 
     hr {
-        @apply bg-gray-600;
+        @apply bg-gray-600 dark:bg-dark-300;
         height: 4px;
         padding: 0;
         margin: 1.7em 0;
@@ -418,7 +418,7 @@
     }
 
     blockquote {
-        @apply text-gray-800 rtl:border-r-4 ltr:border-l-4 border-blue px-4;
+        @apply text-gray-800 dark:text-dark-150 rtl:border-r-4 ltr:border-l-4 border-blue dark:border-dark-blue-100 px-4;
         margin: 0 0 .85em;
     }
 
@@ -434,16 +434,16 @@
     blockquote > .tableWrapper table,
     ol li > .tableWrapper table,
     ul li > .tableWrapper table {
-        @apply w-full overflow-hidden m-0 mb-4 bg-white text-sm ;
+        @apply w-full overflow-hidden m-0 mb-4 bg-white dark:bg-dark-500 text-sm ;
         border-collapse: collapse;
         table-layout: fixed;
 
         th {
-            @apply font-bold rtl:text-right ltr:text-left bg-gray-200;
+            @apply font-bold rtl:text-right ltr:text-left bg-gray-200 dark:bg-dark-575;
         }
 
         td, th {
-            @apply border align-top relative py-1 px-2;
+            @apply border dark:border-dark-200 align-top relative py-1 px-2;
             min-width: 1em;
         }
 
@@ -451,13 +451,13 @@
             @apply relative;
 
             &:after {
-                @apply bg-gray-400 absolute inset-0 pointer-events-none opacity-25;
+                @apply bg-gray-400 dark:bg-dark-200 absolute inset-0 pointer-events-none opacity-25;
                 content: '';
             }
         }
 
         a {
-            @apply text-blue underline break-words;
+            @apply text-blue dark:text-dark-blue-100 underline break-words;
         }
 
         a:active,
@@ -469,7 +469,7 @@
     }
 
     p > code {
-        @apply font-mono bg-gray-400 rounded-sm text-xs;
+        @apply font-mono bg-gray-400 dark:bg-dark-750 rounded-sm text-xs;
         padding: 2px 4px;
         top: -1px;
     }
@@ -479,7 +479,7 @@
     }
 
     pre code {
-        @apply font-mono bg-gray-400 text-xs p-4 block w-full rounded;
+        @apply font-mono bg-gray-400 dark:bg-dark-950 dark:text-dark-100 text-xs p-4 block w-full rounded;
         line-height: 1.8;
     }
 }
@@ -488,7 +488,7 @@
 ========================================================================== */
 
 .bard-fieldtype .ProseMirror > p.is-editor-empty:first-child::before {
-    @apply text-gray-600;
+    @apply text-gray-600 dark:text-dark-200;
     content: attr(data-placeholder);
     float: left ; [dir="rtl"] & { float: right ; }
     height: 0;
@@ -517,7 +517,7 @@
 }
 
 .bard-inline-image-container {
-    @apply relative bg-white border rounded whitespace-normal mb-6;
+    @apply relative bg-white dark:bg-dark-600 border dark:border-dark-900 rounded whitespace-normal mb-6;
     &:hover {
         cursor: grab;
     }
diff --git a/resources/css/components/fieldtypes/code.css b/resources/css/components/fieldtypes/code.css
index 2f9dcf276b..46f6f187c3 100644
--- a/resources/css/components/fieldtypes/code.css
+++ b/resources/css/components/fieldtypes/code.css
@@ -3,7 +3,7 @@
 }
 
 .code-fieldtype-toolbar {
-    @apply bg-white shadow-none rounded-t border border-b-0 text-sm flex flex-wrap items-center justify-end gap-2;
+    @apply bg-white dark:bg-dark-550 shadow-none rounded-t border dark:border-dark-900 border-b-0 text-sm flex flex-wrap items-center justify-end gap-2;
     padding: 4px 8px;
 
     [dir='rtl'] & {
@@ -17,9 +17,9 @@
 
 
 .code-fieldtype-container.code-fullscreen {
-    @apply fixed bg-gray-200 inset-0 min-h-screen overflow-scroll rounded-none pt-12;
+    @apply fixed bg-gray-200 dark:bg-dark-600 inset-0 min-h-screen overflow-scroll rounded-none pt-12;
 
     .code-fieldtype-toolbar {
-        @apply fixed z-2 top-0 w-full px-6 py-2 h-12 shadow text-base rounded-none bg-gradient-to-b from-white to-gray-100;
+        @apply fixed z-2 top-0 w-full px-6 py-2 h-12 shadow dark:shadow-dark text-base rounded-none bg-gradient-to-b from-white to-gray-100 dark:from-dark-550 dark:to-dark-600;
     }
 }
diff --git a/resources/css/components/fieldtypes/grid.css b/resources/css/components/fieldtypes/grid.css
index b070bedcee..9a607d396e 100644
--- a/resources/css/components/fieldtypes/grid.css
+++ b/resources/css/components/fieldtypes/grid.css
@@ -3,7 +3,7 @@
    ========================================================================== */
 
 .grid-table {
-    @apply w-full rtl:text-right ltr:text-left border text-gray relative mb-4 outline-none shadow-sm rounded;
+    @apply w-full rtl:text-right ltr:text-left border dark:border-dark-900 text-gray dark:text-dark-150 relative mb-4 outline-none shadow-sm rounded;
     border-collapse: separate;
     border-spacing: 0;
     table-layout: auto;
@@ -11,7 +11,7 @@
 
 .grid-table thead {
     th {
-        @apply font-medium px-2 py-2 border-b z-10 bg-gray-200 text-gray-900 text-sm;
+        @apply font-medium px-2 py-2 border-b dark:border-dark-900 z-10 bg-gray-200 dark:bg-dark-550 text-gray-900 dark:text-dark-150 text-sm;
         display: table-cell;
         position: sticky;
         top: -1px;
@@ -37,7 +37,7 @@
     }
 
     > tr > td {
-        @apply border-b px-2 py-3 align-top;
+        @apply border-b dark:border-dark-900 px-2 py-3 align-top;
 
         &:first-child.grid-cell {
             @apply rtl:pr-3 ltr:pl-3;
@@ -50,6 +50,10 @@
             background: theme('colors.gray.200') url('../../../svg/icons/light/drag-dots.svg') center center no-repeat;
             background-size: 7px 17px;
             &:hover { @apply bg-gray-300; }
+
+            .dark & {
+                background-color: theme('colors.dark.700');
+            }
         }
     }
 
diff --git a/resources/css/components/fieldtypes/markdown.css b/resources/css/components/fieldtypes/markdown.css
index 609d7d4905..38baf42453 100644
--- a/resources/css/components/fieldtypes/markdown.css
+++ b/resources/css/components/fieldtypes/markdown.css
@@ -3,10 +3,10 @@
    ========================================================================== */
 
 .markdown-fieldtype-wrapper {
-    @apply border rounded overflow-hidden relative;
+    @apply border dark:border-dark-900 rounded overflow-hidden relative;
 
     .markdown-toolbar {
-        @apply bg-white shadow-none rounded-t border-b text-sm flex flex-wrap items-center justify-between;
+        @apply bg-white dark:bg-dark-550 shadow-none rounded-t border-b dark:border-dark-900 text-sm flex flex-wrap items-center justify-between;
         padding: 4px 8px;
     }
 
@@ -15,21 +15,21 @@
     }
 
     .markdown-buttons button {
-        @apply text-gray-800 rounded px-1 flex items-center justify-center text-base text-center h-8 w-8;
+        @apply text-gray-800 dark:text-dark-150 rounded px-1 flex items-center justify-center text-base text-center h-8 w-8;
 
         &:hover {
-            @apply bg-gray-200;
+            @apply bg-gray-200 dark:bg-dark-750;
         }
 
         &.active {
-            @apply bg-gray-300 text-black;
+            @apply bg-gray-300 dark:bg-dark-800 text-black dark:text-dark-175;
         }
     }
 
     .markdown-buttons button:disabled {
         @apply opacity-50;
         &:hover {
-            @apply text-gray-800;
+            @apply text-gray-800 dark:text-dark-200;
         }
     }
 
@@ -37,24 +37,24 @@
         @apply flex items-center;
 
         button {
-            @apply text-gray-700 inline-block focus:outline-none px-2 py-1 rtl:ml-1 ltr:mr-1;
+            @apply text-gray-700 dark:text-dark-150 inline-block focus:outline-none px-2 py-1 rtl:ml-1 ltr:mr-1;
 
             &:hover {
                 @apply text-blue;
             }
 
             &.active {
-                @apply bg-blue-100 text-blue-800 rounded;
+                @apply bg-blue-100 dark:bg-dark-800 text-blue-800 dark:text-dark-150 rounded;
             }
         }
     }
 
     .CodeMirror {
-        @apply bg-gray-100 shadow-inner h-auto font-mono leading-normal px-0 py-1 @md/markdown:p-3 text-xs;
+        @apply bg-gray-100 dark:bg-dark-800 shadow-inner h-auto font-mono leading-normal px-0 py-1 @md/markdown:p-3 text-xs dark:text-dark-150;
         border-radius: 0 0 3px 3px;
 
         &:focus-within {
-            @apply ring-2 ring-inset ring-blue-200;
+            @apply ring-2 ring-inset ring-blue-200 dark:ring-dark-blue-150;
         }
 
         .cm-comment {
@@ -65,7 +65,7 @@
     .CodeMirror-code { min-height: 100px; }
 
     .helpers {
-        @apply border-t text-xs text-gray-800 flex items-center;
+        @apply border-t dark:border-dark-900 text-xs text-gray-800 dark:text-dark-150 flex items-center;
 
         button:hover {
             @apply text-blue;
@@ -85,7 +85,8 @@
 /* Dark Mode
   ========================================================================== */
 
-.markdown-fieldtype-wrapper.markdown-fullscreen.markdown-dark-mode {
+.markdown-fieldtype-wrapper.markdown-fullscreen.markdown-dark-mode,
+.dark .markdown-fieldtype-wrapper.markdown-fullscreen {
     @apply bg-gray-800 border-none;
 
     .markdown-toolbar {
@@ -141,7 +142,7 @@
   ========================================================================== */
 
 .markdown-fieldtype.read-only-field .CodeMirror {
-    @apply bg-gray-300 text-gray-700;
+    @apply bg-gray-300 dark:bg-dark-600 text-gray-700 dark:text-dark-200;
 }
 
 
@@ -164,7 +165,7 @@
   ========================================================================== */
 
 .markdown-fieldtype .cm-header {
-    @apply text-gray-800;
+    @apply text-gray-800 dark:text-dark-150;
 
     &.cm-header-1 {
         @apply text-lg;
@@ -180,7 +181,7 @@
 }
 
 .markdown-fieldtype .cm-quote {
-    @apply text-gray-800 italic text-sm;
+    @apply text-gray-800 dark:text-dark-150 italic text-sm;
 }
 
 
@@ -201,7 +202,7 @@
     }
 
     pre {
-        @apply rounded px-4 py-2;
+        @apply rounded px-4 py-2 dark:bg-dark-700 dark:text-red-500;
         color: #c7254e;
         background-color: #f9f2f4;
         direction: ltr;
diff --git a/resources/css/components/fieldtypes/replicator.css b/resources/css/components/fieldtypes/replicator.css
index 55b54cc677..77036a3f2b 100644
--- a/resources/css/components/fieldtypes/replicator.css
+++ b/resources/css/components/fieldtypes/replicator.css
@@ -7,22 +7,22 @@
 }
 
 .replicator-set {
-    @apply shadow-set rounded bg-white outline-none relative;
+    @apply shadow-set dark:shadow-dark-set rounded bg-white dark:bg-dark-500 outline-none relative;
 }
 
 .replicator-set-header {
-    @apply bg-gray-300 border-b rounded-t rtl:pl-3 ltr:pr-3 flex select-none;
+    @apply bg-gray-300 dark:bg-dark-550 border-b dark:border-dark-900 rounded-t rtl:pl-3 ltr:pr-3 flex select-none;
 
     &.collapsed {
         @apply rounded border-b-0;
     }
 
     .sortable-handle {
-        @apply w-4 rtl:border-l ltr:border-r rtl:rounded-tr ltr:rounded-tl p-2;
+        @apply w-4 rtl:border-l ltr:border-r dark:border-dark-900 rtl:rounded-tr ltr:rounded-tl p-2;
         cursor: grab;
         background: transparent url('../../../svg/icons/light/drag-dots.svg') center center no-repeat;
         background-size: 7px 17px;
-        &:hover { @apply bg-gray-200; }
+        &:hover { @apply bg-gray-200 dark:bg-dark-700; }
     }
 
     img {
diff --git a/resources/css/components/fieldtypes/section.css b/resources/css/components/fieldtypes/section.css
index 5600d19185..1b88e39ece 100644
--- a/resources/css/components/fieldtypes/section.css
+++ b/resources/css/components/fieldtypes/section.css
@@ -3,7 +3,7 @@
    ========================================================================== */
 
 .section-fieldtype {
-    @apply border-t border-b bg-gray-200;
+    @apply border-t border-b dark:border-dark-900 bg-gray-200 dark:bg-dark-550;
     @apply -mt-px; /*  Avoid adjacent borders just in case they're stacked */
 
     &.form-group {
diff --git a/resources/css/components/fieldtypes/table.css b/resources/css/components/fieldtypes/table.css
index 95f1b235e4..632e7dc7ed 100644
--- a/resources/css/components/fieldtypes/table.css
+++ b/resources/css/components/fieldtypes/table.css
@@ -3,7 +3,7 @@
    ========================================================================== */
 
 .table-fieldtype-table {
-    @apply w-full rtl:text-right ltr:text-left border text-gray relative mb-4 outline-none shadow-sm rounded;
+    @apply w-full rtl:text-right ltr:text-left border dark:border-dark-900 text-gray dark:text-dark-150 relative mb-4 outline-none shadow-sm rounded;
     border-collapse: separate;
     border-spacing: 0;
     table-layout: fixed;
@@ -11,7 +11,7 @@
 
 .table-fieldtype-table thead {
     th {
-        @apply font-medium rtl:border-l ltr:border-r p-2 border-b z-10 bg-gray-200 text-gray-900 text-sm;
+        @apply font-medium rtl:border-l ltr:border-r p-2 border-b dark:border-dark-900 z-10 bg-gray-200 dark:bg-dark-500 text-gray-900 dark:text-dark-100 text-sm;
         display: table-cell;
         position: sticky;
         top: -1px;
@@ -25,9 +25,9 @@
 }
 
 .table-fieldtype-table .input-text {
-    @apply bg-white border-none rounded-none shadow-none outline-none text-sm;
+    @apply bg-white dark:bg-dark-600 border-none rounded-none shadow-none outline-none text-sm;
     &:focus {
-        @apply shadow-inner bg-gray-100 ring-0;
+        @apply shadow-inner bg-gray-100 dark:bg-dark-700 ring-0;
     }
 }
 
@@ -39,7 +39,7 @@
     }
 
     td {
-        @apply border-b rtl:border-l ltr:border-r p-0;
+        @apply border-b rtl:border-l ltr:border-r dark:border-dark-900 p-0;
 
         &:first-child.grid-cell {
             @apply rtl:pr-3 ltr:pl-3;
@@ -54,7 +54,12 @@
             cursor: grab;
             background: theme('colors.gray.200') url('../../../svg/icons/light/drag-dots.svg') center center no-repeat;
             background-size: 7px 17px;
-            &:hover { @apply bg-gray-300; }
+
+            .dark & {
+                background-color: theme(colors.dark.600);
+            }
+
+            &:hover { @apply bg-gray-300 dark:bg-dark-750; }
         }
     }
 
@@ -65,7 +70,7 @@
     }
 
     tr.draggable-source--is-dragging td {
-        @apply bg-gray-100;
+        @apply bg-gray-100 dark:bg-dark-800;
     }
 }
 
@@ -73,7 +78,7 @@
     @apply w-8 rtl:pr-0 ltr:pl-0 text-center;
     vertical-align: middle;
     &:focus-within {
-        @apply bg-gray-200;
+        @apply bg-gray-200 dark:bg-dark-750;
         button {
             @apply outline-none ring-0;
         }
diff --git a/resources/css/components/fieldtypes/textarea.css b/resources/css/components/fieldtypes/textarea.css
index 6eba949320..bbae487a66 100644
--- a/resources/css/components/fieldtypes/textarea.css
+++ b/resources/css/components/fieldtypes/textarea.css
@@ -3,11 +3,11 @@
    ========================================================================== */
 
 .textarea-fieldtype textarea {
-    @apply border-gray-500 text-md leading-normal;
+    @apply border-gray-500 dark:border-dark-200 text-md leading-normal;
     min-height: 80px;
 
     &:not(.focus-within-only):focus, &:not(.focus-within-only):focus-within {
-        @apply ring-2 ring-blue-300 outline-none shadow-none;
+        @apply ring-2 ring-blue-300 dark:ring-blue-600 outline-none shadow-none;
     }
 }
 
@@ -15,5 +15,5 @@
   ========================================================================== */
 
  .grid-fieldtype .textarea-fieldtype textarea {
-     @apply bg-white;
+     @apply bg-white dark:bg-dark-600;
  }
diff --git a/resources/css/components/fieldtypes/video.css b/resources/css/components/fieldtypes/video.css
index 3261716751..a6ad494408 100644
--- a/resources/css/components/fieldtypes/video.css
+++ b/resources/css/components/fieldtypes/video.css
@@ -1,5 +1,5 @@
 .video-fieldtype-container {
-    @apply bg-gray-200 p-4 border rounded;
+    @apply bg-gray-200 dark:bg-dark-700 p-4 border dark:border-dark-950 rounded;
 }
 
 .video-fieldtype .video-preview-wrapper {
diff --git a/resources/css/components/fieldtypes/width.css b/resources/css/components/fieldtypes/width.css
index 7219724d0e..ab30c77d5e 100644
--- a/resources/css/components/fieldtypes/width.css
+++ b/resources/css/components/fieldtypes/width.css
@@ -5,18 +5,18 @@
     @apply w-12 h-5 flex relative cursor-pointer;
 
     .field-width-label {
-        @apply absolute text-4xs font-bold w-full text-center z-10 text-gray-700 inset-0 flex items-center justify-center pointer-events-none;
+        @apply absolute text-4xs font-bold w-full text-center z-10 text-gray-700 dark:text-dark-150 inset-0 flex items-center justify-center pointer-events-none;
     }
 
     .field-width-notch {
-        @apply relative border border-gray-400 rtl:border-r-0 ltr:border-l-0 flex-1;
+        @apply relative border border-gray-400 dark:border-dark-200 rtl:border-r-0 ltr:border-l-0 flex-1;
 
         &:first-of-type {
             @apply rtl:border-r ltr:border-l rtl:rounded-r-sm ltr:rounded-l-sm;
         }
 
         &.filled {
-            @apply border-gray-400 rtl:border-l-0 ltr:border-r-0 rtl:pl-px ltr:pr-px bg-white -my-px;
+            @apply border-gray-400 dark:border-dark-200 rtl:border-l-0 ltr:border-r-0 rtl:pl-px ltr:pr-px bg-white dark:bg-dark-575 -my-px;
         }
 
         &.selected {
@@ -32,13 +32,13 @@
     @apply w-16 h-9 mt-px;
 
     .field-width-notch {
-        @apply bg-gray-200 border-r-gray-400 border-y-gray-500;
+        @apply bg-gray-200 dark:bg-dark-550 border-r-gray-400 dark:border-dark-700 border-y-gray-500 dark:border-y-dark-750;
         &:last-child {
-            @apply border-r-gray-500 rtl:rounded-l-sm ltr:rounded-r-sm;
+            @apply border-r-gray-500 dark:border-dark-750 rtl:rounded-l-sm ltr:rounded-r-sm;
         }
 
         &.filled {
-            @apply bg-gradient-to-b from-white to-gray-100 border-gray-500;
+            @apply bg-gradient-to-b from-white to-gray-100 dark:from-dark-300 dark:to-dark-400 border-gray-500 dark:border-dark-750;
         }
     }
 
diff --git a/resources/css/components/global-header.css b/resources/css/components/global-header.css
index 7a7c1f405e..09321adb5e 100644
--- a/resources/css/components/global-header.css
+++ b/resources/css/components/global-header.css
@@ -3,8 +3,16 @@
    ========================================================================== */
 
 .global-header {
-    @apply bg-white shadow rtl:pl-4 ltr:pr-4 h-13 items-center flex relative w-full;
+    @apply bg-white dark:bg-dark-600 shadow dark:shadow-dark rtl:pl-4 ltr:pr-4 h-13 items-center flex relative w-full;
     z-index: 3; /* The search focus overlay sits underneath using z-index 2. */
+
+    .dark & {
+        .logo {
+            path {
+                fill: theme(colors.dark.100) !important;
+            }
+        }
+    }
 }
 
 /* Responsive Wangjangling
@@ -17,11 +25,11 @@
 /* Search
    ========================================================================== */
 .global-search {
-    @apply rounded-md px-2 hidden py-0 flex items-center relative border;
+    @apply rounded-md px-2 hidden py-0 flex items-center relative border dark:border-dark-300;
     transition: .12s ease-out;
 
     .search-input {
-        @apply text-sm w-full max-w-full;
+        @apply text-sm w-full max-w-full dark:bg-dark-600 dark:text-dark-150;
         padding-left: 5px ;
         padding-right: 20px ; [dir="rtl"] & { padding-left: 20px ; padding-right: 5px ; }
         height: 32px;
diff --git a/resources/css/components/items.css b/resources/css/components/items.css
index 8940523217..64d18803c3 100644
--- a/resources/css/components/items.css
+++ b/resources/css/components/items.css
@@ -1,12 +1,16 @@
 .item {
-    @apply text-sm outline-none flex w-full justify-between rounded border bg-white shadow-sm items-center;
+    @apply text-sm outline-none flex w-full justify-between rounded border dark:border-dark-900 bg-white dark:bg-dark-550 shadow-sm items-center;
 
     .item-move {
-        @apply w-4 self-stretch rtl:border-l ltr:border-r rtl:rounded-r ltr:rounded-l p-2;
+        @apply w-4 self-stretch rtl:border-l ltr:border-r dark:border-dark-900 rtl:rounded-r ltr:rounded-l p-2;
         cursor: grab;
         background: theme('colors.gray.200') url('../../svg/icons/light/drag-dots.svg') center center no-repeat;
         background-size: 7px 17px;
-        &:hover { @apply bg-gray-300; }
+        &:hover { @apply bg-gray-300 dark:bg-dark-700; }
+
+        .dark & {
+            background-color: theme('colors.dark.550');
+        }
     }
 
     .item-inner {
@@ -15,7 +19,7 @@
 
     &.invalid {
         .item-inner {
-            @apply border-red-300 bg-red-100 text-red-500;
+            @apply border-red-300 dark:border-dark-red bg-red-100 dark:bg-red-400 text-red-500 dark:text-red-950;
         }
     }
 
diff --git a/resources/css/components/modal.css b/resources/css/components/modal.css
index 378f36598f..dfe608c8c1 100644
--- a/resources/css/components/modal.css
+++ b/resources/css/components/modal.css
@@ -6,7 +6,7 @@
 }
 
 .vm--modal {
-    @apply rounded-lg !important;
+    @apply rounded-lg dark:bg-dark-600 dark:shadow-dark !important;
 
     [dir='rtl'] & {
         direction: rtl;
diff --git a/resources/css/components/nav-main.css b/resources/css/components/nav-main.css
index 85dfbada93..cf616a9210 100644
--- a/resources/css/components/nav-main.css
+++ b/resources/css/components/nav-main.css
@@ -3,7 +3,7 @@
    ========================================================================== */
 
 .nav-main {
-    @apply hidden select-none bg-white shadow h-screen absolute rtl:right-0 ltr:left-0 overflow-scroll w-56;
+    @apply hidden select-none bg-white dark:bg-dark-800 shadow dark:shadow-dark h-screen absolute rtl:right-0 ltr:left-0 overflow-scroll w-56;
     transition: all .3s;
 
     h6 { @apply mt-6; }
@@ -18,7 +18,7 @@
     }
 
     li a {
-        @apply p-0 flex items-center text-gray-800;
+        @apply p-0 flex items-center text-gray-800 dark:text-dark-150;
         transition: all .08s ease-in-out;
 
         &:hover {
@@ -31,10 +31,10 @@
     }
 
     li.current > a {
-        @apply text-gray-900 font-medium;
+        @apply text-gray-900 font-medium dark:text-dark-100;
 
         i {
-            @apply bg-white;
+            @apply bg-white dark:bg-dark-350;
         }
     }
 
@@ -63,7 +63,7 @@
 
 @screen md {
     .nav-main {
-        @apply fixed flex bg-transparent shadow-none overflow-auto rtl:border-l ltr:border-r;
+        @apply fixed flex bg-transparent shadow-none overflow-auto rtl:border-l ltr:border-r dark:border-dark-900;
         height: calc(100% - 52px);
         .showing-license-banner & {
             height: calc(100% - 120px);
@@ -80,7 +80,7 @@
     outline: none !important;
 
     &:hover {
-        @apply bg-gray-200;
+        @apply bg-gray-200 dark:bg-dark-500;
     }
 }
 
diff --git a/resources/css/components/notifications.css b/resources/css/components/notifications.css
index 631db9fa9a..352edc9175 100644
--- a/resources/css/components/notifications.css
+++ b/resources/css/components/notifications.css
@@ -13,7 +13,7 @@
 }
 
 .toasted-container .toasted.statamic {
-    @apply bg-white text-gray-800 mt-4 text-base rounded shadow p-0;
+    @apply bg-white dark:bg-dark-900 text-gray-800 dark:text-dark-100 mt-4 text-base rounded shadow p-0;
     height: 48px;
 
     i {
@@ -21,21 +21,21 @@
     }
 
     &.success i {
-        @apply bg-green-400 text-green-700;
+        @apply bg-green-400 dark:bg-green-600 text-green-700 dark:text-green-950;
     }
 
     &.error i {
-        @apply bg-red-500;
+        @apply bg-red-500 dark:bg-red-600;
     }
 
     &.default i {
-        @apply bg-gray-800;
+        @apply bg-gray-800 dark:bg-dark-900;
     }
 
     .action {
-        @apply font-normal text-xl px-4 h-full text-gray-600 m-0 rtl:mr-2 ltr:ml-2 flex items-center;
+        @apply font-normal text-xl px-4 h-full text-gray-600 dark:text-dark-150 m-0 rtl:mr-2 ltr:ml-2 flex items-center;
         &:hover {
-            @apply no-underline text-gray-900;
+            @apply no-underline text-gray-900 dark:text-dark-100;
         }
     }
 }
diff --git a/resources/css/components/page-tree.css b/resources/css/components/page-tree.css
index 254dae356b..296e0c38c8 100644
--- a/resources/css/components/page-tree.css
+++ b/resources/css/components/page-tree.css
@@ -1,10 +1,10 @@
 .page-tree {
 
     .tree-node-inner {
-        @apply relative text-xs bg-white shadow rounded;
+        @apply relative text-xs bg-white dark:bg-dark-550 shadow rounded;
 
         &:hover {
-            @apply bg-gray-100;
+            @apply bg-gray-100 dark:bg-dark-400;
         }
     }
 
@@ -15,20 +15,24 @@
         * { display: none; }
     }
 
-.page-move {
-        @apply w-6 rtl:border-l ltr:border-r rtl:rounded-r ltr:rounded-l;
+    .page-move {
+        @apply w-6 rtl:border-l ltr:border-r rtl:rounded-r ltr:rounded-l dark:text-dark-175 dark:border-dark-900;
         cursor: grab;
         background-color: hsla(210, 30%, 95%, .5);
         background-image: url('../../svg/icons/light/drag-dots.svg');
         background-size: 7px 17px;
         background-position: center center;
         background-repeat: no-repeat;
-        &:hover { @apply bg-gray-300; }
+        &:hover { @apply bg-gray-300 dark:bg-dark-700; }
+
+        .dark & {
+            background-color: hsla(180, 1%, 18%, 0.5);
+        }
     }
 
     .page-root {
         background-color: hsla(210, 30%, 95%, .5);
-        @apply flex w-6 rtl:rounded-r ltr:rounded-l items-center rtl:border-l ltr:border-r;
+        @apply flex w-6 rtl:rounded-r ltr:rounded-l items-center rtl:border-l ltr:border-r dark:border-dark-900;
     }
 }
 
diff --git a/resources/css/components/pagination.css b/resources/css/components/pagination.css
index cc1ec453ff..6a3846ddb0 100644
--- a/resources/css/components/pagination.css
+++ b/resources/css/components/pagination.css
@@ -3,21 +3,21 @@
    ========================================================================== */
 
 .pagination {
-	@apply flex justify-center shadow items-center list-none p-0 rounded overflow-hidden;
+    @apply flex justify-center shadow dark:shadow-dark items-center list-none p-0 rounded overflow-hidden;
 
 	li a {
-		@apply h-full px-3 py-2 rtl:border-l ltr:border-r bg-white block text-gray-800;
+        @apply h-full px-3 py-2 rtl:border-l ltr:border-r dark:border-dark-900 bg-white dark:bg-dark-600 block text-gray-800 dark:text-dark-150;
 
 		&:hover {
-			@apply bg-gray-100 text-gray-800;
+            @apply bg-gray-100 dark:bg-dark-700 text-gray-800 dark:text-dark-100;
 		}
 	}
 
 	li > .unclickable {
-		@apply h-full px-3 py-2 rtl:border-l ltr:border-r bg-white block text-gray-500;
+        @apply h-full px-3 py-2 rtl:border-l ltr:border-r dark:border-dark-900 bg-white dark:bg-dark-600 block text-gray-500 dark:text-dark-200;
 
 		&:hover {
-      cursor: text;
+            cursor: text;
 		}
 	}
 
@@ -26,7 +26,7 @@
 	}
 
 	li.current a {
-		@apply bg-gray-100 text-blue shadow-inner;
+        @apply bg-gray-100 dark:bg-dark-700 text-blue dark:text-dark-blue-100 shadow-inner;
 	}
 }
 
diff --git a/resources/css/components/popover.css b/resources/css/components/popover.css
index a5b4231f48..8698d86018 100644
--- a/resources/css/components/popover.css
+++ b/resources/css/components/popover.css
@@ -55,12 +55,12 @@
 }
 
 .rotating-dots-button {
-    @apply  text-gray-700 rounded-full flex items-center justify-center;
+    @apply text-gray-700 dark:text-dark-150 rounded-full flex items-center justify-center;
     height: 24px;
     width: 24px;
 
     &:hover {
-        @apply text-gray-950;
+        @apply text-gray-950 dark:text-dark-100;
     }
 
     &:focus {
diff --git a/resources/css/components/preview.css b/resources/css/components/preview.css
index 20f0152645..11b4d96d2c 100644
--- a/resources/css/components/preview.css
+++ b/resources/css/components/preview.css
@@ -7,6 +7,11 @@
     background: linear-gradient(180deg, #fff, #f9fafb);
     border-bottom: 1px solid #c4cdd6;
     z-index: 2;
+
+    .dark & {
+        background: linear-gradient(180deg, theme(colors.dark.500), theme(colors.dark.550));
+        border-color: theme(colors.dark.900);
+    }
 }
 
 
@@ -16,7 +21,7 @@
 }
 
 .live-preview-editor {
-    @apply flex relative bg-gray-200 h-full;
+    @apply flex relative bg-gray-200 dark:bg-dark-800 h-full;
     z-index: 3;
 }
 
@@ -35,7 +40,7 @@
 }
 
 .live-preview .tabs-container {
-    @apply bg-gray-300 mb-0;
+    @apply bg-gray-300 dark:bg-dark-550 mb-0;
     @apply @4xl/live-preview:mb-6;
 }
 
@@ -66,11 +71,15 @@
 }
 
 .live-preview-resizer {
-    @apply w-4 rtl:border-r ltr:border-l rtl:border-l ltr:border-r border-gray-400 shadow-sm;
+    @apply w-4 rtl:border-r ltr:border-l rtl:border-l ltr:border-r border-gray-400 dark:border-dark-900 shadow-sm;
     z-index: 1;
     cursor: ew-resize;
     background: theme('colors.gray.100') url('../../svg/icons/light/drag-dots.svg') center center no-repeat;
     background-size: 7px 17px;
+
+    .dark & {
+        background-color: theme('colors.dark.500');
+    }
 }
 
 
diff --git a/resources/css/components/publish.css b/resources/css/components/publish.css
index 98b427dabf..2a54504d96 100644
--- a/resources/css/components/publish.css
+++ b/resources/css/components/publish.css
@@ -85,7 +85,7 @@ code.parent-url {
 }
 
 .publish-section-header {
-    @apply border-b border-gray-400 bg-gray-100 rounded-t-lg;
+    @apply border-b border-gray-400 dark:border-dark-900 bg-gray-100 dark:bg-dark-500 rounded-t-lg;
 }
 
 .publish-section-header-inner {
diff --git a/resources/css/components/revisions.css b/resources/css/components/revisions.css
index bba44f0df2..17649ad950 100644
--- a/resources/css/components/revisions.css
+++ b/resources/css/components/revisions.css
@@ -11,12 +11,12 @@
 }
 
 .revision-item {
-    @apply p-2 text-sm block cursor-pointer border-t;
+    @apply p-2 text-sm block cursor-pointer border-t dark:border-dark-900;
     &:hover {
-        @apply bg-gray-200;
+        @apply bg-gray-200 dark:bg-dark-400;
     }
     &:last-child {
-        @apply border-b;
+        @apply border-b dark:border-dark-900;
     }
 }
 
@@ -39,7 +39,7 @@
 
     &.publish { @apply bg-green-600; }
     &.revision,
-    &.restore { @apply text-gray-700; }
+    &.restore { @apply text-gray-700 dark:text-dark-150 dark:bg-dark-300; }
     &.unpublish { @apply bg-red-500; }
 }
 
@@ -54,6 +54,6 @@
 
 .revision-item.status-working-copy {
     @apply text-blue;
-    .revision-item-bullet { @apply bg-blue; }
-    .badge { @apply bg-blue; }
+    .revision-item-bullet { @apply bg-blue dark:bg-dark-blue-100; }
+    .badge { @apply bg-blue dark:bg-dark-blue-100; }
 }
diff --git a/resources/css/components/settings.css b/resources/css/components/settings.css
index 7670aa566d..f411af20aa 100644
--- a/resources/css/components/settings.css
+++ b/resources/css/components/settings.css
@@ -1,5 +1,5 @@
 .config-field {
-    @apply md:flex flex-wrap border-b border-gray-400 w-full;
+    @apply md:flex flex-wrap border-b border-gray-400 dark:border-dark-900 w-full;
     @apply p-3 @sm:p-4 m-0;
 
     .field-inner {
diff --git a/resources/css/components/tabs.css b/resources/css/components/tabs.css
index bcd44c46d9..4523a28187 100644
--- a/resources/css/components/tabs.css
+++ b/resources/css/components/tabs.css
@@ -3,10 +3,10 @@
    ========================================================================== */
 
 .tabs-container {
-    @apply w-full border-b text-md relative flex mb-6;
+    @apply w-full border-b dark:border-dark-900 text-md relative flex mb-6;
 
    .fade-left, .fade-right {
-        @apply absolute w-4 inset-y-0 from-gray-300 pointer-events-none z-2;
+        @apply absolute w-4 inset-y-0 from-gray-300 dark:from-dark-800 pointer-events-none z-2;
     }
 
     .fade-left {
@@ -19,7 +19,7 @@
 }
 
 .card .tabs-container .fade-left, .card .tabs-container .fade-right {
-    @apply from-white;
+    @apply from-white dark:from-dark-600;
 }
 
 .tabs {
@@ -30,15 +30,15 @@
 }
 
 .tab-button {
-    @apply flex items-center px-2 py-2 text-gray-700 select-none border-b-2 border-transparent whitespace-nowrap shrink-0;
+    @apply flex items-center px-2 py-2 text-gray-700 dark:text-dark-150 select-none border-b-2 border-transparent whitespace-nowrap shrink-0;
     &:hover {
-        @apply text-gray-800;
+        @apply text-gray-800 dark:text-dark-100;
     }
     &:focus-visible {
-        @apply ring-inset ring-2 ring-blue-500 outline-none rounded-t;
+        @apply ring-inset ring-2 ring-blue-500 dark:ring-dark-blue-100 outline-none rounded-t;
     }
     &.active {
-        @apply text-blue-500 border-blue-500;
+        @apply text-blue-500 dark:text-dark-blue-100 border-blue-500 dark:border-dark-blue-100;
     }
     &.has-error {
         @apply text-red-500;
@@ -54,14 +54,14 @@
   ========================================================================== */
 
 .pill-tab {
-    @apply text-gray-700 flex items-center focus:outline-none px-2 py-1 rounded;
+    @apply text-gray-700 dark:text-dark-175 flex items-center focus:outline-none px-2 py-1 rounded;
 
     &:hover {
-        @apply text-gray-900;
+        @apply text-gray-900 dark:text-dark-100;
     }
 
     &.active {
-        @apply bg-blue-100 text-blue-900;
+        @apply bg-blue-100 dark:bg-dark-400 text-blue-900 dark:text-dark-150;
     }
 }
 
diff --git a/resources/css/components/toggle.css b/resources/css/components/toggle.css
index 193ddcd05f..aa023a3bd5 100644
--- a/resources/css/components/toggle.css
+++ b/resources/css/components/toggle.css
@@ -11,9 +11,9 @@
     }
 
     .inline-label {
-        @apply rtl:mr-2 ltr:ml-2 font-normal text-gray-700;
+        @apply rtl:mr-2 ltr:ml-2 font-normal text-gray-700 dark:text-dark-175;
         a {
-            @apply text-gray-800 underline;
+            @apply text-gray-800 dark:text-dark-150 underline;
             &:hover {
                 @apply text-blue;
             }
@@ -27,7 +27,7 @@
 }
 
 .toggle-container {
-    @apply bg-white cursor-pointer relative border shrink-0;
+    @apply bg-white dark:bg-dark-700 cursor-pointer relative border dark:border-dark-900 shrink-0;
     height: 22px;
     width: 46px;
     border-radius: 20px;
@@ -61,6 +61,10 @@
     box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
     outline: none;
     transition: box-shadow 0.1s, background-color 0.2s ease-in-out;
+
+    .dark & {
+        background: theme(colors.dark.500);
+    }
 }
 
 .toggle-knob:hover {
diff --git a/resources/css/core/layout.css b/resources/css/core/layout.css
index 723d52489b..f381cda4fc 100644
--- a/resources/css/core/layout.css
+++ b/resources/css/core/layout.css
@@ -3,7 +3,7 @@
    ========================================================================== */
 
 body {
-    @apply w-full bg-gray-300 relative;
+    @apply w-full bg-gray-300 relative dark:bg-dark-800;
 }
 
 #statamic {
diff --git a/resources/css/core/typography.css b/resources/css/core/typography.css
index bc6edeffc3..2e9ff9d141 100644
--- a/resources/css/core/typography.css
+++ b/resources/css/core/typography.css
@@ -3,7 +3,7 @@
    ========================================================================== */
 
 body {
-    @apply font-sans text-gray-900 text-base tracking-normal;
+    @apply font-sans text-gray-900 text-base tracking-normal dark:text-dark-100;
     font-variant: common-ligatures tabular-nums;
     font-feature-settings: "zero", "ss01", "calt" off;
 
@@ -42,10 +42,10 @@ h6 {
 }
 
 a:not([class^="btn"]) {
-    @apply text-gray-800 cursor-pointer;
+    @apply text-gray-800 dark:text-dark-150 cursor-pointer;
 
     &:hover {
-        @apply text-blue;
+        @apply text-blue dark:text-dark-blue-100;
     }
 }
 
@@ -59,7 +59,7 @@ a:not([class^="btn"]) {
     }
 
     p, ol, ul, pre {
-        @apply text-gray-700 text-sm leading-normal mb-2;
+        @apply text-gray-700 text-sm leading-normal mb-2 dark:text-dark-150;
 
         a {
             @apply text-blue;
@@ -125,6 +125,11 @@ code {
     font-size: 90%;
     color: #c7254e;
     background-color: #f9f2f4;
+
+    .dark & {
+        color: theme(colors.red.500);
+        background-color: theme(colors.dark.700);
+    }
 }
 
 .help-block {
diff --git a/resources/css/core/utilities.css b/resources/css/core/utilities.css
index 6d7405a7f2..2e9c3ce7b2 100644
--- a/resources/css/core/utilities.css
+++ b/resources/css/core/utilities.css
@@ -7,7 +7,7 @@
 }
 
 .focus-outline {
-    @apply border border-blue-300;
+    @apply border border-blue-300 dark:border-dark-blue-200;
     outline: 0;
     box-shadow: 0 0 0 0.2rem rgba(0,125,255,.25);
 }
@@ -76,13 +76,18 @@
     background-image: linear-gradient(45deg, #EDF2F6 25%, transparent 25%), linear-gradient(-45deg, #EDF2F6 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #EDF2F6 75%), linear-gradient(-45deg, transparent 75%, #EDF2F6 75%);
     background-size: 16px 16px;
     background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
+
+    .dark & {
+        background-color: theme(colors.dark.600);
+        background-image: linear-gradient(45deg, theme(colors.dark.950) 25%, transparent 25%), linear-gradient(-45deg, theme(colors.dark.950) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, theme(colors.dark.950) 75%), linear-gradient(-45deg, transparent 75%, theme(colors.dark.950) 75%);
+    }
 }
 
 .clickable {
-    @apply text-gray-800 select-none cursor-pointer border bg-gradient-to-b from-white to-gray-100;
+    @apply text-gray-800 dark:text-dark-175 select-none cursor-pointer border dark:border-dark-800 bg-gradient-to-b from-white to-gray-100 dark:from-dark-550 dark:to-dark-600;
 
     &:hover {
-        @apply border-gray-500 from-white to-gray-200;
+        @apply border-gray-500 dark:border-dark-900 from-white to-gray-200 dark:from-dark-550 dark:to-dark-700;
     }
 }
 
diff --git a/resources/css/cp.css b/resources/css/cp.css
index 3f04ebb898..2eb79a421a 100644
--- a/resources/css/cp.css
+++ b/resources/css/cp.css
@@ -21,6 +21,7 @@
 @import "components/cards";
 @import "components/column-picker";
 @import "components/configure";
+@import "components/dark-mode-toggle";
 @import "components/dashboard";
 @import "components/filters";
 @import "components/focal-point";
diff --git a/resources/css/dark.css b/resources/css/dark.css
new file mode 100644
index 0000000000..c2759e9a09
--- /dev/null
+++ b/resources/css/dark.css
@@ -0,0 +1,39 @@
+.prose {
+    @apply dark:text-dark-150;
+
+    :where(h2), :where(h3) {
+        &:not(:where([class~=not-prose] *)) {
+            @apply dark:text-dark-100;
+        }
+    }
+
+    :where(pre), :where(code) {
+        &:not(:where([class~=not-prose] *)) {
+            @apply dark:bg-dark-950 dark:text-dark-100;
+        }
+    }
+}
+
+.dark {
+    input:-webkit-autofill {
+        -webkit-box-shadow: inset 0 0 0 50px theme('colors.dark.250');
+        -webkit-text-fill-color: theme('colors.dark.150');
+
+        &:focus, &:active {
+            -webkit-box-shadow: inset 0 0 0 50px theme('colors.dark.200') !important;
+            -webkit-text-fill-color: theme('colors.dark.100');
+        }
+    }
+
+    .CodeMirror-selected {
+        background: rgba(255, 255, 255, 0.10);
+    }
+
+    .CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection {
+        background: rgba(255, 255, 255, 0.10);
+    }
+
+    .CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection {
+        background: rgba(255, 255, 255, 0.10);
+    }
+}
diff --git a/resources/css/elements/badges.css b/resources/css/elements/badges.css
index 9c87f4de6d..50243e544f 100644
--- a/resources/css/elements/badges.css
+++ b/resources/css/elements/badges.css
@@ -3,16 +3,16 @@
    ========================================================================== */
 
 .badge {
-    @apply text-3xs not-italic bg-gray-300 text-gray-800 rounded-md leading-normal;
+    @apply text-3xs not-italic bg-gray-300 dark:bg-dark-700 text-gray-800 dark:text-dark-150 rounded-md leading-normal;
     padding: 1px 5px 0;
 }
 
 .badge-pill {
-    @apply bg-gray-300 px-2 py-1 rounded;
+    @apply bg-gray-300 dark:bg-dark-700 px-2 py-1 rounded;
 }
 
 .badge-pill-sm {
-    @apply bg-gray-300 px-1 py-px rounded;
+    @apply bg-gray-300 dark:bg-dark-700 px-1 py-px rounded;
 }
 
 .badge-updates {
@@ -21,21 +21,21 @@
 }
 
 .badge-sm {
-    @apply bg-gray-300 uppercase text-4xs text-white rounded-sm leading-normal;
+    @apply bg-gray-300 dark:bg-dark-700 uppercase text-4xs text-white dark:text-dark-100 rounded-sm leading-normal;
     height: 16px;
     padding: 1px 5px 2px;
 }
 
 .filter-badge {
-    @apply text-2xs text-gray-800 bg-white border border-dashed border-gray-600 flex items-center rounded-full;
+    @apply text-2xs text-gray-800 dark:text-dark-150 bg-white dark:bg-dark-550 border border-dashed border-gray-600 dark:border-dark-900 flex items-center rounded-full;
     height: 1.625rem;
     padding-left: 10px ; [dir="rtl"] & { padding-right: 10px ; padding-left: 0 ; }
 
     button {
-        @apply px-2 text-base text-gray-600 flex items-center rounded;
+        @apply px-2 text-base text-gray-600 dark:text-dark-175 flex items-center rounded;
 
         &:hover {
-            @apply text-gray-800;
+            @apply text-gray-800 dark:text-dark-100;
         }
 
         &:focus {
@@ -44,6 +44,6 @@
     }
 
     &.filter-badge-control {
-        @apply bg-gray-100 border border-solid rounded-full border-gray-500 hover:border-gray-600 hover:bg-gray-200;
+        @apply bg-gray-100 dark:bg-dark-600 border border-solid rounded-full border-gray-500 dark:border-dark-900 hover:border-gray-600 dark:hover:border-dark-800 hover:bg-gray-200 dark:hover:bg-dark-800;
     }
 }
diff --git a/resources/css/elements/buttons.css b/resources/css/elements/buttons.css
index e190f872e1..af30fa7298 100644
--- a/resources/css/elements/buttons.css
+++ b/resources/css/elements/buttons.css
@@ -31,41 +31,57 @@ button {
 
 /*  Default, non-primary action button */
 .btn, .btn-default {
-    @apply text-gray-800 shadow-button;
+    @apply text-gray-800 dark:text-dark-150 shadow-button;
     background: linear-gradient(180deg, #fff, #f9fafb);
     border: 1px solid #D3DDE7;
     border-bottom: 1px solid #c4cdd6;
     box-shadow: inset 0 1px 0 0 #fff, 0 1px 0 0 rgba(0, 0, 0,.05), 0 2px 1px 0 theme(colors.gray.600 / .15), 0 0 0 0 transparent;
 
+    .dark & {
+        background: linear-gradient(180deg, theme(colors.dark.550), theme(colors.dark.600));
+        border-color: theme(colors.dark.700);
+        box-shadow: inset 0 1px 0 0 theme(colors.dark.300), 0 1px 0 0 rgba(200, 200, 200,.05), 0 2px 1px 0 theme(colors.dark.900 / .15), 0 0 0 0 transparent;
+    }
+
     &:hover:not(:disabled), &:active:not(:disabled) {
-        @apply text-gray-800;
+        @apply text-gray-800 dark:text-dark-150;
         background: linear-gradient(180deg, #f9fafb, #f4f6f8);
         border-bottom: 1px solid #BFC7D0;
+
+        .dark & {
+            background: linear-gradient(180deg, theme(colors.dark.600), theme(colors.dark.700));
+            border-color: theme(colors.dark.800);
+        }
     }
 
     &.active, &.active:hover {
         box-shadow: inset 2px 2px 3px 0px rgba(25,30,35,.1);
         background: theme('colors.gray.400');
         border-color: #aeb9c3 !important;
+
+        .dark & {
+            background: theme('colors.dark.400');
+            border-color: theme(colors.dark.700) !important;
+        }
     }
 
     &:disabled {
-        @apply text-gray-700 opacity-75;
+        @apply text-gray-700 dark:text-dark-200 opacity-75;
     }
 }
 
 /*  Primary action button */
 .btn-primary {
-    @apply text-white bg-gradient-to-b from-blue-500 to-blue-600 border border-blue-700 border-b-blue-800 !important;
+    @apply text-white bg-gradient-to-b from-blue-500 to-blue-600 dark:from-dark-blue-100 dark:to-dark-blue-150 border border-blue-700 dark:border-blue-900 border-b-blue-800 dark:border-b-dark-blue-200 !important;
     box-shadow: inset 0 1px 0 0 theme('colors.blue.400'), 0 1px 0 0 rgba(25,30,35,.05), 0 3px 2px -1px theme(colors.blue.900 / .15), 0 0 0 0 transparent;
 
     &:hover:not(:disabled), :active:not(:disabled) {
-        @apply from-blue-600 to-blue-700 border-blue-800 border-b-blue-900 !important;
+        @apply from-blue-600 to-blue-700 dark:from-dark-blue-125 dark:to-dark-blue-175 border-blue-800 dark:border-blue-900 border-b-blue-900 dark:border-b-dark-blue-200 !important;
         box-shadow: inset 0 1px 0 0 theme('colors.blue.500'), 0 1px 0 0 rgba(25,30,35,.05), 0 3px 2px -1px theme(colors.blue.900 / .15), 0 0 0 0 transparent;
     }
 
     &:disabled {
-        @apply text-blue-200 opacity-75;
+        @apply text-blue-200 dark:text-dark-blue-200 opacity-75 !important;
     }
 }
 
@@ -90,11 +106,11 @@ button {
 
 /*  Earth isn't flat but these buttons are */
 .btn-flat {
-    @apply text-white text-gray-800 bg-gray-300 flex items-center;
+    @apply text-white text-gray-800 dark:text-dark-150 bg-gray-300 dark:bg-dark-700 flex items-center;
     position: inherit;
 
     &:hover:not(:disabled), &:active:not(:disabled), &.active {
-        @apply bg-gray-400;
+        @apply bg-gray-400 dark:bg-dark-750;
     }
 
     &:focus {
@@ -102,11 +118,11 @@ button {
     }
 
     &:active, &:focus:active {
-        @apply bg-gray-500;
+        @apply bg-gray-500 dark:bg-dark-800;
     }
 
     &:disabled {
-        @apply text-gray-600 opacity-75;
+        @apply text-gray-600 dark:text-dark-200 opacity-75;
     }
 }
 
@@ -142,9 +158,19 @@ button {
     height: 32px;
     width: 32px;
 
+    .dark & {
+        background: linear-gradient(180deg, theme(colors.dark.500), theme(colors.dark.550));
+        border-color: theme(colors.dark.400);
+    }
+
     &:hover:not(:disabled), &:active:not(:disabled) {
         background: linear-gradient(180deg, #f9fafb, #f4f6f8);
         border-color: #c4cdd5;
+
+        .dark & {
+            background: linear-gradient(180deg, theme(colors.dark.550), theme(colors.dark.600));
+            border-color: theme(colors.dark.500);
+        }
     }
 
     span {
@@ -247,14 +273,14 @@ td .btn-icon {
   ========================================================================== */
 
 .btn-close {
-    @apply rtl:mr-4 ltr:ml-4 text-center p-0 text-xl text-gray-600 rounded-full w-8 h-8 outline-none shrink-0 leading-none inline-flex items-center justify-center;
+    @apply rtl:mr-4 ltr:ml-4 text-center p-0 text-xl text-gray-600 dark:text-dark-150 rounded-full w-8 h-8 outline-none shrink-0 leading-none inline-flex items-center justify-center;
 
     &:hover {
-        @apply bg-gray-400;
+        @apply bg-gray-400 dark:bg-dark-700;
     }
 
     &:active, &:focus:hover {
         outline: none;
-        @apply bg-gray-500;
+        @apply bg-gray-500 dark:bg-dark-750;
     }
 }
diff --git a/resources/css/elements/dropdowns.css b/resources/css/elements/dropdowns.css
index f7d51f7aef..77e2222c4f 100644
--- a/resources/css/elements/dropdowns.css
+++ b/resources/css/elements/dropdowns.css
@@ -6,12 +6,12 @@
     @apply p-2;
 
     button, a {
-        @apply block w-full rtl:text-right ltr:text-left rounded-sm text-xs font-normal px-2 py-1 text-gray-800;
+        @apply block w-full rtl:text-right ltr:text-left rounded-sm text-xs font-normal px-2 py-1 text-gray-800 dark:text-dark-100;
         line-height: 1.4;
         white-space: nowrap;
 
         &:hover {
-            @apply bg-blue text-white;
+            @apply bg-blue dark:bg-dark-blue-200 text-white;
         }
 
         .icon {
@@ -38,7 +38,7 @@
     }
 
     .divider {
-        @apply h-px bg-gray-400 overflow-hidden;
+        @apply h-px bg-gray-400 dark:bg-dark-900 overflow-hidden;
         margin: 6px -8px;
     }
 
diff --git a/resources/css/elements/forms.css b/resources/css/elements/forms.css
index b615e32a44..3628fe0552 100644
--- a/resources/css/elements/forms.css
+++ b/resources/css/elements/forms.css
@@ -3,11 +3,11 @@
    ========================================================================== */
 
 label {
-    @apply text-gray-800 font-normal text-sm block leading-normal;
+    @apply text-gray-800 dark:text-dark-150 font-normal text-sm block leading-normal;
 }
 
 input {
-    @apply placeholder:text-gray-600;
+    @apply placeholder:text-gray-600 dark:placeholder:text-dark-175;
 }
 
 input[type="checkbox"],
@@ -24,12 +24,12 @@ select {
   ========================================================================== */
 
 .input-text {
-    @apply appearance-none bg-gray-100 text-gray-800 max-w-full w-full border p-2 rounded shadow-inner placeholder:text-gray-600 text-md @lg:text-base;
+    @apply appearance-none bg-gray-100 dark:bg-dark-600 text-gray-800 dark:text-dark-150 max-w-full w-full border dark:border-dark-300 p-2 rounded shadow-inner placeholder:text-gray-600 dark:placeholder:text-dark-175 text-md @lg:text-base;
     @apply border;
     transition: border-color .15s ease-in-out,
                 box-shadow .15s ease-in-out;
     &:focus, &:focus-within {
-        @apply ring-2 ring-blue-300 outline-none;
+        @apply ring-2 ring-blue-300 dark:ring-blue-600 outline-none;
     }
 
     &:not(textarea) {
@@ -39,10 +39,10 @@ select {
 
 /*  Used inside tables, grids, and so on */
 .input-text-minimal {
-    @apply appearance-none shadow-none bg-white w-full p-2;
+    @apply appearance-none shadow-none bg-white dark:bg-dark-550 w-full p-2;
 
     &:focus {
-        @apply outline-none bg-gray-200;
+        @apply outline-none bg-gray-200 dark:bg-dark-600;
     }
 }
 
@@ -52,18 +52,18 @@ input.input-text:read-only,
 textarea.input-text:read-only,
 input.input-text-minimal:read-only,
 .input-text.read-only {
-    @apply bg-gray-300 text-gray-700;
+    @apply bg-gray-300 dark:bg-dark-600 text-gray-700 dark:text-dark-200;
 }
 
 /* Input Groups
   ========================================================================== */
 
 .input-group {
-    @apply appearance-none text-gray-800 w-full p-0 rounded flex items-center;
+    @apply appearance-none text-gray-800 dark:text-dark-150 w-full p-0 rounded flex items-center;
     height: 2.375rem;
 
     &:not(.focus-within-only):focus, &:not(.focus-within-only):focus-within {
-        @apply ring-2 ring-blue-300;
+        @apply ring-2 ring-blue-300 dark:ring-blue-600;
 
         .input-text:focus, .input-group-prepend:focus, .input-group-append:focus, .input-group-item:focus {
             outline: 0;
@@ -72,7 +72,7 @@ input.input-text-minimal:read-only,
     }
 
     .input-text {
-        @apply flex-1 border-gray-500 min-w-0;
+        @apply flex-1 border-gray-500 dark:border-dark-200 min-w-0;
     }
 
     .input-text:not(:first-child) {
@@ -88,18 +88,30 @@ input.input-text-minimal:read-only,
     }
 
     .input-group-prepend, .input-group-append, .input-group-item {
-        @apply rtl:rounded-r ltr:rounded-l px-2 border text-sm text-gray-800 select-none;
+        @apply rtl:rounded-r ltr:rounded-l px-2 border dark:border-dark-800 text-sm text-gray-800 dark:text-dark-150 select-none;
         background: linear-gradient(180deg, #fff, #f9fafb);
         border: 1px solid #c4cdd6;
         box-shadow: 0 1px 0 0 rgba(25,30,35,.05);
         height: 2.375rem;
         line-height: 36px;
 
+        .dark & {
+            background: linear-gradient(180deg, theme(colors.dark.500), theme(colors.dark.600));
+            border-color: theme(colors.dark.800);
+            box-shadow: 0 1px 0 0 rgba(0,0,0,.05);
+        }
+
         &button {
             @apply cursor-pointer;
         }
     }
 
+    &:has(.input-text) {
+        .input-group-prepend, .input-group-append, .input-group-item {
+            @apply dark:border-dark-200;
+        }
+    }
+
     &.focus-within-only {
         .input-text:focus, .input-group-prepend:focus, .input-group-append:focus, .input-group-item:focus {
             @apply focus-outline;
@@ -119,6 +131,11 @@ input.input-text-minimal:read-only,
     button.input-group-append:active:not(:disabled) {
         background: linear-gradient(180deg, #f9fafb, #f4f6f8);
         border-color: #c4cdd5;
+
+        .dark & {
+            background: linear-gradient(180deg, theme(colors.dark.550), theme(colors.dark.600));
+            border-color: theme(colors.dark.900);
+        }
     }
 
     .input-group-append {
@@ -189,7 +206,7 @@ input.input-text-minimal:read-only,
     @apply rounded relative;
 
     select {
-        @apply text-sm text-gray-800 shadow-button cursor-pointer block w-full h-full rtl:text-right ltr:text-left relative max-w-full;
+        @apply text-sm text-gray-800 dark:text-dark-150 shadow-button cursor-pointer block w-full h-full rtl:text-right ltr:text-left relative max-w-full;
         @apply select-none rounded leading-normal align-middle whitespace-nowrap appearance-none subpixel-antialiased;
 
         background: linear-gradient(180deg, #fff, #f9fafb);
@@ -198,14 +215,24 @@ input.input-text-minimal:read-only,
         letter-spacing: -0.01em;
         padding: .475rem 1.75rem .475rem .75rem ; [dir="rtl"] & { padding: .475rem .75rem .475rem 1.75rem ; }
 
+        .dark & {
+            background: linear-gradient(180deg, theme(colors.dark.500), theme(colors.dark.600));
+            border-color: theme(colors.dark.800);
+        }
+
         &:hover:not(:disabled), &:active:not(:disabled) {
             background: linear-gradient(180deg, #f9fafb, #f4f6f8);
             border-color: #c4cdd5;
+
+            .dark & {
+                background: linear-gradient(180deg, theme(colors.dark.700), theme(colors.dark.750));
+                border-color: theme(colors.dark.900);
+            }
         }
     }
 
     .select-input-toggle {
-        @apply pointer-events-none absolute inset-y-0 rtl:left-0 ltr:right-0 flex items-center px-2 text-gray-900;
+        @apply pointer-events-none absolute inset-y-0 rtl:left-0 ltr:right-0 flex items-center px-2 text-gray-900 dark:text-dark-150;
 
         svg {
             @apply fill-current h-4 w-4;
@@ -277,11 +304,11 @@ input[type="file"] {
 }
 
 .help-block {
-    @apply block mb-2 text-gray-700 text-xs;
+    @apply block mb-2 text-gray-700 dark:text-dark-200 text-xs;
     a {
-        @apply text-gray-800 underline;
+        @apply text-gray-800 dark:text-dark-175 underline;
         &:hover {
-            @apply text-blue;
+            @apply text-blue dark:text-dark-blue-100;
         }
     }
 }
diff --git a/resources/css/elements/icons.css b/resources/css/elements/icons.css
index 93feb8b045..a5021481b8 100644
--- a/resources/css/elements/icons.css
+++ b/resources/css/elements/icons.css
@@ -9,6 +9,54 @@ svg {
     vertical-align: baseline;
 }
 
+.dark svg {
+    [fill="#EAEEF9"] {
+        fill: theme(colors.dark.575);
+    }
+    [fill="#989FB0"] {
+        fill: theme(colors.dark.700);
+    }
+    [stroke="#EAEEF9"] {
+        stroke: theme(colors.dark.200);
+    }
+    [stroke="#C2C8D6"] {
+        stroke: theme(colors.dark.700);
+    }
+    [fill="white"] {
+        fill: theme(colors.dark.200);
+    }
+    [stop-color="#B0BACC"] {
+        stop-color: theme(colors.dark.800);
+    }
+    [stop-color="#969EAE"] {
+        stop-color: theme(colors.dark.950);
+    }
+    [stop-color="#FDFEFF"] {
+        stop-color: theme(colors.dark.200);
+    }
+    [stop-color="#ECF0F5"] {
+        stop-color: theme(colors.dark.250);
+    }
+    [fill="#D6DCE8"] {
+        fill: theme(colors.dark.300);
+    }
+    [stroke="#AAB2C5"] {
+        stroke: theme(colors.dark.950);
+    }
+    [fill="#AAB2C5"] {
+        fill: theme(colors.dark.950);
+    }
+    [fill="#D5DDEA"] {
+        fill: theme(colors.dark.700)
+    }
+    [fill="#C2C8D6"] {
+        fill: theme(colors.black)
+    }
+    [stroke="#989FB0"] {
+        stroke: theme(colors.dark.200);
+    }
+}
+
 .heroicon-component-accent {
     fill: theme('colors.blue.DEFAULT');
 }
diff --git a/resources/css/elements/tables.css b/resources/css/elements/tables.css
index a420bb28ee..1c9579912e 100644
--- a/resources/css/elements/tables.css
+++ b/resources/css/elements/tables.css
@@ -16,16 +16,16 @@
 }
 
 .data-list-bulk-actions {
-	@apply bg-white absolute w-full py-2 z-1;
+	@apply bg-white dark:bg-dark-750 absolute w-full py-2 z-1;
 	padding-left: 56px ; [dir="rtl"] & { padding-right: 56px ; padding-left: 0 ; }
 }
 
 .mode-grid .data-list-bulk-actions {
-	@apply bg-white w-full pt-3 pb-1 z-10 rtl:pr-4 ltr:pl-4 static;
+	@apply bg-white dark:bg-dark-800 w-full pt-3 pb-1 z-10 rtl:pr-4 ltr:pl-4 static;
 }
 
 .mode-grid .rotating-dots-button {
-    @apply bg-white;
+    @apply bg-white dark:bg-dark-400;
 }
 
 .data-list-footer {
@@ -33,14 +33,14 @@
 }
 
 .data-table {
-	@apply rtl:text-right ltr:text-left text-gray-700 outline-none max-w-full w-full;
+	@apply rtl:text-right ltr:text-left text-gray-700 dark:text-dark-150 outline-none max-w-full w-full;
 	overflow-x: auto;
 
     thead {
-		@apply bg-gray-100 text-xs text-gray-900;
+		@apply bg-gray-100 dark:bg-dark-550 text-xs text-gray-900 dark:text-dark-100;
 
 		tr {
-			@apply border-b;
+			@apply border-b dark:border-dark-900;
 		}
 
         th {
@@ -48,7 +48,7 @@
             &:first-child { @apply rtl:rounded-tr-lg ltr:rounded-tl-lg; }
 			&:last-child { @apply rtl:rounded-tl-lg ltr:rounded-tr-lg; }
 			&:hover {
-				@apply text-gray-900;
+				@apply text-gray-900 dark:text-dark-100;
 			}
 		}
         th.handle-column {
@@ -62,10 +62,10 @@
     tbody {
 		outline: none;
         tr {
-			@apply border-b border-gray-400 text-sm;
+			@apply border-b border-gray-400 dark:border-dark-900 text-sm;
 
 			&.row-selected {
-				@apply bg-gray-200;
+				@apply bg-gray-200 dark:bg-dark-600;
 			}
 
 			&:first-child {
@@ -91,7 +91,7 @@
 			}
 
             &:hover {
-                @apply bg-gray-100;
+                @apply bg-gray-100 dark:bg-dark-500;
             }
 
             th {
@@ -99,7 +99,7 @@
             }
 
             td {
-                @apply py-2 px-4 break-words ;
+                @apply py-2 px-4 break-words;
             }
 
             td.table-drag-handle {
@@ -117,7 +117,7 @@
         @apply cursor-pointer select-none;
 
         &:hover {
-			@apply text-blue-500;
+			@apply text-blue-500 dark:text-dark-blue-100;
         }
 
         &.current-column {
@@ -148,6 +148,19 @@
             @apply absolute rtl:right-0 ltr:left-0 rtl:left-0 ltr:right-0 top-0 bottom-0 -z-1 ;
             content: '';
             background-image: linear-gradient(to right, theme(colors.gray.100) 70%, theme(colors.gray.100 / 0%) 100%);
+
+            .dark & {
+                background-image: linear-gradient(to right, theme(colors.dark.550) 70%, theme(colors.dark.550 / 0%) 100%);
+            }
+        }
+
+        &:has(input:checked) {
+            &:after {
+                .dark & {
+                    background-image: linear-gradient(to right, theme(colors.dark.750) 70%, theme(colors.dark.750 / 0%) 100%);
+                    @apply border-b border-dark-550;
+                }
+            }
         }
     }
 
@@ -159,6 +172,19 @@
             @apply absolute rtl:right-0 ltr:left-0 rtl:left-0 ltr:right-0 top-0 bottom-0 -z-1;
             content: '';
             background-image: linear-gradient(to left, theme(colors.gray.100) 70%, theme(colors.gray.100 / 0%) 100%);
+
+            .dark & {
+                background-image: linear-gradient(to left, theme(colors.dark.550) 70%, theme(colors.dark.550 / 0%) 100%);
+            }
+        }
+
+        &:has(input:checked) {
+            &:after {
+                .dark & {
+                    background-image: linear-gradient(to left, theme(colors.dark.750) 70%, theme(colors.dark.750 / 0%) 100%);
+                    @apply border-b border-dark-550;
+                }
+            }
         }
     }
 
@@ -168,6 +194,10 @@
             @apply absolute rtl:right-0 ltr:left-0 rtl:left-0 ltr:right-0 top-0 bottom-0 -z-1;
             content: '';
             background-image: linear-gradient(to right, rgba(255,255,255,1) 70%, rgba(255,255,255,0) 100%);
+
+            .dark & {
+                background-image: linear-gradient(to right, theme(colors.dark.600) 70%, theme(colors.dark.600 / 0%) 100%);
+            }
         }
     }
 
@@ -179,23 +209,43 @@
             @apply absolute rtl:right-0 ltr:left-0 rtl:left-0 ltr:right-0 top-0 bottom-0 -z-1;
             content: '';
             background-image: linear-gradient(to left, rgba(255,255,255,1) 70%, rgba(255,255,255,0) 100%);
+
+            .dark & {
+                background-image: linear-gradient(to left, theme(colors.dark.600) 70%, theme(colors.dark.600 / 0%) 100%);
+            }
         }
     }
 
     tbody tr.row-selected .checkbox-column:after {
         background-image: linear-gradient(to right, theme(colors.gray.200) 70%, theme(colors.gray.200 / 0%) 100%);
+
+        .dark & {
+            background-image: linear-gradient(to right, theme(colors.dark.600) 70%, theme(colors.dark.600 / 0%) 100%);
+        }
     }
 
     tbody tr.row-selected .actions-column:after {
         background-image: linear-gradient(to left, theme(colors.gray.200) 70%, theme(colors.gray.200 / 0%) 100%);
+
+        .dark & {
+            background-image: linear-gradient(to left, theme(colors.dark.600) 70%, theme(colors.dark.600 / 0%) 100%);
+        }
     }
 
     tbody tr:hover .checkbox-column:after {
         background-image: linear-gradient(to right, theme(colors.gray.100) 70%, theme(colors.gray.100 / 0%) 100%);
+
+        .dark & {
+            background-image: linear-gradient(to right, theme(colors.dark.500) 70%, theme(colors.dark.500 / 0%) 100%);
+        }
     }
 
     tbody tr:hover .actions-column:after {
         background-image: linear-gradient(to left, theme(colors.gray.100) 70%, theme(colors.gray.100 / 0%) 100%);
+
+        .dark & {
+            background-image: linear-gradient(to left, theme(colors.dark.500) 70%, theme(colors.dark.500 / 0%) 100%);
+        }
     }
 }
 
@@ -223,30 +273,35 @@
 }
 
 .data-list-filter-link {
-	@apply border-gray-400 text-gray-600 rtl:ml-2 ltr:mr-2 p-3 pb-2;
+	@apply border-gray-400 dark:border-dark-900 text-gray-600 dark:text-dark-150 rtl:ml-2 ltr:mr-2 p-3 pb-2;
 
 	&:hover {
-		@apply border-b-3 text-gray-700;
+		@apply border-b-3 dark:border-dark-900 text-gray-700 dark:text-dark-100;
 	}
 
 	&:focus {
-		@apply border-blue-300;
+		@apply border-blue-300 dark:border-dark-blue-100;
 		outline: 0;
 		box-shadow: inset 0 0 0 0.2rem rgba(0,125,255,.25);
 	}
 
 	&.active {
-		@apply border-b-3 border-blue text-gray-800;
+		@apply border-b-3 border-blue dark:border-dark-blue-100 text-gray-800 dark:text-dark-100;
 	}
 }
 
 td.table-drag-handle {
-	@apply w-3 rtl:border-l ltr:border-r h-full p-2;
+	@apply w-3 rtl:border-l ltr:border-r dark:border-dark-900 h-full p-2;
     min-width: 16px;
 	cursor: grab;
 	background: theme('colors.gray.200') url('../../svg/icons/light/drag-dots.svg') center center no-repeat;
     background-size: 7px 17px;
-	&:hover { @apply bg-gray-300; }
+
+    .dark & {
+        background-color: theme(colors.dark.700);
+    }
+
+	&:hover { @apply bg-gray-300 dark:bg-dark-750; }
 }
 
 .table-row-placeholder {
@@ -343,7 +398,7 @@ table.control {
 .relationship-index-field {
     min-width: 10vw;
     .relationship-index-field-item {
-        @apply rounded bg-gray-100 border px-1 flex items-center text-2xs rtl:ml-1 ltr:mr-1;
+        @apply rounded bg-gray-100 dark:bg-dark-500 border dark:border-dark-400 px-1 flex items-center text-2xs rtl:ml-1 ltr:mr-1;
         a {
             @apply line-clamp-1;
         }
@@ -351,7 +406,7 @@ table.control {
 }
 
 .date-index-field {
-    @apply whitespace-nowrap text-gray-800;
+    @apply whitespace-nowrap text-gray-800 dark:text-dark-150;
 }
 
 .slug-index-field {
@@ -359,14 +414,14 @@ table.control {
 }
 
 .status-index-field {
-    @apply inline-block text-xs bg-gray-300 text-gray-800 shrink rounded-full px-2 py-0.5 text-center justify-center;
+    @apply inline-block text-xs bg-gray-300 dark:bg-dark-200 text-gray-800 dark:text-dark-150 shrink rounded-full px-2 py-0.5 text-center justify-center;
 
     &.status-published:not(.status-private) {
-        @apply text-green-900 bg-green-200 ;
+        @apply text-green-900 dark:text-green-950 bg-green-200 dark:bg-green-300;
     }
 
     &.status-scheduled {
-        @apply text-amber-900 bg-amber-200;
+        @apply text-amber-900 dark:text-amber-950 bg-amber-200 dark:bg-amber-300;
     }
 }
 
@@ -375,6 +430,6 @@ table.control {
 
     .role-index-field-item,
     .groups-index-field-item {
-        @apply rounded bg-gray-100 border px-1 inline-block text-2xs line-clamp-1 mb-1;
+        @apply rounded bg-gray-100 dark:bg-dark-700 border dark:border-dark-900 px-1 inline-block text-2xs line-clamp-1 mb-1;
     }
 }
diff --git a/resources/css/tailwind.css b/resources/css/tailwind.css
index 86aa4b6304..59bfe33411 100644
--- a/resources/css/tailwind.css
+++ b/resources/css/tailwind.css
@@ -4,3 +4,4 @@
 @import "tailwindcss/utilities";
 @import "core/utilities";
 @import "rtl";
+@import "dark";
diff --git a/resources/css/vendors/codemirror.css b/resources/css/vendors/codemirror.css
index bace752367..d1192a4fc1 100644
--- a/resources/css/vendors/codemirror.css
+++ b/resources/css/vendors/codemirror.css
@@ -109,18 +109,18 @@
   .cm-link {text-decoration: underline;}
   .cm-strikethrough {text-decoration: line-through;}
 
-  .cm-s-default .cm-keyword {color: #708;}
+  .cm-s-default .cm-keyword {color: #708; @apply dark:text-purple-dark;}
   .cm-s-default .cm-atom {color: #219;}
   .cm-s-default .cm-number {color: #164;}
-  .cm-s-default .cm-def {color: #00f;}
+  .cm-s-default .cm-def {color: #00f; @apply dark:text-blue-600;}
   .cm-s-default .cm-variable,
   .cm-s-default .cm-punctuation,
   .cm-s-default .cm-property,
   .cm-s-default .cm-operator {}
-  .cm-s-default .cm-variable-2 {color: #05a;}
-  .cm-s-default .cm-variable-3 {color: #085;}
-  .cm-s-default .cm-comment {color: #a50;}
-  .cm-s-default .cm-string {color: #a11;}
+  .cm-s-default .cm-variable-2 {color: #05a; @apply dark:text-blue-600;}
+  .cm-s-default .cm-variable-3 {color: #085; @apply dark:text-green-600;}
+  .cm-s-default .cm-comment {color: #a50; @apply dark:text-orange-dark;}
+  .cm-s-default .cm-string {color: #a11; @apply dark:text-red-500;}
   .cm-s-default .cm-string-2 {color: #f50;}
   .cm-s-default .cm-meta {color: #555;}
   .cm-s-default .cm-qualifier {color: #555;}
@@ -129,7 +129,7 @@
   .cm-s-default .cm-tag {color: #170;}
   .cm-s-default .cm-attribute {color: #00c;}
   .cm-s-default .cm-hr {color: #999;}
-  .cm-s-default .cm-link {color: #00c;}
+  .cm-s-default .cm-link {color: #00c; @apply dark:text-blue-500;}
 
   .cm-s-default .cm-error {color: #f00;}
   .cm-invalidchar {color: #f00;}
diff --git a/resources/css/vendors/vue-select.css b/resources/css/vendors/vue-select.css
index a279b3159f..9dd2cb305e 100644
--- a/resources/css/vendors/vue-select.css
+++ b/resources/css/vendors/vue-select.css
@@ -26,7 +26,7 @@
 }
 
 .vs--disabled .vs__dropdown-toggle {
-	@apply bg-gray-200;
+	@apply bg-gray-200 dark:bg-dark-750;
 }
 
 .v-select[dir=rtl] .vs__actions {
@@ -48,7 +48,7 @@
 }
 
 .vs__dropdown-toggle {
-	@apply appearance-none text-gray-800 w-full p-0 rounded flex items-center bg-gray-100 shadow-inner border border-gray-500;
+	@apply appearance-none text-gray-800 dark:text-dark-150 w-full p-0 rounded flex items-center bg-gray-100 dark:bg-dark-550 shadow-inner border border-gray-500 dark:border-dark-800;
     height: 2.375rem;
     transition: border-color .15s ease-in-out,
                 box-shadow .15s ease-in-out;
@@ -71,7 +71,7 @@
 }
 
 .v-select .vs__selected-options {
-	@apply appearance-none text-gray-800 text-sm;
+	@apply appearance-none text-gray-800 dark:text-dark-150 text-sm;
     @apply flex basis-1 grow rounded-s relative h-full py-1 rtl:pr-2 ltr:pl-2 leading-normal;
 	width: calc(100% - 32px);
 
@@ -104,12 +104,12 @@
 
 .vs__open-indicator {
 	@apply clickable;
-    @apply flex items-center rounded-e px-2 text-sm shrink-0 h-full border-e-0;
+    @apply flex items-center rounded-e px-2 text-sm shrink-0 h-full border-e-0 dark:border-dark-800;
 	/* height: 2.375rem; */
 }
 
 .vs__open-indicator svg {
-	@apply flex items-center text-gray-900 relative w-4 h-4;
+	@apply flex items-center text-gray-900 dark:text-dark-100 relative w-4 h-4;
 	transform: translateY(1px) scale(1);
 	transition: -webkit-transform .15s cubic-bezier(1, -.115, .975, .855);
 	transition: transform .15s cubic-bezier(1, -.115, .975, .855);
@@ -127,7 +127,7 @@
 }
 
 .vs__clear {
-	@apply text-gray-900 rtl:pl-2 ltr:pr-2 rtl:pr-px ltr:pl-px rtl:@xs:pr-2 ltr:@xs:pl-2 cursor-pointer text-base bg-transparent shadow-none;
+	@apply text-gray-900 dark:text-dark-100 rtl:pl-2 ltr:pr-2 rtl:pr-px ltr:pl-px rtl:@xs:pr-2 ltr:@xs:pl-2 cursor-pointer text-base bg-transparent shadow-none;
 	&:hover {
 		@apply text-blue;
 	}
@@ -135,7 +135,7 @@
 
 .vs__dropdown-menu {
 	@apply block absolute z-top m-0 w-full;
-	@apply bg-white flex flex-col shadow-popover block p-4 rounded-md rtl:text-right ltr:text-left;
+	@apply bg-white dark:bg-dark-550 flex flex-col shadow-popover dark:shadow-dark-popover block p-4 rounded-md rtl:text-right ltr:text-left;
 	top: 46px;
 	padding: 0;
 	max-height: 350px;
@@ -154,12 +154,12 @@
 }
 
 .vs__dropdown-option {
-    @apply block text-sm text-gray-800 cursor-pointer;
+    @apply block text-sm text-gray-800 dark:text-dark-100 cursor-pointer;
 	padding: 6px 12px;
 }
 
 .vs__dropdown-option--highlight {
-    @apply bg-gray-300;
+    @apply bg-gray-300 dark:bg-dark-blue-200;
 }
 
 .vs__dropdown-option--selected {
@@ -175,10 +175,10 @@
 }
 
 .vs__deselect {
-	@apply flex items-center cursor-pointer text-gray-600 rtl:mr-1 ltr:ml-1 p-0 outline-none;
+	@apply flex items-center cursor-pointer text-gray-600 dark:text-dark-175 rtl:mr-1 ltr:ml-1 p-0 outline-none;
 
 	&:hover {
-		@apply text-gray-700;
+		@apply text-gray-700 dark:text-dark-100;
 	}
 
 	&:focus {
diff --git a/resources/js/app.js b/resources/js/app.js
index e6a6b6b000..5e7a78fcfe 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -100,6 +100,7 @@ import './components/Permission';
 
 import GlobalSearch from './components/GlobalSearch.vue';
 import GlobalSiteSelector from './components/GlobalSiteSelector.vue';
+import DarkModeToggle from './components/DarkModeToggle.vue';
 import Login from './components/login/login';
 import LoginModal from './components/login/LoginModal.vue';
 import BaseEntryCreateForm from './components/entries/BaseCreateForm.vue';
@@ -156,6 +157,7 @@ Statamic.app({
     components: {
         GlobalSearch,
         GlobalSiteSelector,
+        DarkModeToggle,
         Login,
         LoginModal,
         BaseEntryCreateForm,
diff --git a/resources/js/components/AddonList.vue b/resources/js/components/AddonList.vue
index bb03a468f1..7411f6c0bf 100644
--- a/resources/js/components/AddonList.vue
+++ b/resources/js/components/AddonList.vue
@@ -3,7 +3,7 @@
         <div class="breadcrumb flex" v-if="showingAddon">
             <button
                 @click="showingAddon = false"
-                class="flex-initial flex p-2 -m-2 items-center text-xs text-gray-700 hover:text-gray-900"
+                class="flex-initial flex p-2 -m-2 items-center text-xs text-gray-700 dark:text-dark-175 hover:text-gray-900 dark:hover:text-dark-100"
             >
                 <svg-icon name="micro/chevron-right" class="h-6 w-4 rotate-180" />
                 <span v-text="__('Addons')" />
@@ -26,7 +26,7 @@
             <div class="" slot-scope="{ rows: addons }">
 
                 <div class="card p-0">
-                    <div class="border-b px-4 text-sm">
+                    <div class="border-b dark:border-dark-900 px-4 text-sm">
                         <button
                             class="data-list-filter-link"
                             :class="{ active: filter === 'all' }"
@@ -50,15 +50,15 @@
                 </div>
 
                 <div class="addon-grid my-8" :class="{ 'opacity-50': loading }">
-                    <div class="addon-card bg-white text-gray-800 h-full shadow rounded cursor-pointer relative" v-for="addon in addons" :key="addon.id" @click="showAddon(addon)">
+                    <div class="addon-card bg-white dark:bg-dark-600 text-gray-800 dark:text-dark-150 h-full shadow dark:shadow-dark rounded cursor-pointer relative" v-for="addon in addons" :key="addon.id" @click="showAddon(addon)">
                         <span class="badge absolute top-0 rtl:right-0 ltr:left-0 mt-2 rtl:mr-2 ltr:ml-2" v-if="addon.installed">Installed</span>
                         <div class="h-48 rounded-t bg-cover bg-center" :style="'background-image: url(\''+getCover(addon)+'\')'"></div>
                         <div class="px-6 mb-4 relative text-center">
                             <a :href="addon.seller.website" class="relative">
-                                <img :src="addon.seller.avatar" :alt="addon.seller.name" class="rounded-full h-14 w-14 bg-white relative -mt-8 border-2 border-white inline">
+                                <img :src="addon.seller.avatar" :alt="addon.seller.name" class="rounded-full h-14 w-14 bg-white dark:bg-dark-600 relative -mt-8 border-2 border-white dark:border-dark-600 inline">
                             </a>
                             <div class="addon-card-title mb-2 text-lg font-bold text-center">{{ addon.name }}</div>
-                            <p class="text-gray mb-4" v-text="getPriceRange(addon)" />
+                            <p class="text-gray dark:text-dark-175 mb-4" v-text="getPriceRange(addon)" />
                             <p v-text="addon.summary" class="text-sm"></p>
                         </div>
                     </div>
diff --git a/resources/js/components/Breadcrumb.vue b/resources/js/components/Breadcrumb.vue
index 56e6d13119..4e5a5d948d 100644
--- a/resources/js/components/Breadcrumb.vue
+++ b/resources/js/components/Breadcrumb.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="breadcrumb flex">
-        <a :href="url" class="flex-initial flex p-2 -m-2 items-center text-xs text-gray-700 hover:text-gray-900">
+        <a :href="url" class="flex-initial flex p-2 -m-2 items-center text-xs text-gray-700 dark:text-dark-175 hover:text-gray-900 dark:hover:text-dark-100">
             <svg-icon name="micro/chevron-right" class="h-6 w-4 rotate-180" />
             <span v-text="__(title)" />
         </a>
diff --git a/resources/js/components/DarkModeToggle.vue b/resources/js/components/DarkModeToggle.vue
new file mode 100644
index 0000000000..0b3b0a7d00
--- /dev/null
+++ b/resources/js/components/DarkModeToggle.vue
@@ -0,0 +1,71 @@
+<template>
+    <label class="dark-mode-toggle">
+        <input v-model="darkMode" :checked="darkMode" @change="toggleDarkMode" class="toggle-checkbox" type="checkbox" />
+        <div class="toggle-slot">
+            <div class="sun-icon-wrapper">
+                <svg aria-hidden="true" class="sun-icon" data-icon="feather-sun" data-inline="false" focusable="false" height="1em" preserveAspectRatio="xMidYMid meet"
+                     style="transform: rotate(360deg)" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                    <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+                        <circle cx="12" cy="12" r="5"></circle>
+                        <path d="M12 1v2m0 18v2M4.22 4.22l1.42 1.42m12.72 12.72l1.42 1.42M1 12h2m18 0h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"></path>
+                    </g>
+                </svg>
+            </div>
+            <div class="toggle-button"></div>
+            <div class="moon-icon-wrapper">
+                <svg aria-hidden="true" class="moon-icon" data-icon="feather-moon" data-inline="false" focusable="false" height="1em" preserveAspectRatio="xMidYMid meet"
+                     style="transform: rotate(360deg)" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                    <path d="M21 12.79A9 9 0 1 1 11.21 3A7 7 0 0 0 21 12.79z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
+                </svg>
+            </div>
+        </div>
+    </label>
+</template>
+
+<script>
+export default {
+    props: {
+        theme: {
+            type: String,
+            default: 'auto',
+        }
+    },
+    data() {
+        return {
+            darkMode: false
+        }
+    },
+    created: function() {
+        const autoDark = (localStorage.theme === 'dark') || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches);
+        if (this.theme === 'dark' || autoDark) {
+            document.documentElement.classList.add('dark');
+            document.documentElement.classList.remove('light');
+            document.documentElement.classList.remove('auto');
+            this.darkMode = true;
+        } else if (this.theme === 'light' || !autoDark) {
+            document.documentElement.classList.add('light');
+            document.documentElement.classList.remove('dark');
+            document.documentElement.classList.remove('auto');
+            this.darkMode = false;
+        }
+    },
+    methods: {
+        toggleDarkMode () {
+            if (this.darkMode) {
+                localStorage.theme = 'dark'
+                document.documentElement.classList.add('dark');
+                document.documentElement.classList.remove('light');
+                document.documentElement.classList.remove('auto');
+            } else {
+                localStorage.theme = 'light'
+                document.documentElement.classList.add('light');
+                document.documentElement.classList.remove('dark');
+                document.documentElement.classList.remove('auto');
+            }
+            this.$preferences.set('theme', this.darkMode ? 'dark' : 'light').then(response => {
+                this.$events.$emit('theme.saved');
+            });
+        }
+    }
+}
+</script>
diff --git a/resources/js/components/FavoriteCreator.vue b/resources/js/components/FavoriteCreator.vue
index 9ba673c4d5..eff757c03d 100644
--- a/resources/js/components/FavoriteCreator.vue
+++ b/resources/js/components/FavoriteCreator.vue
@@ -2,7 +2,7 @@
     <div>
         <popover v-if="isNotYetFavorited" ref="popper" placement="bottom-end" :offset="[10, 28]">
             <template slot="trigger">
-                <button @click="shown" slot="reference" class="h-6 w-6 block outline-none p-1 text-gray hover:text-gray-800" v-tooltip="__('Pin to Favorites')" :aria-label="__('Pin to Favorites')">
+                <button @click="shown" slot="reference" class="h-6 w-6 block outline-none p-1 text-gray dark:text-dark-100 hover:text-gray-800 dark:hover:text-dark-175" v-tooltip="__('Pin to Favorites')" :aria-label="__('Pin to Favorites')">
                     <svg-icon name="light/pin"></svg-icon>
                 </button>
             </template>
@@ -16,7 +16,7 @@
             </div>
         </popover>
         <div v-else>
-            <button @click="remove" class="h-6 w-6 block outline-none p-1 text-gray hover:text-gray-800" v-tooltip="__('Unpin from Favorites')" :aria-label="__('Unpin from Favorites')">
+            <button @click="remove" class="h-6 w-6 block outline-none p-1 text-gray dark:text-dark-100 hover:text-gray-800 dark:hover:text-dark-175" v-tooltip="__('Unpin from Favorites')" :aria-label="__('Unpin from Favorites')">
                 <svg-icon name="light/pin" class="text-green-600"></svg-icon>
             </button>
         </div>
diff --git a/resources/js/components/GlobalSearch.vue b/resources/js/components/GlobalSearch.vue
index 84b86d5da5..ba5d86142f 100644
--- a/resources/js/components/GlobalSearch.vue
+++ b/resources/js/components/GlobalSearch.vue
@@ -20,7 +20,7 @@
             tabindex="-1"
         />
 
-        <span v-if="! (isDirty || searching)" class="rounded px-1 pb-px text-2xs border text-gray-600">/</span>
+        <span v-if="! (isDirty || searching)" class="rounded px-1 pb-px text-2xs border dark:border-dark-300 text-gray-600 dark:text-dark-200">/</span>
         <loading-graphic v-if="searching" :size="14" :inline="true" text="" class="global-search-loading-indicator" />
 
         <div v-show="focused && (hasResults || hasFavorites)" class="global-search-results">
diff --git a/resources/js/components/GlobalSiteSelector.vue b/resources/js/components/GlobalSiteSelector.vue
index ac2626ed1e..d1df77ecf9 100644
--- a/resources/js/components/GlobalSiteSelector.vue
+++ b/resources/js/components/GlobalSiteSelector.vue
@@ -1,6 +1,6 @@
 <template>
 
-    <div class="site-selector flex items-center rtl:ml-4 ltr:mr-4 h-full border-l border-r">
+    <div class="site-selector flex items-center rtl:ml-4 ltr:mr-4 h-full border-l border-r dark:border-dark-900">
         <v-select
             :options="sites"
             label="name"
@@ -11,7 +11,7 @@
             @input="selected"
         >
             <template #selected-option="option">
-                <div class="flex items-center px-2 text-sm text-gray hover:text-gray-800 anti">
+                <div class="flex items-center px-2 text-sm text-gray dark:text-dark-100 hover:text-gray-800 dark:hover:text-dark-175 anti">
                     <svg-icon name="light/sites" class="rtl:ml-2 ltr:mr-2 h-4 w-4" />
                     <div class="whitespace-nowrap">{{ __(option.name) }}</div>
                 </div>
diff --git a/resources/js/components/LoadingGraphic.vue b/resources/js/components/LoadingGraphic.vue
index 1619c61545..9178e498d8 100644
--- a/resources/js/components/LoadingGraphic.vue
+++ b/resources/js/components/LoadingGraphic.vue
@@ -24,7 +24,7 @@
         </svg>
 
         <div v-if="text" :class="{
-            'ml-2 text-sm text-gray': inline,
+            'ml-2 text-sm text-gray dark:text-dark-175': inline,
             'mt-2': !inline
         }">{{ __(text) }}</div>
     </div>
diff --git a/resources/js/components/Popover.vue b/resources/js/components/Popover.vue
index 75d64d2eb5..8d3913433a 100644
--- a/resources/js/components/Popover.vue
+++ b/resources/js/components/Popover.vue
@@ -12,7 +12,7 @@
         >
             <div :class="`${isOpen ? 'popover-open' : ''}`">
                 <div ref="popover" class="popover" v-if="!disabled" v-on-clickaway="clickawayClose">
-                    <div class="popover-content bg-white shadow-popover rounded-md">
+                    <div class="popover-content bg-white dark:bg-dark-550 shadow-popover dark:shadow-dark-popover rounded-md">
                         <slot :close="close" />
                     </div>
                 </div>
diff --git a/resources/js/components/asset-containers/EditForm.vue b/resources/js/components/asset-containers/EditForm.vue
index edc659ab3b..0ba93c9854 100644
--- a/resources/js/components/asset-containers/EditForm.vue
+++ b/resources/js/components/asset-containers/EditForm.vue
@@ -13,7 +13,7 @@
     >
         <div slot-scope="{ setFieldValue }">
             <configure-tabs @updated="setFieldValue" :enable-sidebar="false"/>
-            <div class="py-4 border-t flex justify-between">
+            <div class="py-4 border-t dark:border-dark-950 flex justify-between">
                 <a :href="url" class="btn" v-text="__('Cancel') "/>
                 <button type="submit" class="btn-primary" @click="submit">{{ __('Save') }}</button>
             </div>
diff --git a/resources/js/components/assets/Browser/Breadcrumbs.vue b/resources/js/components/assets/Browser/Breadcrumbs.vue
index 9fe65a1ed7..033558b344 100644
--- a/resources/js/components/assets/Browser/Breadcrumbs.vue
+++ b/resources/js/components/assets/Browser/Breadcrumbs.vue
@@ -1,6 +1,6 @@
 <template>
 
-    <div class="px-4 py-2 flex flex-wrap text-sm bg-gray-200 border-t border-b shadow-inner">
+    <div class="px-4 py-2 flex flex-wrap text-sm bg-gray-200 dark:bg-dark-700 border-t border-b dark:border-dark-900 shadow-inner">
         <a
             v-for="(part, index) in pathParts"
             :key="index"
diff --git a/resources/js/components/assets/Editor/Editor.vue b/resources/js/components/assets/Editor/Editor.vue
index bdc5bdc38b..eea4562b33 100644
--- a/resources/js/components/assets/Editor/Editor.vue
+++ b/resources/js/components/assets/Editor/Editor.vue
@@ -5,7 +5,7 @@
         :full="true"
         @closed="close">
 
-    <div class="asset-editor flex flex-col relative bg-gray-100 h-full rounded" :class="isImage ? 'is-image' : 'is-file'">
+    <div class="asset-editor flex flex-col relative bg-gray-100 dark:bg-dark-800 h-full rounded" :class="isImage ? 'is-image' : 'is-file'">
 
         <div v-if="loading" class="loading">
             <loading-graphic />
@@ -16,9 +16,9 @@
             <!-- Header -->
             <div id="asset-editor-header" class="flex justify-between w-full px-2 relative">
                 <button class="flex items-center p-4 group" @click="open" v-tooltip.right="__('Open in a new window')" :aria-label="__('Open in a new window')">
-                    <svg-icon name="folder-image" class="text-gray-700 h-5 w-5" />
-                    <span class="rtl:mr-2 ltr:ml-2 text-sm text-gray-800 group-hover:text-blue">{{ asset.path }}</span>
-                    <svg-icon name="micro/chevron-right" class="text-gray-700 h-5 w-5 group-hover:text-blue rtl:rotate-180" />
+                    <svg-icon name="folder-image" class="text-gray-700 dark:text-dark-175 h-5 w-5" />
+                    <span class="rtl:mr-2 ltr:ml-2 text-sm text-gray-800 dark:text-dark-150 group-hover:text-blue dark:group-hover:text-dark-100">{{ asset.path }}</span>
+                    <svg-icon name="micro/chevron-right" class="text-gray-700 dark:text-dark-175 h-5 w-5 group-hover:text-blue dark:group-hover:text-dark-100 rtl:rotate-180" />
                 </button>
                 <button class="btn-close absolute top-2 rtl:left-2.5 ltr:right-2.5" @click="close" :aria-label="__('Close Editor')">&times;</button>
             </div>
@@ -26,41 +26,41 @@
             <div class="flex flex-1 flex-col md:flex-row md:justify-between grow overflow-scroll">
 
                 <!-- Visual Area -->
-                <div class="editor-preview bg-gray-800 rtl:md:rounded-tl-md ltr:md:rounded-tr-md flex flex-col justify-between flex-1 min-h-[45vh] md:min-h-auto md:flex-auto md:grow w-full md:w-1/2 lg:w-2/3 shadow-[inset_0px_4px_3px_0px_black]">
+                <div class="editor-preview bg-gray-800 dark:bg-dark-950 rtl:md:rounded-tl-md ltr:md:rounded-tr-md flex flex-col justify-between flex-1 min-h-[45vh] md:min-h-auto md:flex-auto md:grow w-full md:w-1/2 lg:w-2/3 shadow-[inset_0px_4px_3px_0px_black]">
 
                     <!-- Toolbar -->
-                    <div id="asset-editor-toolbar" class="@container/toolbar flex items-center justify-center py-4 px-2 text-2xs text-white text-center space-x-1 sm:space-x-3" v-if="isToolbarVisible">
-                        <button v-if="isImage && isFocalPointEditorEnabled" type="button" class="flex bg-gray-750 hover:bg-gray-900 hover:text-yellow-light rounded items-center justify-center px-3 py-1.5" @click.prevent="openFocalPointEditor">
+                    <div id="asset-editor-toolbar" class="@container/toolbar flex items-center justify-center py-4 px-2 text-2xs text-white dark:text-dark-100 text-center space-x-1 sm:space-x-3" v-if="isToolbarVisible">
+                        <button v-if="isImage && isFocalPointEditorEnabled" type="button" class="flex bg-gray-750 dark:bg-dark-400 hover:bg-gray-900 dark:hover:bg-dark-600 hover:text-yellow-light dark:hover:text-yellow-dark rounded items-center justify-center px-3 py-1.5" @click.prevent="openFocalPointEditor">
                             <svg-icon name="focal-point" class="h-4" />
                             <span class="rtl:mr-2 ltr:ml-2 hidden @3xl/toolbar:inline-block">{{ __('Focal Point') }}</span>
                         </button>
 
-                        <button v-if="canRunAction('rename_asset')" type="button" class="flex bg-gray-750 hover:bg-gray-900 hover:text-yellow-light rounded items-center px-3 py-1.5" @click.prevent="runAction('rename_asset')">
+                        <button v-if="canRunAction('rename_asset')" type="button" class="flex bg-gray-750 dark:bg-dark-400 hover:bg-gray-900 dark:hover:bg-dark-600 hover:text-yellow-light dark:hover:text-yellow-dark rounded items-center px-3 py-1.5" @click.prevent="runAction('rename_asset')">
                             <svg-icon name="rename-file" class="h-4" />
                             <span class="rtl:mr-2 ltr:ml-2 hidden @3xl/toolbar:inline-block">{{ __('Rename') }}</span>
                         </button>
 
-                        <button v-if="canRunAction('move_asset')" type="button" class="flex bg-gray-750 hover:bg-gray-900 hover:text-yellow-light rounded items-center px-3 py-1.5" @click.prevent="runAction('move_asset')">
+                        <button v-if="canRunAction('move_asset')" type="button" class="flex bg-gray-750 dark:bg-dark-400 hover:bg-gray-900 dark:hover:bg-dark-600 hover:text-yellow-light dark:hover:text-yellow-dark rounded items-center px-3 py-1.5" @click.prevent="runAction('move_asset')">
                             <svg-icon name="move-file" class="h-4" />
                             <span class="rtl:mr-2 ltr:ml-2 hidden @3xl/toolbar:inline-block">{{ __('Move') }}</span>
                         </button>
 
-                        <button v-if="canRunAction('replace_asset')" type="button" class="flex bg-gray-750 hover:bg-gray-900 hover:text-yellow-light rounded items-center px-3 py-1.5" @click.prevent="runAction('replace_asset')">
+                        <button v-if="canRunAction('replace_asset')" type="button" class="flex bg-gray-750 dark:bg-dark-400 hover:bg-gray-900 dark:hover:bg-dark-600 hover:text-yellow-light dark:hover:text-yellow-dark rounded items-center px-3 py-1.5" @click.prevent="runAction('replace_asset')">
                             <svg-icon name="swap" class="h-4" />
                             <span class="rtl:mr-2 ltr:ml-2 hidden @3xl/toolbar:inline-block">{{ __('Replace') }}</span>
                         </button>
 
-                        <button v-if="canRunAction('reupload_asset')" type="button" class="flex bg-gray-750 hover:bg-gray-900 hover:text-yellow-light rounded items-center px-3 py-1.5" @click.prevent="runAction('reupload_asset')">
+                        <button v-if="canRunAction('reupload_asset')" type="button" class="flex bg-gray-750 dark:bg-dark-400 hover:bg-gray-900 dark:hover:bg-dark-600 hover:text-yellow-light dark:hover:text-yellow-dark rounded items-center px-3 py-1.5" @click.prevent="runAction('reupload_asset')">
                             <svg-icon name="upload-cloud" class="h-4" />
                             <span class="rtl:mr-2 ltr:ml-2 hidden @3xl/toolbar:inline-block">{{ __('Reupload') }}</span>
                         </button>
 
-                        <button v-if="asset.allowDownloading" class="flex bg-gray-750 hover:bg-gray-900 hover:text-yellow-light rounded items-center px-3 py-1.5" @click="download" :aria-label="__('Download file')">
+                        <button v-if="asset.allowDownloading" class="flex bg-gray-750 dark:bg-dark-400 hover:bg-gray-900 dark:hover:bg-dark-600 hover:text-yellow-light dark:hover:text-yellow-dark rounded items-center px-3 py-1.5" @click="download" :aria-label="__('Download file')">
                             <svg-icon name="download-desktop" class="h-4"/>
                             <span class="rtl:mr-2 ltr:ml-2 hidden @3xl/toolbar:inline-block">{{ __('Download') }}</span>
                         </button>
 
-                        <button v-if="allowDeleting && canRunAction('delete')" @click="runAction('delete')" class="flex bg-gray-750 hover:bg-gray-900 hover:text-red-400 rounded items-center text-center px-3 py-1.5">
+                        <button v-if="allowDeleting && canRunAction('delete')" @click="runAction('delete')" class="flex bg-gray-750 dark:bg-dark-400 hover:bg-gray-900 dark:hover:bg-dark-600 hover:text-red-400 dark:hover:text-dark-red rounded items-center text-center px-3 py-1.5">
                             <svg-icon name="trash" class="h-4" />
                             <span class="rtl:mr-2 ltr:ml-2 hidden @3xl/toolbar:inline-block">{{ __('Delete') }}</span>
                         </button>
@@ -139,17 +139,17 @@
                 </publish-container>
             </div>
 
-            <div class="bg-gray-200 w-full border-t flex items-center justify-end py-3 px-4 rounded-b">
-                <div id="asset-meta-data" class="flex-1 hidden sm:flex space-x-3 py-1 h-full text-xs text-gray-800">
-                    <div class="flex items-center bg-gray-400 rounded py-1 rtl:pr-2 ltr:pl-2 rtl:pl-3 ltr:pr-3" v-if="isImage">
+            <div class="bg-gray-200 dark:bg-dark-550 w-full border-t dark:border-dark-200 flex items-center justify-end py-3 px-4 rounded-b">
+                <div id="asset-meta-data" class="flex-1 hidden sm:flex space-x-3 py-1 h-full text-xs text-gray-800 dark:text-dark-150">
+                    <div class="flex items-center bg-gray-400 dark:bg-dark-600 rounded py-1 rtl:pr-2 ltr:pl-2 rtl:pl-3 ltr:pr-3" v-if="isImage">
                         <svg-icon name="image-picture" class="h-3 rtl:ml-2 ltr:mr-2" />
                         <div class="">{{ __('messages.width_x_height', { width: asset.width, height: asset.height }) }}</div>
                     </div>
-                    <div class="flex items-center bg-gray-400 rounded py-1 rtl:pr-2 ltr:pl-2 rtl:pl-3 ltr:pr-3">
+                    <div class="flex items-center bg-gray-400 dark:bg-dark-600 rounded py-1 rtl:pr-2 ltr:pl-2 rtl:pl-3 ltr:pr-3">
                         <svg-icon name="sd-card" class="h-3 rtl:ml-2 ltr:mr-2" />
                         <div class="">{{ asset.size }}</div>
                     </div>
-                    <div class="flex items-center bg-gray-400 rounded py-1 rtl:pr-2 ltr:pl-2 rtl:pl-3 ltr:pr-3">
+                    <div class="flex items-center bg-gray-400 dark:bg-dark-600 rounded py-1 rtl:pr-2 ltr:pl-2 rtl:pl-3 ltr:pr-3">
                         <svg-icon name="thumbprint" class="h-3 rtl:ml-2 ltr:mr-2" />
                         <div class="" :title="asset.lastModified">{{ asset.lastModifiedRelative }}</div>
                     </div>
diff --git a/resources/js/components/assets/Editor/FocalPointEditor.vue b/resources/js/components/assets/Editor/FocalPointEditor.vue
index ac35dbb955..c8b7023d98 100644
--- a/resources/js/components/assets/Editor/FocalPointEditor.vue
+++ b/resources/js/components/assets/Editor/FocalPointEditor.vue
@@ -40,7 +40,7 @@
                     <button type="button" class="btn mb-2 btn-primary" @click="select">{{ __('Finish') }}</button>
                 </div>
             </div>
-            <h6 class="p-4 text-center bg-gray-300 rounded-b">{{ __('messages.focal_point_previews_are_examples') }}</h6>
+            <h6 class="p-4 text-center bg-gray-300 dark:bg-dark-550 rounded-b dark:border-dark-200">{{ __('messages.focal_point_previews_are_examples') }}</h6>
         </div>
         <div v-for="n in 9" :key="n"
              :class="`frame frame-${n}`">
diff --git a/resources/js/components/assets/Selector.vue b/resources/js/components/assets/Selector.vue
index b5cad5ac27..29bf6a5e9f 100644
--- a/resources/js/components/assets/Selector.vue
+++ b/resources/js/components/assets/Selector.vue
@@ -1,6 +1,6 @@
 <template>
 
-        <div class="flex flex-col justify-end h-full bg-white">
+        <div class="flex flex-col justify-end h-full bg-white dark:bg-dark-800">
 
             <div class="flex-1 overflow-scroll">
                 <asset-browser
@@ -24,7 +24,7 @@
                 </asset-browser>
             </div>
 
-            <div class="p-4 border-t flex items-center justify-between bg-gray-200">
+            <div class="p-4 border-t dark:border-dark-200 flex items-center justify-between bg-gray-200 dark:bg-dark-500">
                 <div class="text-sm text-gray-700"
                     v-text="hasMaxFiles
                         ? __n(':count/:max selected', browserSelections, { max: maxFiles })
diff --git a/resources/js/components/assets/Upload.vue b/resources/js/components/assets/Upload.vue
index 40f5cd1534..f82d99014f 100644
--- a/resources/js/components/assets/Upload.vue
+++ b/resources/js/components/assets/Upload.vue
@@ -19,7 +19,7 @@
 
         <div class="px-2" v-if="status === 'error'">
             {{ error }}
-            <button @click.prevent="clear" class="flex items-center text-gray-700 hover:text-gray-800">
+            <button @click.prevent="clear" class="flex items-center text-gray-700 dark:text-dark-175 hover:text-gray-800 dark:text-dark-100">
                 <svg-icon name="micro/circle-with-cross" class="h-4 w-4" />
             </button>
         </div>
diff --git a/resources/js/components/assets/Uploads.vue b/resources/js/components/assets/Uploads.vue
index 28bb84e7de..cfbd3b7704 100644
--- a/resources/js/components/assets/Uploads.vue
+++ b/resources/js/components/assets/Uploads.vue
@@ -1,6 +1,6 @@
 <template>
 
-    <div class="bg-gray-400 text-xs p-2">
+    <div class="bg-gray-400 dark:bg-dark-800 text-xs p-2">
         <upload
             v-for="(upload, i) in uploads"
             :key="upload.id"
diff --git a/resources/js/components/blueprints/ImportField.vue b/resources/js/components/blueprints/ImportField.vue
index 7463ea7d1d..047525157e 100644
--- a/resources/js/components/blueprints/ImportField.vue
+++ b/resources/js/components/blueprints/ImportField.vue
@@ -2,17 +2,17 @@
 
     <div class="blueprint-section-field blueprint-section-import blueprint-section-field-w-full">
         <div class="blueprint-section-field-inner">
-            <div class="blueprint-drag-handle w-4 ltr:border-r rtl:border-l"></div>
+            <div class="blueprint-drag-handle w-4 ltr:border-r rtl:border-l dark:border-dark-300"></div>
             <div class="flex flex-1 items-center justify-between">
                 <div class="flex items-center flex-1 rtl:pl-4 ltr:pr-4 py-2 rtl:pr-2 ltr:pl-2">
-                    <svg-icon class="flex-none text-gray-700 h-4 w-4 rtl:ml-2 ltr:mr-2" name="paperclip" v-tooltip="__('Linked fieldset')" />
+                    <svg-icon class="flex-none text-gray-700 dark:text-dark-150 h-4 w-4 rtl:ml-2 ltr:mr-2" name="paperclip" v-tooltip="__('Linked fieldset')" />
                     <a class="break-all" @click="$emit('edit')">
                         <span v-text="__('Fieldset')" />
-                        <span class="font-mono text-3xs text-gray-600 rtl:mr-2 ltr:ml-2">{{ field.fieldset }}</span>
+                        <span class="font-mono text-3xs text-gray-600 dark:text-dark-175 rtl:mr-2 ltr:ml-2">{{ field.fieldset }}</span>
                     </a>
                 </div>
                 <div class="flex-none rtl:pl-2 ltr:pr-2 flex">
-                    <button @click.prevent="$emit('deleted')" class="text-gray-600 hover:text-gray-950"><svg-icon name="micro/trash" class="w-4 h-4" /></button>
+                    <button @click.prevent="$emit('deleted')" class="text-gray-600 dark:text-dark-150 hover:text-gray-950 dark:hover:text-dark-100"><svg-icon name="micro/trash" class="w-4 h-4" /></button>
                     <stack name="field-settings" v-if="isEditing" @closed="editorClosed">
                         <field-settings
                             ref="settings"
diff --git a/resources/js/components/blueprints/LinkFields.vue b/resources/js/components/blueprints/LinkFields.vue
index 5a2a93e715..e8c32bfef9 100644
--- a/resources/js/components/blueprints/LinkFields.vue
+++ b/resources/js/components/blueprints/LinkFields.vue
@@ -8,9 +8,9 @@
         </button>
 
         <stack narrow v-if="open" @closed="open = false" name="field-linker">
-            <div slot-scope="{ close }" class="bg-white h-full flex flex-col">
+            <div slot-scope="{ close }" class="bg-white dark:bg-dark-800 h-full flex flex-col">
 
-                <div class="bg-gray-200 px-6 py-2 border-b border-gray-300 text-lg font-medium flex items-center justify-between">
+                <div class="bg-gray-200 dark:bg-dark-600 px-6 py-2 border-b border-gray-300 dark:border-dark-900 text-lg font-medium flex items-center justify-between">
                     {{ __('Link Fields') }}
                     <button
                         type="button"
@@ -34,12 +34,12 @@
                             v-model="reference">
                             <template slot="option" slot-scope="option">
                                 <div class="flex items-center">
-                                    <span v-text="option.fieldset" class="text-2xs text-gray-500 rtl:ml-2 ltr:mr-2" />
+                                    <span v-text="option.fieldset" class="text-2xs text-gray-500 dark:text-dark-150 rtl:ml-2 ltr:mr-2" />
                                     <span v-text="option.label" />
                                 </div>
                             </template>
                             <template v-slot:no-options>
-                               <div class="text-sm text-gray-700 rtl:text-right ltr:text-left py-2 px-4" v-text="__('No options to choose from.')" />
+                               <div class="text-sm text-gray-700 dark:text-dark-200 rtl:text-right ltr:text-left py-2 px-4" v-text="__('No options to choose from.')" />
                            </template>
                         </v-select>
                         <button
@@ -50,13 +50,13 @@
                             v-text="__('Link')" />
                     </div>
                     <div class="my-4 flex items-center">
-                        <div class="border-b border-gray-300 flex-1" />
-                        <div class="text-2xs text-gray-600 mx-4" v-text="__('or')"></div>
-                        <div class="border-b border-gray-300 flex-1" />
+                        <div class="border-b border-gray-300 dark:border-dark-200 flex-1" />
+                        <div class="text-2xs text-gray-600 dark:text-dark-175 mx-4" v-text="__('or')"></div>
+                        <div class="border-b border-gray-300 dark:border-dark-200 flex-1" />
                     </div>
                     <div>
                         <p class="text-sm font-medium mb-2" v-text="__('Link a fieldset')" />
-                        <p class="text-2xs text-gray mb-2" v-text="__('Changes to this fieldset will stay in sync.')" />
+                        <p class="text-2xs text-gray dark:text-dark-175 mb-2" v-text="__('Changes to this fieldset will stay in sync.')" />
                         <v-select
                             name="field"
                             :placeholder="__('Fieldsets')"
@@ -67,11 +67,11 @@
                             v-model="fieldset"
                         >
                             <template v-slot:no-options>
-                                <div class="text-sm text-gray-700 rtl:text-right ltr:text-left py-2 px-4" v-text="__('No options to choose from.')" />
+                                <div class="text-sm text-gray-700 dark:text-dark-200 rtl:text-right ltr:text-left py-2 px-4" v-text="__('No options to choose from.')" />
                             </template>
                         </v-select>
                         <p class="text-sm font-medium mt-6 mb-2" v-text="__('Prefix')" />
-                        <p class="text-2xs text-gray mb-2" v-text="__('messages.fieldset_link_fields_prefix_instructions')" />
+                        <p class="text-2xs text-gray dark:text-dark-175 mb-2" v-text="__('messages.fieldset_link_fields_prefix_instructions')" />
                         <text-input v-model="importPrefix" :placeholder="__('e.g. hero_')" />
                         <button
                             class="btn-primary w-full mt-6"
diff --git a/resources/js/components/blueprints/RegularField.vue b/resources/js/components/blueprints/RegularField.vue
index ed14b65edd..168bb705de 100644
--- a/resources/js/components/blueprints/RegularField.vue
+++ b/resources/js/components/blueprints/RegularField.vue
@@ -2,32 +2,32 @@
 
     <div class="blueprint-section-field" :class="widthClass">
         <div class="blueprint-section-field-inner">
-            <div class="blueprint-drag-handle w-4 ltr:border-r rtl:border-l"></div>
+            <div class="blueprint-drag-handle w-4 ltr:border-r rtl:border-l dark:border-dark-300"></div>
             <div class="flex flex-1 items-center justify-between">
                 <div class="flex items-center flex-1 rtl:pl-4 ltr:pr-4 py-2 rtl:pr-2 ltr:pl-2">
-                    <svg-icon class="text-gray-800 rtl:ml-2 ltr:mr-2 h-4 w-4 flex-none" :name="field.icon.startsWith('<svg') ? field.icon : `light/${field.icon}`" v-tooltip="tooltipText" default="light/generic-field" />
+                    <svg-icon class="text-gray-800 dark:text-dark-150 rtl:ml-2 ltr:mr-2 h-4 w-4 flex-none" :name="field.icon.startsWith('<svg') ? field.icon : `light/${field.icon}`" v-tooltip="tooltipText" default="light/generic-field" />
                     <a class="break-all" v-text="__(labelText)" @click="$emit('edit')" />
-                    <svg-icon name="light/hyperlink" v-if="isReferenceField" class="text-gray-600 text-3xs rtl:mr-2 ltr:ml-2 h-4 w-4" v-tooltip="__('Imported from fieldset') + ': ' + field.field_reference" />
+                    <svg-icon name="light/hyperlink" v-if="isReferenceField" class="text-gray-600 dark:text-dark-175 text-3xs rtl:mr-2 ltr:ml-2 h-4 w-4" v-tooltip="__('Imported from fieldset') + ': ' + field.field_reference" />
                 </div>
                 <div class="flex-none rtl:pl-2 ltr:pr-2 flex">
                     <width-selector v-if="!isHidden" v-model="width" class="rtl:ml-2 ltr:mr-2" />
 
-                    <div v-else class="relative border border-gray-400 opacity-50 w-12 flex items-center justify-center rtl:ml-2 ltr:mr-2">
+                    <div v-else class="relative border border-gray-400 dark:border-dark-200 opacity-50 w-12 flex items-center justify-center rtl:ml-2 ltr:mr-2">
                         <svg-icon name="regular/hidden" class="h-4 w-4 opacity-50"></svg-icon>
                     </div>
 
                     <button v-if="canDefineLocalizable"
-                        class="hover:text-gray-950 rtl:ml-2 ltr:mr-2 flex items-center"
-                        :class="{ 'text-gray-950': localizable, 'text-gray-600': !localizable }"
+                        class="hover:text-gray-950 dark:hover:text-dark-100 rtl:ml-2 ltr:mr-2 flex items-center"
+                        :class="{ 'text-gray-950 dark:text-dark-150': localizable, 'text-gray-600 dark:text-dark-200': !localizable }"
                         v-tooltip="__('Localizable')"
                         @click="localizable = !localizable"
                     >
                         <svg-icon name="light/earth" class="h-4 w-4" />
                     </button>
-                    <button @click.prevent="$emit('duplicate')" class="text-gray-600 hover:text-gray-950 flex items-center rtl:ml-2 ltr:mr-2" v-tooltip="__('Duplicate')">
+                    <button @click.prevent="$emit('duplicate')" class="text-gray-600 dark:text-dark-150 hover:text-gray-950 dark:hover:text-dark-100 flex items-center rtl:ml-2 ltr:mr-2" v-tooltip="__('Duplicate')">
                         <svg-icon name="light/duplicate" class="h-4 w-4" />
                     </button>
-                    <button @click.prevent="$emit('deleted')" class="text-gray-600 hover:text-gray-950 flex items-center" v-tooltip="__('Remove')">
+                    <button @click.prevent="$emit('deleted')" class="text-gray-600 dark:text-dark-150 hover:text-gray-950 dark:hover:text-dark-100 flex items-center" v-tooltip="__('Remove')">
                         <svg-icon name="micro/trash" class="h-4 w-4" />
                     </button>
                     <stack name="field-settings" v-if="isEditing" @closed="editorClosed">
diff --git a/resources/js/components/blueprints/Section.vue b/resources/js/components/blueprints/Section.vue
index 6b86678bdc..6434e1ecdd 100644
--- a/resources/js/components/blueprints/Section.vue
+++ b/resources/js/components/blueprints/Section.vue
@@ -3,17 +3,17 @@
     <div class="blueprint-section @container">
         <div class="blueprint-section-card card p-0 h-full flex rounded-t flex-col">
 
-            <div class="bg-gray-200 border-b text-sm flex rounded-t">
-                <div class="blueprint-drag-handle blueprint-section-drag-handle w-4 ltr:border-r rtl:border-l"></div>
+            <div class="bg-gray-200 dark:bg-dark-550 border-b dark:border-dark-900 text-sm flex rounded-t">
+                <div class="blueprint-drag-handle blueprint-section-drag-handle w-4 ltr:border-r rtl:border-l dark:border-dark-900"></div>
                 <div class="p-2 flex-1 flex items-center">
                     <a class="flex items-center flex-1 group" @click="edit">
-                        <svg-icon :name="iconName(section.icon)" :directory="iconBaseDirectory" class="h-4 w-4 rtl:ml-2 ltr:mr-2 text-gray-700 group-hover:text-blue-500" />
+                        <svg-icon :name="iconName(section.icon)" :directory="iconBaseDirectory" class="h-4 w-4 rtl:ml-2 ltr:mr-2 text-gray-700 dark:text-dark-150 group-hover:text-blue-500 dark:group-hover:text-dark-blue-100" />
                         <div class="rtl:ml-2 ltr:mr-2" v-text="__(section.display)" />
                     </a>
-                    <button class="flex items-center text-gray-700 hover:text-gray-950 rtl:ml-3 ltr:mr-3" @click="edit">
+                    <button class="flex items-center text-gray-700 dark:text-dark-175 hover:text-gray-950 dark:hover:text-dark-100 rtl:ml-3 ltr:mr-3" @click="edit">
                         <svg-icon class="h-4 w-4" name="pencil" />
                     </button>
-                    <button @click.prevent="$emit('deleted')" class="flex items-center text-gray-700 hover:text-gray-950">
+                    <button @click.prevent="$emit('deleted')" class="flex items-center text-gray-700 dark:text-dark-175 hover:text-gray-950 dark:hover:text-dark-100">
                         <svg-icon class="h-4 w-4" name="micro/trash" />
                     </button>
                 </div>
@@ -70,7 +70,7 @@
                 <template v-slot:empty-state>
                     <div
                         v-text="__('Add or drag fields here')"
-                        class="text-2xs text-gray-600 text-center border border-dashed rounded mb-2 p-2"
+                        class="text-2xs text-gray-600 dark:text-dark-150 text-center border dark:border-dark-200 border-dashed rounded mb-2 p-2"
                     />
                 </template>
             </fields>
diff --git a/resources/js/components/collections/CreateForm.vue b/resources/js/components/collections/CreateForm.vue
index 097ff1ca59..10a7ff5ab3 100644
--- a/resources/js/components/collections/CreateForm.vue
+++ b/resources/js/components/collections/CreateForm.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="max-w-lg mt-4 mx-auto">
 
-        <div class="rounded p-6 lg:px-20 lg:py-10 shadow bg-white">
+        <div class="rounded p-6 lg:px-20 lg:py-10 shadow bg-white dark:bg-dark-600 dark:shadow-dark">
             <header class="text-center mb-16">
                 <h1 class="mb-6">{{ __('Create Collection') }}</h1>
                 <p class="text-gray" v-text="__('messages.collection_configure_intro')" />
diff --git a/resources/js/components/data-list/BulkActions.vue b/resources/js/components/data-list/BulkActions.vue
index 86e978d677..8319666f3d 100644
--- a/resources/js/components/data-list/BulkActions.vue
+++ b/resources/js/components/data-list/BulkActions.vue
@@ -3,9 +3,9 @@
     <div v-if="showAlways || hasSelections" class="data-list-bulk-actions">
         <div class="input-group input-group-sm relative">
             <div class="input-group-prepend">
-                <div class="text-gray-700 hidden md:inline-block"
+                <div class="text-gray-700 dark:text-dark-175 hidden md:inline-block"
                     v-text="__n(`:count item selected|:count items selected`, selections.length)" />
-                <div class="text-gray-700 md:hidden" v-text="selections.length" />
+                <div class="text-gray-700 dark:text-dark-175 md:hidden" v-text="selections.length" />
             </div>
 
             <data-list-action
diff --git a/resources/js/components/data-list/ColumnPicker.vue b/resources/js/components/data-list/ColumnPicker.vue
index 817ee13570..2f75560e4d 100644
--- a/resources/js/components/data-list/ColumnPicker.vue
+++ b/resources/js/components/data-list/ColumnPicker.vue
@@ -11,15 +11,15 @@
         <modal v-if="open" name="column-picker" @closed="open = false" draggable=".modal-drag-handle" click-to-close>
             <div class="flex flex-col h-full -max-h-screen-px">
 
-                <header class="modal-drag-handle p-4 bg-gray-200 border-b flex items-center justify-between cursor-grab active:cursor-grabbing">
+                <header class="modal-drag-handle p-4 bg-gray-200 dark:bg-dark-500 border-b dark:border-dark-900 flex items-center justify-between cursor-grab active:cursor-grabbing">
                     <h2>{{ __('Customize Columns') }}</h2>
                     <button class="btn-close" @click="open = false" :aria-label="__('Close Editor')">&times;</button>
                 </header>
 
-                <div class="flex grow min-h-0 rounded-t-md bg-gray-100">
+                <div class="flex grow min-h-0 rounded-t-md bg-gray-100 dark:bg-dark-550">
                     <!-- Available Columns -->
-                    <div class="outline-none rtl:text-right ltr:text-left w-1/2 rtl:border-l ltr:border-r flex flex-col">
-                        <header v-text="__('Available Columns')" class="border-b py-2 px-3 text-sm bg-white font-medium"/>
+                    <div class="outline-none rtl:text-right ltr:text-left w-1/2 rtl:border-l ltr:border-r dark:border-dark-900 flex flex-col">
+                        <header v-text="__('Available Columns')" class="border-b dark:border-dark-900 py-2 px-3 text-sm bg-white dark:bg-dark-575 font-medium"/>
                         <div class="flex flex-1 flex-col space-y-1 py-2 px-3 select-none shadow-inner overflow-y-scroll">
                             <div class="column-picker-item" v-for="column in hiddenColumns" :key="column.field" v-if="hiddenColumns.length">
                                 <label class="flex items-center cursor-pointer">
@@ -32,7 +32,7 @@
 
                     <!-- Displayed Columns -->
                     <div class="w-1/2 flex flex-col">
-                        <header v-text="__('Displayed Columns')" class="border-b px-3 py-2 text-sm bg-white rtl:rounded-tr-md ltr:rounded-tl-md font-medium flex-none"/>
+                        <header v-text="__('Displayed Columns')" class="border-b dark:border-dark-900 px-3 py-2 text-sm bg-white dark:bg-dark-575 rtl:rounded-tr-md ltr:rounded-tl-md font-medium flex-none"/>
                         <div class="grow overflow-y-scroll shadow-inner">
                             <sortable-list
                                 v-model="selectedColumns"
@@ -57,7 +57,7 @@
                     </div>
                 </div>
 
-                <footer class="px-3 py-2 border-t flex items-center justify-end" v-if="preferencesKey">
+                <footer class="px-3 py-2 border-t dark:border-dark-900 flex items-center justify-end" v-if="preferencesKey">
                     <button class="btn" v-text="__('Reset')" @click="reset" :disabled="saving" />
                     <button class="rtl:mr-3 ltr:ml-3 btn-primary" v-text="__('Save')" @click="save" :disabled="saving" />
                 </footer>
diff --git a/resources/js/components/data-list/FieldFilter.vue b/resources/js/components/data-list/FieldFilter.vue
index 693b31f7c9..3b775f51a0 100644
--- a/resources/js/components/data-list/FieldFilter.vue
+++ b/resources/js/components/data-list/FieldFilter.vue
@@ -34,14 +34,14 @@
 
             </div>
 
-            <div class="flex border-t text-gray-800">
+            <div class="flex border-t dark:border-dark-900 text-gray-800 dark:text-dark-150">
                 <button
-                    class="p-2 hover:bg-gray-100 rtl:rounded-br ltr:rounded-bl text-xs flex-1"
+                    class="p-2 hover:bg-gray-100 dark:hover:bg-dark-600 rtl:rounded-br ltr:rounded-bl text-xs flex-1"
                     v-text="__('Clear')"
                     @click="resetAll"
                 />
                 <button
-                    class="p-2 hover:bg-gray-100 flex-1 rtl:rounded-bl ltr:rounded-br rtl:border-r ltr:border-l text-xs"
+                    class="p-2 hover:bg-gray-100 dark:hover:bg-dark-600 flex-1 rtl:rounded-bl ltr:rounded-br rtl:border-r ltr:border-l dark:border-dark-900 text-xs"
                     v-text="__('Close')"
                     @click="$emit('closed')"
                 />
diff --git a/resources/js/components/data-list/Filter.vue b/resources/js/components/data-list/Filter.vue
index f378427e53..fc251a49af 100644
--- a/resources/js/components/data-list/Filter.vue
+++ b/resources/js/components/data-list/Filter.vue
@@ -18,14 +18,14 @@
             />
         </publish-container>
 
-        <div class="flex border-t">
+        <div class="flex border-t dark:border-dark-900">
             <button
-                class="p-2 hover:bg-gray-100 rtl:rounded-br ltr:rounded-bl text-xs flex-1"
+                class="p-2 hover:bg-gray-100 dark:hover:bg-dark-600 rtl:rounded-br ltr:rounded-bl text-xs flex-1"
                 v-text="__('Clear')"
                 @click="resetAll"
             />
             <button
-                class="p-2 hover:bg-gray-100 flex-1 rtl:rounded-bl ltr:rounded-br rtl:border-r ltr:border-l text-xs"
+                class="p-2 hover:bg-gray-100 dark:hover:bg-dark-600 flex-1 rtl:rounded-bl ltr:rounded-br rtl:border-r ltr:border-l dark:border-dark-900 text-xs"
                 v-text="__('Close')"
                 @click="$emit('closed')"
             />
diff --git a/resources/js/components/data-list/Filters.vue b/resources/js/components/data-list/Filters.vue
index 5dbdce8781..99bc717931 100644
--- a/resources/js/components/data-list/Filters.vue
+++ b/resources/js/components/data-list/Filters.vue
@@ -1,6 +1,6 @@
 <template>
-    <div class="shadow-inner bg-gray-300">
-        <div class="flex items-center flex-wrap px-3 border-b pt-2">
+    <div class="shadow-inner bg-gray-300 dark:bg-dark-600">
+        <div class="flex items-center flex-wrap px-3 border-b dark:border-dark-900 pt-2">
 
             <!-- Field filter (requires custom selection UI) -->
             <popover v-if="fieldFilter" placement="bottom-start" @closed="fieldFilterClosed">
diff --git a/resources/js/components/data-list/Search.vue b/resources/js/components/data-list/Search.vue
index 0650d43486..322d361ea2 100644
--- a/resources/js/components/data-list/Search.vue
+++ b/resources/js/components/data-list/Search.vue
@@ -7,7 +7,7 @@
         @input="emitEvent"
         @keyup.esc="reset"
         autofocus
-        class="input-text flex-1 bg-white text-sm focus:border-blue-300 outline-0">
+        class="input-text flex-1 bg-white dark:bg-dark-600 text-sm focus:border-blue-300 dark:focus:border-dark-blue-125 outline-0">
 </template>
 
 <script>
diff --git a/resources/js/components/data-list/Table.vue b/resources/js/components/data-list/Table.vue
index 95d4d3ea53..8e0abd2bec 100644
--- a/resources/js/components/data-list/Table.vue
+++ b/resources/js/components/data-list/Table.vue
@@ -66,7 +66,7 @@
                     </slot>
                 </td>
                 <td class="type-column" v-if="type">
-                    <span v-if="type === 'entries' || type === 'terms'" class="rounded px-1 py-px text-2xs uppercase bg-gray-200 text-gray">
+                    <span v-if="type === 'entries' || type === 'terms'" class="rounded px-1 py-px text-2xs uppercase bg-gray-200 dark:bg-dark-400 text-gray dark:text-dark-150">
                         <template v-if="type === 'entries'">{{ __(row.collection.title) }}</template>
                         <template v-if="type === 'terms'">{{ __(row.taxonomy.title) }}</template>
                     </span>
diff --git a/resources/js/components/entries/Listing.vue b/resources/js/components/entries/Listing.vue
index 9063c4594c..52ccd4c4c6 100644
--- a/resources/js/components/entries/Listing.vue
+++ b/resources/js/components/entries/Listing.vue
@@ -16,7 +16,7 @@
         >
             <div slot-scope="{ hasSelections }">
                 <div class="card overflow-hidden p-0 relative">
-                    <div v-if="!reordering" class="flex flex-wrap items-center justify-between px-2 pb-2 text-sm border-b">
+                    <div v-if="!reordering" class="flex flex-wrap items-center justify-between px-2 pb-2 text-sm border-b dark:border-dark-900">
 
                         <data-list-filter-presets
                             ref="presets"
diff --git a/resources/js/components/entries/PublishActions.vue b/resources/js/components/entries/PublishActions.vue
index 2d0014a800..8e0b6cf690 100644
--- a/resources/js/components/entries/PublishActions.vue
+++ b/resources/js/components/entries/PublishActions.vue
@@ -1,9 +1,9 @@
 <template>
 
     <stack narrow name="publish-options" @closed="$emit('closed')">
-        <div slot-scope="{ close }" class="bg-white h-full flex flex-col">
+        <div slot-scope="{ close }" class="bg-white dark:bg-dark-800 h-full flex flex-col">
 
-            <div class="bg-gray-200 px-6 py-2 border-b border-gray-300 text-lg font-medium flex items-center justify-between">
+            <div class="bg-gray-200 dark:bg-dark-600 px-6 py-2 border-b border-gray-300 dark:border-dark-900 text-lg font-medium flex items-center justify-between">
                 {{ __('Publish') }}
                 <button
                     type="button"
diff --git a/resources/js/components/entries/PublishForm.vue b/resources/js/components/entries/PublishForm.vue
index 2604e65990..7ea0fe3ff1 100644
--- a/resources/js/components/entries/PublishForm.vue
+++ b/resources/js/components/entries/PublishForm.vue
@@ -124,7 +124,7 @@
                                 <div
                                     v-if="!revisionsEnabled"
                                     class="flex items-center justify-between px-4 py-2"
-                                    :class="{ 'border-t': showLivePreviewButton || showVisitUrlButton }"
+                                    :class="{ 'border-t dark:border-dark-900': showLivePreviewButton || showVisitUrlButton }"
                                 >
                                     <label v-text="__('Published')" class="publish-field-label font-medium" />
                                     <toggle-input :value="published" :read-only="!canManagePublishState" @input="setFieldValue('published', $event)" />
@@ -133,7 +133,7 @@
                                 <div
                                     v-if="revisionsEnabled && !isCreating"
                                     class="p-4"
-                                    :class="{ 'border-t': showLivePreviewButton || showVisitUrlButton }"
+                                    :class="{ 'border-t dark:border-dark-900': showLivePreviewButton || showVisitUrlButton }"
                                 >
                                     <label class="publish-field-label font-medium mb-2" v-text="__('Revisions')"/>
                                     <div class="mb-1 flex items-center" v-if="published">
@@ -161,14 +161,14 @@
                                         </button>
                                 </div>
 
-                                <div class="p-4 border-t" v-if="localizations.length > 1">
+                                <div class="p-4 border-t dark:border-dark-900" v-if="localizations.length > 1">
                                     <label class="publish-field-label font-medium mb-2" v-text="__('Sites')" />
                                     <div
                                         v-for="option in localizations"
                                         :key="option.handle"
                                         class="text-sm flex items-center -mx-4 px-4 py-2"
                                         :class="[
-                                            option.active ? 'bg-blue-100' : 'hover:bg-gray-200',
+                                            option.active ? 'bg-blue-100 dark:bg-dark-300' : 'hover:bg-gray-200 dark:hover:bg-dark-400',
                                             !canSave && !option.exists ? 'cursor-not-allowed' : 'cursor-pointer',
                                         ]"
                                         @click="localizationSelected(option)"
@@ -186,9 +186,9 @@
                                                 class="rtl:mr-2 ltr:ml-2"
                                                 v-if="localizing && localizing.handle === option.handle" />
                                         </div>
-                                        <div class="badge-sm bg-orange" v-if="option.origin" v-text="__('Origin')" />
-                                        <div class="badge-sm bg-blue" v-if="option.active" v-text="__('Active')" />
-                                        <div class="badge-sm bg-purple" v-if="option.root && !option.origin && !option.active" v-text="__('Root')" />
+                                        <div class="badge-sm bg-orange dark:bg-orange-dark" v-if="option.origin" v-text="__('Origin')" />
+                                        <div class="badge-sm bg-blue dark:bg-dark-blue-175" v-if="option.active" v-text="__('Active')" />
+                                        <div class="badge-sm bg-purple dark:bg-purple-dark" v-if="option.root && !option.origin && !option.active" v-text="__('Root')" />
                                     </div>
                                 </div>
                             </div>
diff --git a/resources/js/components/field-conditions/Builder.vue b/resources/js/components/field-conditions/Builder.vue
index 95e75da164..f637998f08 100644
--- a/resources/js/components/field-conditions/Builder.vue
+++ b/resources/js/components/field-conditions/Builder.vue
@@ -37,7 +37,7 @@
                 @removed="remove(index)"
             />
 
-            <div class="border-t pt-6" v-if="hasConditions && isStandard">
+            <div class="border-t dark:border-dark-900 pt-6" v-if="hasConditions && isStandard">
                 <button
                     v-text="__('Add Condition')"
                     @click="add"
diff --git a/resources/js/components/field-conditions/Condition.vue b/resources/js/components/field-conditions/Condition.vue
index 34460c111c..7e287dc90c 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 py-4 border-t">
+    <div class="flex flex-wrap items-center py-4 border-t dark:border-dark-900">
         <div v-if="index === 0" class="help-block" v-text="__('messages.field_conditions_field_instructions')" />
 
         <v-select
@@ -19,7 +19,7 @@
             <template slot="option" slot-scope="option">
                 <div class="flex items-center">
                     <span v-text="option.label" />
-                    <span v-text="option.value" class="font-mono text-2xs text-gray-500" :class="{ 'ml-2': option.label }" />
+                    <span v-text="option.value" class="font-mono text-2xs text-gray-500 dark:text-dark-150" :class="{ 'ml-2': option.label }" />
                 </div>
             </template>
         </v-select>
diff --git a/resources/js/components/fields/FieldtypeSelector.vue b/resources/js/components/fields/FieldtypeSelector.vue
index 98bbf713fe..a5e0fe694a 100644
--- a/resources/js/components/fields/FieldtypeSelector.vue
+++ b/resources/js/components/fields/FieldtypeSelector.vue
@@ -1,7 +1,7 @@
 <template>
 
-    <div class="h-full bg-gray-100 overflow-auto">
-        <div class="bg-gray-300 px-6 py-2 border-b text-lg font-medium flex items-center justify-between">
+    <div class="h-full bg-gray-100 dark:bg-dark-700 overflow-auto">
+        <div class="bg-gray-300 dark:bg-dark-500 px-6 py-2 border-b dark:border-dark-900 text-lg font-medium flex items-center justify-between">
             {{ __('Fieldtypes') }}
             <button type="button" class="btn-close" @click="close">×</button>
         </div>
@@ -10,23 +10,23 @@
             <loading-graphic />
         </div>
 
-        <div class="py-4 px-6 border-b bg-white flex items-center" v-if="fieldtypesLoaded">
-            <input type="text" class="input-text flex-1 bg-white text-sm w-full" autofocus v-model="search" ref="search" @keydown.esc="cancelSearch" :placeholder="`${__('Search')}...`" />
+        <div class="py-4 px-6 border-b dark:border-dark-900 bg-white dark:bg-dark-550 flex items-center" v-if="fieldtypesLoaded">
+            <input type="text" class="input-text flex-1 bg-white dark:bg-dark-700 text-sm w-full" autofocus v-model="search" ref="search" @keydown.esc="cancelSearch" :placeholder="`${__('Search')}...`" />
         </div>
 
         <div class="p-4" v-if="fieldtypesLoaded">
             <div v-for="group in displayedFieldtypes" :key="group.handle" v-show="group.fieldtypes.length > 0" class="mb-8">
                 <h2 v-if="group.title" v-text="group.title" class="px-2 mb-1" />
-                <p v-if="group.description" v-text="group.description" class="px-2 mb-2 text-gray-700 text-sm"/>
+                <p v-if="group.description" v-text="group.description" class="px-2 mb-2 text-gray-700 dark:text-dark-150 text-sm"/>
                 <div class="fieldtype-selector">
                     <div class="fieldtype-list">
                         <div class="p-2" v-for="fieldtype in group.fieldtypes" :key="fieldtype.handle">
-                            <button class="bg-white border border-gray-500 flex items-center group w-full rounded hover:border-gray-600 shadow-sm hover:shadow-md rtl:pl-3 ltr:pr-3"
+                            <button class="bg-white dark:bg-dark-550 border border-gray-500 dark:border-dark-900 flex items-center group w-full rounded hover:border-gray-600 dark:hover:border-dark-950 shadow-sm hover:shadow-md rtl:pl-3 ltr:pr-3"
                                 @click="select(fieldtype)">
-                                <div class="p-2 flex items-center rtl:border-l ltr:border-r border-gray-500 group-hover:border-gray-600 bg-gray-200 rtl:rounded-r ltr:rounded-l">
-                                    <svg-icon class="h-5 w-5 text-gray-800" :name="fieldtype.icon.startsWith('<svg') ? fieldtype.icon : `light/${fieldtype.icon}`" default="light/generic-field"></svg-icon>
+                                <div class="p-2 flex items-center rtl:border-l ltr:border-r border-gray-500 dark:border-dark-900 group-hover:border-gray-600 dark:group-hover:border-dark-950 bg-gray-200 dark:bg-dark-600 rtl:rounded-r ltr:rounded-l">
+                                    <svg-icon class="h-5 w-5 text-gray-800 dark:text-dark-150" :name="fieldtype.icon.startsWith('<svg') ? fieldtype.icon : `light/${fieldtype.icon}`" default="light/generic-field"></svg-icon>
                                 </div>
-                                <span class="rtl:pr-3 ltr:pl-3 text-gray-800 text-md group-hover:text-gray-900">{{ fieldtype.text }}</span>
+                                <span class="rtl:pr-3 ltr:pl-3 text-gray-800 dark:text-dark-150 text-md group-hover:text-gray-900 dark:group-hover:text-dark-100">{{ fieldtype.text }}</span>
                             </button>
                         </div>
                     </div>
diff --git a/resources/js/components/fields/ImportSettings.vue b/resources/js/components/fields/ImportSettings.vue
index f07a9e55f9..8d8fdb3619 100644
--- a/resources/js/components/fields/ImportSettings.vue
+++ b/resources/js/components/fields/ImportSettings.vue
@@ -1,16 +1,16 @@
 <template>
 
-    <div class="h-full overflow-auto p-8 bg-gray-300 h-full">
+    <div class="h-full overflow-auto p-8 bg-gray-300 h-full dark:bg-dark-800">
 
         <div class="flex items-center mb-6 -mt-2">
             <h1 class="flex-1">
-                <small class="block text-xs text-gray-700 font-medium leading-none mt-2 flex items-center">
-                    <svg-icon class="h-4 w-4 rtl:ml-2 ltr:mr-2 inline-block text-gray-700" name="paperclip"/>{{ __('Linked fieldset') }}
+                <small class="block text-xs text-gray-700 dark:text-dark-175 font-medium leading-none mt-2 flex items-center">
+                    <svg-icon class="h-4 w-4 rtl:ml-2 ltr:mr-2 inline-block text-gray-700 dark:text-dark-175" name="paperclip"/>{{ __('Linked fieldset') }}
                 </small>
                 {{ __('Fieldset') }}
             </h1>
             <button
-                class="text-gray-700 hover:text-gray-800 rtl:ml-6 ltr:mr-6 text-sm"
+                class="text-gray-700 dark:text-dark-175 hover:text-gray-800 dark:hover:text-dark-100 rtl:ml-6 ltr:mr-6 text-sm"
                 @click.prevent="close"
                 v-text="__('Cancel')"
             ></button>
diff --git a/resources/js/components/fields/Settings.vue b/resources/js/components/fields/Settings.vue
index 23d1dcc97a..05753b43cb 100644
--- a/resources/js/components/fields/Settings.vue
+++ b/resources/js/components/fields/Settings.vue
@@ -1,21 +1,21 @@
 <template>
 
-    <div class="h-full bg-gray-300 h-full overflow-scroll">
+    <div class="h-full bg-gray-300 h-full dark:bg-dark-800 overflow-scroll">
 
         <div v-if="loading" class="absolute inset-0 z-200 flex items-center justify-center text-center ">
             <loading-graphic />
         </div>
 
-        <header v-if="!loading" class="flex items-center sticky top-0 inset-x-0 bg-white shadow px-8 py-2 z-1 h-13">
+        <header v-if="!loading" class="flex items-center sticky top-0 inset-x-0 bg-white dark:bg-dark-550 shadow dark:shadow-dark px-8 py-2 z-1 h-13">
             <h1 class="flex-1 flex items-center text-xl">
                 {{ __(values.display) || __(config.display) || config.handle }}
-                <small class="badge-pill bg-gray-100 rtl:mr-4 ltr:ml-4 border text-xs text-gray-700 font-medium leading-none flex items-center">
-                    <svg-icon class="h-4 w-4 rtl:ml-2 ltr:mr-2 inline-block text-gray-700" :name="fieldtype.icon.startsWith('<svg') ? fieldtype.icon : `light/${fieldtype.icon}`"></svg-icon>
+                <small class="badge-pill bg-gray-100 dark:bg-dark-400 rtl:mr-4 ltr:ml-4 border dark:border-dark-200 text-xs text-gray-700 dark:text-dark-150 font-medium leading-none flex items-center">
+                    <svg-icon class="h-4 w-4 rtl:ml-2 ltr:mr-2 inline-block text-gray-700 dark:text-dark-150" :name="fieldtype.icon.startsWith('<svg') ? fieldtype.icon : `light/${fieldtype.icon}`"></svg-icon>
                     {{ fieldtype.title }}
                 </small>
             </h1>
             <button
-                class="text-gray-700 hover:text-gray-800 rtl:ml-6 ltr:mr-6 text-sm"
+                class="text-gray-700 dark:text-dark-150 hover:text-gray-800 dark:hover:text-dark-100 rtl:ml-6 ltr:mr-6 text-sm"
                 @click.prevent="close"
                 v-text="__('Cancel')"
             ></button>
diff --git a/resources/js/components/fieldsets/CreateForm.vue b/resources/js/components/fieldsets/CreateForm.vue
index 8147119979..6fde7b508c 100644
--- a/resources/js/components/fieldsets/CreateForm.vue
+++ b/resources/js/components/fieldsets/CreateForm.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="max-w-lg mt-4 mx-auto">
 
-        <div class="rounded p-6 lg:px-20 lg:py-10 shadow bg-white">
+        <div class="rounded p-6 lg:px-20 lg:py-10 shadow bg-white dark:bg-dark-600 dark:shadow-dark">
             <header class="text-center mb-16">
                 <h1 class="mb-6">{{ __('Create Fieldset') }}</h1>
                 <p class="text-gray" v-text="__('messages.fields_fieldsets_description')" />
diff --git a/resources/js/components/fieldtypes/CodeFieldtype.vue b/resources/js/components/fieldtypes/CodeFieldtype.vue
index 70aec4ab29..6c4c3f3883 100644
--- a/resources/js/components/fieldtypes/CodeFieldtype.vue
+++ b/resources/js/components/fieldtypes/CodeFieldtype.vue
@@ -8,7 +8,7 @@
                 <select-input v-if="config.mode_selectable" :options="modes" v-model="mode" :is-read-only="isReadOnly" class="text-xs leading-none" />
                 <div v-else v-text="modeLabel" class="text-xs font-mono text-gray-700"></div>
             </div>
-            <button @click="fullScreenMode = !fullScreenMode" class="btn-icon h-8 leading-none flex items-center justify-center text-gray-800" v-tooltip="__('Toggle Fullscreen Mode')">
+            <button @click="fullScreenMode = !fullScreenMode" class="btn-icon h-8 leading-none flex items-center justify-center text-gray-800 dark:text-dark-150" v-tooltip="__('Toggle Fullscreen Mode')">
                 <svg-icon name="expand-bold" class="h-3.5 w-3.5" v-show="!fullScreenMode" />
                 <svg-icon name="arrows-shrink" class="h-3.5 w-3.5" v-show="fullScreenMode" />
             </button>
diff --git a/resources/js/components/fieldtypes/ColorFieldtype.vue b/resources/js/components/fieldtypes/ColorFieldtype.vue
index 4ef9eaec4c..0bc20c3d67 100644
--- a/resources/js/components/fieldtypes/ColorFieldtype.vue
+++ b/resources/js/components/fieldtypes/ColorFieldtype.vue
@@ -11,7 +11,7 @@
                             <div class="inline-block cursor-pointer rounded m-0 p-[2px]">
                                 <div
                                     class="rounded-sm w-8 h-8"
-                                    :class="{ 'border': !value, 'cursor-not-allowed': isReadOnly }"
+                                    :class="{ 'border dark:border-dark-900': !value, 'cursor-not-allowed': isReadOnly }"
                                     :style="{ 'background-color': value }"
                                 />
                             </div>
diff --git a/resources/js/components/fieldtypes/GroupFieldtype.vue b/resources/js/components/fieldtypes/GroupFieldtype.vue
index 49822da737..aac305a0ba 100644
--- a/resources/js/components/fieldtypes/GroupFieldtype.vue
+++ b/resources/js/components/fieldtypes/GroupFieldtype.vue
@@ -33,11 +33,11 @@
                         >
                             <svg-icon
                                 name="expand-bold"
-                                class="h-3.5 px-0.5 text-gray-750 group-hover:text-black"
+                                class="h-3.5 px-0.5 text-gray-750 dark:text-dark-175 group-hover:text-black dark:group-hover:text-dark-100"
                             />
                         </button>
                     </div>
-                    <div class="mb-4 border rounded shadow-sm replicator-set">
+                    <div class="mb-4 border dark:border-dark-900 rounded shadow-sm replicator-set">
                         <div class="replicator-set-body publish-fields @container">
                             <set-field
                                 v-for="field in fields"
diff --git a/resources/js/components/fieldtypes/IconFieldtype.vue b/resources/js/components/fieldtypes/IconFieldtype.vue
index 42f9b80003..272d527601 100644
--- a/resources/js/components/fieldtypes/IconFieldtype.vue
+++ b/resources/js/components/fieldtypes/IconFieldtype.vue
@@ -22,14 +22,14 @@
                 <div class="flex items-center">
                     <svg-icon v-if="!option.html" :name="`${meta.set}/${option.label}`" class="w-5 h-5" />
                     <div v-if="option.html" v-html="option.html" class="w-5 h-5" />
-                    <span class="text-xs rtl:mr-4 ltr:ml-4 text-gray-800 truncate">{{ __(option.label) }}</span>
+                    <span class="text-xs rtl:mr-4 ltr:ml-4 text-gray-800 dark:text-dark-150 truncate">{{ __(option.label) }}</span>
                 </div>
             </template>
             <template slot="selected-option" slot-scope="option">
                 <div class="flex items-center">
                     <svg-icon v-if="!option.html" :name="`${meta.set}/${option.label}`" class="w-5 h-5 flex items-center" />
                     <div v-if="option.html" v-html="option.html" class="w-5 h-5" />
-                    <span class="text-xs rtl:mr-4 ltr:ml-4 text-gray-800 truncate">{{ __(option.label) }}</span>
+                    <span class="text-xs rtl:mr-4 ltr:ml-4 text-gray-800 dark:text-dark-150 truncate">{{ __(option.label) }}</span>
                 </div>
             </template>
         </v-select>
diff --git a/resources/js/components/fieldtypes/RangeFieldtype.vue b/resources/js/components/fieldtypes/RangeFieldtype.vue
index 6f3e885e3a..1f3265b21e 100644
--- a/resources/js/components/fieldtypes/RangeFieldtype.vue
+++ b/resources/js/components/fieldtypes/RangeFieldtype.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="range-fieldtype-wrapper bg-gray-200 rounded py-2 px-4 border">
+    <div class="range-fieldtype-wrapper bg-gray-200 dark:bg-dark-700 rounded py-2 px-4 border dark:border-dark-900">
         <div class="flex items-center">
             <div v-if="config.prepend" v-text="__(config.prepend)" class="rtl:ml-2 ltr:mr-2" />
             <input
@@ -15,7 +15,7 @@
                 :id="fieldId"
                 class="flex-1 min-w-0"
             />
-            <div class="rounded border px-2 py-1 mx-2 bg-gray-100">{{ val }}</div>
+            <div class="rounded border dark:border-dark-900 px-2 py-1 mx-2 bg-gray-100 dark:bg-dark-400">{{ val }}</div>
             <div v-if="config.append" v-text="__(config.append)" />
         </div>
     </div>
diff --git a/resources/js/components/fieldtypes/VideoFieldtype.vue b/resources/js/components/fieldtypes/VideoFieldtype.vue
index db9aa1c85a..8e44f544df 100644
--- a/resources/js/components/fieldtypes/VideoFieldtype.vue
+++ b/resources/js/components/fieldtypes/VideoFieldtype.vue
@@ -6,7 +6,7 @@
                 <input type="text"
                     v-model="data"
                     class="input-text flex-1"
-                    :class="{ 'bg-white': !isReadOnly }"
+                    :class="{ 'bg-white dark:bg-dark-600': !isReadOnly }"
                     :id="fieldId"
                     :readonly="isReadOnly"
                     :placeholder="__(config.placeholder) || 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'"
diff --git a/resources/js/components/fieldtypes/assets/AssetRow.vue b/resources/js/components/fieldtypes/assets/AssetRow.vue
index 73b2e8b2a8..5e8e2919a0 100644
--- a/resources/js/components/fieldtypes/assets/AssetRow.vue
+++ b/resources/js/components/fieldtypes/assets/AssetRow.vue
@@ -1,5 +1,5 @@
 <template>
-    <tr class="cursor-grab bg-white hover:bg-gray-100">
+    <tr class="cursor-grab bg-white dark:bg-dark-750 hover:bg-gray-100 dark:hover:bg-dark-700">
         <td class="flex items-center h-full">
             <div
                 v-if="canShowSvg"
@@ -32,7 +32,7 @@
         </td>
         <td class="w-24" v-if="showSetAlt">
             <button
-                class="asset-set-alt text-blue px-4 text-sm hover:text-black"
+                class="asset-set-alt text-blue dark:text-dark-blue-100 px-4 text-sm hover:text-black dark:hover:text-dark-100"
                 @click="editOrOpen"
                 v-if="needsAlt"
             >
@@ -41,7 +41,7 @@
         </td>
         <td class="p-0 w-8 rtl:text-left ltr:text-right align-middle" v-if="!readOnly">
             <button
-                class="flex items-center p-1 w-6 h-8 text-lg antialiased text-gray-600 hover:text-gray-900"
+                class="flex items-center p-1 w-6 h-8 text-lg antialiased text-gray-600 dark:text-dark-150 hover:text-gray-900 dark:hover:text-dark-100"
                 @click="remove"
                 :aria-label="__('Remove Asset')"
             >
diff --git a/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue b/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue
index 4f1f1a1d63..95180335dd 100644
--- a/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue
+++ b/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue
@@ -34,7 +34,7 @@
                         @click="openSelector"
                         @keyup.space.enter="openSelector"
                         tabindex="0">
-                        <svg-icon name="folder-image" class="w-4 h-4 text-gray-800"></svg-icon>
+                        <svg-icon name="folder-image" class="w-4 h-4 text-gray-800 dark:text-dark-150"></svg-icon>
                         {{ __('Browse') }}
                     </button>
 
diff --git a/resources/js/components/fieldtypes/bard/BardFieldtype.vue b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
index 738458edcc..0061ae967c 100644
--- a/resources/js/components/fieldtypes/bard/BardFieldtype.vue
+++ b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
@@ -77,7 +77,7 @@
                             v-tooltip="__('Add Set')"
                             @click="addSetButtonClicked"
                         >
-                            <svg-icon name="micro/plus" class="w-3 h-3 text-gray-800 group-hover:text-black" />
+                            <svg-icon name="micro/plus" class="w-3 h-3 text-gray-800 dark:text-dark-175 group-hover:text-black dark:group-hover:dark-text-100" />
                         </button>
                     </template>
                 </set-picker>
diff --git a/resources/js/components/fieldtypes/bard/Image.vue b/resources/js/components/fieldtypes/bard/Image.vue
index 2603d11b26..11920d74d7 100644
--- a/resources/js/components/fieldtypes/bard/Image.vue
+++ b/resources/js/components/fieldtypes/bard/Image.vue
@@ -12,7 +12,7 @@
                 <img :src="src" class="block mx-auto rounded-sm" />
             </div>
 
-            <div class="@container/toolbar flex items-center border-t justify-center py-2 px-2 text-2xs text-white text-center space-x-1 sm:space-x-3">
+            <div class="@container/toolbar flex items-center border-t dark:border-dark-900 justify-center py-2 px-2 text-2xs text-white dark:text-dark-150 text-center space-x-1 sm:space-x-3">
                 <button v-if="!src" @click="openSelector" type="button" class="flex btn btn-sm px-3 py-1.5">
                     <svg-icon name="folder-image" class="h-4" />
                     <span class="rtl:mr-2 ltr:ml-2 hidden @md/toolbar:inline-block">{{ __('Choose Image') }}</span>
@@ -35,7 +35,7 @@
                 </button>
             </div>
 
-            <div v-if="showingAltEdit" class="flex items-center p-2 border-t rounded-b" @paste.stop>
+            <div v-if="showingAltEdit" class="flex items-center p-2 border-t dark:border-dark-900 rounded-b" @paste.stop>
                 <text-input name="alt" :focus="showingAltEdit" v-model="alt" :placeholder="assetAlt" :prepend="__('Alt Text')" class="flex-1" />
             </div>
 
diff --git a/resources/js/components/fieldtypes/bard/LinkToolbar.vue b/resources/js/components/fieldtypes/bard/LinkToolbar.vue
index dcc61e3f88..bef8d709a4 100644
--- a/resources/js/components/fieldtypes/bard/LinkToolbar.vue
+++ b/resources/js/components/fieldtypes/bard/LinkToolbar.vue
@@ -2,11 +2,11 @@
 
     <div class="bard-link-toolbar">
         <div>
-            <div class="px-4 py-4 border-b">
+            <div class="px-4 py-4 border-b dark:border-dark-900">
 
                 <div class="flex">
 
-                    <div class="h-8 mb-4 bg-gray-100 text-gray-800 border rounded shadow-inner flex items-center rtl:ml-1 ltr:mr-1">
+                    <div class="h-8 mb-4 bg-gray-100 dark:bg-dark-600 text-gray-800 dark:text-dark-150 border dark:border-dark-200 rounded shadow-inner flex items-center rtl:ml-1 ltr:mr-1">
                         <select
                             class="input w-auto text-sm px-1"
                             v-model="linkType">
@@ -19,7 +19,7 @@
                         </select>
                     </div>
 
-                    <div class="h-8 mb-4 p-2 bg-gray-100 text-gray-800 w-full border rounded shadow-inner placeholder:text-gray-600 flex items-center">
+                    <div class="h-8 mb-4 p-2 bg-gray-100 dark:bg-dark-600 text-gray-800 dark:text-dark-150 w-full border dark:border-dark-200 rounded shadow-inner placeholder:text-gray-600 dark:placeholder:dark-text-dark-175 flex items-center">
 
                         <!-- URL input -->
                         <input
@@ -90,7 +90,7 @@
 
 
                 <!-- Title attribute -->
-                <div class="h-8 mb-4 p-2 bg-gray-100 text-gray-800 w-full border rounded shadow-inner placeholder:text-gray-600 flex items-center" >
+                <div class="h-8 mb-4 p-2 bg-gray-100 dark:bg-dark-600 text-gray-800 dark:text-dark-150 w-full border dark:border-dark-200 rounded shadow-inner placeholder:text-gray-600 dark:placeholder:dark-text-dark-175 flex items-center" >
                     <input
                         type="text"
                         ref="input"
@@ -101,7 +101,7 @@
                 </div>
 
                 <!-- Rel attribute -->
-                <div class="h-8 p-2 bg-gray-100 text-gray-800 w-full border rounded shadow-inner placeholder:text-gray-600 flex items-center" >
+                <div class="h-8 p-2 bg-gray-100 dark:bg-dark-600 text-gray-800 dark:text-dark-150 w-full border dark:border-dark-200 rounded shadow-inner placeholder:text-gray-600 dark:placeholder:dark-text-dark-175 flex items-center" >
                     <input
                         type="text"
                         ref="input"
@@ -111,14 +111,14 @@
                     />
                 </div>
 
-                <label for="target-blank" class="mt-4 flex items-center font-normal cursor-pointer text-gray-800 hover:text-black" v-if="canHaveTarget">
+                <label for="target-blank" class="mt-4 flex items-center font-normal cursor-pointer text-gray-800 dark:text-dark-150 hover:text-black dark:hover:text-dark-100" v-if="canHaveTarget">
                     <input class="checkbox rtl:ml-2 ltr:mr-2" type="checkbox" v-model="targetBlank" id="target-blank">
                     {{ __('Open in new window') }}
                 </label>
             </div>
 
-            <footer class="bg-gray-100 rounded-b-md flex items-center justify-end space-x-3 font-normal p-2">
-                <button @click="$emit('canceled')" class="text-xs text-gray-600 hover:text-gray-800">
+            <footer class="bg-gray-100 dark:bg-dark-575 rounded-b-md flex items-center justify-end space-x-3 font-normal p-2">
+                <button @click="$emit('canceled')" class="text-xs text-gray-600 dark:text-dark-175 hover:text-gray-800 dark:hover-text-dark-100">
                     {{ __('Cancel') }}
                 </button>
                 <button
diff --git a/resources/js/components/fieldtypes/bard/Set.vue b/resources/js/components/fieldtypes/bard/Set.vue
index 2ea7f1a153..83e6b3a487 100644
--- a/resources/js/components/fieldtypes/bard/Set.vue
+++ b/resources/js/components/fieldtypes/bard/Set.vue
@@ -1,8 +1,8 @@
 <template>
 
     <node-view-wrapper>
-        <div class="bard-set whitespace-normal my-6 rounded bg-white border shadow-md"
-            :class="{ 'border-blue-400': selected || withinSelection, 'has-error': hasError }"
+        <div class="bard-set whitespace-normal my-6 rounded bg-white dark:bg-dark-500 border dark:border-dark-900 shadow-md"
+            :class="{ 'border-blue-400 dark:border-dark-blue-100': selected || withinSelection, 'has-error': hasError }"
             contenteditable="false" @copy.stop @paste.stop @cut.stop
         >
             <div ref="content" hidden />
@@ -17,7 +17,7 @@
                         {{ display || config.handle }}
                     </label>
                     <div class="flex items-center" v-if="config.instructions && !collapsed">
-                        <svg-icon name="micro/circle-help" class="text-gray-700 hover:text-gray-800 h-3 w-3 text-xs" v-tooltip="{ content: $options.filters.markdown(__(config.instructions)), html:true }" />
+                        <svg-icon name="micro/circle-help" class="text-gray-700 dark:text-dark-175 hover:text-gray-800 dark:hover:text-dark-100 h-3 w-3 text-xs" v-tooltip="{ content: $options.filters.markdown(__(config.instructions)), html:true }" />
                     </div>
                     <div v-show="collapsed" class="flex-1 min-w-0 w-1 rtl:pl-8 ltr:pr-8">
                         <div
diff --git a/resources/js/components/fieldtypes/date/RangeInline.vue b/resources/js/components/fieldtypes/date/RangeInline.vue
index 5fd814de66..71db9749c4 100644
--- a/resources/js/components/fieldtypes/date/RangeInline.vue
+++ b/resources/js/components/fieldtypes/date/RangeInline.vue
@@ -4,6 +4,7 @@
         <v-date-picker
             v-bind="pickerBindings"
             @input="$emit('input', $event)"
+            :is-dark="darkMode"
         />
         <div class="absolute inset-0 z-1 cursor-not-allowed" v-if="isReadOnly" />
     </div>
@@ -19,6 +20,10 @@ export default {
 
     computed: {
 
+        darkMode() {
+            return this.$preferences.get('theme') === 'dark'
+        },
+
         pickerBindings() {
             return {
                 ...this.bindings,
diff --git a/resources/js/components/fieldtypes/date/RangePopover.vue b/resources/js/components/fieldtypes/date/RangePopover.vue
index b50ded3499..3384ec783e 100644
--- a/resources/js/components/fieldtypes/date/RangePopover.vue
+++ b/resources/js/components/fieldtypes/date/RangePopover.vue
@@ -8,6 +8,7 @@
                 v-bind="pickerBindings"
                 v-show="open"
                 @input="dateSelected"
+                :is-dark="darkMode"
             />
         </v-portal>
 
@@ -28,7 +29,7 @@
                         <div class="input-group-prepend flex items-center">
                             <svg-icon name="light/calendar" class="w-4 h-4" />
                         </div>
-                        <div class="input-text border border-gray-500 rtl:border-r-0 ltr:border-l-0 flex items-center rtl:pl-0 ltr:pr-0" :class="{ 'read-only': isReadOnly }">
+                        <div class="input-text border border-gray-500 dark:border-dark-400 rtl:border-r-0 ltr:border-l-0 flex items-center rtl:pl-0 ltr:pr-0" :class="{ 'read-only': isReadOnly }">
                             <input
                                 class="input-text-minimal p-0 bg-transparent leading-none"
                                 :readonly="isReadOnly"
@@ -63,7 +64,7 @@
                         <div class="input-group-prepend flex items-center">
                             <svg-icon name="light/calendar" class="w-4 h-4" />
                         </div>
-                        <div class="input-text border border-gray-500 rtl:border-r-0 ltr:border-l-0" :class="{ 'read-only': isReadOnly }">
+                        <div class="input-text border border-gray-500 dark:border-dark-400 rtl:border-r-0 ltr:border-l-0" :class="{ 'read-only': isReadOnly }">
                             <input
                                 class="input-text-minimal p-0 bg-transparent leading-none"
                                 :readonly="isReadOnly"
@@ -106,6 +107,10 @@ export default {
 
     computed: {
 
+        darkMode() {
+            return this.$preferences.get('theme') === 'dark'
+        },
+
         pickerBindings() {
             return {
                 ...this.bindings,
diff --git a/resources/js/components/fieldtypes/date/SingleInline.vue b/resources/js/components/fieldtypes/date/SingleInline.vue
index e2c5aeb509..4d33e3ca28 100644
--- a/resources/js/components/fieldtypes/date/SingleInline.vue
+++ b/resources/js/components/fieldtypes/date/SingleInline.vue
@@ -4,6 +4,7 @@
         <v-date-picker
             v-bind="pickerBindings"
             @input="$emit('input', $event)"
+            :is-dark="darkMode"
         />
         <div class="absolute inset-0 z-1 cursor-not-allowed" v-if="isReadOnly" />
     </div>
@@ -19,6 +20,10 @@ export default {
 
     computed: {
 
+        darkMode() {
+            return this.$preferences.get('theme') === 'dark'
+        },
+
         pickerBindings() {
             return {
                 ...this.bindings,
diff --git a/resources/js/components/fieldtypes/date/SinglePopover.vue b/resources/js/components/fieldtypes/date/SinglePopover.vue
index 58a020971e..daf1001d8c 100644
--- a/resources/js/components/fieldtypes/date/SinglePopover.vue
+++ b/resources/js/components/fieldtypes/date/SinglePopover.vue
@@ -8,6 +8,7 @@
                 v-bind="bindings"
                 v-show="open"
                 @input="dateSelected"
+                :is-dark="darkMode"
             />
         </v-portal>
 
@@ -23,7 +24,7 @@
                     <div class="input-group-prepend flex items-center">
                         <svg-icon name="light/calendar" class="w-4 h-4" />
                     </div>
-                    <div class="input-text border border-gray-500 rtl:border-r-0 ltr:border-l-0 flex items-center rtl:pl-0 ltr:pr-0" :class="{ 'read-only': isReadOnly }">
+                    <div class="input-text border border-gray-500 dark:border-dark-200 rtl:border-r-0 ltr:border-l-0 flex items-center rtl:pl-0 ltr:pr-0" :class="{ 'read-only': isReadOnly }">
                         <input
                             class="input-text-minimal p-0 bg-transparent leading-none"
                             :readonly="isReadOnly"
@@ -63,6 +64,10 @@ export default {
 
     computed: {
 
+        darkMode() {
+            return this.$preferences.get('theme') === 'dark'
+        },
+
         inputEvents() {
             return {
                 // Handle changing the date when typing.
diff --git a/resources/js/components/fieldtypes/grid/Grid.vue b/resources/js/components/fieldtypes/grid/Grid.vue
index 85b2744ec9..a806019446 100644
--- a/resources/js/components/fieldtypes/grid/Grid.vue
+++ b/resources/js/components/fieldtypes/grid/Grid.vue
@@ -3,10 +3,10 @@
 <portal name="grid-fullscreen" :disabled="!fullScreenMode" :provide="provide">
 
     <element-container @resized="containerWidth = $event.width">
-    <div class="grid-fieldtype-container" :class="{'grid-fullscreen bg-white': fullScreenMode }">
+    <div class="grid-fieldtype-container" :class="{'grid-fullscreen bg-white dark:bg-dark-600': fullScreenMode }">
 
         <template v-if="config.fullscreen || !config.hide_display">
-            <header class="bg-gray-200 border-b py-3 rtl:pr-3 ltr:pl-3 flex items-center justify-between relative" v-if="fullScreenMode">
+            <header class="bg-gray-200 dark:bg-dark-550 border-b dark:border-dark-900 py-3 rtl:pr-3 ltr:pl-3 flex items-center justify-between relative" v-if="fullScreenMode">
                 <h2 v-text="__(config.display)" />
                 <button class="btn-close absolute top-2 rtl:left-5 ltr:right-5" @click="fullScreenMode = false" :aria-label="__('Exit Fullscreen Mode')">&times;</button>
             </header>
diff --git a/resources/js/components/fieldtypes/grid/Stacked.vue b/resources/js/components/fieldtypes/grid/Stacked.vue
index f523c10a95..63d59d45c9 100644
--- a/resources/js/components/fieldtypes/grid/Stacked.vue
+++ b/resources/js/components/fieldtypes/grid/Stacked.vue
@@ -2,8 +2,8 @@
 <div>
     <div class="flex justify-end absolute top-3 rtl:left-3 ltr:right-3 @md:rtl:left-6 @md:ltr:right-6" v-if="! grid.fullScreenMode">
         <button v-if="allowFullscreen" @click="grid.toggleFullScreen" class="btn btn-icon flex items-center" v-tooltip="__('Toggle Fullscreen Mode')">
-            <svg-icon name="expand-bold" class="h-3.5 px-0.5 text-gray-750" v-show="! grid.fullScreenMode" />
-            <svg-icon name="shrink-all" class="h-3.5 px-0.5 text-gray-750" v-show="grid.fullScreenMode" />
+            <svg-icon name="expand-bold" class="h-3.5 px-0.5 text-gray-750 dark:text-dark-175" v-show="! grid.fullScreenMode" />
+            <svg-icon name="shrink-all" class="h-3.5 px-0.5 text-gray-750 dark:text-dark-175" v-show="grid.fullScreenMode" />
         </button>
     </div>
 
diff --git a/resources/js/components/fieldtypes/grid/StackedRow.vue b/resources/js/components/fieldtypes/grid/StackedRow.vue
index d549764c92..8861972e7e 100644
--- a/resources/js/components/fieldtypes/grid/StackedRow.vue
+++ b/resources/js/components/fieldtypes/grid/StackedRow.vue
@@ -1,7 +1,7 @@
 <template>
 
     <div
-        class="replicator-set shadow-sm mb-4 rounded border"
+        class="replicator-set shadow-sm mb-4 rounded border dark:border-dark-900"
         :class="[sortableItemClass, { 'opacity-50': isExcessive }]"
     >
 
diff --git a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
index c3a834279a..b9ea498ab0 100644
--- a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
+++ b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
@@ -97,7 +97,7 @@
         </stack>
 
         <stack name="markdownCheatSheet" v-if="showCheatsheet" @closed="showCheatsheet = false">
-            <div class="h-full overflow-auto p-6 bg-white relative">
+            <div class="h-full overflow-auto p-6 bg-white dark:bg-dark-600 relative">
                 <button class="btn-close absolute top-0 rtl:left-0 ltr:right-0 mt-4 rtl:ml-8 ltr:mr-8" @click="showCheatsheet = false" :aria-label="__('Close Markdown Cheatsheet')">&times;</button>
                 <div class="max-w-md mx-auto my-8 prose">
                     <h2 v-text="__('Markdown Cheatsheet')"></h2>
diff --git a/resources/js/components/fieldtypes/replicator/AddSetButton.vue b/resources/js/components/fieldtypes/replicator/AddSetButton.vue
index d3258f60ea..67192b5b02 100644
--- a/resources/js/components/fieldtypes/replicator/AddSetButton.vue
+++ b/resources/js/components/fieldtypes/replicator/AddSetButton.vue
@@ -7,8 +7,8 @@
                     <button v-if="enabled" class="btn-round flex items-center justify-center" :class="{ 'h-5 w-5': ! last }" @click="addSetButtonClicked">
                         <svg-icon name="micro/plus"
                             :class="{
-                                'w-3 h-3 text-gray-800 group-hover:text-black': last,
-                                'w-2 h-2 text-gray-700 group-hover:text-black transition duration-150': !last
+                                'w-3 h-3 text-gray-800 dark:text-dark-175 group-hover:text-black dark:group-hover:dark-text-100': last,
+                                'w-2 h-2 text-gray-700 dark:text-dark-200 group-hover:text-black dark:group-hover:dark-text-100 transition duration-150': !last
                             }" />
                     </button>
                 </div>
diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index 3f7d4cb216..96ec77513b 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -6,36 +6,36 @@
      once it has been portaled out. -->
 <div :class="{ 'publish-fields': fullScreenMode }">
 <div :class="{ wrapperClasses: fullScreenMode }">
-<div class="replicator-fieldtype-container" :class="{'replicator-fullscreen bg-gray-200': fullScreenMode }">
+<div class="replicator-fieldtype-container" :class="{'replicator-fullscreen bg-gray-200 dark:bg-dark-700': fullScreenMode }">
 
-    <header class="bg-white fixed top-0 inset-x-0 border-b p-3 rtl:pr-4 ltr:pl-4 flex items-center justify-between shadow z-max" v-if="fullScreenMode">
+    <header class="bg-white dark:bg-dark-550 fixed top-0 inset-x-0 border-b dark:border-dark-900 p-3 rtl:pr-4 ltr:pl-4 flex items-center justify-between shadow z-max" v-if="fullScreenMode">
         <h2 v-text="__(config.display)" class="flex-1" />
             <div class="flex items-center">
                 <div class="btn-group">
                     <button @click="expandAll" class="btn btn-icon flex items-center" v-tooltip="__('Expand Sets')" v-if="config.collapse !== 'accordion' && value.length > 0">
-                        <svg-icon name="arrows-horizontal-expand" class="h-3.5 px-1 text-gray-750" />
+                        <svg-icon name="arrows-horizontal-expand" class="h-3.5 px-1 text-gray-750 dark:text-dark-175" />
                     </button>
                     <button @click="collapseAll" class="btn btn-icon flex items-center" v-tooltip="__('Collapse Sets')" v-if="config.collapse !== 'accordion' && value.length > 0">
-                        <svg-icon name="arrows-horizontal-collapse" class="h-3.5 px-1 text-gray-750" />
+                        <svg-icon name="arrows-horizontal-collapse" class="h-3.5 px-1 text-gray-750 dark:text-dark-175" />
                     </button>
                 </div>
                 <button class="btn-close rtl:mr-2 ltr:ml-2" @click="fullScreenMode = false" :aria-label="__('Exit Fullscreen Mode')">&times;</button>
             </div>
     </header>
 
-    <section :class="{'mt-12 p-4 bg-gray-200': fullScreenMode}">
+    <section :class="{'mt-12 p-4 bg-gray-200 dark:bg-dark-700': fullScreenMode}">
 
         <div class="flex justify-end" :class="{'absolute top-3 rtl:left-3 ltr:right-3 @md:right-6': !config.hide_display}" v-if="! fullScreenMode">
             <div class="btn-group">
                 <button @click="expandAll" class="btn btn-icon flex items-center" v-tooltip="__('Expand Sets')" v-if="config.collapse !== 'accordion' && value.length > 0">
-                    <svg-icon name="arrows-horizontal-expand" class="h-3.5 px-0.5 text-gray-750" />
+                    <svg-icon name="arrows-horizontal-expand" class="h-3.5 px-0.5 text-gray-750 dark:text-dark-175" />
                 </button>
                 <button @click="collapseAll" class="btn btn-icon flex items-center" v-tooltip="__('Collapse Sets')" v-if="config.collapse !== 'accordion' && value.length > 0">
-                    <svg-icon name="arrows-horizontal-collapse" class="h-3.5 px-0.5 text-gray-750" />
+                    <svg-icon name="arrows-horizontal-collapse" class="h-3.5 px-0.5 text-gray-750 dark:text-dark-175" />
                 </button>
                 <button v-if="config.fullscreen" @click="fullScreenMode = !fullScreenMode" class="btn btn-icon flex items-center" v-tooltip="__('Toggle Fullscreen Mode')">
-                    <svg-icon name="expand-bold" class="h-3.5 px-0.5 text-gray-750" v-show="! fullScreenMode" />
-                    <svg-icon name="shrink-all" class="h-3.5 px-0.5 text-gray-750" v-show="fullScreenMode" />
+                    <svg-icon name="expand-bold" class="h-3.5 px-0.5 text-gray-750 dark:text-dark-175" v-show="! fullScreenMode" />
+                    <svg-icon name="shrink-all" class="h-3.5 px-0.5 text-gray-750 dark:text-dark-175" v-show="fullScreenMode" />
                 </button>
             </div>
         </div>
diff --git a/resources/js/components/forms/CreateForm.vue b/resources/js/components/forms/CreateForm.vue
index febafa855b..ba11918ab2 100644
--- a/resources/js/components/forms/CreateForm.vue
+++ b/resources/js/components/forms/CreateForm.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="max-w-lg mt-4 mx-auto">
 
-        <div class="rounded p-6 lg:px-20 lg:py-10 shadow bg-white">
+        <div class="rounded p-6 lg:px-20 lg:py-10 shadow bg-white dark:bg-dark-600 dark:shadow-dark">
             <header class="text-center mb-16">
                 <h1 class="mb-6">{{ __('Create Form') }}</h1>
                 <p class="text-gray" v-text="__('messages.form_configure_intro')" />
diff --git a/resources/js/components/forms/SubmissionListing.vue b/resources/js/components/forms/SubmissionListing.vue
index f23be286bb..8c96efb55b 100644
--- a/resources/js/components/forms/SubmissionListing.vue
+++ b/resources/js/components/forms/SubmissionListing.vue
@@ -16,7 +16,7 @@
         >
             <div slot-scope="{ hasSelections }">
                 <div class="card overflow-scroll p-0 relative">
-                    <div class="flex flex-wrap items-center justify-between px-2 pb-2 text-sm border-b">
+                    <div class="flex flex-wrap items-center justify-between px-2 pb-2 text-sm border-b dark:border-dark-900">
                         <data-list-filter-presets
                             ref="presets"
                             :active-preset="activePreset"
diff --git a/resources/js/components/globals/Create.vue b/resources/js/components/globals/Create.vue
index c88f8399dd..34439b39a1 100644
--- a/resources/js/components/globals/Create.vue
+++ b/resources/js/components/globals/Create.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="max-w-lg mt-4 mx-auto">
 
-        <div class="rounded p-6 lg:px-20 lg:py-10 shadow bg-white">
+        <div class="rounded p-6 lg:px-20 lg:py-10 shadow bg-white dark:bg-dark-600 dark:shadow-dark">
             <header class="text-center mb-16">
                 <h1 class="mb-6">{{ __('Create Global Set') }}</h1>
                 <p class="text-gray" v-text="__('messages.globals_configure_intro')" />
diff --git a/resources/js/components/globals/EditForm.vue b/resources/js/components/globals/EditForm.vue
index 20c34046bd..2ee8499de2 100644
--- a/resources/js/components/globals/EditForm.vue
+++ b/resources/js/components/globals/EditForm.vue
@@ -17,7 +17,7 @@
                 @meta-updated="setFieldMeta"
                 :enable-sidebar="false"/>
 
-            <div class="py-4 border-t flex justify-between">
+            <div class="py-4 border-t dark:border-dark-950 flex justify-between">
                 <a :href="url" class="btn" v-text="__('Cancel') "/>
                 <button type="submit" class="btn-primary" @click="submit">{{ __('Save') }}</button>
             </div>
diff --git a/resources/js/components/globals/PublishForm.vue b/resources/js/components/globals/PublishForm.vue
index dce795d73c..848d787343 100644
--- a/resources/js/components/globals/PublishForm.vue
+++ b/resources/js/components/globals/PublishForm.vue
@@ -7,7 +7,7 @@
             <div class="flex items-center">
                 <h1 class="flex-1" v-text="__(title)" />
 
-                <div class="pt-px text-2xs text-gray-600 rtl:mr-4 ltr:ml-4 flex" v-if="! canEdit">
+                <div class="pt-px text-2xs text-gray-600 dark:text-dark-200 rtl:mr-4 ltr:ml-4 flex" v-if="! canEdit">
                     <svg-icon name="light/lock" class="w-4 rtl:ml-1 ltr:mr-1 -mt-1" /> {{ __('Read Only') }}
                 </div>
 
@@ -36,7 +36,7 @@
             </div>
         </header>
 
-        <div v-if="fieldset.empty" class="text-center mt-10 border-2 border-dashed rounded-lg px-8 py-32">
+        <div v-if="fieldset.empty" class="text-center mt-10 border-2 dark:border-dark-300 border-dashed rounded-lg px-8 py-32">
             <div class="max-w-md mx-auto opacity-50">
                 <h1 class="my-6" v-text="__('This Global Set has no fields.')" />
                 <p v-text="__('messages.global_set_no_fields_description')" />
diff --git a/resources/js/components/inputs/relationship/CreateButton.vue b/resources/js/components/inputs/relationship/CreateButton.vue
index e3588e69fb..4a02f86be7 100644
--- a/resources/js/components/inputs/relationship/CreateButton.vue
+++ b/resources/js/components/inputs/relationship/CreateButton.vue
@@ -4,7 +4,7 @@
         <dropdown-list :disabled="creatables.length === 1">
             <template #trigger>
                 <button
-                    class="text-button text-blue hover:text-gray-800 rtl:ml-6 ltr:mr-6 flex items-center outline-none"
+                    class="text-button text-blue dark:text-dark-blue-100 hover:text-gray-800 dark:hover:text-dark-100 rtl:ml-6 ltr:mr-6 flex items-center outline-none"
                     @click="create"
                 >
                     <svg-icon name="light/content-writing" class="rtl:ml-1 ltr:mr-1 h-4 w-4 flex items-center"></svg-icon>
diff --git a/resources/js/components/inputs/relationship/InlinePublishForm.vue b/resources/js/components/inputs/relationship/InlinePublishForm.vue
index aa1b1852d8..d4362b6422 100644
--- a/resources/js/components/inputs/relationship/InlinePublishForm.vue
+++ b/resources/js/components/inputs/relationship/InlinePublishForm.vue
@@ -5,7 +5,7 @@
         :before-close="shouldClose"
         @closed="close"
     >
-    <div class="h-full overflow-scroll overflow-x-auto p-6 bg-gray-300">
+    <div class="h-full overflow-scroll overflow-x-auto p-6 bg-gray-300 dark:bg-dark-800">
 
         <div v-if="loading" class="absolute inset-0 z-200 flex items-center justify-center text-center">
             <loading-graphic />
diff --git a/resources/js/components/inputs/relationship/RelationshipInput.vue b/resources/js/components/inputs/relationship/RelationshipInput.vue
index 22366d1bd2..547002b328 100644
--- a/resources/js/components/inputs/relationship/RelationshipInput.vue
+++ b/resources/js/components/inputs/relationship/RelationshipInput.vue
@@ -54,7 +54,7 @@
                             @created="itemCreated"
                         />
                     </div>
-                    <button ref="existing" class="text-blue hover:text-gray-800 flex items-center mb-2 outline-none" @click.prevent="isSelecting = true">
+                    <button ref="existing" class="text-blue dark:text-dark-blue-100 hover:text-gray-800 dark:hover:text-dark-100 flex items-center mb-2 outline-none" @click.prevent="isSelecting = true">
                         <svg-icon name="light/hyperlink" class="rtl:ml-1 ltr:mr-1 h-4 w-4 flex items-center"></svg-icon>
                         <span class="hidden @sm:block" v-text="__('Link Existing Item')" />
                         <span class="@sm:hidden" v-text="__('Link')" />
diff --git a/resources/js/components/inputs/relationship/Selector.vue b/resources/js/components/inputs/relationship/Selector.vue
index 1ce65f3d3c..c4903464af 100644
--- a/resources/js/components/inputs/relationship/Selector.vue
+++ b/resources/js/components/inputs/relationship/Selector.vue
@@ -1,6 +1,6 @@
 <template>
 
-    <div class="h-full bg-white">
+    <div class="h-full bg-white dark:bg-dark-800">
 
         <div v-if="initializing" class="absolute inset-0 z-200 flex items-center justify-center text-center">
             <loading-graphic />
@@ -19,7 +19,7 @@
             @selections-updated="selectionsUpdated"
         >
             <div slot-scope="{}" class="flex flex-col h-full">
-                <div class="bg-white z-1">
+                <div class="bg-white dark:bg-dark-800 z-1">
                     <div class="py-2 px-4 flex items-center justify-between">
                         <data-list-search class="h-8 min-w-[240px] w-full" ref="search" v-model="searchQuery" :placeholder="searchPlaceholder" />
                         <div class="btn-group rtl:mr-4 ltr:ml-4" v-if="canUseTree">
@@ -78,8 +78,8 @@
                             :scroll-to-top="false"
                             @page-selected="setPage" />
 
-                        <div class="p-4 border-t flex items-center justify-between bg-gray-200">
-                            <div class="text-sm text-gray-700"
+                        <div class="p-4 border-t dark:border-dark-200 flex items-center justify-between bg-gray-200 dark:bg-dark-500">
+                            <div class="text-sm text-gray-700 dark:text-dark-150"
                                 v-text="hasMaxSelections
                                     ? __n(':count/:max selected', selections, { max: maxSelections })
                                     : __n(':count item selected|:count items selected', selections)" />
@@ -109,7 +109,7 @@
 
         <template v-if="!initializing && canUseTree && view === 'tree'">
             <div class="flex flex-col h-full">
-                <div class="bg-white bg-gray-200 shadow px-4 py-2 z-1 h-13 flex items-center justify-end">
+                <div class="bg-white bg-gray-200 dark:bg-dark-550 shadow px-4 py-2 z-1 h-13 flex items-center justify-end">
                     <h1 class="flex-1 flex items-center text-xl">{{ tree.title }}</h1>
                     <div class="btn-group rtl:mr-4 ltr:ml-4">
                         <button class="btn flex items-center px-4" @click="view = 'tree'" :class="{'active': view === 'tree'}" v-tooltip="__('Tree')">
@@ -123,7 +123,7 @@
 
                 <div class="flex-1 flex flex-col min-h-0">
                     <div class="flex flex-col h-full justify-start">
-                        <div class="flex-1 overflow-scroll bg-gray-200 p-4">
+                        <div class="flex-1 overflow-scroll bg-gray-200 dark:bg-dark-800 p-4">
                             <page-tree
                                 ref="tree"
                                 :pages-url="tree.url"
@@ -152,14 +152,14 @@
 
                                 <template #branch-icon="{ branch }">
                                     <svg-icon v-if="isRedirectBranch(branch)"
-                                        class="inline-block w-4 h-4 text-gray-500"
+                                        class="inline-block w-4 h-4 text-gray-500 dark:text-dark-175"
                                         name="light/external-link"
                                         v-tooltip="__('Redirect')" />
                                 </template>
                             </page-tree>
                         </div>
 
-                        <div class="p-4 border-t flex items-center justify-between bg-gray-200">
+                        <div class="p-4 border-t dark:border-dark-200 flex items-center justify-between bg-gray-200 dark:bg-dark-500">
                             <div class="text-sm text-gray-700"
                                 v-text="hasMaxSelections
                                     ? __n(':count/:max selected', selections, { max: maxSelections })
diff --git a/resources/js/components/modals/ConfirmationModal.vue b/resources/js/components/modals/ConfirmationModal.vue
index 68043ab7a4..faedba3f6a 100644
--- a/resources/js/components/modals/ConfirmationModal.vue
+++ b/resources/js/components/modals/ConfirmationModal.vue
@@ -1,10 +1,10 @@
 <template>
     <modal name="confirmation-modal" @opened="$emit('opened')">
         <div class="confirmation-modal flex flex-col h-full">
-            <header v-if="title" class="text-lg font-semibold px-5 py-3 bg-gray-200 rounded-t-lg flex items-center justify-between border-b">
+            <header v-if="title" class="text-lg font-semibold px-5 py-3 bg-gray-200 dark:bg-dark-550 rounded-t-lg flex items-center justify-between border-b dark:border-dark-900">
                 {{ __(title) }}
             </header>
-            <div class="flex-1 px-5 py-6 text-gray">
+            <div class="flex-1 px-5 py-6 text-gray dark:text-dark-150">
                 <slot name="body">
                     <p v-if="bodyText" v-text="bodyText" />
                     <slot v-else>
@@ -12,8 +12,8 @@
                     </slot>
                 </slot>
             </div>
-            <div class="px-5 py-3 bg-gray-200 rounded-b-lg border-t flex items-center justify-end text-sm">
-                <button class="text-gray hover:text-gray-900" @click="$emit('cancel')" v-text="__(cancelText)" v-if="cancellable" />
+            <div class="px-5 py-3 bg-gray-200 dark:bg-dark-550 rounded-b-lg border-t dark:border-dark-900 flex items-center justify-end text-sm">
+                <button class="text-gray dark:text-dark-150 hover:text-gray-900 dark:hover:text-dark-100" @click="$emit('cancel')" v-text="__(cancelText)" v-if="cancellable" />
                 <button class="rtl:mr-4 ltr:ml-4" :class="buttonClass" :disabled="disabled" v-text="__(buttonText)" @click="$emit('confirm')" />
             </div>
         </div>
diff --git a/resources/js/components/nav/Branch.vue b/resources/js/components/nav/Branch.vue
index c47c36683c..d988073e51 100644
--- a/resources/js/components/nav/Branch.vue
+++ b/resources/js/components/nav/Branch.vue
@@ -16,7 +16,7 @@
 
                 <button
                     v-if="hasChildren && !isSection"
-                    class="p-2 text-gray-600 hover:text-gray-700 transition duration-100 outline-none flex"
+                    class="p-2 text-gray-600 dark:text-dark-200 hover:text-gray-700 dark:hover:dark-text-150 transition duration-100 outline-none flex"
                     :class="{ '-rotate-90': !isOpen }"
                     @click="$emit('toggle-open')"
                 >
diff --git a/resources/js/components/nav/ItemEditor.vue b/resources/js/components/nav/ItemEditor.vue
index 83007ec544..8da7c77dad 100644
--- a/resources/js/components/nav/ItemEditor.vue
+++ b/resources/js/components/nav/ItemEditor.vue
@@ -1,9 +1,9 @@
 <template>
 
     <stack narrow name="nav-item-editor" @closed="$emit('closed')">
-        <div slot-scope="{ close }" class="bg-white h-full flex flex-col">
+        <div slot-scope="{ close }" class="bg-white dark:bg-dark-800 h-full flex flex-col">
 
-            <div class="bg-gray-200 px-6 py-2 border-b border-gray-300 text-lg font-medium flex items-center justify-between">
+            <div class="bg-gray-200 dark:bg-dark-600 px-6 py-2 border-b border-gray-300 dark:border-dark-900 text-lg font-medium flex items-center justify-between">
                 {{ creating ? __('Add Nav Item') : __('Edit Nav Item') }}
                 <button
                     type="button"
diff --git a/resources/js/components/nav/SectionEditor.vue b/resources/js/components/nav/SectionEditor.vue
index f05e18818b..48281f651a 100644
--- a/resources/js/components/nav/SectionEditor.vue
+++ b/resources/js/components/nav/SectionEditor.vue
@@ -1,9 +1,9 @@
 <template>
 
     <stack narrow name="nav-item-editor" @closed="$emit('closed')">
-        <div slot-scope="{ close }" class="bg-white h-full flex flex-col">
+        <div slot-scope="{ close }" class="bg-white dark:bg-dark-800 h-full flex flex-col">
 
-            <div class="bg-gray-200 px-6 py-2 border-b border-gray-300 text-lg font-medium flex items-center justify-between">
+            <div class="bg-gray-200 dark:bg-dark-600 px-6 py-2 border-b border-gray-300 dark:border-dark-900 text-lg font-medium flex items-center justify-between">
                 {{ creating ? __('Add Section') : __('Edit Section') }}
                 <button
                     type="button"
diff --git a/resources/js/components/navigation/CreateForm.vue b/resources/js/components/navigation/CreateForm.vue
index d62a46f103..067bd68f44 100644
--- a/resources/js/components/navigation/CreateForm.vue
+++ b/resources/js/components/navigation/CreateForm.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="max-w-lg mt-4 mx-auto">
 
-        <div class="rounded p-6 lg:px-20 lg:py-10 shadow bg-white">
+        <div class="rounded p-6 lg:px-20 lg:py-10 shadow bg-white dark:bg-dark-600 dark:shadow-dark">
             <header class="text-center mb-16">
                 <h1 class="mb-6">{{ __('Create Navigation') }}</h1>
                 <p class="text-gray" v-text="__('messages.navigation_configure_intro')" />
diff --git a/resources/js/components/navigation/EditForm.vue b/resources/js/components/navigation/EditForm.vue
index c6d1761b3c..b788a7ae4c 100644
--- a/resources/js/components/navigation/EditForm.vue
+++ b/resources/js/components/navigation/EditForm.vue
@@ -17,7 +17,7 @@
                 @meta-updated="setFieldMeta"
                 :enable-sidebar="false" />
 
-            <div class="py-4 border-t flex justify-between">
+            <div class="py-4 border-t dark:border-dark-950 flex justify-between">
                 <a :href="url" class="btn" v-text="__('Cancel') "/>
                 <button type="submit" class="btn-primary" @click="submit">{{ __('Save') }}</button>
             </div>
diff --git a/resources/js/components/navigation/View.vue b/resources/js/components/navigation/View.vue
index 1ca5979590..a67ac5b811 100644
--- a/resources/js/components/navigation/View.vue
+++ b/resources/js/components/navigation/View.vue
@@ -65,31 +65,31 @@
             <template #empty>
                 <div class="card p-4 content w-full">
                     <div class="flex flex-wrap w-full">
-                        <a :href="editUrl" class="w-full lg:w-1/2 p-4 flex items-start hover:bg-gray-200 rounded-md group">
-                            <svg-icon name="light/hammer-wrench" class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800" />
+                        <a :href="editUrl" class="w-full lg:w-1/2 p-4 flex items-start hover:bg-gray-200 dark:hover:bg-dark-550 rounded-md group">
+                            <svg-icon name="light/hammer-wrench" class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800 dark:text-dark-175" />
                             <div class="flex-1 mb-4 md:mb-0 rtl:md:ml-6 ltr:md:mr-6">
-                                <h3 class="mb-2 text-blue">{{ __('Configure Navigation') }} <span v-html="direction === 'ltr' ? '&rarr;' : '&larr;'"></span></h3>
+                                <h3 class="mb-2 text-blue dark:text-blue-600">{{ __('Configure Navigation') }} <span v-html="direction === 'ltr' ? '&rarr;' : '&larr;'"></span></h3>
                                 <p>{{ __('messages.navigation_configure_settings_intro') }}</p>
                             </div>
                         </a>
-                        <a @click="linkPage()" class="w-full lg:w-1/2 p-4 flex items-start hover:bg-gray-200 rounded-md group">
-                            <svg-icon name="paperclip" class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800" />
+                        <a @click="linkPage()" class="w-full lg:w-1/2 p-4 flex items-start hover:bg-gray-200 dark:hover:bg-dark-550 rounded-md group">
+                            <svg-icon name="paperclip" class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800 dark:text-dark-175" />
                             <div class="flex-1 mb-4 md:mb-0 rtl:md:ml-6 ltr:md:mr-6">
-                                <h3 class="mb-2 text-blue">{{ __('Link to URL') }} <span v-html="direction === 'ltr' ? '&rarr;' : '&larr;'"></span></h3>
+                                <h3 class="mb-2 text-blue dark:text-blue-600">{{ __('Link to URL') }} <span v-html="direction === 'ltr' ? '&rarr;' : '&larr;'"></span></h3>
                                  <p>{{ __('messages.navigation_link_to_url_instructions') }}</p>
                             </div>
                         </a>
-                        <a @click="linkEntries()" v-if="hasCollections" class="w-full lg:w-1/2 p-4 flex items-start hover:bg-gray-200 rounded-md group">
-                            <svg-icon name="light/hierarchy-files" class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800" />
+                        <a @click="linkEntries()" v-if="hasCollections" class="w-full lg:w-1/2 p-4 flex items-start hover:bg-gray-200 dark:hover:bg-dark-550 rounded-md group">
+                            <svg-icon name="light/hierarchy-files" class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800 dark:text-dark-175" />
                             <div class="flex-1 mb-4 md:mb-0 rtl:md:ml-6 ltr:md:mr-6">
-                                <h3 class="mb-2 text-blue">{{ __('Link to Entry') }} <span v-html="direction === 'ltr' ? '&rarr;' : '&larr;'"></span></h3>
+                                <h3 class="mb-2 text-blue dark:text-blue-600">{{ __('Link to Entry') }} <span v-html="direction === 'ltr' ? '&rarr;' : '&larr;'"></span></h3>
                                  <p>{{ __('messages.navigation_link_to_entry_instructions') }}</p>
                             </div>
                         </a>
-                        <a :href="docs_url('navigation')" class="w-full lg:w-1/2 p-4 flex items-start hover:bg-gray-200 rounded-md group">
-                            <svg-icon name="light/book-pages" class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800" />
+                        <a :href="docs_url('navigation')" class="w-full lg:w-1/2 p-4 flex items-start hover:bg-gray-200 dark:hover:bg-dark-550 rounded-md group">
+                            <svg-icon name="light/book-pages" class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800 dark:text-dark-175" />
                             <div class="flex-1 mb-4 md:mb-0 rtl:md:ml-6 ltr:md:mr-6">
-                                <h3 class="mb-2 text-blue">{{ __('Read the Documentation') }} <span v-html="direction === 'ltr' ? '&rarr;' : '&larr;'"></span></h3>
+                                <h3 class="mb-2 text-blue dark:text-blue-600">{{ __('Read the Documentation') }} <span v-html="direction === 'ltr' ? '&rarr;' : '&larr;'"></span></h3>
                                  <p>{{ __('messages.navigation_documentation_instructions') }}</p>
                             </div>
                         </a>
diff --git a/resources/js/components/revision-history/History.vue b/resources/js/components/revision-history/History.vue
index 8d233e236e..c1b897911e 100644
--- a/resources/js/components/revision-history/History.vue
+++ b/resources/js/components/revision-history/History.vue
@@ -1,8 +1,8 @@
 <template>
 
-    <div class="bg-white h-full flex flex-col">
+    <div class="bg-white dark:bg-dark-800 h-full flex flex-col">
 
-        <div class="bg-gray-200 px-4 py-2 border-b border-gray-300 text-lg font-medium flex items-center justify-between">
+        <div class="bg-gray-200 dark:bg-dark-600 px-4 py-2 border-b border-gray-300 dark:border-dark-900 text-lg font-medium flex items-center justify-between">
             {{ __('Revision History') }}
             <button
                 type="button"
@@ -17,7 +17,7 @@
                 <loading-graphic />
             </div>
 
-            <div v-if="!loading && revisions.length === 0" class="p-4 text-gray text-sm">
+            <div v-if="!loading && revisions.length === 0" class="p-4 text-gray dark:text-dark-150 text-sm">
                 {{ __('No revisions') }}
             </div>
 
diff --git a/resources/js/components/revision-history/Revision.vue b/resources/js/components/revision-history/Revision.vue
index dfbda9932d..0796fc7632 100644
--- a/resources/js/components/revision-history/Revision.vue
+++ b/resources/js/components/revision-history/Revision.vue
@@ -14,7 +14,7 @@
 
             <div class="revision-item-content w-full flex">
                 <div class="flex-1">
-                    <div class="revision-author text-gray-700 text-2xs">
+                    <div class="revision-author text-gray-700 dark:text-dark-150 text-2xs">
                         <template v-if="revision.user">{{ revision.user.name || revision.user.email }} &ndash;</template>
                         {{ date.toDate().toLocaleTimeString($config.get('locale').replace('_', '-'), { hour: 'numeric', minute: '2-digit' }) }}
                     </div>
diff --git a/resources/js/components/roles/PermissionTree.vue b/resources/js/components/roles/PermissionTree.vue
index a54de2973a..5a95b3ecb6 100644
--- a/resources/js/components/roles/PermissionTree.vue
+++ b/resources/js/components/roles/PermissionTree.vue
@@ -3,7 +3,7 @@
     <div>
         <div v-for="permission in permissions" :key="permission.value">
             <label
-                class="flex items-center justify-between py-2 rtl:pl-4 ltr:pr-4 border-b group hover:bg-gray-100"
+                class="flex items-center justify-between py-2 rtl:pl-4 ltr:pr-4 border-b dark:border-dark-900 group hover:bg-gray-100 dark:hover:bg-dark-700"
                 :style="direction === 'ltr' ? { paddingLeft: `${16*depth}px` } : { paddingRight: `${16*depth}px` }"
             >
                 <div class="flex">
@@ -18,7 +18,7 @@
                         {{ permission.label }}
                     </div>
                 </div>
-                <div class="text-gray-700 text-xs opacity-0 group-hover:opacity-100" v-if="permission.description" v-text="permission.description" />
+                <div class="text-gray-700 dark:text-dark-175 text-xs opacity-0 group-hover:opacity-100" v-if="permission.description" v-text="permission.description" />
             </label>
 
             <role-permission-tree
diff --git a/resources/js/components/roles/PublishForm.vue b/resources/js/components/roles/PublishForm.vue
index 69b80de17f..d03b760509 100644
--- a/resources/js/components/roles/PublishForm.vue
+++ b/resources/js/components/roles/PublishForm.vue
@@ -13,7 +13,7 @@
 
                 <form-group
                     handle="title"
-                    class="border-b"
+                    class="border-b dark:border-dark-900"
                     :display="__('Title')"
                     :errors="errors.title"
                     :instructions="__('messages.role_title_instructions')"
@@ -22,7 +22,7 @@
                 />
 
                 <form-group
-                    class="border-b"
+                    class="border-b dark:border-dark-900"
                     fieldtype="slug"
                     handle="handle"
                     :display="__('Handle')"
diff --git a/resources/js/components/structures/Branch.vue b/resources/js/components/structures/Branch.vue
index d4de367cd1..0ebc1c5793 100644
--- a/resources/js/components/structures/Branch.vue
+++ b/resources/js/components/structures/Branch.vue
@@ -7,20 +7,20 @@
         <div class="flex items-center flex-1 p-2 rtl:mr-2 ltr:ml-2 text-xs leading-normal">
             <div class="flex items-center grow" @click="$emit('branch-clicked', page)">
                 <div class="little-dot rtl:ml-2 ltr:mr-2" :class="getStatusClass()" v-tooltip="getStatusTooltip()" />
-                <svg-icon name="home-page" class="rtl:ml-2 ltr:mr-2 h-4 w-4 text-gray-800" v-if="isRoot" v-tooltip="__('This is the root page')" />
+                <svg-icon name="home-page" class="rtl:ml-2 ltr:mr-2 h-4 w-4 text-gray-800 dark:text-dark-150" v-if="isRoot" v-tooltip="__('This is the root page')" />
                 <a
                     @click.prevent="$emit('edit', $event)"
                     :class="{ 'text-sm font-medium': isTopLevel }"
                     :href="page.edit_url"
                     v-text="title" />
 
-                <span v-if="showSlugs" class="rtl:mr-2 ltr:ml-2 font-mono text-gray-700 text-2xs pt-px">
+                <span v-if="showSlugs" class="rtl:mr-2 ltr:ml-2 font-mono text-gray-700 dark:text-dark-175 text-2xs pt-px">
                     {{ isRoot ? '/' : page.slug }}
                 </span>
 
                 <button
                     v-if="hasChildren"
-                    class="p-2 text-gray-600 hover:text-gray-700 transition duration-100 outline-none flex"
+                    class="p-2 text-gray-600 dark:text-dark-175 hover:text-gray-700 dark:hover:text-dark-150 transition duration-100 outline-none flex"
                     :class="{ '-rotate-90': !isOpen }"
                     @click="$emit('toggle-open')"
                 >
@@ -38,7 +38,7 @@
             </div>
 
             <div class="rtl:pl-2 ltr:pr-2 flex items-center">
-                <div v-if="showBlueprint && page.entry_blueprint" v-text="__(page.entry_blueprint.title)" class="shrink text-4xs text-gray-600 uppercase ml-4" />
+                <div v-if="showBlueprint && page.entry_blueprint" v-text="__(page.entry_blueprint.title)" class="shrink text-4xs text-gray-600 dark:text-dark-175 uppercase ml-4" />
 
                 <slot name="branch-icon" :branch="page" />
 
diff --git a/resources/js/components/structures/PageEditor.vue b/resources/js/components/structures/PageEditor.vue
index 64be0a3a52..496b90a59a 100644
--- a/resources/js/components/structures/PageEditor.vue
+++ b/resources/js/components/structures/PageEditor.vue
@@ -1,9 +1,9 @@
 <template>
 
     <stack narrow name="page-tree-linker" :before-close="shouldClose" @closed="$emit('closed')">
-        <div slot-scope="{ close }" class="bg-gray-100 h-full flex flex-col">
+        <div slot-scope="{ close }" class="bg-gray-100 dark:bg-dark-700 h-full flex flex-col">
 
-            <header class="bg-white rtl:pr-6 ltr:pl-6 rtl:pl-3 ltr:pr-3 py-2 mb-4 border-b shadow-md text-lg font-medium flex items-center justify-between">
+            <header class="bg-white dark:bg-dark-550 rtl:pr-6 ltr:pl-6 rtl:pl-3 ltr:pr-3 py-2 mb-4 border-b dark:border-dark-950 shadow-md text-lg font-medium flex items-center justify-between">
                 {{ headerText }}
                 <button
                     type="button"
@@ -13,7 +13,7 @@
             </header>
 
             <div v-if="loading" class="flex-1 overflow-auto relative">
-                <div class="absolute inset-0 z-10 bg-white bg-opacity-75 flex items-center justify-center text-center">
+                <div class="absolute inset-0 z-10 bg-white dark:bg-dark-700 bg-opacity-75 flex items-center justify-center text-center">
                     <loading-graphic />
                 </div>
             </div>
@@ -33,7 +33,7 @@
                     @updated="values = $event"
                 >
                     <div slot-scope="{ container, setFieldMeta }">
-                        <div v-if="validating" class="absolute inset-0 z-10 bg-white bg-opacity-75 flex items-center justify-center">
+                        <div v-if="validating" class="absolute inset-0 z-10 bg-white dark:bg-dark-500 bg-opacity-75 flex items-center justify-center">
                             <loading-graphic text="" />
                         </div>
 
@@ -54,7 +54,7 @@
 
             </div>
 
-            <div v-if="!loading && (!readOnly || type === 'entry')" class="bg-gray-200 p-4 border-t flex items-center justify-between flex-row-reverse">
+            <div v-if="!loading && (!readOnly || type === 'entry')" class="bg-gray-200 dark:bg-dark-500 p-4 border-t dark:border-dark-900 flex items-center justify-between flex-row-reverse">
                 <div v-if="!readOnly">
                     <button @click="confirmClose(close)" class="btn rtl:ml-2 ltr:mr-2">{{ __('Cancel') }}</button>
                     <button @click="submit" class="btn-primary">{{ __('Submit') }}</button>
diff --git a/resources/js/components/taxonomies/CreateForm.vue b/resources/js/components/taxonomies/CreateForm.vue
index b025be3342..f406707815 100644
--- a/resources/js/components/taxonomies/CreateForm.vue
+++ b/resources/js/components/taxonomies/CreateForm.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="max-w-lg mt-4 mx-auto">
 
-        <div class="rounded p-6 lg:px-20 lg:py-10 shadow bg-white">
+        <div class="rounded p-6 lg:px-20 lg:py-10 shadow bg-white dark:bg-dark-600 dark:shadow-dark">
             <header class="text-center mb-16">
                 <h1 class="mb-6">{{ __('Create Taxonomy') }}</h1>
                 <p class="text-gray" v-text="__('messages.taxonomy_configure_intro')" />
diff --git a/resources/js/components/terms/Listing.vue b/resources/js/components/terms/Listing.vue
index 2e740f2d50..7fe4d59f01 100644
--- a/resources/js/components/terms/Listing.vue
+++ b/resources/js/components/terms/Listing.vue
@@ -17,7 +17,7 @@
         >
             <div slot-scope="{ hasSelections }">
                 <div class="card overflow-hidden p-0 relative">
-                    <div class="flex flex-wrap items-center justify-between px-2 pb-2 text-sm border-b">
+                    <div class="flex flex-wrap items-center justify-between px-2 pb-2 text-sm border-b dark:border-dark-900">
 
                         <data-list-filter-presets
                             ref="presets"
diff --git a/resources/js/components/terms/PublishActions.vue b/resources/js/components/terms/PublishActions.vue
index 61361d9ad5..971413c55d 100644
--- a/resources/js/components/terms/PublishActions.vue
+++ b/resources/js/components/terms/PublishActions.vue
@@ -1,9 +1,9 @@
 <template>
 
     <stack narrow name="publish-options" @closed="$emit('closed')">
-        <div slot-scope="{ close }" class="bg-white h-full flex flex-col">
+        <div slot-scope="{ close }" class="bg-white dark:bg-dark-800 h-full flex flex-col">
 
-            <div class="bg-gray-200 px-6 py-2 border-b border-gray-300 text-lg font-medium flex items-center justify-between">
+            <div class="bg-gray-200 dark:bg-dark-600 px-6 py-2 border-b border-gray-300 dark:border-dark-900 text-lg font-medium flex items-center justify-between">
                 {{ __('Publish') }}
                 <button
                     type="button"
diff --git a/resources/js/components/terms/PublishForm.vue b/resources/js/components/terms/PublishForm.vue
index 02e42f05c3..8f90b65f42 100644
--- a/resources/js/components/terms/PublishForm.vue
+++ b/resources/js/components/terms/PublishForm.vue
@@ -160,13 +160,13 @@
                                 </div>
                                 -->
 
-                                <div class="p-4 border-t" v-if="localizations.length > 1">
+                                <div class="p-4 border-t dark:border-dark-900" v-if="localizations.length > 1">
                                     <label class="publish-field-label font-medium mb-2" v-text="__('Sites')" />
                                     <div
                                         v-for="option in localizations"
                                         :key="option.handle"
                                         class="text-sm flex items-center -mx-4 px-4 py-2 cursor-pointer"
-                                        :class="option.active ? 'bg-blue-100' : 'hover:bg-gray-200'"
+                                        :class="option.active ? 'bg-blue-100 dark:bg-dark-300' : 'hover:bg-gray-200 dark:hover:bg-dark-400'"
                                         @click="localizationSelected(option)"
                                     >
                                         <div class="flex-1 flex items-center" :class="{ 'line-through': !option.exists }">
@@ -179,7 +179,7 @@
                                             <loading-graphic :size="14" text="" class="rtl:mr-2 ltr:ml-2" v-if="localizing === option.handle" />
                                         </div>
                                         <div class="badge-sm bg-orange" v-if="option.origin" v-text="__('Origin')" />
-                                        <div class="badge-sm bg-blue" v-if="option.active" v-text="__('Active')" />
+                                        <div class="badge-sm bg-blue dark:bg-dark-blue-100" v-if="option.active" v-text="__('Active')" />
                                         <div class="badge-sm bg-purple" v-if="option.root && !option.origin && !option.active" v-text="__('Root')" />
                                     </div>
                                 </div>
diff --git a/resources/js/components/users/ChangePassword.vue b/resources/js/components/users/ChangePassword.vue
index e5d4ab0a14..0a2cc5bd6b 100644
--- a/resources/js/components/users/ChangePassword.vue
+++ b/resources/js/components/users/ChangePassword.vue
@@ -34,7 +34,7 @@
                 :config="{ input_type: this.inputType }"
             />
         </div>
-        <div class="flex items-center bg-gray-21 border-t rounded-b px-4 py-2">
+        <div class="flex items-center bg-gray-21 dark:bg-dark-575 border-t dark:border-dark-900 rounded-b px-4 py-2">
             <button class="btn-primary" @click.prevent="save">{{ __('Change Password') }}</button>
             <label class="rtl:mr-4 ltr:ml-4">
                 <input type="checkbox" v-model="reveal" />
diff --git a/resources/js/components/users/Listing.vue b/resources/js/components/users/Listing.vue
index b28c762c20..416d5365a1 100644
--- a/resources/js/components/users/Listing.vue
+++ b/resources/js/components/users/Listing.vue
@@ -16,7 +16,7 @@
         >
             <div slot-scope="{ hasSelections }">
                 <div class="card overflow-hidden p-0 relative">
-                    <div class="flex flex-wrap items-center justify-between px-2 pb-2 text-sm border-b">
+                    <div class="flex flex-wrap items-center justify-between px-2 pb-2 text-sm border-b dark:border-dark-900">
 
                         <data-list-filter-presets
                             v-show="allowFilterPresets"
diff --git a/resources/views/collections/blueprints/create.blade.php b/resources/views/collections/blueprints/create.blade.php
index df8df5e720..4070795ab9 100644
--- a/resources/views/collections/blueprints/create.blade.php
+++ b/resources/views/collections/blueprints/create.blade.php
@@ -7,7 +7,7 @@
 <form action="{{ $action }}" method="POST">
     @csrf
     <div class="max-w-lg mt-4 mx-auto">
-        <div class="rounded p-6 lg:px-20 lg:py-10 shadow bg-white">
+        <div class="rounded p-6 lg:px-20 lg:py-10 shadow bg-white dark:bg-dark-600 dark:shadow-dark">
             <header class="text-center mb-16">
                 <h1 class="mb-6">{{ __('Create Blueprint') }}</h1>
                 <p class="text-gray">{{ __('statamic::messages.blueprints_intro') }}</p>
diff --git a/resources/views/collections/empty.blade.php b/resources/views/collections/empty.blade.php
index 6ff49181ed..50260db154 100644
--- a/resources/views/collections/empty.blade.php
+++ b/resources/views/collections/empty.blade.php
@@ -16,12 +16,12 @@
 <div class="card p-4 content">
     <div class="flex flex-wrap">
         @can('edit', $collection)
-        <a href="{{ cp_route('collections.edit', $collection->handle()) }}" class="w-full lg:w-1/2 p-4 flex items-start hover:bg-gray-200 rounded-md group">
-            <div class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800">
+        <a href="{{ cp_route('collections.edit', $collection->handle()) }}" class="w-full lg:w-1/2 p-4 flex items-start hover:bg-gray-200 dark:hover:bg-dark-550 rounded-md group">
+            <div class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800 dark:text-dark-175">
                 @cp_svg('icons/light/hammer-wrench')
             </div>
             <div class="flex-1 mb-4 md:mb-0 rtl:md:ml-6 ltr:md:mr-6">
-                <h3 class="mb-2 text-blue">{{ __('Configure Collection') }} @rarr</h3>
+                <h3 class="mb-2 text-blue dark:text-blue-600">{{ __('Configure Collection') }} @rarr</h3>
                 <p>{{ __('statamic::messages.collection_next_steps_configure_description') }}</p>
             </div>
         </a>
@@ -31,13 +31,13 @@
         @if ($multipleBlueprints)<div
         @else<a href="{{ cp_route('collections.entries.create', [$collection->handle(), $site]) }}"
         @endif
-            class="w-full lg:w-1/2 p-4 flex items-start hover:bg-gray-200 rounded-md group"
+            class="w-full lg:w-1/2 p-4 flex items-start hover:bg-gray-200 dark:hover:bg-dark-550 rounded-md group"
         >
-            <div class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800">
+            <div class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800 dark:text-dark-175">
                 @cp_svg('icons/light/content-writing')
             </div>
             <div class="flex-1 mb-4 md:mb-0 rtl:md:ml-6 ltr:md:mr-6">
-                <h3 class="mb-2 text-blue">{{ $collection->createLabel() }} @if (!$multipleBlueprints) @rarr @endif</h3>
+                <h3 class="mb-2 text-blue dark:text-blue-600">{{ $collection->createLabel() }} @if (!$multipleBlueprints) @rarr @endif</h3>
                 <p>{{ __('statamic::messages.collection_next_steps_create_entry_description') }}</p>
                 @if ($multipleBlueprints)
                     @foreach ($collection->entryBlueprints() as $blueprint)
@@ -49,23 +49,23 @@ class="text-blue text-sm rtl:ml-2 ltr:mr-2">{{ $blueprint->title() }} @rarr</a>
         @if ($multipleBlueprints)</div>@else</a>@endif
         @endcan
         @can('configure fields')
-        <a href="{{ cp_route('collections.blueprints.index', $collection->handle()) }}" class="w-full lg:w-1/2 p-4 flex items-start hover:bg-gray-200 rounded-md group">
-            <div class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800">
+        <a href="{{ cp_route('collections.blueprints.index', $collection->handle()) }}" class="w-full lg:w-1/2 p-4 flex items-start hover:bg-gray-200 dark:hover:bg-dark-550 rounded-md group">
+            <div class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800 dark:text-dark-175">
                 @cp_svg('icons/light/blueprint')
             </div>
             <div class="flex-1 mb-4 md:mb-0 rtl:md:ml-6 ltr:md:mr-6">
-                <h3 class="mb-2 text-blue">{{ __('Configure Blueprints') }} @rarr</h3>
+                <h3 class="mb-2 text-blue dark:text-blue-600">{{ __('Configure Blueprints') }} @rarr</h3>
                 <p>{{ __('statamic::messages.collection_next_steps_blueprints_description') }}</p>
             </div>
         </a>
         @endcan
         @can('store', 'Statamic\Contracts\Entries\Collection')
-        <a href="{{ cp_route('collections.scaffold', $collection->handle()) }}" class="w-full lg:w-1/2 p-4 flex items-start hover:bg-gray-200 rounded-md group">
-            <div class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800">
+        <a href="{{ cp_route('collections.scaffold', $collection->handle()) }}" class="w-full lg:w-1/2 p-4 flex items-start hover:bg-gray-200 dark:hover:bg-dark-550 rounded-md group">
+            <div class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800 dark:text-dark-175">
                 @cp_svg('icons/light/crane')
             </div>
             <div class="flex-1 mb-4 md:mb-0 rtl:md:ml-6 ltr:md:mr-6">
-                <h3 class="mb-2 text-blue">{{ __('Scaffold Views') }} @rarr</h3>
+                <h3 class="mb-2 text-blue dark:text-blue-600">{{ __('Scaffold Views') }} @rarr</h3>
                 <p>{{ __('statamic::messages.collection_next_steps_scaffold_description') }}</p>
             </div>
         </a>
diff --git a/resources/views/forms/show.blade.php b/resources/views/forms/show.blade.php
index 71e5dca014..9d42ea521e 100644
--- a/resources/views/forms/show.blade.php
+++ b/resources/views/forms/show.blade.php
@@ -55,7 +55,7 @@
     <div class="metrics mb-6">
         @foreach($form->metrics() as $metric)
             <div class="card px-6">
-                <h3 class="mb-4 font-bold text-gray">{{ $metric->label() }}</h3>
+                <h3 class="mb-4 font-bold text-gray dark:text-dark-175">{{ $metric->label() }}</h3>
                 <div class="text-4xl">{{ $metric->result() }}</div>
             </div>
         @endforeach
@@ -71,7 +71,7 @@
         :filters="{{ $filters->toJson() }}"
         v-cloak
     >
-        <div slot="no-results" class="text-center border-2 border-dashed rounded-lg">
+        <div slot="no-results" class="text-center border-2 dark:border-dark-400 border-dashed rounded-lg">
             <div class="max-w-md mx-auto px-8 py-30">
                 @cp_svg('empty/form')
                 <h1 class="my-6">{{ __('No submissions') }}</h1>
diff --git a/resources/views/layout.blade.php b/resources/views/layout.blade.php
index 0ff376f96d..a3303beae6 100644
--- a/resources/views/layout.blade.php
+++ b/resources/views/layout.blade.php
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="{{ Statamic::cpLocale() }}" dir="{{ Statamic::cpDirection() }}">
+<html lang="{{ Statamic::cpLocale() }}" dir="{{ Statamic::cpDirection() }}" class="{{ $user->preferredTheme() }}">
 <head>
     @include('statamic::partials.head')
 </head>
diff --git a/resources/views/licensing.blade.php b/resources/views/licensing.blade.php
index 09f3480f03..74d0b97884 100644
--- a/resources/views/licensing.blade.php
+++ b/resources/views/licensing.blade.php
@@ -16,7 +16,7 @@
             <div class="flex flex-wrap items-center">
                 <div class="w-full md:w-1/2">
                     <h1 class="mb-8">{{ __('Licensing') }}</h1>
-                    <p class="text-gray-700 leading-normal mb-8 text-lg antialiased">
+                    <p class="text-gray-700 dark:text-dark-175 leading-normal mb-8 text-lg antialiased">
                         @if ($usingLicenseKeyFile)
                             {{ __('statamic::messages.outpost_license_key_error') }}
                         @else
@@ -86,7 +86,7 @@
 
         <h6 class="mt-8">{{ __('Addons') }}</h6>
         @if ($addons->isEmpty())
-        <p class="text-sm text-gray mt-2">{{ __('No addons installed') }}</p>
+        <p class="text-sm text-gray dark:text-dark-150 mt-2">{{ __('No addons installed') }}</p>
         @else
         <div class="card p-0 mt-2">
             <table class="data-table">
@@ -94,8 +94,8 @@
                     <tr>
                         <td class="w-64 rtl:ml-2 ltr:mr-2">
                             <span class="little-dot {{ $addon->valid() ? 'bg-green-600' : 'bg-red-500' }} rtl:ml-2 ltr:mr-2"></span>
-                            <span class="font-bold"><a href="{{ $addon->addon()->marketplaceUrl() }}" class="text-gray hover:text-blue">{{ $addon->name() }}</a></span>
-                            @if ($addon->edition())<span class="badge uppercase font-bold text-gray-600">{{ $addon->edition() ?? '' }}</span>@endif
+                            <span class="font-bold"><a href="{{ $addon->addon()->marketplaceUrl() }}" class="text-gray dark:text-dark-175 hover:text-blue dark:hover:text-dark-blue-100">{{ $addon->name() }}</a></span>
+                            @if ($addon->edition())<span class="badge uppercase font-bold text-gray-600 dark:text-dark-200">{{ $addon->edition() ?? '' }}</span>@endif
                         </td>
                         <td>{{ $addon->version() }}</td>
                         <td class="rtl:text-left ltr:text-right text-red-500">{{ $addon->invalidReason() }}</td>
@@ -122,11 +122,11 @@
         </div>
         @endif
 
-        <div class="mt-10 py-4 border-t flex items-center">
+        <div class="mt-10 py-4 border-t dark:border-dark-950 flex items-center">
             <a href="{{ $site->url() }}" target="_blank" class="btn btn-primary rtl:ml-4 ltr:mr-4">{{ __('Edit Site') }}</a>
             @if ($addToCartUrl) <a href="{{ $addToCartUrl }}" target="_blank" class="btn rtl:ml-4 ltr:mr-4">{{ __('Buy Licenses') }}</a> @endif
             <a href="{{ cp_route('utilities.licensing.refresh') }}" class="btn">{{ __('Sync') }}</a>
-            <p class="rtl:mr-4 ltr:ml-4 text-2xs text-gray">{{ __('statamic::messages.licensing_sync_instructions') }}</p>
+            <p class="rtl:mr-4 ltr:ml-4 text-2xs text-gray dark:text-dark-175">{{ __('statamic::messages.licensing_sync_instructions') }}</p>
         </div>
 
     @endif
diff --git a/resources/views/partials/breadcrumb.blade.php b/resources/views/partials/breadcrumb.blade.php
index 75361b5945..cd6ab2bbe7 100644
--- a/resources/views/partials/breadcrumb.blade.php
+++ b/resources/views/partials/breadcrumb.blade.php
@@ -1,7 +1,7 @@
 @php use function Statamic\trans as __; @endphp
 
 <div class="flex">
-    <a href="{{ $url }}" class="flex-initial flex p-2 -m-2 items-center text-xs text-gray-700 hover:text-gray-900">
+    <a href="{{ $url }}" class="flex-initial flex p-2 -m-2 items-center text-xs text-gray-700 dark:text-dark-175 hover:text-gray-900 dark:hover:text-dark-100">
         <div class="h-6 rotate-180 svg-icon using-svg">
             @cp_svg('icons/micro/chevron-right')
         </div>
diff --git a/resources/views/partials/docs-callout.blade.php b/resources/views/partials/docs-callout.blade.php
index 16e87fb4af..24e8a433c7 100644
--- a/resources/views/partials/docs-callout.blade.php
+++ b/resources/views/partials/docs-callout.blade.php
@@ -2,6 +2,6 @@
 
 @if (config('statamic.cp.link_to_docs'))
     <div class="flex justify-center text-center mt-16">
-        <div class="bg-white rounded-full px-6 py-2 shadow-sm text-sm text-gray-700">{{ $text ?? __('Learn more about') }} <a href="{{ $url }}" target="_blank" rel="noopener noopener" class="text-blue hover:text-blue-700">{{ $topic }}</a></div>
+        <div class="bg-white dark:bg-dark-900 rounded-full px-6 py-2 shadow-sm text-sm text-gray-700 dark:text-dark-100">{{ $text ?? __('Learn more about') }} <a href="{{ $url }}" target="_blank" rel="noopener noopener" class="text-blue hover:text-blue-700">{{ $topic }}</a></div>
     </div>
 @endif
diff --git a/resources/views/partials/global-header.blade.php b/resources/views/partials/global-header.blade.php
index 63afc3d49a..8598f19e79 100644
--- a/resources/views/partials/global-header.blade.php
+++ b/resources/views/partials/global-header.blade.php
@@ -10,7 +10,7 @@
                 @if ($customLogo)
                     <img src="{{ $customLogo }}" alt="{{ config('statamic.cp.custom_cms_name') }}" class="white-label-logo">
                 @else
-                    @cp_svg('statamic-wordmark', 'w-24')
+                    @cp_svg('statamic-wordmark', 'w-24 logo')
                     @if (Statamic::pro())<span class="font-bold text-4xs align-top uppercase">{{ __('Pro') }}</span>@endif
                 @endif
             </div>
@@ -30,35 +30,37 @@
             </global-site-selector>
         @endif
 
+        <dark-mode-toggle theme="{{ $user->preferredTheme() }}"></dark-mode-toggle>
+
         <favorite-creator class="hidden md:block"></favorite-creator>
 
         @if (Route::has('horizon.index') && \Laravel\Horizon\Horizon::check(request()))
-            <a class="hidden md:block h-6 w-6 p-1 text-gray rtl:mr-4 ltr:ml-4 hover:text-gray-800" href="{{ route('horizon.index') }}" target="_blank" v-tooltip="'Laravel Horizon'">
+            <a class="hidden md:block h-6 w-6 p-1 text-gray dark:text-dark-100 rtl:mr-4 ltr:ml-4 hover:text-gray-800 dark:hover:text-dark-175" href="{{ route('horizon.index') }}" target="_blank" v-tooltip="'Laravel Horizon'">
                 @cp_svg('icons/regular/horizon')
             </a>
         @endif
 
         @if (Route::has('pulse') && (app()->environment('local') || $user->can('viewPulse')))
-            <a class="hidden md:block h-6 w-6 p-1 text-gray rtl:mr-4 ltr:ml-4 hover:text-gray-800" href="{{ route('pulse') }}" target="_blank" v-tooltip="'Laravel Pulse'">
+            <a class="hidden md:block h-6 w-6 p-1 text-gray dark:text-dark-100 rtl:mr-4 ltr:ml-4 hover:text-gray-800 dark:hover:text-dark-175" href="{{ route('pulse') }}" target="_blank" v-tooltip="'Laravel Pulse'">
                 @cp_svg('icons/regular/pulse')
             </a>
         @endif
 
         @if (config('nova.path') && (app()->environment('local') || $user->can('viewNova')))
-            <a class="hidden md:block h-6 w-6 p-1 text-gray rtl:mr-4 ltr:ml-4 hover:text-gray-800" href="/{{ trim(config('nova.path'), '/') }}/dashboards/main" target="_blank" v-tooltip="'Laravel Nova'">
+            <a class="hidden md:block h-6 w-6 p-1 text-gray dark:text-dark-100 rtl:mr-4 ltr:ml-4 hover:text-gray-800 dark:hover:text-dark-175" href="/{{ trim(config('nova.path'), '/') }}/dashboards/main" target="_blank" v-tooltip="'Laravel Nova'">
                 @cp_svg('icons/regular/nova')
             </a>
         @endif
 
         @if (Route::has('telescope') && \Laravel\Telescope\Telescope::check(request()))
-            <a class="hidden md:block h-6 w-6 p-1 text-gray rtl:mr-4 ltr:ml-4 hover:text-gray-800" href="{{ route('telescope') }}" target="_blank" v-tooltip="'Laravel Telescope'">
+            <a class="hidden md:block h-6 w-6 p-1 text-gray dark:text-dark-100 rtl:mr-4 ltr:ml-4 hover:text-gray-800 dark:hover:text-dark-175" href="{{ route('telescope') }}" target="_blank" v-tooltip="'Laravel Telescope'">
                 @cp_svg('icons/regular/telescope')
             </a>
         @endif
 
         <dropdown-list v-cloak>
             <template v-slot:trigger>
-                <button class="hidden md:block h-6 w-6 rtl:mr-4 ltr:ml-4 p-1 text-gray hover:text-gray-800" v-tooltip="__('Useful Links')" aria-label="{{ __('View Useful Links') }}">
+                <button class="hidden md:block h-6 w-6 rtl:mr-4 ltr:ml-4 p-1 text-gray dark:text-dark-100 hover:text-gray-800 dark:hover:text-dark-175" v-tooltip="__('Useful Links')" aria-label="{{ __('View Useful Links') }}">
                     @cp_svg('icons/light/book-open')
                 </button>
             </template>
@@ -82,7 +84,7 @@
             </dropdown-item>
         </dropdown-list>
 
-        <a class="hidden md:block h-6 w-6 p-1 text-gray rtl:mr-4 ltr:ml-4 hover:text-gray-800" href="{{ Statamic\Facades\Site::selected()->url() }}" target="_blank" v-tooltip="'{{ __('View Site') }}'" aria-label="{{ __('View Site') }}">
+        <a class="hidden md:block h-6 w-6 p-1 text-gray dark:text-dark-100 rtl:mr-4 ltr:ml-4 hover:text-gray-800 dark:hover:text-dark-175" href="{{ Statamic\Facades\Site::selected()->url() }}" target="_blank" v-tooltip="'{{ __('View Site') }}'" aria-label="{{ __('View Site') }}">
             @cp_svg('icons/light/browser-com')
         </a>
         <dropdown-list v-cloak>
diff --git a/resources/views/taxonomies/blueprints/create.blade.php b/resources/views/taxonomies/blueprints/create.blade.php
index df8df5e720..4070795ab9 100644
--- a/resources/views/taxonomies/blueprints/create.blade.php
+++ b/resources/views/taxonomies/blueprints/create.blade.php
@@ -7,7 +7,7 @@
 <form action="{{ $action }}" method="POST">
     @csrf
     <div class="max-w-lg mt-4 mx-auto">
-        <div class="rounded p-6 lg:px-20 lg:py-10 shadow bg-white">
+        <div class="rounded p-6 lg:px-20 lg:py-10 shadow bg-white dark:bg-dark-600 dark:shadow-dark">
             <header class="text-center mb-16">
                 <h1 class="mb-6">{{ __('Create Blueprint') }}</h1>
                 <p class="text-gray">{{ __('statamic::messages.blueprints_intro') }}</p>
diff --git a/resources/views/taxonomies/empty.blade.php b/resources/views/taxonomies/empty.blade.php
index f846c653f3..f99cf8d527 100644
--- a/resources/views/taxonomies/empty.blade.php
+++ b/resources/views/taxonomies/empty.blade.php
@@ -16,34 +16,34 @@
 <div class="card p-4 content">
     <div class="flex flex-wrap">
         @can('edit', $taxonomy)
-        <a href="{{ cp_route('taxonomies.edit', $taxonomy->handle()) }}" class="w-full lg:w-1/2 p-4 flex items-start hover:bg-gray-200 rounded-md group">
-            <div class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800">
+        <a href="{{ cp_route('taxonomies.edit', $taxonomy->handle()) }}" class="w-full lg:w-1/2 p-4 flex items-start hover:bg-gray-200 dark:hover:bg-dark-550 rounded-md group">
+            <div class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800 dark:text-dark-175">
                 @cp_svg('icons/light/hammer-wrench')
             </div>
             <div class="flex-1 mb-4 md:mb-0 rtl:md:ml-6 ltr:md:mr-6">
-                <h3 class="mb-2 text-blue">{{ __('Configure Taxonomy') }} @rarr</h3>
+                <h3 class="mb-2 text-blue dark:text-blue-600">{{ __('Configure Taxonomy') }} @rarr</h3>
                 <p>{{ __('statamic::messages.taxonomy_next_steps_configure_description') }}</p>
             </div>
         </a>
         @endcan
         @can('create', ['Statamic\Contracts\Taxonomies\Term', $taxonomy, \Statamic\Facades\Site::get($site)])
-        <a href="{{ cp_route('taxonomies.terms.create', [$taxonomy->handle(), $site]) }}" class="w-full lg:w-1/2 p-4 flex items-start hover:bg-gray-200 rounded-md group">
-            <div class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800">
+        <a href="{{ cp_route('taxonomies.terms.create', [$taxonomy->handle(), $site]) }}" class="w-full lg:w-1/2 p-4 flex items-start hover:bg-gray-200 dark:hover:bg-dark-550 rounded-md group">
+            <div class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800 dark:text-dark-175">
                 @cp_svg('icons/light/content-writing')
             </div>
             <div class="flex-1 mb-4 md:mb-0 rtl:md:ml-6 ltr:md:mr-6">
-                <h3 class="mb-2 text-blue">{{ __('Create Term') }} @rarr</h3>
+                <h3 class="mb-2 text-blue dark:text-blue-600">{{ __('Create Term') }} @rarr</h3>
                 <p>{{ __('statamic::messages.taxonomy_next_steps_create_term_description') }}</p>
             </div>
         </a>
         @endcan
         @can('configure fields')
-        <a href="{{ cp_route('taxonomies.blueprints.index', $taxonomy->handle()) }}" class="w-full lg:w-1/2 p-4 flex items-start hover:bg-gray-200 rounded-md group">
-            <div class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800">
+        <a href="{{ cp_route('taxonomies.blueprints.index', $taxonomy->handle()) }}" class="w-full lg:w-1/2 p-4 flex items-start hover:bg-gray-200 dark:hover:bg-dark-550 rounded-md group">
+            <div class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800 dark:text-dark-175">
                 @cp_svg('icons/light/blueprint')
             </div>
             <div class="flex-1 mb-4 md:mb-0 rtl:md:ml-6 ltr:md:mr-6">
-                <h3 class="mb-2 text-blue">{{ __('Configure Blueprints') }} @rarr</h3>
+                <h3 class="mb-2 text-blue dark:text-blue-600">{{ __('Configure Blueprints') }} @rarr</h3>
                 <p>{{ __('statamic::messages.taxonomy_next_steps_blueprints_description') }}</p>
             </div>
         </a>
diff --git a/resources/views/utilities/cache.blade.php b/resources/views/utilities/cache.blade.php
index 51cd9dcaba..9ffe2aecbd 100644
--- a/resources/views/utilities/cache.blade.php
+++ b/resources/views/utilities/cache.blade.php
@@ -26,7 +26,7 @@
             <div class="flex justify-between items-center">
                 <div class="rtl:pl-8 ltr:pr-8">
                     <h2 class="font-bold">{{ __('Content Stache') }}</h2>
-                    <p class="text-gray text-sm my-2">{{ __('statamic::messages.cache_utility_stache_description') }}</p>
+                    <p class="text-gray dark:text-dark-150 text-sm my-2">{{ __('statamic::messages.cache_utility_stache_description') }}</p>
                 </div>
                 <div class="flex">
                     <form method="POST" action="{{ cp_route('utilities.cache.warm', 'stache') }}" class="rtl:ml-2 ltr:mr-2">
@@ -39,24 +39,24 @@
                     </form>
                 </div>
             </div>
-            <div class="text-sm text-gray flex">
-                <div class="rtl:ml-4 ltr:mr-4 badge-pill-sm"><span class="text-gray-800 font-medium">{{ __('Records') }}:</span> {{ $stache['records'] }}</div>
+            <div class="text-sm text-gray dark:text-dark-150 flex">
+                <div class="rtl:ml-4 ltr:mr-4 badge-pill-sm"><span class="text-gray-800 dark:text-dark-150 font-medium">{{ __('Records') }}:</span> {{ $stache['records'] }}</div>
                 @if($stache['size'])
-                    <div class="rtl:ml-4 ltr:mr-4 badge-pill-sm"><span class="text-gray-800 font-medium">{{ __('Size') }}:</span> {{ $stache['size'] }}</div>
+                    <div class="rtl:ml-4 ltr:mr-4 badge-pill-sm"><span class="text-gray-800 dark:text-dark-150 font-medium">{{ __('Size') }}:</span> {{ $stache['size'] }}</div>
                 @endif
                 @if ($stache['time'])
-                    <div class="rtl:ml-4 ltr:mr-4 badge-pill-sm"><span class="text-gray-800 font-medium">{{ __('Build time') }}:</span> {{ $stache['time'] }}</div>
+                    <div class="rtl:ml-4 ltr:mr-4 badge-pill-sm"><span class="text-gray-800 dark:text-dark-150 font-medium">{{ __('Build time') }}:</span> {{ $stache['time'] }}</div>
                 @endif
                 @if ($stache['rebuilt'])
-                    <div class="badge-pill-sm"><span class="text-gray-800 font-medium">{{ __('Last rebuild') }}:</span> {{ $stache['rebuilt'] }}</div>
+                    <div class="badge-pill-sm"><span class="text-gray-800 dark:text-dark-150 font-medium">{{ __('Last rebuild') }}:</span> {{ $stache['rebuilt'] }}</div>
                 @endif
             </div>
         </div>
-        <div class="p-4 bg-gray-200 border-t">
+        <div class="p-4 bg-gray-200 dark:bg-dark-700 border-t dark:border-dark-900">
             <div class="flex justify-between items-center">
                 <div class="rtl:pl-8 ltr:pr-8">
                     <h2 class="font-bold">{{ __('Static Page Cache') }}</h2>
-                    <p class="text-gray text-sm my-2">{{ __('statamic::messages.cache_utility_static_cache_description') }}</p>
+                    <p class="text-gray dark:text-dark-150 text-sm my-2">{{ __('statamic::messages.cache_utility_static_cache_description') }}</p>
                 </div>
                 @if ($static['enabled'])
                     <form method="POST" action="{{ cp_route('utilities.cache.clear', 'static') }}">
@@ -65,44 +65,44 @@
                     </form>
                 @endunless
             </div>
-            <div class="text-sm text-gray flex">
-                <div class="rtl:ml-4 ltr:mr-4 badge-pill-sm bg-white border"><span class="text-gray-800 font-medium">{{ __('Strategy') }}:</span> {{ $static['strategy'] }}</div>
+            <div class="text-sm text-gray dark:text-dark-150 flex">
+                <div class="rtl:ml-4 ltr:mr-4 badge-pill-sm bg-white dark:bg-dark-700 border dark:border-dark-900"><span class="text-gray-800 dark:text-dark-150 font-medium">{{ __('Strategy') }}:</span> {{ $static['strategy'] }}</div>
                 @if ($static['enabled'])
-                    <div class="rtl:ml-4 ltr:mr-4 badge-pill-sm bg-white border"><span class="text-gray-800 font-medium">{{ __('Pages') }}:</span> {{ $static['count'] }}</div>
+                    <div class="rtl:ml-4 ltr:mr-4 badge-pill-sm bg-white dark:bg-dark-700 border dark:border-dark-900"><span class="text-gray-800 dark:text-dark-150 font-medium">{{ __('Pages') }}:</span> {{ $static['count'] }}</div>
                 @endif
             </div>
         </div>
 
-        <div class="p-4 border-t">
+        <div class="p-4 border-t dark:border-dark-900">
             <div class="flex justify-between items-center">
                 <div class="rtl:pl-8 ltr:pr-8">
                     <h2 class="font-bold">{{ __('Application Cache') }}</h2>
-                    <p class="text-gray text-sm my-2">{{ __('statamic::messages.cache_utility_application_cache_description') }}</p>
+                    <p class="text-gray dark:text-dark-150 text-sm my-2">{{ __('statamic::messages.cache_utility_application_cache_description') }}</p>
                 </div>
                 <form method="POST" action="{{ cp_route('utilities.cache.clear', 'application') }}">
                     @csrf
                     <button class="btn">{{ __('Clear') }}</button>
                 </form>
             </div>
-            <div class="text-sm text-gray flex">
-                <div class="rtl:ml-4 ltr:mr-4 badge-pill-sm"><span class="text-gray-800 font-medium">{{ __('Driver') }}:</span> {{ $cache['driver'] }}</div>
+            <div class="text-sm text-gray dark:text-dark-150 flex">
+                <div class="rtl:ml-4 ltr:mr-4 badge-pill-sm"><span class="text-gray-800 dark:text-dark-150 font-medium">{{ __('Driver') }}:</span> {{ $cache['driver'] }}</div>
             </div>
         </div>
 
-        <div class="p-4 border-t bg-gray-200 rounded-b">
+        <div class="p-4 border-t dark:border-dark-900 bg-gray-200 dark:bg-dark-700 rounded-b">
             <div class="flex justify-between items-center">
                 <div class="rtl:pl-8 ltr:pr-8">
                     <h2 class="font-bold">{{ __('Image Cache') }}</h2>
-                    <p class="text-gray text-sm my-2">{{ __('statamic::messages.cache_utility_image_cache_description') }}</p>
+                    <p class="text-gray dark:text-dark-150 text-sm my-2">{{ __('statamic::messages.cache_utility_image_cache_description') }}</p>
                 </div>
                 <form method="POST" action="{{ cp_route('utilities.cache.clear', 'image') }}">
                     @csrf
                     <button class="btn">{{ __('Clear') }}</button>
                 </form>
             </div>
-            <div class="text-sm text-gray flex">
-                <div class="rtl:ml-4 ltr:mr-4 badge-pill-sm bg-white border"><span class="text-gray-800 font-medium">{{ __('Cached images') }}:</span> {{ $images['count'] }}</div>
-                <div class="rtl:ml-4 ltr:mr-4 badge-pill-sm bg-white border"><span class="text-gray-800 font-medium">{{ __('Size') }}:</span> {{ $images['size'] }}</div>
+            <div class="text-sm text-gray dark:text-dark-150 flex">
+                <div class="rtl:ml-4 ltr:mr-4 badge-pill-sm bg-white dark:bg-dark-700 border dark:border-dark-900"><span class="text-gray-800 dark:text-dark-150 font-medium">{{ __('Cached images') }}:</span> {{ $images['count'] }}</div>
+                <div class="rtl:ml-4 ltr:mr-4 badge-pill-sm bg-white dark:bg-dark-700 border dark:border-dark-900"><span class="text-gray-800 dark:text-dark-150 font-medium">{{ __('Size') }}:</span> {{ $images['size'] }}</div>
             </div>
         </div>
     </div>
diff --git a/resources/views/utilities/git.blade.php b/resources/views/utilities/git.blade.php
index 213a248fab..eebae2bb27 100644
--- a/resources/views/utilities/git.blade.php
+++ b/resources/views/utilities/git.blade.php
@@ -26,24 +26,24 @@
 
     <div class="card p-0">
         @forelse($statuses ?? [] as $path => $status)
-            <div class="p-4 {{ $loop->first ? '' : 'border-t' }}">
+            <div class="p-4 {{ $loop->first ? '' : 'border-t dark:border-dark-900' }}">
                 <h2>{{ __('Repository path') }}: <code class="font-normal">{{ $path }}</code></h2>
-                <pre class="mt-4 p-4 rounded text-sm font-mono bg-gray-300 text-gray-700" dir="ltr">{{ $status->status }}</pre>
-                <div class="mt-4 text-sm text-gray flex">
-                    <div class="rtl:ml-4 ltr:mr-4 badge-pill-sm"><span class="text-gray-800 font-medium">{{ __('Affected files') }}:</span> {{ $status->totalCount }}</div>
+                <pre class="mt-4 p-4 rounded text-sm font-mono bg-gray-300 dark:bg-dark-800 text-gray-700 dark:text-dark-150" dir="ltr">{{ $status->status }}</pre>
+                <div class="mt-4 text-sm text-gray dark:text-dark-150 flex">
+                    <div class="rtl:ml-4 ltr:mr-4 badge-pill-sm"><span class="text-gray-800 dark:text-dark-150 font-medium">{{ __('Affected files') }}:</span> {{ $status->totalCount }}</div>
                     @if ($status->addedCount)
-                        <div class="rtl:ml-4 ltr:mr-4 badge-pill-sm"><span class="text-gray-800 font-medium">{{ __('Added') }}:</span> {{ $status->addedCount }}</div>
+                        <div class="rtl:ml-4 ltr:mr-4 badge-pill-sm"><span class="text-gray-800 dark:text-dark-150 font-medium">{{ __('Added') }}:</span> {{ $status->addedCount }}</div>
                     @endif
                     @if ($status->modifiedCount)
-                        <div class="rtl:ml-4 ltr:mr-4 badge-pill-sm"><span class="text-gray-800 font-medium">{{ __('Modified') }}:</span> {{ $status->modifiedCount }}</div>
+                        <div class="rtl:ml-4 ltr:mr-4 badge-pill-sm"><span class="text-gray-800 dark:text-dark-150 font-medium">{{ __('Modified') }}:</span> {{ $status->modifiedCount }}</div>
                     @endif
                     @if ($status->deletedCount)
-                        <div class="rtl:ml-4 ltr:mr-4 badge-pill-sm"><span class="text-gray-800 font-medium">{{ __('Deleted') }}:</span> {{ $status->deletedCount }}</div>
+                        <div class="rtl:ml-4 ltr:mr-4 badge-pill-sm"><span class="text-gray-800 dark:text-dark-150 font-medium">{{ __('Deleted') }}:</span> {{ $status->deletedCount }}</div>
                     @endif
                 </div>
             </div>
         @empty
-            <p class="p-6 italic text-gray-600">{{ __('statamic::messages.git_nothing_to_commit') }}</p>
+            <p class="p-6 italic text-gray-600 dark:text-dark-200">{{ __('statamic::messages.git_nothing_to_commit') }}</p>
         @endforelse
     </div>
 
diff --git a/resources/views/utilities/index.blade.php b/resources/views/utilities/index.blade.php
index 2e110cc390..420c8ea7f6 100644
--- a/resources/views/utilities/index.blade.php
+++ b/resources/views/utilities/index.blade.php
@@ -12,8 +12,8 @@
     <div class="card p-4 content">
         <div class="flex flex-wrap">
         @foreach ($utilities as $utility)
-            <a href="{{ $utility->url() }}" class="w-full lg:w-1/2 p-4 md:flex items-start hover:bg-gray-200 rounded-md group">
-                <div class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800">
+            <a href="{{ $utility->url() }}" class="w-full lg:w-1/2 p-4 md:flex items-start hover:bg-gray-200 dark:hover:bg-dark-550 rounded-md group">
+                <div class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800 dark:text-dark-175">
                     {!! $utility->icon() !!}
                 </div>
                 <div class="text-blue flex-1 mb-4 md:mb-0 rtl:md:ml-6 ltr:md:mr-6">
diff --git a/resources/views/utilities/search.blade.php b/resources/views/utilities/search.blade.php
index e1a9f18915..03e8886adf 100644
--- a/resources/views/utilities/search.blade.php
+++ b/resources/views/utilities/search.blade.php
@@ -43,7 +43,7 @@
                     <tr>
                         <td class="flex items-center">
                             @cp_svg('search-drivers/' . $index->config()['driver'], 'w-6 h-6 rtl:ml-2 ltr:mr-2')
-                            <div class="text-gray-800 leading-none">{{ $index->title() }}</div>
+                            <div class="text-gray-800 dark:text-dark-150 leading-none">{{ $index->title() }}</div>
                         </td>
                         <td>
                             {{ ucwords($index->config()['driver']) }}
diff --git a/resources/views/widgets/getting-started.blade.php b/resources/views/widgets/getting-started.blade.php
index 6c30c9b5a4..a9db39b2a2 100644
--- a/resources/views/widgets/getting-started.blade.php
+++ b/resources/views/widgets/getting-started.blade.php
@@ -1,55 +1,55 @@
 @php use function Statamic\trans as __; @endphp
 
 <div class="card p-0 content">
-    <div class="py-6 px-8 border-b">
+    <div class="py-6 px-8 border-b dark:border-dark-900">
         <h1>{{ __('statamic::messages.getting_started_widget_header') }}</h1>
         <p>{{ __('statamic::messages.getting_started_widget_intro') }}</p>
     </div>
     <div class="flex flex-wrap p-4">
-        <a href="https://statamic.dev" class="w-full lg:w-1/2 p-4 flex items-start hover:bg-gray-200 rounded-md group">
-            <div class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800">
+        <a href="https://statamic.dev" class="w-full lg:w-1/2 p-4 flex items-start hover:bg-gray-200 dark:hover:bg-dark-550 rounded-md group">
+            <div class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800 dark:text-dark-175">
                 @cp_svg('icons/light/book-pages')
             </div>
             <div class="flex-1">
-                <h3 class="mb-2 text-blue">{{ __('Read the Documentation') }}</h3>
+                <h3 class="mb-2 text-blue dark:text-blue-600">{{ __('Read the Documentation') }}</h3>
                 <p>{{ __('statamic::messages.getting_started_widget_docs') }}</p>
             </div>
         </a>
         @if (!Statamic::pro())
-        <a href="https://statamic.dev/licensing" class="w-full lg:w-1/2 p-4 flex items-start hover:bg-gray-200 rounded-md group">
-            <div class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800">
+        <a href="https://statamic.dev/licensing" class="w-full lg:w-1/2 p-4 flex items-start hover:bg-gray-200 dark:hover:bg-dark-550 rounded-md group">
+            <div class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800 dark:text-dark-175">
                 @cp_svg('icons/light/pro-ribbon')
             </div>
             <div class="flex-1">
-                <h3 class="mb-2 text-blue">{{ __('Enable Pro Mode') }}</h3>
+                <h3 class="mb-2 text-blue dark:text-blue-600">{{ __('Enable Pro Mode') }}</h3>
                 <p>{{ __('statamic::messages.getting_started_widget_pro') }}</p>
             </div>
         </a>
         @endif
-        <a href="{{ cp_route('collections.create') }}" class="w-full lg:w-1/2 p-4 flex items-start hover:bg-gray-200 rounded-md group">
-            <div class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800">
+        <a href="{{ cp_route('collections.create') }}" class="w-full lg:w-1/2 p-4 flex items-start hover:bg-gray-200 dark:hover:bg-dark-550 rounded-md group">
+            <div class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800 dark:text-dark-175">
                 @cp_svg('icons/light/content-writing')
             </div>
             <div class="flex-1">
-                <h3 class="mb-2 text-blue">{{ __('Create a Collection') }}</h3>
+                <h3 class="mb-2 text-blue dark:text-blue-600">{{ __('Create a Collection') }}</h3>
                 <p>{{ __('statamic::messages.getting_started_widget_collections') }}</p>
             </div>
         </a>
-        <a href="{{ cp_route('blueprints.index') }}" class="w-full lg:w-1/2 p-4 flex items-start hover:bg-gray-200 rounded-md group">
-            <div class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800">
+        <a href="{{ cp_route('blueprints.index') }}" class="w-full lg:w-1/2 p-4 flex items-start hover:bg-gray-200 dark:hover:bg-dark-550 rounded-md group">
+            <div class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800 dark:text-dark-175">
                 @cp_svg('icons/light/blueprints')
             </div>
             <div class="flex-1">
-                <h3 class="mb-2 text-blue">{{ __('Create a Blueprint') }}</h3>
+                <h3 class="mb-2 text-blue dark:text-blue-600">{{ __('Create a Blueprint') }}</h3>
                 <p>{{ __('statamic::messages.getting_started_widget_blueprints') }}</p>
             </div>
         </a>
-        <a href="{{ cp_route('navigation.create') }}" class="w-full lg:w-1/2 p-4 flex items-start hover:bg-gray-200 rounded-md group">
-            <div class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800">
+        <a href="{{ cp_route('navigation.create') }}" class="w-full lg:w-1/2 p-4 flex items-start hover:bg-gray-200 dark:hover:bg-dark-550 rounded-md group">
+            <div class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800 dark:text-dark-175">
                 @cp_svg('icons/light/hierarchy-files')
             </div>
             <div class="flex-1">
-                <h3 class="mb-2 text-blue">{{ __('Create a Navigation') }}</h3>
+                <h3 class="mb-2 text-blue dark:text-blue-600">{{ __('Create a Navigation') }}</h3>
                 <p>{{ __('statamic::messages.getting_started_widget_navigation') }}</p>
             </div>
         </a>
diff --git a/src/Auth/User.php b/src/Auth/User.php
index c7feecc49e..01cdb0bd84 100644
--- a/src/Auth/User.php
+++ b/src/Auth/User.php
@@ -336,6 +336,11 @@ public function setPreferredLocale($locale)
         return $this->setPreference('locale', $locale);
     }
 
+    public function preferredTheme()
+    {
+        return $this->getPreference('theme') ?? 'auto';
+    }
+
     public function getCpSearchResultBadge(): string
     {
         return __('User');
diff --git a/tailwind.config.js b/tailwind.config.js
index efa20d3f6b..0439f0e0ed 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,6 +1,7 @@
 const colors = require('tailwindcss/colors')
 
 module.exports = {
+    darkMode: 'class',
     content: [
         './resources/**/*.{html,js,vue,blade.php}',
         './tests/**/*.{html,vue,blade.php}'
@@ -48,6 +49,34 @@ module.exports = {
                 950: '#141a1f',
                 DEFAULT: '#73808c',
             },
+            dark: {
+                100: '#dfe1e5',
+                150: '#bbbdc0',
+                175: '#93979a',
+                200: '#5f6163',
+                250: '#555759',
+                275: '#515356',
+                300: '#4e5157',
+                350: '#43454a',
+                400: '#414245',
+                500: '#404143',
+                550: '#3b3f41',
+                575: '#393b40',
+                600: '#2b2d30',
+                700: '#232323',
+                750: '#22242a',
+                800: '#1e1f22',
+                900: '#171717',
+                950: '#161616',
+                975: '#131314',
+            },
+            'dark-blue': {
+                100: '#2870F5',
+                125: '#1e68f1',
+                150: '#1f67ec',
+                175: '#1560ec',
+                200: '#2a4270',
+            },
             orange: {
                 light: '#fcc062',
                 DEFAULT: '#f5a82f',
@@ -71,6 +100,7 @@ module.exports = {
             amber: colors.amber,
             green: colors.green,
             red: colors.red,
+            'dark-red': '#900000'
         },
         screens: {
             'sm': '576px',
@@ -98,6 +128,9 @@ module.exports = {
                 set: 'rgba(50,50,93,.15) 0 0 0 1px, rgba(50,50,93,.08) 0 2px 5px, rgba(0,0,0,.07) 0 1px 1.5px,rgba(0,0,0,.08) 0 1px 2px 0, transparent 0 0 0 0',
                 button: '0 1px 0 0 rgba(25,30,35,.05)',
                 inner: 'inset 0px 1px 1px 0px rgba(0,0,0,.05)',
+                dark: '0 20px 35px 0 rgba(22,22,22,.45), 0 10px 23px 0 rgba(23,23,23,.65), 0 0 0 1px rgba(85,87,89,.80)',
+                'dark-popover': '0 10px 17px 10px rgb(31 33 36 / 76%), 0 2px 1px 1px rgb(31 33 36 / 76%), 0 0 0 1px rgb(109 118 118 / 41%), 0 0 0 1px rgb(110 125 140 / 61%)',
+                'dark-set': 'rgba(0,0,0,.25) 0 0 0 1px, rgba(0,0,0,.08) 0 2px 5px, rgba(0,0,0,.17) 0 1px 1.5px,rgba(0,0,0,.18) 0 1px 2px 0, transparent 0 0 0 0',
             },
             fontFamily: {
                 serif: ['Georgia', 'serif'],