Skip to content

feature: add Tritanopia colorblind mode#40

Open
devin-ai-integration[bot] wants to merge 1 commit into
mainfrom
devin/1781910040-second-colorblind-mode
Open

feature: add Tritanopia colorblind mode#40
devin-ai-integration[bot] wants to merge 1 commit into
mainfrom
devin/1781910040-second-colorblind-mode

Conversation

@devin-ai-integration

@devin-ai-integration devin-ai-integration Bot commented Jun 19, 2026

Copy link
Copy Markdown

Summary

Adds a second colorblind accessibility palette ("Tritanopia Mode") alongside the existing High Contrast Mode. The existing mode swaps present/correct to cyan/orange (good for red-green deficiency); the new mode uses a vermillion/bluish-green palette better suited for blue-yellow (tritanopia) color vision.

The two color modes are mutually exclusive — enabling one disables the other — since they both drive the single data-mode attribute on <body>.

Changes:

  • App.module.scss: new [data-mode='tritanopia'] block overriding --color-present: #d55e00 and --color-correct: #009e73.
  • App.jsx: new tritanopia localStorage-backed state + isTritanopiaMode; effect now sets data-mode to 'high-contrast', else 'tritanopia', else removes it. Toggle handlers turn the other mode off:
const handleTritanopiaMode = () => {
  const next = !isTritanopiaMode;
  setIsTritanopiaMode(next); setTritanopia(next);
  if (next) { setIsHighContrastMode(false); setHighContrast(false); }
};
  • SettingModal.jsx: new "Tritanopia Mode" row wired to the new props.

Screenshots

Tritanopia palette in the how-to-play tiles (correct=green, present=orange):

tritanopia tiles

Settings modal with the new toggle (mutually exclusive with High Contrast):

settings

Link to Devin session: https://app.devin.ai/sessions/8095a1347925443b9a85cc639dfedaf7
Requested by: @albert239825


Devin Review

Status Commit
⚪ Not started

Run Devin Review

Open in Devin Review (Staging)

Co-Authored-By: Albert Chen <albert23982@gmail.com>
@devin-ai-integration

Copy link
Copy Markdown
Author

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment, CI, and merge conflict monitoring

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

0 participants