diff --git a/src/localization/en.json b/src/localization/en.json
index afab5d5b..12d24864 100644
--- a/src/localization/en.json
+++ b/src/localization/en.json
@@ -849,6 +849,9 @@
"striped_data_table_mode": "Striped Table Mode",
"toggle_pointer_on_hover": "Force pointer on hover",
"accessible_status_indicators": "Accessible Status Indicators",
+ "accessible_status_indicators_description": "Adds shapes to status indicators so they're easier to distinguish without relying only on color",
+ "use_official_status_colors": "Use Official Status Colors",
+ "use_official_status_colors_description": "Match VRChat's original status colors",
"table_density": "Table Density",
"table_density_standard": "Standard",
"table_density_comfortable": "Comfortable",
diff --git a/src/stores/settings/appearance.js b/src/stores/settings/appearance.js
index 6abb1724..1621f559 100644
--- a/src/stores/settings/appearance.js
+++ b/src/stores/settings/appearance.js
@@ -117,6 +117,7 @@ export const useAppearanceSettingsStore = defineStore(
const isDataTableStriped = ref(false);
const showPointerOnHover = ref(false);
const accessibleStatusIndicators = ref(false);
+ const useOfficialStatusColors = ref(true);
const showNewDashboardButton = ref(true);
const tableLimitsDialog = ref({
visible: false,
@@ -178,6 +179,7 @@ export const useAppearanceSettingsStore = defineStore(
dataTableStripedConfig,
showPointerOnHoverConfig,
accessibleStatusIndicatorsConfig,
+ useOfficialStatusColorsConfig,
showNewDashboardButtonConfig,
appFontFamilyConfig,
customFontFamilyConfig,
@@ -249,6 +251,7 @@ export const useAppearanceSettingsStore = defineStore(
configRepository.getBool('VRCX_dataTableStriped', false),
configRepository.getBool('VRCX_showPointerOnHover', false),
configRepository.getBool('VRCX_accessibleStatusIndicators', false),
+ configRepository.getBool('VRCX_useOfficialStatusColors', true),
configRepository.getBool('VRCX_showNewDashboardButton', true),
configRepository.getString(
'VRCX_fontFamily',
@@ -366,10 +369,12 @@ export const useAppearanceSettingsStore = defineStore(
isDataTableStriped.value = dataTableStripedConfig;
showPointerOnHover.value = showPointerOnHoverConfig;
accessibleStatusIndicators.value = accessibleStatusIndicatorsConfig;
+ useOfficialStatusColors.value = useOfficialStatusColorsConfig;
showNewDashboardButton.value = showNewDashboardButtonConfig;
applyPointerHoverClass();
applyAccessibleStatusClass();
+ applyOfficialStatusColorsClass();
await configRepository.remove('VRCX_navWidth');
@@ -965,6 +970,30 @@ export const useAppearanceSettingsStore = defineStore(
applyAccessibleStatusClass();
}
+ /**
+ *
+ */
+ function applyOfficialStatusColorsClass() {
+ const classList = document.documentElement.classList;
+ classList.remove('vrcx-status-colors');
+
+ if (!useOfficialStatusColors.value) {
+ classList.add('vrcx-status-colors');
+ }
+ }
+
+ /**
+ *
+ */
+ function toggleOfficialStatusColors() {
+ useOfficialStatusColors.value = !useOfficialStatusColors.value;
+ configRepository.setBool(
+ 'VRCX_useOfficialStatusColors',
+ useOfficialStatusColors.value
+ );
+ applyOfficialStatusColorsClass();
+ }
+
/**
*
*/
@@ -1211,6 +1240,7 @@ export const useAppearanceSettingsStore = defineStore(
isDataTableStriped,
showPointerOnHover,
accessibleStatusIndicators,
+ useOfficialStatusColors,
showNewDashboardButton,
tableLimitsDialog,
TABLE_MAX_SIZE_MIN,
@@ -1247,6 +1277,7 @@ export const useAppearanceSettingsStore = defineStore(
toggleStripedDataTable,
togglePointerOnHover,
toggleAccessibleStatusIndicators,
+ toggleOfficialStatusColors,
setShowNewDashboardButton,
setTableDensity,
setTrustColor,
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 19756440..fef28f98 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -51,15 +51,15 @@
--sidebar-border: oklch(0.922 0 0);
--sidebar-ring: oklch(0.708 0 0);
- /* VRChat Status Colors */
- --status-online: #67c23a;
- --status-joinme: #00b8ff;
- --status-askme: #ff9500;
- --status-busy: #ff2c2c;
- --status-active: #f4e05e;
- --status-offline: #909399;
+ /* VRChat Status Colors (Official) */
+ --status-online: #2ED319;
+ --status-joinme: #00B8FF;
+ --status-busy: #C80928;
+ --status-askme: #E97C03;
+ --status-offline: #737F8D;
--status-offline-alt: #808080;
--status-offline-card: #737f8d;
+ --status-active: #f4e05e;
/* Platform Colors */
--platform-pc: #0078d4;
@@ -72,6 +72,15 @@
--visibility-private: #ef4444;
}
+/* VRCX adjusted status colors (when official colors are disabled) */
+.vrcx-status-colors {
+ --status-online: #67c23a;
+ --status-joinme: #00b8ff;
+ --status-askme: #ff9500;
+ --status-busy: #ff2c2c;
+ --status-offline: #909399;
+}
+
.dark {
/* --background: oklch(0.145 0 0); */
--background: oklch(0.205 0 0);
diff --git a/src/views/Settings/components/Tabs/InterfaceTab.vue b/src/views/Settings/components/Tabs/InterfaceTab.vue
index a39295ee..6eb958ea 100644
--- a/src/views/Settings/components/Tabs/InterfaceTab.vue
+++ b/src/views/Settings/components/Tabs/InterfaceTab.vue
@@ -133,9 +133,17 @@
-
+
+
+
+
+
@@ -390,6 +398,7 @@
isDataTableStriped,
showPointerOnHover,
accessibleStatusIndicators,
+ useOfficialStatusColors,
showNewDashboardButton
} = storeToRefs(appearanceSettingsStore);
@@ -414,6 +423,7 @@
toggleStripedDataTable,
togglePointerOnHover,
toggleAccessibleStatusIndicators,
+ toggleOfficialStatusColors,
setShowNewDashboardButton,
setAppFontFamily,
setCustomFontFamily,