[5.x] Dark Mode (#10117)

Co-authored-by: Peiman Nourani <[email protected]>
Co-authored-by: Jason Varga <[email protected]>

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; }
     }
 }

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

resources/css/components/blueprints.css

@@ -15,8 +15,7 @@
 }
 
 .blueprint-drag-handle {
-    @apply flex-none;
-    cursor: move;
+    @apply flex-none w-4 ltr:border-r rtl:border-l dark:border-dark-500 cursor-move;
     background: rgba(0, 0, 0, 0.01) url('../../svg/icons/light/drag-dots.svg') 50% 50% no-repeat;
     background-size: 7px 17px;
 }
@@ -26,6 +25,7 @@
 
     .blueprint-section-field-inner {
         @apply relative border rounded bg-gray-200 shadow-sm flex outline-none z-10;
+        @apply dark:border-none dark:shadow-dark dark:bg-dark-600
     }
 
     &.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 {

resources/css/components/cards.css

@@ -4,6 +4,7 @@
 
 .card {
     @apply shadow bg-white rounded-md p-2;
+    @apply dark:bg-dark-600 dark:shadow-dark;
 }
 
 @screen md {

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-650 border dark:border-dark-900 rounded;
 
     &.is-expanded {
         @apply border-b-0 rounded-b-none;

resources/css/components/fieldtypes/bard.css

@@ -1,19 +1,19 @@
 .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-650 shadow-inner p-0 relative rounded;
 }
 
 .bard-editor .ProseMirror {
     @apply p-2 min-h-40 text-sm leading-tight;
     @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-800 shadow-none rounded-t border-b dark:border-dark-900 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,30 +434,30 @@
     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;
         }
 
         .selectedCell {
             @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;
     }

resources/css/components/fieldtypes/code.css

@@ -1,10 +1,11 @@
 .code-fieldtype-container {
     direction: ltr;
+    @apply dark:border dark:border-dark-800 rounded;
 }
 
 .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;
-    padding: 4px 8px;
+    @apply bg-white shadow-none py-1 px-2 rounded-t border border-b-0 text-sm flex flex-wrap items-center justify-end gap-2;
+    @apply dark:bg-dark-800 dark:border-l-0 dark:border-r-0 dark:border-t-0 dark:border-b dark:border-dark-900;
 
     [dir='rtl'] & {
         direction: rtl;
@@ -17,9 +18,13 @@
 
 
 .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;
     }
 }
+
+.CodeMirror {
+    @apply dark:text-dark-150 dark:shadow-inner-dark;
+}