From d5d955f4e9fb6251adaf446351270c756d794c29 Mon Sep 17 00:00:00 2001 From: Mumfrey Date: Wed, 10 Nov 2021 23:21:45 +0000 Subject: [PATCH] Dark theme and high contrast theme support --- app/css/themes/dark.css | 243 ++++++++++++++++++++++++++++++++ app/css/themes/hicontrast.css | 251 ++++++++++++++++++++++++++++++++++ app/index.html | 13 ++ app/js/theme.js | 151 ++++++++++++++++++++ app/js/viewer-ruler.js | 16 +-- app/js/viewer.js | 24 ++-- app/lib/3dview/3dview.js | 24 ++-- 7 files changed, 690 insertions(+), 32 deletions(-) create mode 100644 app/css/themes/dark.css create mode 100644 app/css/themes/hicontrast.css create mode 100644 app/js/theme.js diff --git a/app/css/themes/dark.css b/app/css/themes/dark.css new file mode 100644 index 0000000..770b0dd --- /dev/null +++ b/app/css/themes/dark.css @@ -0,0 +1,243 @@ +body.theme_dark, .theme_dark div.window, .theme_dark .card, .theme_dark #splash { + background: #333; + color: #FFF; +} + +.theme_dark .ribbon-menu .content-holder { + background: #444; +} + +.theme_dark .ribbon-menu .tabs-holder, .theme_dark .ribbon-menu .content-holder .section { + border-color: #666; +} + +.theme_dark .ribbon-menu .tabs-holder li { + background: #222; + color: #DDD; +} + +.theme_dark .ribbon-menu .tabs-holder li:hover { + border-color: #222; +} + +.theme_dark .ribbon-menu .tabs-holder .active { + background: #444; + border-color: #666; + color: #FFF; +} + +.theme_dark .ribbon-button, .theme_dark .ribbon-button-dropdown, .theme_dark .ribbon-icon-button, .theme_dark .ribbon-tool-button { + background-color: #444; + color: #DDD; +} + +.theme_dark .ribbon-menu .content-holder .group+.group, .theme_dark .ribbon-menu .content-holder .group .title { + border-color: #555; +} + +.theme_dark .dialog.dark, .theme_dark .dialog { + background: #333; + color: #FFF; + border-color: #666; +} + +.theme_dark .dialog.dark .dialog-title, .theme_dark .dialog .dialog-title { + background: #CCC; + color: #000; +} + +.theme_dark .dialog-actions { + border-color: #666; +} + +.theme_dark .button.light, .theme_dark .command-button.light, .theme_dark .image-button.light, .theme_dark .info-button.light, .theme_dark .input .button.light, .theme_dark .notify.light, .theme_dark .select .button.light, .theme_dark .shortcut.light, .theme_dark .spinner .button.light, .theme_dark .split-button .split.light, .theme_dark .tag-input .button.light, .theme_dark .tally.light, .theme_dark .toast.light, .theme_dark .tool-button.light, .theme_dark code.light, .theme_dark tbody td.light, .theme_dark tbody tr.light, +.theme_dark .dro { + background-color: #555; + border-color: #999; +} + +.theme_dark .button.light:hover, .theme_dark .command-button.light:hover, .theme_dark .image-button.light:hover, .theme_dark .info-button.light:hover, .theme_dark .input .button.light:hover, .theme_dark .notify.light:hover, .theme_dark .select .button.light:hover, .theme_dark .shortcut.light:hover, .theme_dark .spinner .button.light:hover, .theme_dark .split-button .split.light:hover, .theme_dark .tag-input .button.light:hover, .theme_dark .tally.light:hover, .theme_dark .toast.light:hover, .theme_dark .tool-button.light:hover, .theme_dark code.light:hover, .theme_dark tbody td.light:hover, .theme_dark tbody tr.light:hover { + background-color: #333; +} + +.theme_dark .button.disabled, .theme_dark .button:disabled, .theme_dark .command-button.disabled, .theme_dark .command-button:disabled, .theme_dark .image-button.disabled, .theme_dark .image-button:disabled, .theme_dark .shortcut.disabled, .theme_dark .shortcut:disabled, .theme_dark .split-button .split.disabled, .theme_dark .split-button .split:disabled, .theme_dark .tool-button.disabled, .theme_dark .tool-button:disabled { + opacity: 1; +} + +.theme_dark .file, .theme_dark .input, .theme_dark .select, .theme_dark .spinner, .theme_dark .tag-input, .theme_dark .textarea, .theme_dark input[type=datetime-local], .theme_dark input[type=email], .theme_dark input[type=file], .theme_dark input[type=month], .theme_dark input[type=number], .theme_dark input[type=password], .theme_dark input[type=search], .theme_dark input[type=tel], .theme_dark input[type=text], .theme_dark input[type=time], .theme_dark input[type=url], .theme_dark input[type=week], .theme_dark select, .theme_dark textarea { + background-color: #222; + color: #FFF; +} + +.theme_dark .file.disabled .caption, .theme_dark .file.disabled .select-input, .theme_dark .file.disabled .stars li, .theme_dark .file.disabled input, .theme_dark .file.disabled select, .theme_dark .file.disabled textarea, .theme_dark .file:disabled .caption, .theme_dark .file:disabled .select-input, .theme_dark .file:disabled .stars li, .theme_dark .file:disabled input, .theme_dark .file:disabled select, .theme_dark .file:disabled textarea, .theme_dark .input.disabled .caption, .theme_dark .input.disabled .select-input, .theme_dark .input.disabled .stars li, .theme_dark .input.disabled input, .theme_dark .input.disabled select, .theme_dark .input.disabled textarea, .theme_dark .input:disabled .caption, .theme_dark .input:disabled .select-input, .theme_dark .input:disabled .stars li, .theme_dark .input:disabled input, .theme_dark .input:disabled select, .theme_dark .input:disabled textarea, .theme_dark .rating.disabled .caption, .theme_dark .rating.disabled .select-input, .theme_dark .rating.disabled .stars li, .theme_dark .rating.disabled input, .theme_dark .rating.disabled select, .theme_dark .rating.disabled textarea, .theme_dark .rating:disabled .caption, .theme_dark .rating:disabled .select-input, .theme_dark .rating:disabled .stars li, .theme_dark .rating:disabled input, .theme_dark .rating:disabled select, .theme_dark .rating:disabled textarea, .theme_dark .select.disabled .caption, .theme_dark .select.disabled .select-input, .theme_dark .select.disabled .stars li, .theme_dark .select.disabled input, .theme_dark .select.disabled select, .theme_dark .select.disabled textarea, .theme_dark .select:disabled .caption, .theme_dark .select:disabled .select-input, .theme_dark .select:disabled .stars li, .theme_dark .select:disabled input, .theme_dark .select:disabled select, .theme_dark .select:disabled textarea, .theme_dark .spinner.disabled .caption, .theme_dark .spinner.disabled .select-input, .theme_dark .spinner.disabled .stars li, .theme_dark .spinner.disabled input, .theme_dark .spinner.disabled select, .theme_dark .spinner.disabled textarea, .theme_dark .spinner:disabled .caption, .theme_dark .spinner:disabled .select-input, .theme_dark .spinner:disabled .stars li, .theme_dark .spinner:disabled input, .theme_dark .spinner:disabled select, .theme_dark .spinner:disabled textarea, .theme_dark .tag-input.disabled .caption, .theme_dark .tag-input.disabled .select-input, .theme_dark .tag-input.disabled .stars li, .theme_dark .tag-input.disabled input, .theme_dark .tag-input.disabled select, .theme_dark .tag-input.disabled textarea, .theme_dark .tag-input:disabled .caption, .theme_dark .tag-input:disabled .select-input, .theme_dark .tag-input:disabled .stars li, .theme_dark .tag-input:disabled input, .theme_dark .tag-input:disabled select, .theme_dark .tag-input:disabled textarea, .theme_dark .textarea.disabled .caption, .theme_dark .textarea.disabled .select-input, .theme_dark .textarea.disabled .stars li, .theme_dark .textarea.disabled input, .theme_dark .textarea.disabled select, .theme_dark .textarea.disabled textarea, .theme_dark .textarea:disabled .caption, .theme_dark .textarea:disabled .select-input, .theme_dark .textarea:disabled .stars li, .theme_dark .textarea:disabled input, .theme_dark .textarea:disabled select, .theme_dark .textarea:disabled textarea { + background-color: #222; + color: #666; +} + +.theme_dark .file.disabled, .theme_dark .file:disabled, .theme_dark .input.disabled, .theme_dark .input:disabled, .theme_dark .select.disabled, .theme_dark .select:disabled, .theme_dark .spinner.disabled, .theme_dark .spinner:disabled, .theme_dark .tag-input.disabled, .theme_dark .tag-input:disabled, .theme_dark .textarea.disabled, .theme_dark .textarea:disabled, .theme_dark input[type=datetime-local].disabled, .theme_dark input[type=datetime-local]:disabled, .theme_dark input[type=email].disabled, .theme_dark input[type=email]:disabled, .theme_dark input[type=file].disabled, .theme_dark input[type=file]:disabled, .theme_dark input[type=month].disabled, .theme_dark input[type=month]:disabled, .theme_dark input[type=number].disabled, .theme_dark input[type=number]:disabled, .theme_dark input[type=password].disabled, .theme_dark input[type=password]:disabled, .theme_dark input[type=search].disabled, .theme_dark input[type=search]:disabled, .theme_dark input[type=tel].disabled, .theme_dark input[type=tel]:disabled, .theme_dark input[type=text].disabled, .theme_dark input[type=text]:disabled, .theme_dark input[type=time].disabled, .theme_dark input[type=time]:disabled, .theme_dark input[type=url].disabled, .theme_dark input[type=url]:disabled, .theme_dark input[type=week].disabled, .theme_dark input[type=week]:disabled, .theme_dark select.disabled, .theme_dark select:disabled, .theme_dark textarea.disabled, .theme_dark textarea:disabled { + background: #222; +} + +.theme_dark .input .prepend, .theme_dark .select .prepend, .theme_dark .input .append { + background: #99999922; + color: #FFF; +} + +.theme_dark .d-menu, .theme_dark .v-menu, .theme_dark .ribbon-dropdown { + background: #222; + color: #FFF; + border: 1px solid #999; +} + +.theme_dark #command { + font-family: consolas; +} + +.theme_dark .bg-openbuilds { + background-color: #666 !important; +} + +.theme_dark .fg-openbuilds { + color: #DDD !important; +} + +.theme_dark .fg-red, .theme_dark #console p.pf span.fg-darkRed { + color: #f65 !important; +} + +.theme_dark #console p.pf span.fg-darkGreen { + color: #091 !important; +} + +.theme_dark .fg-green { + color: #3f6 !important; +} + +.theme_dark .fg-blue { + color: #36f !important; +} + +.theme_dark #console, .theme_dark #editor, .theme_dark #renderArea, .theme_dark #macros { + background-color: #222; + box-shadow: none; + border: 1px solid #999; +} + +.theme_dark #console > p:hover { + background-color: #444; +} + +.theme_dark #console p.pf span.fg-dark { + color: #FFF !important; +} + +.theme_dark #macros { + background-color: #222; +} + +.theme_dark .table .tfoot .td, .theme_dark .table .tfoot .th, .theme_dark .table .tfoot td, .theme_dark .table .tfoot th, .theme_dark .table .thead .td, .theme_dark .table .thead .th, .theme_dark .table .thead td, .theme_dark .table .thead th, .theme_dark .table tfoot .td, .theme_dark .table tfoot .th, .theme_dark .table tfoot td, .theme_dark .table tfoot th, .theme_dark .table thead .td, .theme_dark .table thead .th, .theme_dark .table thead td, .theme_dark .table thead th { + color: #DDD; +} + +.theme_dark .alt-header>.small, .theme_dark .alt-header>small, .theme_dark .h1>.small, .theme_dark .h1>small, .theme_dark .h2>.small, .theme_dark .h2>small, .theme_dark .h3>.small, .theme_dark .h3>small, .theme_dark .h4>.small, .theme_dark .h4>small, .theme_dark .h5>.small, .theme_dark .h5>small, .theme_dark .h6>.small, .theme_dark .h6>small, .theme_dark .header>.small, .theme_dark .header>small, .theme_dark .leader>.small, .theme_dark .leader>small, .theme_dark .sub-alt-header>.small, .theme_dark .sub-alt-header>small, .theme_dark .sub-header>.small, .theme_dark .sub-header>small, .theme_dark .sub-leader>.small, .theme_dark .sub-leader>small, .theme_dark h1>.small, .theme_dark h1>small, .theme_dark h2>.small, .theme_dark h2>small, .theme_dark h3>.small, .theme_dark h3>small, .theme_dark h4>.small, .theme_dark h4>small, .theme_dark h5>.small, .theme_dark h5>small, .theme_dark h6>.small, .theme_dark h6>small { + color: #FFF; +} + +.theme_dark .table.striped .tbody .tr:nth-child(odd), .theme_dark .table.striped tbody tr:nth-child(odd), +.theme_dark .table.row-hover .tbody .tr:nth-child(odd):hover, .theme_dark .table.row-hover .tbody tr:nth-child(odd):hover, .theme_dark .table.row-hover tbody .tr:nth-child(odd):hover, .theme_dark .table.row-hover tbody tr:nth-child(odd):hover { + background-color: #444; +} + +.theme_dark .table.row-hover .tbody .tr:hover, .theme_dark .table.row-hover .tbody tr:hover, .theme_dark .table.row-hover tbody .tr:hover, .theme_dark .table.row-hover tbody tr:hover { + background-color: unset; +} + +.theme_dark .switch .check, .theme_dark .switch .check::after { + border-color: #DDD !important; +} + +.theme_dark .switch .check::after { + color: #DDD !important; + background-color: #DDD !important; +} + +.theme_dark .action-button, .theme_dark .button, .theme_dark .flat-button { + background-color: #666; + border-color: #999; + color: #FFF; +} + +.theme_dark .bd-openbuilds { + border-color: #999 !important; +} + +.theme_dark .button.primary, .theme_dark .command-button.primary, .theme_dark .image-button.primary, .theme_dark .info-button.primary, .theme_dark .input .button.primary, .theme_dark .notify.primary, .theme_dark .select .button.primary, .theme_dark .shortcut.primary, .theme_dark .spinner .button.primary, .theme_dark .split-button .split.primary, .theme_dark .tag-input .button.primary, .theme_dark .tally.primary, .theme_dark .toast.primary, .theme_dark .tool-button.primary, .theme_dark code.primary, .theme_dark tbody td.primary, .theme_dark tbody tr.primary { + border-color: #36F; + background-color: #04A; +} + +.theme_dark .button.secondary, .theme_dark .command-button.secondary, .theme_dark .image-button.secondary, .theme_dark .info-button.secondary, .theme_dark .input .button.secondary, .theme_dark .notify.secondary, .theme_dark .select .button.secondary, .theme_dark .shortcut.secondary, .theme_dark .spinner .button.secondary, .theme_dark .split-button .split.secondary, .theme_dark .tag-input .button.secondary, .theme_dark .tally.secondary, .theme_dark .toast.secondary, .theme_dark .tool-button.secondary, .theme_dark code.secondary, .theme_dark tbody td.secondary, .theme_dark tbody tr.secondary { + border-color: #0F0; +} + +.theme_dark .button.success, .theme_dark .command-button.success, .theme_dark .image-button.success, .theme_dark .info-button.success, .theme_dark .input .button.success, .theme_dark .notify.success, .theme_dark .select .button.success, .theme_dark .shortcut.success, .theme_dark .spinner .button.success, .theme_dark .split-button .split.success, .theme_dark .tag-input .button.success, .theme_dark .tally.success, .theme_dark .toast.success, .theme_dark .tool-button.success, .theme_dark code.success, .theme_dark tbody td.success, .theme_dark tbody tr.success { + border-color: #3f6; + background-color: #073; +} + +.theme_dark .button.alert, .theme_dark .command-button.alert, .theme_dark .image-button.alert, .theme_dark .info-button.alert, .theme_dark .input .button.alert, .theme_dark .notify.alert, .theme_dark .select .button.alert, .theme_dark .shortcut.alert, .theme_dark .spinner .button.alert, .theme_dark .split-button .split.alert, .theme_dark .tag-input .button.alert, .theme_dark .tally.alert, .theme_dark .toast.alert, .theme_dark .tool-button.alert, .theme_dark code.alert, .theme_dark tbody td.alert, .theme_dark tbody tr.alert { + border-color: #F65; + background-color: #A43; +} + +.theme_dark .button.outline, .theme_dark .command-button.outline, .theme_dark .image-button.outline, .theme_dark .shortcut.outline, .theme_dark .split-button .split.outline, .theme_dark .tool-button.outline { + color: #FFF; +} + +.theme_dark .button.primary.outline, .theme_dark .command-button.primary.outline, .theme_dark .image-button.primary.outline, .theme_dark .info-button.primary.outline, .theme_dark .input .button.primary.outline, .theme_dark .notify.primary.outline, .theme_dark .select .button.primary.outline, .theme_dark .shortcut.primary.outline, .theme_dark .spinner .button.primary.outline, .theme_dark .split-button .split.primary.outline, .theme_dark .tag-input .button.primary.outline, .theme_dark .tally.primary.outline, .theme_dark .toast.primary.outline, .theme_dark .tool-button.primary.outline, .theme_dark code.primary.outline, .theme_dark tbody td.primary.outline, .theme_dark tbody tr.primary.outline { + border-color: #36F; +} + +.theme_dark .button.secondary.outline, .theme_dark .command-button.secondary.outline, .theme_dark .image-button.secondary.outline, .theme_dark .info-button.secondary.outline, .theme_dark .input .button.secondary.outline, .theme_dark .notify.secondary.outline, .theme_dark .select .button.secondary.outline, .theme_dark .shortcut.secondary.outline, .theme_dark .spinner .button.secondary.outline, .theme_dark .split-button .split.secondary.outline, .theme_dark .tag-input .button.secondary.outline, .theme_dark .tally.secondary.outline, .theme_dark .toast.secondary.outline, .theme_dark .tool-button.secondary.outline, .theme_dark code.secondary.outline, .theme_dark tbody td.secondary.outline, .theme_dark tbody tr.secondary.outline { + color: #DDD; +} + +.theme_dark .button.success.outline, .theme_dark .command-button.success.outline, .theme_dark .image-button.success.outline, .theme_dark .info-button.success.outline, .theme_dark .input .button.success.outline, .theme_dark .notify.success.outline, .theme_dark .select .button.success.outline, .theme_dark .shortcut.success.outline, .theme_dark .spinner .button.success.outline, .theme_dark .split-button .split.success.outline, .theme_dark .tag-input .button.success.outline, .theme_dark .tally.success.outline, .theme_dark .toast.success.outline, .theme_dark .tool-button.success.outline, .theme_dark code.success.outline, .theme_dark tbody td.success.outline, .theme_dark tbody tr.success.outline { + border-color: #3f6; +} + +.theme_dark .button.alert.outline, .theme_dark .command-button.alert.outline, .theme_dark .image-button.alert.outline, .theme_dark .info-button.alert.outline, .theme_dark .input .button.alert.outline, .theme_dark .notify.alert.outline, .theme_dark .select .button.alert.outline, .theme_dark .shortcut.alert.outline, .theme_dark .spinner .button.alert.outline, .theme_dark .split-button .split.alert.outline, .theme_dark .tag-input .button.alert.outline, .theme_dark .tally.alert.outline, .theme_dark .toast.alert.outline, .theme_dark .tool-button.alert.outline, .theme_dark code.alert.outline, .theme_dark tbody td.alert.outline, .theme_dark tbody tr.alert.outline { + border-color: #F65; +} + +.theme_dark .button.outline, .theme_dark .command-button.outline, .theme_dark .image-button.outline, .theme_dark .shortcut.outline, .theme_dark .split-button .split.outline, .theme_dark .tool-button.outline { + color: #DDD; +} + +.theme_dark .command-button .icon, .theme_dark .image-button .icon { + color: #FFF; +} + +.theme_dark .ace_scroller { + background-color: #222 !important; +} + +.theme_dark .ace-sqlserver .ace_gutter { + background-color: #222 !important; + color: #FFF !important; +} + +.theme_dark .ace-sqlserver .ace_gutter-active-line { + background-color: #444 !important; +} + +.theme_dark .ace-sqlserver .ace_marker-layer .ace_active-line { + background: #1D1D1D !important; +} + +.theme_dark .ace-sqlserver .ace_string { color: #FFF !important; } +.theme_dark .ace-sqlserver .ace_comment { color: #6F6 !important; } +.theme_dark .ace-sqlserver .ace_numeric { color: #DDD !important; } +.theme_dark .ace-sqlserver .ace_identifier { color: #0FF !important; } +.theme_dark .ace-sqlserver .ace_keyword { color: #0FF !important; } + diff --git a/app/css/themes/hicontrast.css b/app/css/themes/hicontrast.css new file mode 100644 index 0000000..70d92bf --- /dev/null +++ b/app/css/themes/hicontrast.css @@ -0,0 +1,251 @@ +body.theme_hicontrast, .theme_hicontrast div.window, .theme_hicontrast .card, .theme_hicontrast #splash { + background: #000; + color: #FFF; +} + +.theme_hicontrast .ribbon-menu .content-holder { + background: #222; +} + +.theme_hicontrast .ribbon-menu .tabs-holder, .theme_hicontrast .ribbon-menu .content-holder .section { + border-color: #FFF; +} + +.theme_hicontrast .ribbon-menu .tabs-holder li { + background: #222; + color: #0FF; + border: 1px solid #FFF; +} + +.theme_hicontrast .ribbon-menu .tabs-holder li:hover { + border-color: #0FF; +} + +.theme_hicontrast .ribbon-menu .tabs-holder .active { + background: #0FF; + border-color: #FFF; + color: #000; +} + +.theme_hicontrast .ribbon-button, .theme_hicontrast .ribbon-button-dropdown, .theme_hicontrast .ribbon-icon-button, .theme_hicontrast .ribbon-tool-button { + background-color: #222; + color: #FFF; + border: 1px solid transparent; +} + +.theme_hicontrast .ribbon-button:hover, .theme_hicontrast .ribbon-button-dropdown:hover, .theme_hicontrast .ribbon-icon-button:hover, .theme_hicontrast .ribbon-tool-button:hover { + border-color: #0FF; +} + +.theme_hicontrast .ribbon-menu .content-holder .group+.group, .theme_hicontrast .ribbon-menu .content-holder .group .title { + border-color: #FFF; + color: #0FF; +} + +.theme_hicontrast .dialog.dark, .theme_hicontrast .dialog { + background: #000; + color: #FFF; + border-color: #0FF; +} + +.theme_hicontrast .dialog.dark .dialog-title, .theme_hicontrast .dialog .dialog-title { + background: #0FF; + color: #000; +} + +.theme_hicontrast .dialog-actions { + border-color: #666; +} + +.theme_hicontrast .button.light, .theme_hicontrast .command-button.light, .theme_hicontrast .image-button.light, .theme_hicontrast .info-button.light, .theme_hicontrast .input .button.light, .theme_hicontrast .notify.light, .theme_hicontrast .select .button.light, .theme_hicontrast .shortcut.light, .theme_hicontrast .spinner .button.light, .theme_hicontrast .split-button .split.light, .theme_hicontrast .tag-input .button.light, .theme_hicontrast .tally.light, .theme_hicontrast .toast.light, .theme_hicontrast .tool-button.light, .theme_hicontrast code.light, .theme_hicontrast tbody td.light, .theme_hicontrast tbody tr.light, +.theme_hicontrast .dro { + background-color: #000; + border-color: #0FF; +} + +.theme_hicontrast .button.light:hover, .theme_hicontrast .command-button.light:hover, .theme_hicontrast .image-button.light:hover, .theme_hicontrast .info-button.light:hover, .theme_hicontrast .input .button.light:hover, .theme_hicontrast .notify.light:hover, .theme_hicontrast .select .button.light:hover, .theme_hicontrast .shortcut.light:hover, .theme_hicontrast .spinner .button.light:hover, .theme_hicontrast .split-button .split.light:hover, .theme_hicontrast .tag-input .button.light:hover, .theme_hicontrast .tally.light:hover, .theme_hicontrast .toast.light:hover, .theme_hicontrast .tool-button.light:hover, .theme_hicontrast code.light:hover, .theme_hicontrast tbody td.light:hover, .theme_hicontrast tbody tr.light:hover { + background-color: #099; +} + +.theme_hicontrast .button.disabled, .theme_hicontrast .button:disabled, .theme_hicontrast .command-button.disabled, .theme_hicontrast .command-button:disabled, .theme_hicontrast .image-button.disabled, .theme_hicontrast .image-button:disabled, .theme_hicontrast .shortcut.disabled, .theme_hicontrast .shortcut:disabled, .theme_hicontrast .split-button .split.disabled, .theme_hicontrast .split-button .split:disabled, .theme_hicontrast .tool-button.disabled, .theme_hicontrast .tool-button:disabled { + opacity: 1; +} + +.theme_hicontrast .file, .theme_hicontrast .input, .theme_hicontrast .select, .theme_hicontrast .spinner, .theme_hicontrast .tag-input, .theme_hicontrast .textarea, .theme_hicontrast input[type=datetime-local], .theme_hicontrast input[type=email], .theme_hicontrast input[type=file], .theme_hicontrast input[type=month], .theme_hicontrast input[type=number], .theme_hicontrast input[type=password], .theme_hicontrast input[type=search], .theme_hicontrast input[type=tel], .theme_hicontrast input[type=text], .theme_hicontrast input[type=time], .theme_hicontrast input[type=url], .theme_hicontrast input[type=week], .theme_hicontrast select, .theme_hicontrast textarea { + background-color: #000; + color: #FFF; + border-color: #0FF; +} + +.theme_hicontrast .file.disabled .caption, .theme_hicontrast .file.disabled .select-input, .theme_hicontrast .file.disabled .stars li, .theme_hicontrast .file.disabled input, .theme_hicontrast .file.disabled select, .theme_hicontrast .file.disabled textarea, .theme_hicontrast .file:disabled .caption, .theme_hicontrast .file:disabled .select-input, .theme_hicontrast .file:disabled .stars li, .theme_hicontrast .file:disabled input, .theme_hicontrast .file:disabled select, .theme_hicontrast .file:disabled textarea, .theme_hicontrast .input.disabled .caption, .theme_hicontrast .input.disabled .select-input, .theme_hicontrast .input.disabled .stars li, .theme_hicontrast .input.disabled input, .theme_hicontrast .input.disabled select, .theme_hicontrast .input.disabled textarea, .theme_hicontrast .input:disabled .caption, .theme_hicontrast .input:disabled .select-input, .theme_hicontrast .input:disabled .stars li, .theme_hicontrast .input:disabled input, .theme_hicontrast .input:disabled select, .theme_hicontrast .input:disabled textarea, .theme_hicontrast .rating.disabled .caption, .theme_hicontrast .rating.disabled .select-input, .theme_hicontrast .rating.disabled .stars li, .theme_hicontrast .rating.disabled input, .theme_hicontrast .rating.disabled select, .theme_hicontrast .rating.disabled textarea, .theme_hicontrast .rating:disabled .caption, .theme_hicontrast .rating:disabled .select-input, .theme_hicontrast .rating:disabled .stars li, .theme_hicontrast .rating:disabled input, .theme_hicontrast .rating:disabled select, .theme_hicontrast .rating:disabled textarea, .theme_hicontrast .select.disabled .caption, .theme_hicontrast .select.disabled .select-input, .theme_hicontrast .select.disabled .stars li, .theme_hicontrast .select.disabled input, .theme_hicontrast .select.disabled select, .theme_hicontrast .select.disabled textarea, .theme_hicontrast .select:disabled .caption, .theme_hicontrast .select:disabled .select-input, .theme_hicontrast .select:disabled .stars li, .theme_hicontrast .select:disabled input, .theme_hicontrast .select:disabled select, .theme_hicontrast .select:disabled textarea, .theme_hicontrast .spinner.disabled .caption, .theme_hicontrast .spinner.disabled .select-input, .theme_hicontrast .spinner.disabled .stars li, .theme_hicontrast .spinner.disabled input, .theme_hicontrast .spinner.disabled select, .theme_hicontrast .spinner.disabled textarea, .theme_hicontrast .spinner:disabled .caption, .theme_hicontrast .spinner:disabled .select-input, .theme_hicontrast .spinner:disabled .stars li, .theme_hicontrast .spinner:disabled input, .theme_hicontrast .spinner:disabled select, .theme_hicontrast .spinner:disabled textarea, .theme_hicontrast .tag-input.disabled .caption, .theme_hicontrast .tag-input.disabled .select-input, .theme_hicontrast .tag-input.disabled .stars li, .theme_hicontrast .tag-input.disabled input, .theme_hicontrast .tag-input.disabled select, .theme_hicontrast .tag-input.disabled textarea, .theme_hicontrast .tag-input:disabled .caption, .theme_hicontrast .tag-input:disabled .select-input, .theme_hicontrast .tag-input:disabled .stars li, .theme_hicontrast .tag-input:disabled input, .theme_hicontrast .tag-input:disabled select, .theme_hicontrast .tag-input:disabled textarea, .theme_hicontrast .textarea.disabled .caption, .theme_hicontrast .textarea.disabled .select-input, .theme_hicontrast .textarea.disabled .stars li, .theme_hicontrast .textarea.disabled input, .theme_hicontrast .textarea.disabled select, .theme_hicontrast .textarea.disabled textarea, .theme_hicontrast .textarea:disabled .caption, .theme_hicontrast .textarea:disabled .select-input, .theme_hicontrast .textarea:disabled .stars li, .theme_hicontrast .textarea:disabled input, .theme_hicontrast .textarea:disabled select, .theme_hicontrast .textarea:disabled textarea { + background-color: #000; + color: #666; +} + +.theme_hicontrast .file.disabled, .theme_hicontrast .file:disabled, .theme_hicontrast .input.disabled, .theme_hicontrast .input:disabled, .theme_hicontrast .select.disabled, .theme_hicontrast .select:disabled, .theme_hicontrast .spinner.disabled, .theme_hicontrast .spinner:disabled, .theme_hicontrast .tag-input.disabled, .theme_hicontrast .tag-input:disabled, .theme_hicontrast .textarea.disabled, .theme_hicontrast .textarea:disabled, .theme_hicontrast input[type=datetime-local].disabled, .theme_hicontrast input[type=datetime-local]:disabled, .theme_hicontrast input[type=email].disabled, .theme_hicontrast input[type=email]:disabled, .theme_hicontrast input[type=file].disabled, .theme_hicontrast input[type=file]:disabled, .theme_hicontrast input[type=month].disabled, .theme_hicontrast input[type=month]:disabled, .theme_hicontrast input[type=number].disabled, .theme_hicontrast input[type=number]:disabled, .theme_hicontrast input[type=password].disabled, .theme_hicontrast input[type=password]:disabled, .theme_hicontrast input[type=search].disabled, .theme_hicontrast input[type=search]:disabled, .theme_hicontrast input[type=tel].disabled, .theme_hicontrast input[type=tel]:disabled, .theme_hicontrast input[type=text].disabled, .theme_hicontrast input[type=text]:disabled, .theme_hicontrast input[type=time].disabled, .theme_hicontrast input[type=time]:disabled, .theme_hicontrast input[type=url].disabled, .theme_hicontrast input[type=url]:disabled, .theme_hicontrast input[type=week].disabled, .theme_hicontrast input[type=week]:disabled, .theme_hicontrast select.disabled, .theme_hicontrast select:disabled, .theme_hicontrast textarea.disabled, .theme_hicontrast textarea:disabled { + background: #000; +} + +.theme_hicontrast .input .prepend, .theme_hicontrast .select .prepend, .theme_hicontrast .input .append { + background: #99999922; + color: #FFF; +} + +.theme_hicontrast .d-menu, .theme_hicontrast .v-menu, .theme_hicontrast .ribbon-dropdown { + background: #000; + color: #FFF; + border: 1px solid #999; +} + +.theme_hicontrast #command { + font-family: consolas; +} + +.theme_hicontrast .bg-openbuilds { + background-color: #666 !important; +} + +.theme_hicontrast .fg-openbuilds { + color: #FFF !important; +} + +.theme_hicontrast .fg-red, .theme_hicontrast #console p.pf span.fg-darkRed { + color: #F60 !important; +} + +.theme_hicontrast #console p.pf span.fg-darkGreen { + color: #0FF !important; +} + +.theme_hicontrast .fg-green { + color: #0F0 !important; +} + +.theme_hicontrast .fg-blue { + color: #0FF !important; +} + +.theme_hicontrast #console, .theme_hicontrast #editor, .theme_hicontrast #renderArea, .theme_hicontrast #macros { + background-color: #000; + box-shadow: none; + border: 1px solid #999; +} + +.theme_hicontrast #console > p:hover { + background-color: #444; +} + +.theme_hicontrast #console p.pf span.fg-dark { + color: #FFF !important; +} + +.theme_hicontrast #macros { + background-color: #000; +} + +.theme_hicontrast .table .tfoot .td, .theme_hicontrast .table .tfoot .th, .theme_hicontrast .table .tfoot td, .theme_hicontrast .table .tfoot th, .theme_hicontrast .table .thead .td, .theme_hicontrast .table .thead .th, .theme_hicontrast .table .thead td, .theme_hicontrast .table .thead th, .theme_hicontrast .table tfoot .td, .theme_hicontrast .table tfoot .th, .theme_hicontrast .table tfoot td, .theme_hicontrast .table tfoot th, .theme_hicontrast .table thead .td, .theme_hicontrast .table thead .th, .theme_hicontrast .table thead td, .theme_hicontrast .table thead th { + color: #FFF; +} + +.theme_hicontrast .alt-header>.small, .theme_hicontrast .alt-header>small, .theme_hicontrast .h1>.small, .theme_hicontrast .h1>small, .theme_hicontrast .h2>.small, .theme_hicontrast .h2>small, .theme_hicontrast .h3>.small, .theme_hicontrast .h3>small, .theme_hicontrast .h4>.small, .theme_hicontrast .h4>small, .theme_hicontrast .h5>.small, .theme_hicontrast .h5>small, .theme_hicontrast .h6>.small, .theme_hicontrast .h6>small, .theme_hicontrast .header>.small, .theme_hicontrast .header>small, .theme_hicontrast .leader>.small, .theme_hicontrast .leader>small, .theme_hicontrast .sub-alt-header>.small, .theme_hicontrast .sub-alt-header>small, .theme_hicontrast .sub-header>.small, .theme_hicontrast .sub-header>small, .theme_hicontrast .sub-leader>.small, .theme_hicontrast .sub-leader>small, .theme_hicontrast h1>.small, .theme_hicontrast h1>small, .theme_hicontrast h2>.small, .theme_hicontrast h2>small, .theme_hicontrast h3>.small, .theme_hicontrast h3>small, .theme_hicontrast h4>.small, .theme_hicontrast h4>small, .theme_hicontrast h5>.small, .theme_hicontrast h5>small, .theme_hicontrast h6>.small, .theme_hicontrast h6>small { + color: #FFF; +} + +.theme_hicontrast .table.striped .tbody .tr:nth-child(odd), .theme_hicontrast .table.striped tbody tr:nth-child(odd), +.theme_hicontrast .table.row-hover .tbody .tr:nth-child(odd):hover, .theme_hicontrast .table.row-hover .tbody tr:nth-child(odd):hover, .theme_hicontrast .table.row-hover tbody .tr:nth-child(odd):hover, .theme_hicontrast .table.row-hover tbody tr:nth-child(odd):hover { + background-color: #000; + border-top: 1px dashed #999; + border-bottom: 1px dashed #999; +} + +.theme_hicontrast .table.row-hover .tbody .tr:hover, .theme_hicontrast .table.row-hover .tbody tr:hover, .theme_hicontrast .table.row-hover tbody .tr:hover, .theme_hicontrast .table.row-hover tbody tr:hover { + background-color: unset; +} + +.theme_hicontrast .table.row-border .tr+.tr, .theme_hicontrast .table.row-border tr+tr { + border-top: 1px dashed #999; + border-bottom: 1px dashed #999; +} + +.theme_hicontrast .switch .check, .theme_hicontrast .switch .check::after { + border-color: #0FF !important; +} + +.theme_hicontrast .switch .check::after { + color: #0FF !important; + background-color: #0FF !important; +} + +.theme_hicontrast .action-button, .theme_hicontrast .button, .theme_hicontrast .flat-button { + background-color: #000; + border-color: #0FF; + color: #FFF; +} + +.theme_hicontrast .bd-openbuilds { + border-color: #FFF !important; +} + +.theme_hicontrast .button.primary, .theme_hicontrast .command-button.primary, .theme_hicontrast .image-button.primary, .theme_hicontrast .info-button.primary, .theme_hicontrast .input .button.primary, .theme_hicontrast .notify.primary, .theme_hicontrast .select .button.primary, .theme_hicontrast .shortcut.primary, .theme_hicontrast .spinner .button.primary, .theme_hicontrast .split-button .split.primary, .theme_hicontrast .tag-input .button.primary, .theme_hicontrast .tally.primary, .theme_hicontrast .toast.primary, .theme_hicontrast .tool-button.primary, .theme_hicontrast code.primary, .theme_hicontrast tbody td.primary, .theme_hicontrast tbody tr.primary { + border-color: #09F; +} + +.theme_hicontrast .button.secondary, .theme_hicontrast .command-button.secondary, .theme_hicontrast .image-button.secondary, .theme_hicontrast .info-button.secondary, .theme_hicontrast .input .button.secondary, .theme_hicontrast .notify.secondary, .theme_hicontrast .select .button.secondary, .theme_hicontrast .shortcut.secondary, .theme_hicontrast .spinner .button.secondary, .theme_hicontrast .split-button .split.secondary, .theme_hicontrast .tag-input .button.secondary, .theme_hicontrast .tally.secondary, .theme_hicontrast .toast.secondary, .theme_hicontrast .tool-button.secondary, .theme_hicontrast code.secondary, .theme_hicontrast tbody td.secondary, .theme_hicontrast tbody tr.secondary { + border-color: #0F0; +} + +.theme_hicontrast .button.success, .theme_hicontrast .command-button.success, .theme_hicontrast .image-button.success, .theme_hicontrast .info-button.success, .theme_hicontrast .input .button.success, .theme_hicontrast .notify.success, .theme_hicontrast .select .button.success, .theme_hicontrast .shortcut.success, .theme_hicontrast .spinner .button.success, .theme_hicontrast .split-button .split.success, .theme_hicontrast .tag-input .button.success, .theme_hicontrast .tally.success, .theme_hicontrast .toast.success, .theme_hicontrast .tool-button.success, .theme_hicontrast code.success, .theme_hicontrast tbody td.success, .theme_hicontrast tbody tr.success { + border-color: #0F0; +} + +.theme_hicontrast .button.alert, .theme_hicontrast .command-button.alert, .theme_hicontrast .image-button.alert, .theme_hicontrast .info-button.alert, .theme_hicontrast .input .button.alert, .theme_hicontrast .notify.alert, .theme_hicontrast .select .button.alert, .theme_hicontrast .shortcut.alert, .theme_hicontrast .spinner .button.alert, .theme_hicontrast .split-button .split.alert, .theme_hicontrast .tag-input .button.alert, .theme_hicontrast .tally.alert, .theme_hicontrast .toast.alert, .theme_hicontrast .tool-button.alert, .theme_hicontrast code.alert, .theme_hicontrast tbody td.alert, .theme_hicontrast tbody tr.alert { + border-color: #F60; +} + +.theme_hicontrast .button.outline, .theme_hicontrast .command-button.outline, .theme_hicontrast .image-button.outline, .theme_hicontrast .shortcut.outline, .theme_hicontrast .split-button .split.outline, .theme_hicontrast .tool-button.outline { + color: #FFF; +} + +.theme_hicontrast .button.primary.outline, .theme_hicontrast .command-button.primary.outline, .theme_hicontrast .image-button.primary.outline, .theme_hicontrast .info-button.primary.outline, .theme_hicontrast .input .button.primary.outline, .theme_hicontrast .notify.primary.outline, .theme_hicontrast .select .button.primary.outline, .theme_hicontrast .shortcut.primary.outline, .theme_hicontrast .spinner .button.primary.outline, .theme_hicontrast .split-button .split.primary.outline, .theme_hicontrast .tag-input .button.primary.outline, .theme_hicontrast .tally.primary.outline, .theme_hicontrast .toast.primary.outline, .theme_hicontrast .tool-button.primary.outline, .theme_hicontrast code.primary.outline, .theme_hicontrast tbody td.primary.outline, .theme_hicontrast tbody tr.primary.outline { + border-color: #09F; +} + +.theme_hicontrast .button.secondary.outline, .theme_hicontrast .command-button.secondary.outline, .theme_hicontrast .image-button.secondary.outline, .theme_hicontrast .info-button.secondary.outline, .theme_hicontrast .input .button.secondary.outline, .theme_hicontrast .notify.secondary.outline, .theme_hicontrast .select .button.secondary.outline, .theme_hicontrast .shortcut.secondary.outline, .theme_hicontrast .spinner .button.secondary.outline, .theme_hicontrast .split-button .split.secondary.outline, .theme_hicontrast .tag-input .button.secondary.outline, .theme_hicontrast .tally.secondary.outline, .theme_hicontrast .toast.secondary.outline, .theme_hicontrast .tool-button.secondary.outline, .theme_hicontrast code.secondary.outline, .theme_hicontrast tbody td.secondary.outline, .theme_hicontrast tbody tr.secondary.outline { + color: #FFF; +} + +.theme_hicontrast .button.success.outline, .theme_hicontrast .command-button.success.outline, .theme_hicontrast .image-button.success.outline, .theme_hicontrast .info-button.success.outline, .theme_hicontrast .input .button.success.outline, .theme_hicontrast .notify.success.outline, .theme_hicontrast .select .button.success.outline, .theme_hicontrast .shortcut.success.outline, .theme_hicontrast .spinner .button.success.outline, .theme_hicontrast .split-button .split.success.outline, .theme_hicontrast .tag-input .button.success.outline, .theme_hicontrast .tally.success.outline, .theme_hicontrast .toast.success.outline, .theme_hicontrast .tool-button.success.outline, .theme_hicontrast code.success.outline, .theme_hicontrast tbody td.success.outline, .theme_hicontrast tbody tr.success.outline { + border-color: #0F0; +} + +.theme_hicontrast .button.alert.outline, .theme_hicontrast .command-button.alert.outline, .theme_hicontrast .image-button.alert.outline, .theme_hicontrast .info-button.alert.outline, .theme_hicontrast .input .button.alert.outline, .theme_hicontrast .notify.alert.outline, .theme_hicontrast .select .button.alert.outline, .theme_hicontrast .shortcut.alert.outline, .theme_hicontrast .spinner .button.alert.outline, .theme_hicontrast .split-button .split.alert.outline, .theme_hicontrast .tag-input .button.alert.outline, .theme_hicontrast .tally.alert.outline, .theme_hicontrast .toast.alert.outline, .theme_hicontrast .tool-button.alert.outline, .theme_hicontrast code.alert.outline, .theme_hicontrast tbody td.alert.outline, .theme_hicontrast tbody tr.alert.outline { + border-color: #F60; +} + +.theme_hicontrast .command-button .icon, .theme_hicontrast .image-button .icon { + color: #FFF; +} + +.theme_hicontrast .ace_scroller { + background-color: #000 !important; +} + +.theme_hicontrast .ace-sqlserver .ace_gutter { + background-color: #000 !important; + color: #FFF !important; +} + +.theme_hicontrast .ace-sqlserver .ace_gutter-active-line { + background-color: #444 !important; +} + +.theme_hicontrast .ace-sqlserver .ace_marker-layer .ace_active-line { + background: #1D1D1D !important; +} + +.theme_hicontrast .ace-sqlserver .ace_string { color: #FFF !important; } +.theme_hicontrast .ace-sqlserver .ace_comment { color: #0F0 !important; } +.theme_hicontrast .ace-sqlserver .ace_numeric { color: #FFF !important; } +.theme_hicontrast .ace-sqlserver .ace_identifier { color: #0FF !important; } +.theme_hicontrast .ace-sqlserver .ace_keyword { color: #0FF !important; } + diff --git a/app/index.html b/app/index.html index 3c33c44..e4cacc7 100644 --- a/app/index.html +++ b/app/index.html @@ -432,6 +432,18 @@
  • Disable Serial Log
  • Disable DRO/Status Updates
    • + Settings
    @@ -1756,6 +1768,7 @@ + diff --git a/app/js/theme.js b/app/js/theme.js new file mode 100644 index 0000000..dbf365c --- /dev/null +++ b/app/js/theme.js @@ -0,0 +1,151 @@ +let ThemeData = { + THEMES: { + "light": { + DESCRIPTION: 'Light Theme (Default)', + ICON: 'lightbulb', + SPRITE_OPACITY: 0.6, + SKY_TOP_COLOR: 0x0077ff, + SKY_BOTTOM_COLOR: 0xffffff, + HEMI_LIGHT_COLOR: { 'H': 0.6, 'S': 1.0, 'L': 0.6 }, + GRID_STEP_10_COLOR: 0x888888, + GRID_STEP_10_OPACITY: 0.15, + GRID_STEP_100_COLOR: 0x666666, + GRID_STEP_100_OPACITY: 0.15, + RULER_COLOR: 0x888888, + RULER_OPACITY: 0.15, + X_RULER_NUMBER_COLOR: "#cc0000", + X_RULER_LABEL_COLOR: "#ff0000", + X_AXIS_LINE_COLOR: 0xcc0000, + Y_RULER_NUMBER_COLOR: "#006600", + Y_RULER_LABEL_COLOR: "#006600", + Y_AXIS_LINE_COLOR: 0x00cc00, + LINE_COLOURS: [ + { 'R': 0, 'G': 200, 'B': 0}, + { 'R': 200, 'G': 0, 'B': 0}, + { 'R': 0, 'G': 0, 'B': 200}, + { 'R': 200, 'G': 0, 'B': 200} + ] + }, + "dark": { + DESCRIPTION: 'Dark Theme', + ICON: 'moon', + SPRITE_OPACITY: 0.8, + SKY_TOP_COLOR: 0x333333, + SKY_BOTTOM_COLOR: 0x222222, + HEMI_LIGHT_COLOR: { 'H': 0.6, 'S': 0.0, 'L': 0.1 }, + GRID_STEP_10_COLOR: 0xFFFFFF, + GRID_STEP_10_OPACITY: 0.15, + GRID_STEP_100_COLOR: 0xFFFFFF, + GRID_STEP_100_OPACITY: 0.15, + RULER_COLOR: 0xFFFFFF, + RULER_OPACITY: 0.30, + X_RULER_NUMBER_COLOR: "#ffaa00", + X_RULER_LABEL_COLOR: "#ffaa00", + X_AXIS_LINE_COLOR: 0xFFaa00, + Y_RULER_NUMBER_COLOR: "#00ff00", + Y_RULER_LABEL_COLOR: "#00ff00", + Y_AXIS_LINE_COLOR: 0x66FF66, + LINE_COLOURS: [ + { 'R': 0, 'G': 255, 'B': 0}, + { 'R': 255, 'G': 80, 'B': 0}, + { 'R': 0, 'G': 0, 'B': 255}, + { 'R': 255, 'G': 0, 'B': 255} + ] + }, + "hicontrast": { + DESCRIPTION: 'High Contrast Theme', + ICON: 'dot-circle', + SPRITE_OPACITY: 1.0, + SKY_TOP_COLOR: 0x000000, + SKY_BOTTOM_COLOR: 0x000000, + HEMI_LIGHT_COLOR: { 'H': 0.6, 'S': 0.0, 'L': 0.0 }, + GRID_STEP_10_COLOR: 0xFFFFFF, + GRID_STEP_10_OPACITY: 0.15, + GRID_STEP_100_COLOR: 0xFFFFFF, + GRID_STEP_100_OPACITY: 0.15, + RULER_COLOR: 0xFFFFFF, + RULER_OPACITY: 1.0, + X_RULER_NUMBER_COLOR: "#ffff00", + X_RULER_LABEL_COLOR: "#ffff00", + X_AXIS_LINE_COLOR: 0xFFFF00, + Y_RULER_NUMBER_COLOR: "#00ffff", + Y_RULER_LABEL_COLOR: "#00ffff", + Y_AXIS_LINE_COLOR: 0x00FFFF, + LINE_COLOURS: [ + { 'R': 0, 'G': 255, 'B': 0}, + { 'R': 255, 'G': 255, 'B': 0}, + { 'R': 0, 'G': 255, 'B': 255}, + { 'R': 255, 'G': 0, 'B': 255} + ] + } + }, + + currentThemeId: "light", + + init: function init() { + let themeId = localStorage.getItem('themeId'); + if (themeId && ThemeData.THEMES[themeId]) { + ThemeData.currentThemeId = themeId; + for (let key in ThemeData.THEMES) { + $("body").removeClass('theme_' + key); + }; + $("body").addClass('theme_' + themeId); + } else { + localStorage.setItem("themeId", ThemeData.currentThemeId); + } + + $('.theme_btn').removeClass("checked"); + $('.theme_btn_' + themeId).addClass("checked"); + }, + + getColor: function getColor(key) { + return ThemeData.THEMES[ThemeData.currentThemeId][key]; + }, + + get: function get() { + return ThemeData.currentThemeId; + }, + + set: function set(themeId) { + if (themeId && ThemeData.THEMES[themeId]) { + localStorage.setItem("themeId", themeId); + ThemeData.init(); + + // Update the 3D view (mostly, gcode movements will keep old colours until gcode is reloaded) + pauseAnimation = true; + while (scene.children.length > 0) { + scene.remove(scene.children[0]) + } + drawWorkspace(xmin, sizexmax, ymin, sizeymax); + clearSceneFlag = true; + pauseAnimation = false; + } + } +}; + +const Theme = new Proxy(ThemeData, { + get: function(theme, key) { + if (key == "getColor") { + return ThemeData.getColor; + } else if (key == "lines") { + return theme.getColor("LINE_COLOURS"); + } else if (key == "get") { + return theme.get; + } else if (key == "set") { + return theme.set; + } + return theme.getColor(key); + } +}); +ThemeData.init(); + +$(document).ready(function() { + for (let themeId in ThemeData.THEMES) { + let theme = ThemeData.THEMES[themeId]; + let menuItem = $('
  • ' + theme.DESCRIPTION + '
    • '); + $("#ddThemeButton").show(); + $("#ddTheme").append($(menuItem).addClass(['theme_btn','theme_btn_' + themeId]).click(() => Theme.set(themeId))); + $('head').append(''); + } + ThemeData.init(); +}); diff --git a/app/js/viewer-ruler.js b/app/js/viewer-ruler.js index 4dd7c2c..5c9fce0 100644 --- a/app/js/viewer-ruler.js +++ b/app/js/viewer-ruler.js @@ -7,10 +7,10 @@ function drawRuler(xmin, xmax, ymin, ymax) { // console.log(xmin, xmax, ymin, ymax) var ruler = new THREE.Group(); var material = new THREE.LineBasicMaterial({ - color: 0x888888 + color: Theme.RULER_COLOR }); - material.opacity = 0.15; + material.opacity = Theme.RULER_OPACITY; // x axis for (i = xmin; i <= xmax; i++) { @@ -94,7 +94,7 @@ function drawRuler(xmin, xmax, ymin, ymax) { y: spacing, z: 0, text: i + unitsval, - color: "#cc0000", + color: Theme.X_RULER_NUMBER_COLOR, size: fontsize }); ruler.add(x[i]); @@ -110,7 +110,7 @@ function drawRuler(xmin, xmax, ymin, ymax) { y: i, z: 0, text: i + unitsval, - color: "#006600", + color: Theme.Y_RULER_NUMBER_COLOR, size: fontsize }); ruler.add(y[i]); @@ -143,10 +143,10 @@ function drawRulerInches(xmin, xmax, ymin, ymax) { var ruler = new THREE.Group(); var material = new THREE.LineBasicMaterial({ - color: 0x888888 + color: Theme.RULER_COLOR }); - material.opacity = 0.15; + material.opacity = Theme.RULER_OPACITY; // x axis for (i = xmin; i <= xmax; i++) { @@ -236,7 +236,7 @@ function drawRulerInches(xmin, xmax, ymin, ymax) { y: spacing, z: 0, text: i + unitsval, - color: "#cc0000", + color: Theme.X_RULER_NUMBER_COLOR, size: fontsize / 2.54 }); ruler.add(x[i]); @@ -250,7 +250,7 @@ function drawRulerInches(xmin, xmax, ymin, ymax) { y: i * 25.4, z: 0, text: i + unitsval, - color: "#006600", + color: Theme.Y_RULER_NUMBER_COLOR, size: fontsize / 2.54 }); ruler.add(y[i]); diff --git a/app/js/viewer.js b/app/js/viewer.js index ce72531..14257e3 100644 --- a/app/js/viewer.js +++ b/app/js/viewer.js @@ -79,7 +79,7 @@ function drawWorkspace(xmin, xmax, ymin, ymax) { sceneLights.add(dirLight); hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.6); - hemiLight.color.setHSL(0.6, 1, 0.6); + hemiLight.color.setHSL(Theme.HEMI_LIGHT_COLOR.H, Theme.HEMI_LIGHT_COLOR.S, Theme.HEMI_LIGHT_COLOR.L); hemiLight.groundColor.setHSL(0.095, 1, 0.75); hemiLight.position.set(0, 50, 0); hemiLight.visible = false; @@ -97,10 +97,10 @@ function drawWorkspace(xmin, xmax, ymin, ymax) { if (!disable3Dskybox) { var uniforms = { topColor: { - value: new THREE.Color(0x0077ff) + value: new THREE.Color(Theme.SKY_TOP_COLOR) }, bottomColor: { - value: new THREE.Color(0xffffff) + value: new THREE.Color(Theme.SKY_BOTTOM_COLOR) }, offset: { value: -63 @@ -205,7 +205,7 @@ function redrawGrid(xmin, xmax, ymin, ymax, inches) { y: 0, z: 0, text: "X", - color: "#ff0000", + color: Theme.X_RULER_LABEL_COLOR, size: size }); var ylbl = this.makeSprite(this.scene, "webgl", { @@ -213,7 +213,7 @@ function redrawGrid(xmin, xmax, ymin, ymax, inches) { y: parseInt(ymax) + offset, z: 0, text: "Y", - color: "#006600", + color: Theme.Y_RULER_LABEL_COLOR, size: size }); @@ -222,11 +222,11 @@ function redrawGrid(xmin, xmax, ymin, ymax, inches) { axesgrp.add(ylbl); var materialX = new THREE.LineBasicMaterial({ - color: 0xcc0000 + color: Theme.X_AXIS_LINE_COLOR }); var materialY = new THREE.LineBasicMaterial({ - color: 0x00cc00 + color: Theme.Y_AXIS_LINE_COLOR }); var geometryX = new THREE.Geometry(); @@ -258,20 +258,20 @@ function redrawGrid(xmin, xmax, ymin, ymax, inches) { step10 = 2.54; step100 = 25.4; } - helper = new THREE.GridHelper(xmin, xmax, ymin, ymax, step10, 0x888888); + helper = new THREE.GridHelper(xmin, xmax, ymin, ymax, step10, Theme.GRID_STEP_10_COLOR); helper.position.y = 0; helper.position.x = 0; helper.position.z = 0; - helper.material.opacity = 0.15; + helper.material.opacity = Theme.GRID_STEP_10_OPACITY; helper.material.transparent = true; helper.receiveShadow = false; helper.name = "GridHelper10mm" grid.add(helper); - helper = new THREE.GridHelper(xmin, xmax, ymin, ymax, step100, 0x666666); + helper = new THREE.GridHelper(xmin, xmax, ymin, ymax, step100, Theme.GRID_STEP_100_COLOR); helper.position.y = 0; helper.position.x = 0; helper.position.z = 0; - helper.material.opacity = 0.15; + helper.material.opacity = Theme.GRID_STEP_100_OPACITY; helper.material.transparent = true; helper.receiveShadow = false; helper.name = "GridHelper50mm" @@ -509,7 +509,7 @@ function makeSprite(scene, rendererType, vals) { map: texture, // useScreenCoordinates: false, transparent: true, - opacity: 0.6 + opacity: Theme.SPRITE_OPACITY }); material.transparent = true; //var textObject = new THREE.Sprite(material); diff --git a/app/lib/3dview/3dview.js b/app/lib/3dview/3dview.js index 1ae3b01..d267645 100644 --- a/app/lib/3dview/3dview.js +++ b/app/lib/3dview/3dview.js @@ -35,21 +35,21 @@ function convertParsedDataToObject(jsonData) { positions.push(x, y, z); if (parsedData.linePoints[i].g == 0) { - colors.push(0); - colors.push(200); - colors.push(0); + colors.push(Theme.lines[0].R); + colors.push(Theme.lines[0].G); + colors.push(Theme.lines[0].B); } else if (parsedData.linePoints[i].g == 1) { - colors.push(200); - colors.push(0); - colors.push(0); + colors.push(Theme.lines[1].R); + colors.push(Theme.lines[1].G); + colors.push(Theme.lines[1].B); } else if (parsedData.linePoints[i].g == 2) { - colors.push(0); - colors.push(0); - colors.push(200); + colors.push(Theme.lines[2].R); + colors.push(Theme.lines[2].G); + colors.push(Theme.lines[2].B); } else { - colors.push(200); - colors.push(0); - colors.push(200); + colors.push(Theme.lines[3].R); + colors.push(Theme.lines[3].G); + colors.push(Theme.lines[3].B); } }