diff --git a/website/o3dv/js/themehandler.js b/website/o3dv/js/themehandler.js
index f9461a8..535abed 100644
--- a/website/o3dv/js/themehandler.js
+++ b/website/o3dv/js/themehandler.js
@@ -1,71 +1,88 @@
 OV.ThemeHandler = class {
     constructor () {
-        this.themes = {
-            // TODO: this should be filled from the css
-            'light' : {
-                'css' : {
-                    '--ov_foreground_color': '#000000',
-                    '--ov_background_color': '#ffffff',
-                    '--ov_button_color': '#3393bd',
-                    '--ov_button_hover_color': '#146a8f',
-                    '--ov_button_text_color': '#ffffff',
-                    '--ov_outline_button_color': '#3393bd',
-                    '--ov_outline_button_hover_color': '#c9e5f8',
-                    '--ov_outline_button_text_color': '#3393bd',
-                    '--ov_icon_color': '#263238',
-                    '--ov_hover_color': '#c9e5f8',
-                    '--ov_light_icon_color': '#838383',
-                    '--ov_logo_text_color': '#15334a',
-                    '--ov_logo_border_color': '#000000',                
-                    '--ov_toolbar_background_color': '#f5f5f5',
-                    '--ov_toolbar_selected_color': '#e1e1e1',
-                    '--ov_toolbar_separator_color': '#cccccc',
-                    '--ov_treeview_selected_color': '#eeeeee',
-                    '--ov_dialog_foreground_color': '#000000',
-                    '--ov_dialog_background_color': '#ffffff',
-                    '--ov_border_color': '#dddddd',
-                    '--ov_shadow': '0px 0px 10px #cccccc'
-                }
+        this.css = {
+            '--ov_foreground_color': {
+                'dark' : '#fafafa'
             },
-            'dark' : {
-                'css' : {
-                    '--ov_foreground_color': '#fafafa',
-                    '--ov_background_color': '#2a2b2e',
-                    '--ov_button_color': '#3393bd',
-                    '--ov_button_hover_color': '#146a8f',
-                    '--ov_button_text_color': '#ffffff',
-                    '--ov_outline_button_color': '#c9e5f8',
-                    '--ov_outline_button_hover_color': '#2a2b2e',
-                    '--ov_outline_button_text_color': '#c9e5f8',
-                    '--ov_icon_color': '#fafafa',
-                    '--ov_hover_color': '#667c86',
-                    '--ov_light_icon_color': '#dadada',
-                    '--ov_logo_text_color': '#fafafa',
-                    '--ov_logo_border_color': '#2a2b2e',                
-                    '--ov_toolbar_background_color': '#3d3e42',
-                    '--ov_toolbar_selected_color': '#272727',
-                    '--ov_toolbar_separator_color': '#888888',
-                    '--ov_treeview_selected_color': '#38393d',
-                    '--ov_dialog_foreground_color': '#fafafa',
-                    '--ov_dialog_background_color': '#333333',
-                    '--ov_border_color': '#444444',
-                    '--ov_shadow': '0px 0px 10px #111111'
-                }
+            '--ov_background_color': {
+                'dark' : '#2a2b2e',
+            },
+            '--ov_button_color': {
+                'dark' : '#3393bd',
+            },
+            '--ov_button_hover_color': {
+                'dark' : '#146a8f',
+            },
+            '--ov_button_text_color': {
+                'dark' : '#ffffff',
+            },
+            '--ov_outline_button_color': {
+                'dark' : '#c9e5f8',
+            },
+            '--ov_outline_button_hover_color': {
+                'dark' : '#2a2b2e',
+            },
+            '--ov_outline_button_text_color': {
+                'dark' : '#c9e5f8',
+            },
+            '--ov_icon_color': {
+                'dark' : '#fafafa',
+            },
+            '--ov_hover_color': {
+                'dark' : '#667c86',
+            },
+            '--ov_light_icon_color': {
+                'dark' : '#dadada',
+            },
+            '--ov_logo_text_color': {
+                'dark' : '#fafafa',
+            },
+            '--ov_logo_border_color': {
+                'dark' : '#2a2b2e',                
+            },
+            '--ov_toolbar_background_color': {
+                'dark' : '#3d3e42',
+            },
+            '--ov_toolbar_selected_color': {
+                'dark' : '#272727',
+            },
+            '--ov_toolbar_separator_color': {
+                'dark' : '#888888',
+            },
+            '--ov_treeview_selected_color': {
+                'dark' : '#38393d',
+            },
+            '--ov_dialog_foreground_color': {
+                'dark' : '#fafafa',
+            },
+            '--ov_dialog_background_color': {
+                'dark' : '#333333',
+            },
+            '--ov_border_color': {
+                'dark' : '#444444',
+            },
+            '--ov_shadow': {
+                'dark' : '0px 0px 10px #111111'
             }
         };
+        let root = document.querySelector (':root');
+        let style = window.getComputedStyle (root);
+        for (let property in this.css) {
+            if (Object.prototype.hasOwnProperty.call (this.css, property)) {
+                this.css[property].light = style.getPropertyValue (property);
+            }
+        }
     }
 
     SwitchTheme (name)
     {
-        let theme = this.themes[name];
-        if (theme === undefined) {
-            return;
-        }
-
         let root = document.querySelector (':root');
-        for (let property in theme.css) {
-            if (Object.prototype.hasOwnProperty.call (theme.css, property)) {
-                root.style.setProperty (property, theme.css[property]);
+        for (let property in this.css) {
+            if (Object.prototype.hasOwnProperty.call (this.css, property)) {
+                let value = this.css[property][name];
+                if (value !== undefined) {
+                    root.style.setProperty (property, value);
+                }
             }
         }
     }