Add Theme documentation

Author: Julien Neuhart

docs/docs/15_Theme/1_BootstrapVue.md

@@ -0,0 +1,41 @@
+---
+title: BootstrapVue
+slug: /theme/bootstrap-vue
+---
+
+The Symfony Boilerplate uses [BootstrapVue](https://bootstrap-vue.org/) as templating framework.
+
+Of course, you may use another templating framework, although it will require some extra work.
+
+## Add Plugin
+
+Most of the components from [BootstrapVue](https://bootstrap-vue.org/) come in the form of plugins.
+
+You have to add them manually in the *src/webapp/nuxt.config.js* file:
+
+```js title="src/webapp/nuxt.config.js"
+bootstrapVue: {
+    icons: true,
+    css: false,
+    bvCSS: false,
+    componentPlugins: [
+      'LayoutPlugin',
+      // etc.
+    },
+}
+``` 
+
+## Change Colors
+
+The file *src/webapp/assets/css/_variables.scss* is where you may define most of the colors.
+
+A few other `.scss` files also contain colors definition.
+
+For the Nuxt.js loading bar, its color is configurable in the  *src/webapp/nuxt.config.js* file:
+
+```js title="src/webapp/nuxt.config.js"
+loading: {
+    color: '#a211fa',
+    height: '3px',
+},
+``` 

docs/docs/15_Theme/1_Overview.md

@@ -0,0 +1,61 @@
+---
+title: Layouts
+slug: /theme/layouts
+---
+
+The Symfony Boilerplate provides many layouts you may use to design your pages.
+
+:::note
+
+📣  A layout is a sort of wrapper or skeleton around a page.
+
+:::
+
+## Default
+
+The default layout is in use when you don't specify any layout for your page.
+
+It centralizes the content of the page in the center.
+
+![Default layout](/img/default_layout.png)
+
+## Card
+
+The card layout is for pages with a single `<b-card>`.
+
+```js title="Vue component <script> block"
+export default {
+  layout: 'card',
+}
+```
+
+![Card layout](/img/card_layout.png)
+
+## Dashboard
+
+The dashboard layout works great for back-office pages.
+
+```js title="Vue component <script> block"
+export default {
+  layout: 'dashboard',
+}
+```
+
+![Dashboard layout](/img/dashboard_layout.png)
+
+## Empty
+
+The empty layout is for pages that have a template of their own 
+(and you don't want to create a dedicated layout for them). 
+
+```js title="Vue component <script> block"
+export default {
+  layout: 'empty',
+}
+```
+
+![Empty layout](/img/empty_layout.png)
+
+## Error
+
+The error layout is not actually a layout, but a special page for errors. It uses the empty layout.