github/VRCX
1
1
Fork 0
mirror of https://github.com/vrcx-team/VRCX.git synced 2026-04-06 00:32:02 +02:00
Code Issues 51 Packages Projects Releases Wiki Activity

feat: Add option for official VRChat status colors

Browse Source
This commit is contained in:
pa
2026-03-17 20:55:46 +09:00
parent 56e7f910ef
commit cce4520a1a
4 changed files with 61 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/localization/en.json
View File

@@ -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",

31
src/stores/settings/appearance.js
View File

@@ -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,

23
src/styles/globals.css
View File

@@ -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);

12
src/views/Settings/components/Tabs/InterfaceTab.vue
View File

@@ -133,9 +133,17 @@
<Switch :model-value="showPointerOnHover" @update:modelValue="togglePointerOnHover" />
</SettingsItem>
<SettingsItem :label="t('view.settings.appearance.appearance.accessible_status_indicators')">
<SettingsItem
:label="t('view.settings.appearance.appearance.accessible_status_indicators')"
:description="t('view.settings.appearance.appearance.accessible_status_indicators_description')">
<Switch :model-value="accessibleStatusIndicators" @update:modelValue="toggleAccessibleStatusIndicators" />
</SettingsItem>
<SettingsItem
:label="t('view.settings.appearance.appearance.use_official_status_colors')"
:description="t('view.settings.appearance.appearance.use_official_status_colors_description')">
<Switch :model-value="useOfficialStatusColors" @update:modelValue="toggleOfficialStatusColors" />
</SettingsItem>
</SettingsGroup>
<SettingsGroup :title="t('view.settings.interface.navigation.header')">
@@ -390,6 +398,7 @@
isDataTableStriped,
showPointerOnHover,
accessibleStatusIndicators,
useOfficialStatusColors,
showNewDashboardButton
} = storeToRefs(appearanceSettingsStore);
@@ -414,6 +423,7 @@
toggleStripedDataTable,
togglePointerOnHover,
toggleAccessibleStatusIndicators,
toggleOfficialStatusColors,
setShowNewDashboardButton,
setAppFontFamily,
setCustomFontFamily,