always show name color, add dark mode

html/app.css

@@ -75,12 +75,12 @@ For a copy, see <https://opensource.org/licenses/MIT>.
 }
 
 ::-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;
+	width: 4px;
-	height: 6px;
+	height: 4px;
 	background: #EBEEF5;
 	border-radius: 50%
 }

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 <https://opensource.org/licenses/MIT>.
+*/
+
+::-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;
+}

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');
+	$app.data.isDarkMode = VRCXStorage.GetBool('isDarkMode');
-	var $nameColorStyle = document.createElement('style');
+	$appDarkStyle.disabled = $app.data.isDarkMode === false;
-	$nameColorStyle.appendChild(document.createTextNode('.x-friend-item>.detail>.name { color: #303133 !important; }'));
+	$app.watch.isDarkMode = function () {
-	document.head.appendChild($nameColorStyle);
+		VRCXStorage.SetBool('isDarkMode', this.isDarkMode);
-	$nameColorStyle.disabled = VRCXStorage.GetBool('showNameColor');
+		$appDarkStyle.disabled = this.isDarkMode === false;
-	$app.watch.showNameColor = function () {
-		VRCXStorage.SetBool('showNameColor', this.showNameColor);
-		$nameColorStyle.disabled = this.showNameColor;
 	};
 
 	API.$on('LOGIN', function () {

html/index.html

@@ -713,10 +713,10 @@
 			</div>
 		</div>
 		<div style="margin-top:30px">
-			<span style="font-weight:bold">Show name color by Trust level</span>
+			<span style="font-weight:bold">Dark Mode</span>
 			<div style="font-size:12px;margin-top:5px">
 				<span style="display:inline-block;min-width:150px">Enable</span>
-				<el-switch v-model="showNameColor"></el-switch>
+				<el-switch v-model="isDarkMode"></el-switch>
 			</div>
 		</div>
 		<div style="margin-top:30px">