diff --git a/Controller/AdminController.php b/Controller/AdminController.php
index 4d2257ca93..d3a18a9013 100644
--- a/Controller/AdminController.php
+++ b/Controller/AdminController.php
@@ -540,6 +540,7 @@ public function renderCssAction(Request $request)
{
$cssContent = $this->renderView('@EasyAdmin/css/admin.css.twig', array(
'brand_color' => $request->query->get('brand_color'),
+ 'color_scheme' => $request->query->get('color_scheme'),
));
$response = new Response($cssContent, Response::HTTP_OK, array('Content-Type' => 'text/css'));
diff --git a/DependencyInjection/Configuration.php b/DependencyInjection/Configuration.php
index b41298d0fb..b828eace13 100644
--- a/DependencyInjection/Configuration.php
+++ b/DependencyInjection/Configuration.php
@@ -208,10 +208,17 @@ private function addDesignSection(ArrayNodeDefinition $rootNode)
->end()
->end()
+ ->enumNode('color_scheme')
+ ->values(array('dark', 'light'))
+ ->info('The color scheme applied to the backend design (values: "dark" or "light").')
+ ->defaultValue('dark')
+ ->treatNullLike('dark')
+ ->end()
+
->scalarNode('brand_color')
->info('The color used in the backend design to highlight important elements.')
- ->defaultValue('#D47843')
- ->treatNullLike('#D47843')
+ ->defaultValue('#E67E22')
+ ->treatNullLike('#E67E22')
->validate()
// if present, remove the trailing ';' to avoid CSS issues
->ifTrue(function ($v) { return ';' === substr(trim($v), -1); })
diff --git a/Resources/doc/10-customizing-design.md b/Resources/doc/10-customizing-design.md
index dfdc975f59..597609c612 100644
--- a/Resources/doc/10-customizing-design.md
+++ b/Resources/doc/10-customizing-design.md
@@ -26,6 +26,67 @@ easy_admin:
# ...
```
+Customizing the Main Backend Color
+----------------------------------
+
+The default backend visual design uses a dark orange shade as the main color.
+Use the `brand_color` design option to change it:
+
+```yaml
+easy_admin:
+ design:
+ # this backend uses turquoise as its main color
+ brand_color: '#1ABC9C'
+ # ...
+```
+
+This simple configuration option allows you to easily match the backend design
+to your project identity:
+
+![Using a custom brand color in the backend](images/easyadmin-design-brand-color.png)
+
+The value of the `brand_color` option is directly passed to the `color` and
+`background-color` CSS properties, so you can define the color using any valid
+CSS format:
+
+```yaml
+easy_admin:
+ design:
+ brand_color: 'rgb(26, 188, 156)'
+ # ...
+```
+
+This flexibility allows you to use semi-transparent colors:
+
+```yaml
+easy_admin:
+ design:
+ brand_color: 'rgba(26, 188, 156, 0.85)'
+ # ...
+```
+
+Selecting the Color Scheme
+--------------------------
+
+The default theme provides two different color schemes: `dark` and `light`. The
+`dark` scheme is the default one because it's the most common alternative when
+designing backends. The `light` scheme is a cleaner and much more white design
+alternative:
+
+```yaml
+easy_admin:
+ design:
+ color_scheme: 'light'
+ # ...
+```
+
+![The default backend homepage using the light color scheme](images/easyadmin-design-color-scheme-light.png)
+
+Combine the `light` color scheme with the `brand_color` option to get a myriad
+of new backend designs:
+
+![Combining the light color scheme with a colorful palette](images/easyadmin-design-brand-color-light-theme.png)
+
Customizing Form Design
-----------------------
@@ -110,44 +171,6 @@ easy_admin:
# ...
```
-Customizing Backend Colors
---------------------------
-
-The default backend visual design uses a dark orange shade as the accent color.
-Use the `brand_color` design option to change this accent color:
-
-```yaml
-easy_admin:
- design:
- brand_color: '#1ABC9C'
- # ...
-```
-
-Applying the above configuration, the backend will now display a beautiful
-turquoise shade:
-
-![Using a custom brand color in the backend](images/easyadmin-design-brand-color.png)
-
-The value of the `brand_color` option is directly passed to the `color` and
-`background-color` CSS properties, so you can define the color using any valid
-CSS format:
-
-```yaml
-easy_admin:
- design:
- brand_color: 'rgb(26, 188, 156)'
- # ...
-```
-
-This flexibility allows you to use semi-transparent colors:
-
-```yaml
-easy_admin:
- design:
- brand_color: 'rgba(26, 188, 156, 0.85)'
- # ...
-```
-
Adding Custom Web Assets
------------------------
diff --git a/Resources/doc/2-first-backend.md b/Resources/doc/2-first-backend.md
index 4f009e58a2..2363fc85f1 100644
--- a/Resources/doc/2-first-backend.md
+++ b/Resources/doc/2-first-backend.md
@@ -22,7 +22,7 @@ easy_admin:
Browse the `/admin` URL in your Symfony application and you'll get access to
the admin backend:
-![Default listing interface](images/easyadmin-customer-listing.png)
+![Default listing interface](images/easyadmin-list-view.png)
Creating a backend is that simple because EasyAdmin doesn't generate any code,
not even for the templates. All resources are served on-the-fly to ensure an
diff --git a/Resources/doc/images/easyadmin-customer-listing.png b/Resources/doc/images/easyadmin-customer-listing.png
deleted file mode 100644
index 1c0633c63d..0000000000
Binary files a/Resources/doc/images/easyadmin-customer-listing.png and /dev/null differ
diff --git a/Resources/doc/images/easyadmin-design-brand-color-light-theme.png b/Resources/doc/images/easyadmin-design-brand-color-light-theme.png
new file mode 100644
index 0000000000..bd2520ff62
Binary files /dev/null and b/Resources/doc/images/easyadmin-design-brand-color-light-theme.png differ
diff --git a/Resources/doc/images/easyadmin-design-brand-color.png b/Resources/doc/images/easyadmin-design-brand-color.png
index ee680a36b8..5433a0646f 100644
Binary files a/Resources/doc/images/easyadmin-design-brand-color.png and b/Resources/doc/images/easyadmin-design-brand-color.png differ
diff --git a/Resources/doc/images/easyadmin-design-color-scheme-light.png b/Resources/doc/images/easyadmin-design-color-scheme-light.png
new file mode 100644
index 0000000000..ea346a353f
Binary files /dev/null and b/Resources/doc/images/easyadmin-design-color-scheme-light.png differ
diff --git a/Resources/doc/images/easyadmin-edit-view.png b/Resources/doc/images/easyadmin-edit-view.png
index 45498caf83..6ad19ead4c 100644
Binary files a/Resources/doc/images/easyadmin-edit-view.png and b/Resources/doc/images/easyadmin-edit-view.png differ
diff --git a/Resources/doc/images/easyadmin-form-horizontal.png b/Resources/doc/images/easyadmin-form-horizontal.png
index 261f98982b..5de2683e73 100644
Binary files a/Resources/doc/images/easyadmin-form-horizontal.png and b/Resources/doc/images/easyadmin-form-horizontal.png differ
diff --git a/Resources/doc/images/easyadmin-form-multi-column.png b/Resources/doc/images/easyadmin-form-multi-column.png
index 07f0bac297..d2fbaeb200 100644
Binary files a/Resources/doc/images/easyadmin-form-multi-column.png and b/Resources/doc/images/easyadmin-form-multi-column.png differ
diff --git a/Resources/doc/images/easyadmin-form-vertical.png b/Resources/doc/images/easyadmin-form-vertical.png
index 43868f773f..7e5a2e84ba 100644
Binary files a/Resources/doc/images/easyadmin-form-vertical.png and b/Resources/doc/images/easyadmin-form-vertical.png differ
diff --git a/Resources/doc/images/easyadmin-list-view-actions.png b/Resources/doc/images/easyadmin-list-view-actions.png
index 926f249db6..9d16661d69 100644
Binary files a/Resources/doc/images/easyadmin-list-view-actions.png and b/Resources/doc/images/easyadmin-list-view-actions.png differ
diff --git a/Resources/doc/images/easyadmin-list-view.png b/Resources/doc/images/easyadmin-list-view.png
index 9872eeed84..04165be395 100644
Binary files a/Resources/doc/images/easyadmin-list-view.png and b/Resources/doc/images/easyadmin-list-view.png differ
diff --git a/Resources/doc/images/easyadmin-search-view.png b/Resources/doc/images/easyadmin-search-view.png
index 90099e2598..d68e514f49 100644
Binary files a/Resources/doc/images/easyadmin-search-view.png and b/Resources/doc/images/easyadmin-search-view.png differ
diff --git a/Resources/doc/images/easyadmin-show-view.png b/Resources/doc/images/easyadmin-show-view.png
index 2dded03920..dbbedbe0c9 100644
Binary files a/Resources/doc/images/easyadmin-show-view.png and b/Resources/doc/images/easyadmin-show-view.png differ
diff --git a/Resources/views/_list_paginator.html.twig b/Resources/views/_list_paginator.html.twig
index 4e19ceb41a..3e50002cf5 100644
--- a/Resources/views/_list_paginator.html.twig
+++ b/Resources/views/_list_paginator.html.twig
@@ -7,7 +7,7 @@
+ Open your app/config/config.yml file and add the following
+ configuration, replacing the name of the displayed entities by
+ your own application entities:
+
-
-
-
-
Configuration error
-
- Your backend is empty because you haven't configured
- any Doctrine entity to manage.
-
-
-
How to fix this problem
-
-
- Open your app/config/config.yml file and add the following
- configuration, replacing the name of the displayed entities by
- your own application entities:
-