[4.x] Dark Mode for Control Panel

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

@@ -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 {

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 {

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

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;