diff --git a/docs/wegue-configuration.md b/docs/wegue-configuration.md
index a00fd531..1b57d419 100644
--- a/docs/wegue-configuration.md
+++ b/docs/wegue-configuration.md
@@ -32,7 +32,7 @@ This describes the Wegue application configuration, which is modelled as JSON do
 
 ### colorTheme
 
-Wegue supports the Vuetify (light and dark) theme configuration out of the box. This property expects a json object with the same format described in the [vuetify documentation](https://vuetifyjs.com/en/features/theme/#customizing).
+Wegue supports the Vuetify (light and dark) theme configuration out of the box. This property expects a json object with the same format described in the [vuetify documentation](https://v2.vuetifyjs.com/en/features/theme/#customizing).
 
 Example:
 ```json
@@ -76,6 +76,8 @@ In addition, Wegue also supports the following "on" colors:
 | onprimary     | color over primary color   | typography/icons over primary color   |
 | onsecondary   | color over secondary color | typography/icons over secondary color |
 
+Moreover, custom colors which are not listed in the Vuetify documentation can also be defined here. Lighten and darken variants will also be generated for them like for the default ones.
+
 To simplify the theming configuration, if the "themes" property isn't configured, Wegue will fallback to the default colors in the example above. Otherwise, both the "light" and "dark" themes will be built based on the respective configured colors. The following tables specify which colors are mandatory and their respective default values.
 
 #### Light theme:
@@ -273,14 +275,14 @@ Below is an example for such a configuration object:
 
 ### legend
 
-Wegue supports rendering of layer legend images, which will be displayed in the [LayerList module](module-configuration?id=LayerList). The optional property `legend` in the main Wegue configuration provides sensible defaults to legend request parameters for all layers in the application. This can be useful e.g. for parameters like fonts, font-sizes and other common options, which you want to share between all legends. 
+Wegue supports rendering of layer legend images, which will be displayed in the [LayerList module](module-configuration?id=LayerList). The optional property `legend` in the main Wegue configuration provides sensible defaults to legend request parameters for all layers in the application. This can be useful e.g. for parameters like fonts, font-sizes and other common options, which you want to share between all legends.
 
 Supported options may be vendor specific, e.g. see [GeoServer Docs](https://docs.geoserver.org/latest/en/user/services/wms/get_legend_graphic/index.html) for the options supported for WMS layers in GeoServer.
 
 Example:
 ```json
   "legend": {
-    "transparent": true, 
+    "transparent": true,
     "width": 14,
     "height": 16,
   }
@@ -596,7 +598,7 @@ Example configurations can be found in the `app-starter/static` directory. Below
       "format": "MVT",
       "attribution": "Kindly provided by @ahocevar",
       "visible": false,
-      "opacityControl": true,  
+      "opacityControl": true,
       "style": {
         "strokeColor": "gray",
         "strokeWidth": 1,
diff --git a/src/util/ColorTheme.js b/src/util/ColorTheme.js
index 8a2c4799..8b32a124 100644
--- a/src/util/ColorTheme.js
+++ b/src/util/ColorTheme.js
@@ -112,6 +112,14 @@ const ColorThemeUtil = {
     merged.light.warning = light.warning ? light.warning : LIGHT_WARNING;
     merged.light.error = light.error ? light.error : LIGHT_ERROR;
 
+    // apply unknown / custom theme properties to light theme
+    for (const themeProp in light) {
+      const hasProp = themeProp in merged.light;
+      if (!hasProp) {
+        merged.light[themeProp] = light[themeProp];
+      }
+    }
+
     // If light theme is configured with at least the secondary color
     if (!dark || !dark.secondary) {
       // fallback to default dark theme
@@ -144,6 +152,14 @@ const ColorThemeUtil = {
     merged.dark.warning = dark.warning ? dark.warning : DARK_WARNING;
     merged.dark.error = dark.error ? dark.error : DARK_ERROR;
 
+    // apply unknown / custom theme properties to dark theme
+    for (const themeProp in dark) {
+      const hasProp = themeProp in merged.dark;
+      if (!hasProp) {
+        merged.dark[themeProp] = dark[themeProp];
+      }
+    }
+
     return merged;
   },
 
diff --git a/tests/unit/specs/components/maprecorder/MapRecorderWin.spec.js b/tests/unit/specs/components/maprecorder/MapRecorderWin.spec.js
index c5728d99..d09f49a9 100644
--- a/tests/unit/specs/components/maprecorder/MapRecorderWin.spec.js
+++ b/tests/unit/specs/components/maprecorder/MapRecorderWin.spec.js
@@ -47,7 +47,7 @@ describe('maprecorder/MapRecorderWin.vue', () => {
       expect(vm.error).to.equal(false);
       // Supported codecs under chrome.
       expect(vm.mimeType).to.equal('video/webm');
-      expect(vm.mimeTypes.length).to.equal(2);
+      expect(vm.mimeTypes.length).to.equal(3);
     });
 
     afterEach(() => {
@@ -65,9 +65,10 @@ describe('maprecorder/MapRecorderWin.vue', () => {
 
     it('correct supported mime types under chrome', () => {
       const mimeTypes = vm.getSupportedMimeTypes();
-      expect(mimeTypes.length).to.equal(2);
+      expect(mimeTypes.length).to.equal(3);
       expect(mimeTypes[0]).to.equal('video/webm');
-      expect(mimeTypes[1]).to.equal('video/x-matroska');
+      expect(mimeTypes[1]).to.equal('video/mp4');
+      expect(mimeTypes[2]).to.equal('video/x-matroska');
     });
 
     it('start / stop recording sets correct states', () => {