Doni/ModelHandle
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Get light theme parameters directly from css.

Browse Source
This commit is contained in:
kovacsv 2021-08-30 17:17:27 +02:00
parent 460cabb317
commit d0c62b36f1
1 changed files with 75 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

133
website/o3dv/js/themehandler.js
View File

@ -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);
}
}
}
}