From 5bfbb9b9d11b5fc02926c2a51b9b2c4bdc46dfd3 Mon Sep 17 00:00:00 2001 From: kovacsv Date: Wed, 1 Sep 2021 06:45:28 +0200 Subject: [PATCH] Define dark theme variable values in css. --- tools/config.json | 1 + website/embed.html | 1 + website/index.html | 1 + website/o3dv/css/core.css | 25 ---------- website/o3dv/css/themes.css | 46 ++++++++++++++++++ website/o3dv/js/themehandler.js | 85 +++++++++------------------------ 6 files changed, 71 insertions(+), 88 deletions(-) create mode 100644 website/o3dv/css/themes.css 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'); } } }