feature #6032 Tweak the style of the dark theme (javiereguiluz)

This PR was squashed before being merged into the 4.x branch.

Discussion
----------

Tweak the style of the dark theme

I think that the current "dark theme" is not dark enough. This PR darkens everything to make it look more like the default GitHub dark theme.

In my opinion, it looks much better now. I won't post screenshots to encourage you to test it in your own applications. 😉

Commits
-------

b4d2977 Tweak the style of the dark theme

assets/css/easyadmin-theme/base.scss

@@ -742,7 +742,10 @@ body.ea-edit .content-header {
     color: var(--pagination-color);
 }
 
-.pager ul {
+.pager .pagination {
+    --bs-pagination-font-size: var(--font-size-sm);
+    --bs-pagination-focus-box-shadow: none;
+
     margin-bottom: 0;
 
     @media (max-width: 992px) {

assets/css/easyadmin-theme/buttons.scss

@@ -9,7 +9,8 @@
     cursor: pointer;
     text-decoration: none;
     white-space: nowrap;
-    transition: box-shadow .2s;
+    transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
+    transition-property: box-shadow;
 }
 .btn:not(:disabled):not(.disabled):not(.btn-link):not(.btn-danger):hover {
     border: 0;

assets/css/easyadmin-theme/color-palette.scss

@@ -192,6 +192,7 @@
   --red-800: #991b1b;
   --red-900: #7f1d1d;
 
+  // "warm gray" is called "stone" in recent Tailwind CSS versions
   --warm-gray-50: #fafaf9;
   --warm-gray-100: #f5f5f4;
   --warm-gray-200: #e7e5e4;
@@ -202,7 +203,9 @@
   --warm-gray-700: #44403c;
   --warm-gray-800: #292524;
   --warm-gray-900: #1c1917;
+  --warm-gray-950: #0c0a09;
 
+  // "true gray" is called "neutral" in recent Tailwind CSS versions
   --true-gray-50: #fafafa;
   --true-gray-100: #f5f5f5;
   --true-gray-200: #e5e5e5;
@@ -213,10 +216,12 @@
   --true-gray-700: #404040;
   --true-gray-800: #262626;
   --true-gray-900: #171717;
+  --true-gray-950: #0a0a0a;
 
   // Tailwind CSS calls this color "gray", but we renamed it to "neutral gray"
   // because our design is based on blue tones, so the best "gray" for our design
   // is "blue gray" and we alias "blue gray" color as "gray" to simplify things
+  // "gray" is called "zinc" in recent Tailwind CSS versions
   --neutral-gray-50: #fafafa;
   --neutral-gray-100: #f4f4f5;
   --neutral-gray-200: #e4e4e7;
@@ -227,7 +232,9 @@
   --neutral-gray-700: #3f3f46;
   --neutral-gray-800: #27272a;
   --neutral-gray-900: #18181b;
+  --neutral-gray-950: #09090b;
 
+  // "cool gray" is called "gray" in recent Tailwind CSS versions
   --cool-gray-50: #f9fafb;
   --cool-gray-100: #f3f4f6;
   --cool-gray-200: #e5e7eb;
@@ -238,7 +245,9 @@
   --cool-gray-700: #374151;
   --cool-gray-800: #1f2937;
   --cool-gray-900: #111827;
+  --cool-gray-950: #030712;
 
+  // "blue gray" is called "slate" in recent Tailwind CSS versions
   --blue-gray-50: #f8fafc;
   --blue-gray-100: #f1f5f9;
   --blue-gray-200: #e2e8f0;
@@ -249,6 +258,7 @@
   --blue-gray-700: #334155;
   --blue-gray-800: #1e293b;
   --blue-gray-900: #0f172a;
+  --blue-gray-950: #020617;
 
   // this is the color alias to consider the "blue gray" color as "the normal gray"
   --gray-50:  var(--blue-gray-50);

assets/css/easyadmin-theme/detail-page.scss

@@ -42,6 +42,7 @@
   --bs-tooltip-border-radius: var(--border-radius);
   --bs-tooltip-padding-x: 20px;
   --bs-tooltip-padding-y: 10px;
+  --bs-tooltip-opacity: 1;
 
   .tooltip-inner {
     font-size: 13px;

assets/css/easyadmin-theme/forms.scss

@@ -301,7 +301,7 @@ label.form-check-label {
      padding-left: 0;
  }
 
-.form-tabs .nav-tabs .fa {
+.form-tabs .nav-tabs .tab-nav-item-icon {
     color: var(--text-muted);
     margin-right: 5px;
 }
@@ -311,6 +311,9 @@ label.form-check-label {
     color: var(--link-color);
     position: relative;
 }
+.form-tabs .nav-tabs .nav-link.active .tab-nav-item-icon {
+    color: var(--link-color);
+}
 .form-tabs .nav-tabs .nav-link.active:before {
     content: '';
     width: 100%;
@@ -364,7 +367,7 @@ label.form-check-label {
 
         .form-column-icon {
             color: var(--form-column-icon-color);
-            margin-right: 7px;
+            margin-right: 10px;
         }
 
         .form-column-help {
@@ -465,7 +468,7 @@ label.form-check-label {
 
         .form-fieldset-icon {
             color: var(--form-fieldset-icon-color);
-            margin-right: 7px;
+            margin-right: 10px;
         }
 
         .form-fieldset-help {

assets/css/easyadmin-theme/menu.scss

@@ -164,17 +164,17 @@ body.ea-sidebar-width-compact .sidebar {
                 padding: 7px 5px 7px 0;
             }
 
-            &.active { background: transparent; }
-
             &:hover {
                 background: var(--body-bg);
                 box-shadow: var(--sidebar-menu-compact-hover-box-shadow);
                 min-width: max-content;
                 padding-left: var(--sidebar-padding-left);
                 z-index: $zindex-modal-backdrop;
 
+                i { color: var(--sidebar-menu-icon-color) !important; }
+
                 .menu-item-label, .menu-item-badge, .submenu, .submenu-toggle-icon { display: block; }
-                .menu-item-contents { background: var(--body-bg); }
+                .menu-item-contents { background: var(--body-bg); color: var(--text-color); }
 
                 .submenu {
                     background: var(--body-bg);

assets/css/easyadmin-theme/variables-theme.scss

@@ -365,36 +365,36 @@
 .ea-dark-scheme {
     --text-primary-color: var(--text-color);
     --text-secondary-color: var(--text-muted);
-    --text-tertiary-color: var(--true-gray-500);
-    --border-primary-color: var(--true-gray-500);
-    --border-secondary-color: var(--true-gray-600);
-    --border-tertiary-color: var(--true-gray-700);
-    --primary-bg: var(--true-gray-500);
-    --secondary-bg: var(--true-gray-700);
+    --text-tertiary-color: var(--true-gray-600);
+    --border-primary-color: var(--true-gray-600);
+    --border-secondary-color: var(--true-gray-700);
+    --border-tertiary-color: var(--true-gray-800);
+    --primary-bg: var(--true-gray-600);
+    --secondary-bg: var(--true-gray-800);
     --tertiary-bg: var(--true-gray-900);
 
     --shadow-md: 0 4px 6px -1px rgb(0, 0, 0, 0.3), 0 2px 4px -2px rgb(0, 0, 0, 0.3);
     --shadow-lg: 0 10px 15px -3px rgb(0, 0, 0, 0.3), 0 4px 6px -4px rgb(0, 0, 0, 0.3);
     --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
-    --body-bg: #222222; // custom value between --true-gray-900 and --true-gray-800
-    --responsive-header-bg: #303030;
+    --body-bg: var(--true-gray-950);
+    --responsive-header-bg: var(--true-gray-800);
     --responsive-header-border-color: var(--true-gray-600);
     --responsive-header-logo-color: var(--true-gray-300);
     --responsive-table-label-color: var(--true-gray-500);
     --responsive-table-row-border-color: var(--true-gray-700);
-    --sidebar-bg: #303030; // custom value between --true-gray-800 and --true-gray-700
-    --sidebar-border-color: var(--true-gray-700);
+    --sidebar-bg: var(--true-gray-900);
+    --sidebar-border-color: var(--true-gray-800);
     --sidebar-logo-color: var(--true-gray-200);
-    --sidebar-menu-color: #b5b5b5; // custom value between --true-gray-400 and --true-gray-300
+    --sidebar-menu-color: var(--true-gray-300);
     --sidebar-menu-badge-bg: var(--true-gray-800);
     --sidebar-menu-badge-color: var(--true-gray-300);
     --sidebar-menu-badge-active-bg: var(--blue-800);
     --sidebar-menu-badge-active-color: var(--true-gray-300);
     --sidebar-menu-submenu-color: var(--true-gray-400);
     --sidebar-menu-header-color: var(--true-gray-400);
-    --sidebar-menu-icon-color: var(--true-gray-500);
-    --sidebar-menu-active-item-bg: var(--true-gray-700);
-    --sidebar-menu-active-item-color: var(--blue-400);
+    --sidebar-menu-icon-color: var(--true-gray-400);
+    --sidebar-menu-active-item-bg: var(--true-gray-300);
+    --sidebar-menu-active-item-color: var(--true-gray-950);
     --sidebar-menu-compact-hover-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
     --resize-handler-hover-bg: var(--indigo-400);
     --content-section-border-color: var(--true-gray-700);
@@ -404,38 +404,38 @@
     --content-search-reset-button-color: var(--true-gray-300);
     --content-search-reset-button-hover-bg: var(--true-gray-700);
     --content-search-reset-button-hover-color: var(--true-gray-200);
-    --content-top-border-color: var(--true-gray-600);
+    --content-top-border-color: var(--true-gray-700);
     --content-bg: var(--true-gray-900);
     --user-avatar-icon-bg: var(--true-gray-700);
-    --user-avatar-icon-color: var(--true-gray-500);
-    --user-name-color: var(--true-gray-500);
+    --user-avatar-icon-color: var(--true-gray-400);
+    --user-name-color: var(--true-gray-400);
     --user-menu-impersonated-link-color: var(--color-primary);
-    --popover-bg: #303030;
-    --popover-border-color: var(--true-gray-600);
+    --popover-bg: var(--true-gray-900);
+    --popover-border-color: var(--true-gray-700);
     --popover-color: var(--text-color);
     --popover-shadow: var(--shadow-xl);
     --popover-max-width: 480px;
-    --dropdown-toggle-bg: var(--true-gray-600);
+    --dropdown-toggle-bg: var(--true-gray-800);
     --dropdown-toggle-color: var(--true-gray-200);
-    --dropdown-toggle-border-color: var(--true-gray-600);
-    --dropdown-toggle-hover-border-color: var(--true-gray-500);
-    --dropdown-bg: #303030;
+    --dropdown-toggle-border-color: var(--true-gray-700);
+    --dropdown-toggle-hover-border-color: var(--true-gray-600);
+    --dropdown-bg: var(--true-gray-900);
     --dropdown-color: var(--true-gray-300);
-    --dropdown-border-color: var(--true-gray-600);
+    --dropdown-border-color: var(--true-gray-700);
     --dropdown-link-color: var(--true-gray-300);
-    --dropdown-link-hover-bg: var(--true-gray-700);
+    --dropdown-link-hover-bg: var(--true-gray-800);
     --dropdown-icon-color: var(--true-gray-400);
     --dropdown-settings-icon-color: var(--true-gray-500);
-    --dropdown-settings-active-item-bg: var(--true-gray-800);
+    --dropdown-settings-active-item-bg: var(--true-gray-950);
     --dropdown-settings-active-item-color: var(--color-primary);
-    --dropdown-settings-active-item-shadow: inset 0 0 0 1px var(--true-gray-500);
+    --dropdown-settings-active-item-shadow: inset 0 0 0 1px var(--true-gray-800);
     --datagrid-noresults-placeholder-bg: var(--true-gray-700);
     --datagrid-hidden-results-gradient-bg: var(--true-gray-700);
     --table-thead-color: var(--true-gray-200);
     --table-cell-color: var(--true-gray-300);
     --table-thead-marker-color: var(--true-gray-500);
-    --table-cell-border-color: var(--true-gray-700);
-    --table-hover-cell-bg: var(--true-gray-800);
+    --table-cell-border-color: var(--true-gray-800);
+    --table-hover-cell-bg: var(--true-gray-900);
     --table-selected-cell-bg: rgba(3, 102, 214, 0.25);
     --table-thead-sorted-color: var(--color-primary);
     --table-thead-sorted-marker-color: var(--color-primary);
@@ -455,16 +455,16 @@
     --modal-footer-bg: var(--true-gray-700);
     --modal-title-color: var(--true-gray-400);
     --pagination-disabled-color: var(--true-gray-600);
-    --detail-label-tooltip-underline-color: var(--true-gray-400);
+    --detail-label-tooltip-underline-color: var(--true-gray-500);
     --form-label-color: var(--true-gray-300);
-    --form-control-bg: var(--true-gray-700);
-    --form-control-disabled-bg: var(--true-gray-800);
-    --form-control-disabled-color: #939393;
-    --form-input-border-color: var(--true-gray-600);
+    --form-control-bg: var(--true-gray-900);
+    --form-control-disabled-bg: var(--true-gray-900);
+    --form-control-disabled-color: var(--true-gray-500);
+    --form-input-border-color: var(--true-gray-700);
     --form-input-error-border-color: var(--red-500);
-    --form-input-hover-border-color: var(--true-gray-400);
-    --form-input-shadow: 0 1px 2px 0 var(--true-gray-800);
-    --form-input-hover-shadow: 0 0 0 4px var(--true-gray-800);
+    --form-input-hover-border-color: var(--true-gray-500);
+    --form-input-shadow: none;
+    --form-input-hover-shadow: none;
     --form-input-error-shadow: 0 0 0 3px var(--red-900);
     --form-input-text-color: var(--true-gray-200);
     --form-input-group-text-bg: var(--true-gray-800);
@@ -509,11 +509,11 @@
     --form-column-icon-color: var(--true-gray-400);
     --form-fieldset-header-color: var(--true-gray-300);
     --form-fieldset-help-color: var(--true-gray-500);
-    --form-fieldset-border-color: var(--true-gray-600);
+    --form-fieldset-border-color: var(--true-gray-700);
     --form-fieldset-header-border-color: var(--true-gray-600);
-    --form-fieldset-icon-color: var(--true-gray-500);
-    --form-fieldset-collapse-marker-color: var(--true-gray-400);
-    --form-collection-item-collapse-marker-color: var(--true-gray-400);
+    --form-fieldset-icon-color: var(--true-gray-400);
+    --form-fieldset-collapse-marker-color: var(--true-gray-500);
+    --form-collection-item-collapse-marker-color: var(--true-gray-500);
     --badge-box-shadow: inset 0 0 0 1px rgba(245, 245, 245, 0.3);
     --badge-boolean-false-bg: rgba(245, 245, 245, 0.1);
     --badge-boolean-false-box-shadow: inset 0 0 0 1px rgba(245, 245, 245, 0.3);
@@ -575,49 +575,19 @@
     --button-color: var(--true-gray-200);
     --button-hover-color: var(--true-gray-100);
     --button-active-color: var(--true-gray-100);
-    --button-border-color: var(--true-gray-700);
+    --button-border-color: var(--true-gray-600);
     --button-hover-border-color: var(--true-gray-600);
-    --button-shadow:
-        /* border */
-        0 0 0 1px var(--true-gray-700),
-        /* drop shadow md (--true-gray-900) */
-        0 1px 1px 0 hsla(0, 0%, 9%, 0.5),
-        /* drop shadow lg (--true-gray-700) */
-        0 2px 5px 0 hsla(0, 0%, 25%, 0.5);
-    --button-hover-shadow:
-        /* border */
-        0 0 0 1px var(--true-gray-800),
-        /* drop shadow md (--true-gray-900) */
-        0 1px 1px 0 hsla(0, 0%, 9%, 0.5),
-        /* drop shadow lg (--true-gray-800) */
-        0 2px 5px 0 hsla(0, 0%, 15%, 0.5),
-        /* drop shadow xl (--true-gray-800) */
-        0 3px 9px 0 hsla(0, 0%, 15%, 0.5);
-    --button-active-shadow:
-        /* border */
-        0 0 0 1px var(--true-gray-900),
-        /* ring */
-        0 0 0 4px var(--true-gray-800),
-        /* drop shadow md (--true-gray-900) */
-        0 1px 1px 0 hsla(0, 0%, 9%, 0.9),
-        /* drop shadow lg (--true-gray-800) */
-        0 2px 5px 0 hsla(0, 0%, 15%, 0.9),
-        /* drop shadow xl (--true-gray-800) */
-        0 3px 9px 0 hsla(0, 0%, 15%, 0.9);
+    --button-shadow: 0 0 0 1px var(--true-gray-700);
+    --button-hover-shadow: 0 0 0 1px var(--true-gray-500);
+    --button-active-shadow: 0 0 0 1px var(--true-gray-600);
     --button-active-primary-shadow:
         /* border */
         0 0 0 1px var(--true-gray-700),
         /* ring */
-        0 0 0 4px var(--blue-700),
-        /* drop shadow md (--true-gray-900) */
-        0 1px 1px 0 hsla(0, 0%, 9%, 0.9),
-        /* drop shadow lg (--true-gray-800) */
-        0 2px 5px 0 hsla(0, 0%, 15%, 0.9),
-        /* drop shadow xl (--true-gray-800) */
-        0 3px 9px 0 hsla(0, 0%, 15%, 0.9);
+        0 0 0 4px var(--blue-600);
     --button-primary-bg: var(--blue-600);
     --button-primary-color: var(--text-on-primary);
-    --button-secondary-bg: var(--true-gray-600);
+    --button-secondary-bg: var(--true-gray-800);
     --button-secondary-color: var(--button-color);
     --button-info-bg: var(--color-info);
     --button-info-color: var(--white);
@@ -667,7 +637,7 @@
     --highlight-bg: rgba(210, 153, 34, 0.4);
 
     --text-on-primary: var(--white);
-    --text-muted: var(--true-gray-400);
+    --text-muted: var(--true-gray-500);
 
     --link-color: var(--blue-400);
     --link-hover-color: var(--blue-300);

src/Resources/public/entrypoints.json

@@ -2,8 +2,8 @@
   "entrypoints": {
     "app": {
       "css": [
-        "/app.4e1a054b.css",
-        "/app.4e1a054b.rtl.css"
+        "/app.8a77f38a.css",
+        "/app.8a77f38a.rtl.css"
       ],
       "js": [
         "/app.00a7b690.js"

src/Resources/public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "app.css": "app.4e1a054b.css",
-  "app.rtl.css": "app.4e1a054b.rtl.css",
+  "app.css": "app.8a77f38a.css",
+  "app.rtl.css": "app.8a77f38a.rtl.css",
   "app.js": "app.00a7b690.js",
   "form.js": "form.5e2c4e01.js",
   "page-layout.js": "page-layout.3347892e.js",

src/Resources/views/crud/detail.html.twig

@@ -128,7 +128,7 @@
                 <li class="nav-item">
                     <a class="nav-link {% if tab.getCustomOption(tab_is_active_option_name) %}active{% endif %}" href="#{{ tab.getCustomOption(tab_id_option_name) }}" id="tablist-{{ tab.getCustomOption(tab_id_option_name) }}" data-bs-toggle="tab">
                         {%- if tab.getCustomOption('icon')|default(false) -%}
-                            <i class="fa-fw {{ tab.getCustomOption('icon') }}"></i>
+                            <i class="tab-nav-item-icon fa-fw {{ tab.getCustomOption('icon') }}"></i>
                         {%- endif -%}
                         {{ tab.label|trans(domain = ea.i18n.translationDomain)|raw }}
 

src/Resources/views/crud/form_theme.html.twig

@@ -628,7 +628,7 @@
                 <li class="nav-item">
                     <a class="nav-link {% if tab.getCustomOption(tab_is_active_option_name) %}active{% endif %}" href="#{{ tab.getCustomOption(tab_id_option_name) }}" id="tablist-{{ tab.getCustomOption(tab_id_option_name) }}" data-bs-toggle="tab">
                         {%- if tab.getCustomOption('icon')|default(false) -%}
-                            <i class="fa-fw {{ tab.getCustomOption('icon') }}"></i>
+                            <i class="tab-nav-item-icon fa-fw {{ tab.getCustomOption('icon') }}"></i>
                         {%- endif -%}
                         {{ tab.label|trans(domain = ea.i18n.translationDomain)|raw }}