Define dark theme variable values in css.

tools/config.json

@@ -92,6 +92,7 @@
 	],
 	"website_files_css" : [
 		"website/o3dv/css/icons.css",
+		"website/o3dv/css/themes.css",
 		"website/o3dv/css/core.css",
 		"website/o3dv/css/controls.css",
 		"website/o3dv/css/dialogs.css",

website/embed.html

@@ -81,6 +81,7 @@
 	
 	<!-- website start -->
 	<link rel="stylesheet" type="text/css" href="o3dv/css/icons.css">
+	<link rel="stylesheet" type="text/css" href="o3dv/css/themes.css">
 	<link rel="stylesheet" type="text/css" href="o3dv/css/core.css">
 	<link rel="stylesheet" type="text/css" href="o3dv/css/controls.css">
 	<link rel="stylesheet" type="text/css" href="o3dv/css/dialogs.css">

website/index.html

@@ -81,6 +81,7 @@
 	
 	<!-- website start -->
 	<link rel="stylesheet" type="text/css" href="o3dv/css/icons.css">
+	<link rel="stylesheet" type="text/css" href="o3dv/css/themes.css">
 	<link rel="stylesheet" type="text/css" href="o3dv/css/core.css">
 	<link rel="stylesheet" type="text/css" href="o3dv/css/controls.css">
 	<link rel="stylesheet" type="text/css" href="o3dv/css/dialogs.css">

website/o3dv/css/core.css

@@ -1,28 +1,3 @@
-:root
-{
-    --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;
-}
-
 @font-face
 {
 	font-family: Quicksand;

website/o3dv/css/themes.css

@@ -0,0 +1,46 @@
+:root
+{
+    --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;
+
+    --ov_foreground_color_dark: #fafafa;
+    --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;	
+}

website/o3dv/js/themehandler.js

@@ -1,75 +1,34 @@
 OV.ThemeHandler = class {
     constructor () {
         this.css = {
-            '--ov_foreground_color': {
+            '--ov_foreground_color': {},
-                'dark' : '#fafafa'
+            '--ov_background_color': {},
-            },
+            '--ov_button_color': {},
-            '--ov_background_color': {
+            '--ov_button_hover_color': {},
-                'dark' : '#2a2b2e',
+            '--ov_button_text_color': {},
-            },
+            '--ov_outline_button_color': {},
-            '--ov_button_color': {
+            '--ov_outline_button_hover_color': {},
-                'dark' : '#3393bd',
+            '--ov_outline_button_text_color': {},
-            },
+            '--ov_icon_color': {},
-            '--ov_button_hover_color': {
+            '--ov_hover_color': {},
-                'dark' : '#146a8f',
+            '--ov_light_icon_color': {},
-            },
+            '--ov_logo_text_color': {},
-            '--ov_button_text_color': {
+            '--ov_logo_border_color': {},
-                'dark' : '#ffffff',
+            '--ov_toolbar_background_color': {},
-            },
+            '--ov_toolbar_selected_color': {},
-            '--ov_outline_button_color': {
+            '--ov_toolbar_separator_color': {},
-                'dark' : '#c9e5f8',
+            '--ov_treeview_selected_color': {},
-            },
+            '--ov_dialog_foreground_color': {},
-            '--ov_outline_button_hover_color': {
+            '--ov_dialog_background_color': {},
-                'dark' : '#2a2b2e',
+            '--ov_border_color': {},
-            },
+            '--ov_shadow': {}
-            '--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);
+                this.css[property].dark = style.getPropertyValue (property + '_dark');
             }
         }
     }