diff --git a/tools/config.json b/tools/config.json
index 8dad291..10633d2 100644
--- a/tools/config.json
+++ b/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",
diff --git a/website/embed.html b/website/embed.html
index 6157feb..ddfc194 100644
--- a/website/embed.html
+++ b/website/embed.html
@@ -81,6 +81,7 @@
+
diff --git a/website/index.html b/website/index.html
index bf55e19..b6aca20 100644
--- a/website/index.html
+++ b/website/index.html
@@ -81,6 +81,7 @@
+
diff --git a/website/o3dv/css/core.css b/website/o3dv/css/core.css
index d004bf0..57ff0e3 100644
--- a/website/o3dv/css/core.css
+++ b/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;
diff --git a/website/o3dv/css/themes.css b/website/o3dv/css/themes.css
new file mode 100644
index 0000000..ea9c825
--- /dev/null
+++ b/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;
+}
diff --git a/website/o3dv/js/themehandler.js b/website/o3dv/js/themehandler.js
index 535abed..9dd2546 100644
--- a/website/o3dv/js/themehandler.js
+++ b/website/o3dv/js/themehandler.js
@@ -1,75 +1,34 @@
OV.ThemeHandler = class {
constructor () {
this.css = {
- '--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'
- }
+ '--ov_foreground_color': {},
+ '--ov_background_color': {},
+ '--ov_button_color': {},
+ '--ov_button_hover_color': {},
+ '--ov_button_text_color': {},
+ '--ov_outline_button_color': {},
+ '--ov_outline_button_hover_color': {},
+ '--ov_outline_button_text_color': {},
+ '--ov_icon_color': {},
+ '--ov_hover_color': {},
+ '--ov_light_icon_color': {},
+ '--ov_logo_text_color': {},
+ '--ov_logo_border_color': {},
+ '--ov_toolbar_background_color': {},
+ '--ov_toolbar_selected_color': {},
+ '--ov_toolbar_separator_color': {},
+ '--ov_treeview_selected_color': {},
+ '--ov_dialog_foreground_color': {},
+ '--ov_dialog_background_color': {},
+ '--ov_border_color': {},
+ '--ov_shadow': {}
};
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');
}
}
}