diff --git a/README.md b/README.md
index 6ddadf0..cc215a4 100644
--- a/README.md
+++ b/README.md
@@ -50,6 +50,7 @@
 - [Getting started](#getting-started)
 - [Kubernetes Installation](docs/kubernetes.md)
 - [Configuration](docs/configuration.md)
+- [Theming](docs/theming.md)
 - [Custom services](docs/customservices.md)
 - [Tips & tricks](docs/tips-and-tricks.md)
 - [Development](docs/development.md)
diff --git a/docs/theming.md b/docs/theming.md
new file mode 100644
index 0000000..8f8d570
--- /dev/null
+++ b/docs/theming.md
@@ -0,0 +1,65 @@
+# Theming
+
+## Customization from yaml configuration file
+
+Some aspect of the theme can be customized using the yaml configuration file.
+
+```yml
+colors:
+  light:
+    highlight-primary: "#3367d6"
+    highlight-secondary: "#4285f4"
+    highlight-hover: "#5a95f5"
+    background: "#f5f5f5"
+    card-background: "#ffffff"
+    text: "#363636"
+    text-header: "#424242"
+    text-title: "#303030"
+    text-subtitle: "#424242"
+    card-shadow: rgba(0, 0, 0, 0.1)
+    link: "#3273dc"
+    link-hover: "#363636"
+    background-image: "assets/your/light/bg.png"
+  dark:
+    highlight-primary: "#3367d6"
+    highlight-secondary: "#4285f4"
+    highlight-hover: "#5a95f5"
+    background: "#131313"
+    card-background: "#2b2b2b"
+    text: "#eaeaea"
+    text-header: "#ffffff"
+    text-title: "#fafafa"
+    text-subtitle: "#f5f5f5"
+    card-shadow: rgba(0, 0, 0, 0.4)
+    link: "#3273dc"
+    link-hover: "#ffdd57"
+    background-image: "assets/your/dark/bg.png"
+```
+
+## Additional stylesheets
+
+One or more additional stylesheets can be loaded to add or override style from the current theme. Use the 'stylesheet' option in the yaml configuration file to add CSS file to be used.
+
+```yml
+stylesheet:
+   - "assets/custom.css"
+```
+
+### customization exemple
+
+#### Max width modification
+
+```css
+body #main-section .container {
+    max-width: 2000px; // adjust to your needs (eg: calc(100% - 100px), none, ...)
+}
+```
+
+#### Background gradiant
+
+```css
+#app {
+    height: 100%;
+    background: linear-gradient(90deg, #5c2483, #0095db);
+}
+```
diff --git a/src/App.vue b/src/App.vue
index e84f083..7de333f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -224,7 +224,11 @@ export default {
         `${this.config.title} | ${this.config.subtitle}`;
       if (this.config.stylesheet) {
         let stylesheet = "";
-        for (const file of this.config.stylesheet) {
+        let addtionnal_styles = this.config.stylesheet;
+        if (!Array.isArray(this.config.stylesheet)) {
+          addtionnal_styles = [addtionnal_styles];
+        }
+        for (const file of addtionnal_styles) {
           stylesheet += `@import "${file}";`;
         }
         this.createStylesheet(stylesheet);