feature #213 Added the new "color_scheme" option (javiereguiluz)

This PR was squashed before being merged into the master branch (closes #213).

Discussion
----------

Added the new "color_scheme" option

Two important things:

  * The default EasyAdmin design has been slightly changed. The reason is that the previous design wasn't neutral. If you choosed any main color different from the default orange one, the design didn't look good. Now the overwall design uses neutral gray shades, so any color that you may pick looks nice. (I'll update the screenshots of the documentation soon)
  * Don't look much at the new `admin.css.twig` stylesheet because I still need to optimize and clean it.

Commits
-------

011e1bd Added the new "color_scheme" option

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'));

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

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

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

Resources/views/_list_paginator.html.twig

@@ -7,7 +7,7 @@
             </div>
 
             <div class="col-xs-12 col-sm-10">
-                <ul class="pagination list-pagination-paginator">
+                <ul class="pagination list-pagination-paginator {{ 1 == paginator.currentPage ? 'first-page' : '' }} {{ paginator.hasNextPage ? '' : 'last-page' }}">
                     {% if 1 == paginator.currentPage %}
                         <li class="disabled">
                             <span>