Merge pull request #49 from jolicode/fix/easyadmin-dark-mode-style

Improve dark mode styles for easyadmin

Author: xavierlacot

src/Bridge/EasyAdmin/assets/styles/base.css

@@ -15,4 +15,9 @@
   --jm-color-red: #dc2626;
   --jm-dropzone-color: #293a53;
   --jm-dropzone-border-color: #aab6c8;
+  --jm-code-color: #c44c34;
+}
+
+[data-bs-theme="dark"] {
+  --jm-code-color: #fc4c3f;
 }

src/Bridge/EasyAdmin/assets/styles/box.css

@@ -5,6 +5,17 @@
 /* Custom properties
    ========================================================================== */
 
+.jm-box {
+   --jm-box-background-color: var(--gray-50);
+   --code-color: var(--jm-code-color);
+}
+
+[data-bs-theme="dark"] {
+  .jm-box {
+    --jm-box-background-color: var(--true-gray-800);
+  }
+}
+
 
 /* Rules
    ========================================================================== */
@@ -13,5 +24,5 @@
   border: solid var(--gray-200) 1px;
   padding: 0.625rem;
   border-radius: 0.25rem;
-  background-color: var(--gray-50);
+  background-color: var(--jm-box-background-color);
 }

src/Bridge/EasyAdmin/assets/styles/dropzone.css

@@ -2,6 +2,23 @@
    Dropzone
    ========================================================================== */
 
+/* Custom properties
+   ========================================================================== */
+
+.dropzone-container {
+  --dropzone-background-color: var(--jm-color-gray-100);
+  --dropzone-color: var(--jm-dropzone-color);
+  --dropzone-border-color: var(--jm-dropzone-border-color);
+}
+
+[data-bs-theme="dark"] {
+  .dropzone-container {
+    --dropzone-background-color: var(--true-gray-800);
+    --dropzone-color: var(--jm-color-gray-100);
+    --dropzone-border-color: var(--jm-color-gray);
+  }
+}
+
 /* Rules
    ========================================================================== */
 
@@ -25,9 +42,9 @@
   flex-wrap: wrap;
   min-height: auto;
   margin-bottom: 1.5rem;
-  color: var(--jm-dropzone-color);
-  background-color: var(--jm-color-gray-100);
-  border: dashed 1px var(--jm-dropzone-border-color);
+  color: var(--dropzone-color);
+  background-color: var(--dropzone-background-color, var(--jm-color-gray-100));
+  border: dashed 1px var(--dropzone-border-color);
   border-radius: 4px;
   z-index: 100;
 }

src/Bridge/EasyAdmin/assets/styles/header.css

@@ -1,3 +1,10 @@
+/* ==========================================================================
+   Header
+   ========================================================================== */
+
+/* Custom properties
+   ========================================================================== */
+
 .joli-media-header-tools {
   .btn-group .btn.active {
     --button-hover-bg: linear-gradient(180deg, var(--button-secondary-color), hsl(from var(--button-secondary-color) h calc(s + 3) calc(l + 5)));
@@ -6,3 +13,16 @@
     cursor: pointer;
   }
 }
+
+[data-bs-theme="dark"] {
+  .joli-media-header-tools {
+    .btn-group .btn.active,
+    .btn-group .btn.disabled.active {
+      --button-active-bg: var(--true-gray-700);
+    }
+  }
+
+  .modal-content .content-header {
+    background-color: transparent;
+  }
+}

src/Bridge/EasyAdmin/assets/styles/new-directory-form.css

@@ -1,3 +1,27 @@
+/* ==========================================================================
+   New directory form
+   ========================================================================== */
+
+/* Custom properties
+   ========================================================================== */
+
+.new-directory-container {
+  --new-directory-color: var(--jm-dropzone-color);
+  --new-directory-background-color: var(--jm-color-gray-100);
+  --new-directory-border-color: var(--jm-dropzone-border-color);
+}
+
+[data-bs-theme="dark"] {
+  .new-directory-container {
+    --new-directory-background-color: var(--true-gray-800);
+    --new-directory-color: var(--jm-color-gray-100);
+    --new-directory-border-color: var(--jm-color-gray);
+  }
+}
+
+/* Rules
+   ========================================================================== */
+
 .new-directory-container {
   display: none;
   top: 100%;
@@ -6,9 +30,9 @@
   min-height: auto;
   margin-bottom: 1.5rem;
   padding: 1.5rem;
-  color: var(--jm-dropzone-color);
-  background-color: var(--jm-color-gray-100);
-  border: dashed 1px var(--jm-dropzone-border-color);
+  color: var(--new-directory-color);
+  background-color: var(--new-directory-background-color);
+  border: dashed 1px var(--new-directory-border-color);
   border-radius: 4px;
   z-index: 100;
 

src/Bridge/EasyAdmin/assets/styles/rename-directory-form.css

@@ -1,3 +1,27 @@
+/* ==========================================================================
+   Rename directory form
+   ========================================================================== */
+
+/* Custom properties
+   ========================================================================== */
+
+.rename-directory-container {
+  --rename-directory-color: var(--jm-dropzone-color);
+  --rename-directory-background-color: var(--jm-color-gray-100);
+  --rename-directory-border-color: var(--jm-dropzone-border-color);
+}
+
+[data-bs-theme="dark"] {
+  .rename-directory-container {
+    --rename-directory-color: var(--jm-color-gray-100);
+    --rename-directory-background-color: var(--true-gray-800);
+    --rename-directory-border-color: var(--jm-color-gray);
+  }
+}
+
+/* Rules
+   ========================================================================== */
+
 .rename-directory-container {
   display: none;
   top: 100%;
@@ -6,9 +30,9 @@
   min-height: auto;
   margin-bottom: 1.5rem;
   padding: 1.5rem;
-  color: var(--jm-dropzone-color);
-  background-color: var(--jm-color-gray-100);
-  border: dashed 1px var(--jm-dropzone-border-color);
+  color: var(--rename-directory-color);
+  background-color: var(--rename-directory-background-color);
+  border: dashed 1px var(--rename-directory-border-color);
   border-radius: 4px;
   z-index: 100;
 

src/Bridge/EasyAdmin/assets/styles/rename-form.css

@@ -1,3 +1,26 @@
+/* ==========================================================================
+   Rename file form
+   ========================================================================== */
+
+/* Custom properties
+   ========================================================================== */
+
+.rename-file-container {
+  --rename-file-color: var(--jm-dropzone-color);
+  --rename-file-background-color: var(--jm-color-gray-100);
+  --rename-file-border-color: var(--jm-dropzone-border-color);
+}
+
+[data-bs-theme="dark"] {
+  .rename-file-container {
+    --rename-file-color: var(--jm-color-gray-100);
+    --rename-file-background-color: var(--true-gray-800);
+    --rename-file-border-color: var(--jm-color-gray);
+  }
+}
+
+/* Rules
+   ========================================================================== */
 .rename-file-container {
   display: none;
   top: 100%;
@@ -6,9 +29,9 @@
   min-height: auto;
   margin-bottom: 1.5rem;
   padding: 1.5rem;
-  color: var(--jm-dropzone-color);
-  background-color: var(--jm-color-gray-100);
-  border: dashed 1px var(--jm-dropzone-border-color);
+  color: var(--rename-file-color);
+  background-color: var(--rename-file-background-color);
+  border: dashed 1px var(--rename-file-border-color);
   border-radius: 4px;
   z-index: 100;
 

src/Bridge/EasyAdmin/public/entrypoints.json

@@ -2,7 +2,7 @@
   "entrypoints": {
     "joli-media-easy-admin": {
       "css": [
-        "./joli-media-easy-admin.701f807e.css"
+        "./joli-media-easy-admin.72f01548.css"
       ],
       "js": [
         "./joli-media-easy-admin.d53cb5bd.js"