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

Define dark theme variable values in css.

Browse Source
This commit is contained in:
kovacsv 2021-09-01 06:45:28 +02:00
parent d0c62b36f1
commit 5bfbb9b9d1
6 changed files with 71 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
tools/config.json
View File

@ -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",

1
website/embed.html
View File

@ -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">

1
website/index.html
View File

@ -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">

25
website/o3dv/css/core.css
View File

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

46
website/o3dv/css/themes.css Normal file
View File

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

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

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