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,