diff --git a/html/app.css b/html/app.css index d5a74843..f76369b6 100644 --- a/html/app.css +++ b/html/app.css @@ -75,12 +75,12 @@ For a copy, see . } ::-webkit-scrollbar-track { - background: rgba(0, 0, 0, 0.1); + background: rgba(0, 0, 0, 0.05); border-radius: 16px; } ::-webkit-scrollbar-thumb { - background: rgba(0, 0, 0, 0.25); + background: rgba(0, 0, 0, 0.2); border-radius: 16px; } @@ -89,6 +89,10 @@ body, input, textarea, select, button { line-height: normal; } +a { + color: #409eff; +} + .x-link { cursor: pointer; } @@ -155,8 +159,8 @@ body, input, textarea, select, button { content: ''; right: 4px; top: 4px; - width: 6px; - height: 6px; + width: 4px; + height: 4px; background: #EBEEF5; border-radius: 50% } diff --git a/html/app.dark.css b/html/app.dark.css new file mode 100644 index 00000000..24fc1b44 --- /dev/null +++ b/html/app.dark.css @@ -0,0 +1,325 @@ +@charset "utf-8"; +/* +Copyright(c) 2019-2020 pypy and individual contributors. +All rights reserved. + +This work is licensed under the terms of the MIT license. +For a copy, see . +*/ + +::-webkit-scrollbar-track { + background: rgba(255, 255, 255, 0.05); + border-radius: 16px; +} + +::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.2); + border-radius: 16px; +} + +.el-loading-mask { + background-color: rgba(0, 0, 0, 0.6); +} + +.el-input__inner { + background-color: #444444; + border: #333333; +} + +.el-table td, .el-table th.is-leaf { + background-color: #292929; + border-bottom: 1px solid #5f5f5f; +} + +.el-table--border::after, .el-table--group::after, .el-table::before { + background-color: #5f5f5f; +} + +.el-table--striped .el-table__body tr.el-table__row--striped td { + background-color: #202020; +} + +.el-table--enable-row-hover .el-table__body tr:hover>td { + background-color: #323232; +} + +.el-pagination .btn-next, .el-pagination .btn-prev { + background-color: #333333; + color: #bbbbbb; +} + +.el-pagination button:disabled { + background-color: #333333; + color: #101010; +} + +.el-dialog, .el-pager li { + background-color: #333333; +} + +.el-pager li { + color: #bbbbbb; +} + +.el-table { + color: #ffffff; +} + +.el-pagination__total { + color: #bbbbbb; +} + +.el-tag--plain.el-tag--info { + background-color: #333333; +} + +.el-tag--plain.el-tag--success { + background-color: #333333; +} + +.el-tag--plain.el-tag--success { + background-color: #333333; +} + +.el-button { + color: #c5cad6; +} + +.el-button:not(.el-button--text) { + background-color: #353535; + border-color: #404040; +} + +.el-button:not(.el-button--text):focus, .el-button:not(.el-button--text):hover { + color: #000000; + border-color: #656565; + background-color: #737373; +} + +.el-tabs__item { + color: #c2c4ca; +} + +.el-tabs--card>.el-tabs__header { + border-bottom-color: #5f5f5f; +} + +.el-dropdown-menu { + background-color: #353535; + border-color: #404040; +} + +.el-dropdown-menu__item--divided:before { + background-color: #404040; +} + +.el-dropdown-menu__item { + color: #d4d4d4; +} + +.el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover { + background-color: #444444; + color: #66b1ff; +} + +.el-popper[x-placement^=bottom] .popper__arrow::after { + border-bottom-color: #333333; +} + +.el-popper[x-placement^=bottom] .popper__arrow { + border-bottom-color: #404040; +} + +.el-message-box { + background-color: #333333; + border-color: #5f5f5f; +} + +.el-tree { + background: #202020; + color: #bbbbbb; +} + +.el-menu-item:focus, .el-menu-item:hover { + background-color: #505050; +} + +.el-tabs--card>.el-tabs__header .el-tabs__item { + border-left-color: #5f5f5f; +} + +.el-tabs--card>.el-tabs__header .el-tabs__item.is-active { + border-left-color: #5f5f5f; +} + +.el-tabs--card>.el-tabs__header .el-tabs__nav { + border-color: #5f5f5f; +} + +.el-collapse-item__header { + background-color: inherit; + color: #d0d0d0; + border-bottom-color: #5f5f5f; +} + +.el-collapse-item__wrap { + background-color: #333333; + border-bottom-color: #5f5f5f; +} + +.el-message-box__title { + color: #909090; +} + +.el-dialog__title { + color: #909090; +} + +.el-message-box__content { + color: #a5a7ad; +} + +.el-input__inner { + color: #ffffff; +} + +.el-collapse-item__content { + color: #848484; +} + +.el-switch__core { + background-color: #212121; + border-color: #5f5f5f; +} + +.el-popover { + background-color: #333333; + border-color: #5f5f5f; +} + +.el-popper[x-placement^=right] .popper__arrow::after { + border-right-color: #5f5f5f; +} + +.el-popper[x-placement^=right] .popper__arrow { + border-right-color: #5f5f5f; +} + +.el-switch__label { + color: #a0a0a0; +} + +.el-table, .el-table__expanded-cell { + background-color: inherit; +} + +.el-tree-node__content:hover { + background-color: #272727; +} + +.el-tree-node:focus>.el-tree-node__content { + background-color: #333333; +} + +.el-select-dropdown { + background-color: #353535; +} + +.el-select-dropdown.is-multiple .el-select-dropdown__item.selected { + background-color: #404040; +} + +.el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover { + background-color: #404040; +} + +.el-select-dropdown__item.hover, .el-select-dropdown__item:hover { + background-color: #3e3e3e; +} + +.el-tag.el-tag--info { + background-color: #404040; + border-color: #252525; +} + +.el-table__expanded-cell:hover { + background-color: #323232 !important; +} + +.el-tabs--card>.el-tabs__header .el-tabs__item.is-active { + border-bottom-color: #9c9c9c; +} + +.el-dialog__body { + color: #ffffff; +} + +.x-app { + background-color: #101010; +} + +.x-container { + background: #222; +} + +.x-login-container { + background-color: #101010; +} + +.x-aside-container { + background-color: #171717; +} + +.x-friend-list>.x-friend-group { + color: #ffffff; +} + +.x-friend-item:hover { + background: #3e3e3e; +} + +.x-friend-item>.avatar.active::after, .x-friend-item>.avatar.joinme::after, .x-friend-item>.avatar.busy::after { + border: 2px solid #000; +} + +.x-friend-item>.detail>.name { + color: #ffffff; +} + +.x-friend-item>.detail>.extra { + color: #c7c7c7; +} + +.x-friend-item>.detail>.name.x-tag-veteran { + color: rgb(177, 143, 255); +} + +.el-tag.x-tag-veteran { + border-color: rgb(177, 143, 255); + color: rgb(177, 143, 255); +} + +.x-friend-item>.detail>.name.x-tag-legendary { + color: rgb(255, 255, 255); +} + +.el-tag.x-tag-legendary { + border-color: rgb(255, 255, 255); + color: rgb(255, 255, 255); +} + +.x-user-dialog .el-textarea__inner { + color: #ffffff; +} + +html, body { + background-color: #101010; +} + +body, input, textarea, select, button { + color: #ffffff; +} + +.x-login-container p { + color: #dddddd; +} \ No newline at end of file diff --git a/html/app.js b/html/app.js index 0e907637..828151fb 100644 --- a/html/app.js +++ b/html/app.js @@ -192,6 +192,11 @@ CefSharp.BindObjectAsync( return v.toString(16); }); + var $appDarkStyle = document.createElement('link'); + $appDarkStyle.rel = 'stylesheet'; + $appDarkStyle.href = `app.dark.css?_=${Date.now()}`; + document.getElementsByTagName('head')[0].appendChild($appDarkStyle); + // // API // @@ -5019,14 +5024,11 @@ CefSharp.BindObjectAsync( }; $app.watch.openVR = saveOpenVROption; $app.watch.openVRAlways = saveOpenVROption; - $app.data.showNameColor = VRCXStorage.GetBool('showNameColor'); - var $nameColorStyle = document.createElement('style'); - $nameColorStyle.appendChild(document.createTextNode('.x-friend-item>.detail>.name { color: #303133 !important; }')); - document.head.appendChild($nameColorStyle); - $nameColorStyle.disabled = VRCXStorage.GetBool('showNameColor'); - $app.watch.showNameColor = function () { - VRCXStorage.SetBool('showNameColor', this.showNameColor); - $nameColorStyle.disabled = this.showNameColor; + $app.data.isDarkMode = VRCXStorage.GetBool('isDarkMode'); + $appDarkStyle.disabled = $app.data.isDarkMode === false; + $app.watch.isDarkMode = function () { + VRCXStorage.SetBool('isDarkMode', this.isDarkMode); + $appDarkStyle.disabled = this.isDarkMode === false; }; API.$on('LOGIN', function () { diff --git a/html/index.html b/html/index.html index 596c8a52..f7217962 100644 --- a/html/index.html +++ b/html/index.html @@ -713,10 +713,10 @@
- Show name color by Trust level + Dark Mode
Enable - +