add colorblind-aware UI settings#789
Open
Tiltann wants to merge 2 commits into
Open
Conversation
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
Adds a colorblind mode system that syncs between Lua settings and the React UI, and updates UI theming (including SkillCheck) accordingly.
Changes:
- Introduces colorblind presets/theme mapping (web) and a colorblind setting + sync path (resource/Lua).
- Updates ConfigProvider and SkillCheck to apply colorblind-aware colors.
- Adjusts NUI fetch handling and moves
initto a React effect.
Reviewed changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 10 comments.
Show a summary per file
| File | Description |
|---|---|
| web/src/utils/fetchNui.ts | Changes NUI response handling to parse from text with JSON fallback behavior |
| web/src/providers/ConfigProvider.tsx | Adds colorblindMode to config, applies preset theme, and syncs changes via NUI |
| web/src/features/skillcheck/index.tsx | Uses config-driven colorblind colors for SkillCheck strokes |
| web/src/config/colorblind.ts | Adds colorblind presets and helper to get the theme for a mode |
| web/src/App.tsx | Runs NUI init from useEffect instead of during render |
| resource/settings.lua | Adds persisted colorblind mode setting, UI selection, sync callback, and test action |
| resource/init.lua | Adds a resource-name mismatch check intended to hard-fail when renamed incorrectly |
| resource/client.lua | Extends getConfig to include colorblindMode for the UI |
| locales/en.json | Adds localization strings for colorblind mode and UI test action |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+45
to
+51
| if not GetCurrentResourceName() == "ox_lib" then | ||
| local err = | ||
| '^1Resource name mismatch. Please ensure the resource is named "ox_lib".\n ^3https://github.com/overextended/ox_lib/releases/latest/download/ox_lib.zip^0' | ||
| function lib.hasLoaded() return err end | ||
|
|
||
| error(err) | ||
| end |
Comment on lines
+32
to
+42
| const rawResponse = await resp.text(); | ||
|
|
||
| return respFormatted; | ||
| if (!rawResponse) { | ||
| return null as T; | ||
| } | ||
|
|
||
| try { | ||
| return JSON.parse(rawResponse) as T; | ||
| } catch { | ||
| return null as T; | ||
| } |
Comment on lines
+28
to
+33
| fetchNui<Config>('getConfig').then((data) => { | ||
| setConfig({ | ||
| ...data, | ||
| ...getColorblindTheme(data.colorblindMode), | ||
| }); | ||
| }); |
Comment on lines
+40
to
+46
| useNuiEvent<ColorblindMode>('setColorblindMode', (mode) => { | ||
| setConfig((previous) => ({ | ||
| ...previous, | ||
| ...getColorblindTheme(mode), | ||
| colorblindMode: mode, | ||
| })); | ||
| }); |
|
|
||
| const useStyles = createStyles((theme, params: { difficultyOffset: number }) => ({ | ||
| const useStyles = createStyles( | ||
| (theme, params: { difficultyOffset: number; skillAreaColor: string; indicatorColor: string }) => ({ |
| skillArea: { | ||
| fill: 'transparent', | ||
| stroke: theme.fn.primaryColor(), | ||
| stroke: params.skillAreaColor, |
| }, | ||
| indicator: { | ||
| stroke: 'red', | ||
| stroke: params.indicatorColor, |
|
|
||
| export type ColorblindMode = 'off' | 'protanopia' | 'deuteranopia' | 'tritanopia' | 'achromatopsia'; | ||
|
|
||
| const colorblindModes: Record<ColorblindMode, { primaryColor: MantineColor; primaryShade: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9; skillAreaColor: MantineColor; skillAreaShade: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9; indicatorColor: MantineColor; indicatorShade: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 }> = { |
| }, | ||
| }; | ||
|
|
||
| export const getColorblindTheme = (mode: ColorblindMode) => colorblindModes[mode]; |
Comment on lines
278
to
281
| RegisterCommand('ox_lib', function() | ||
|
|
||
|
|
||
| local inputSettings = { |
Contributor
|
I have seen some variables using snake case, this repo does not use that for variables. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Configurable Colorblind Mode for ox_lib
Adds accessibility-focused colorblind mode support to ox_lib, ensuring color-dependent UI elements (e.g. skillcheck indicators) adapt to players with color vision deficiencies.
Motivated by this community post.
What Changed
Settings & Localization
/ox_libsettings menu (resource/settings.lua)locales/en.json)State & Sync
resource/client.lua)web/src/providers/ConfigProvider.tsx)web/src/App.tsx)Hardening
fetchNuito gracefully handle empty or non-JSON callback bodies, preventing crashes (web/src/utils/fetchNui.ts)resource/init.luamisnamed resources now fail fast with a clear error message instead of telling the person to build the UI.Why
Testing
npm run build)Notes