diff --git a/resources/lang/en.json b/resources/lang/en.json index ed980ff7fd..9afee34aac 100644 --- a/resources/lang/en.json +++ b/resources/lang/en.json @@ -798,6 +798,8 @@ "keybinds_hint": "Click a key to rebind it. You can assign a single key or Shift + key combination.", "dark_mode_label": "Dark Mode", "dark_mode_desc": "Toggle the site’s appearance between light and dark themes", + "colorblind_label": "Colorblind Mode", + "colorblind_desc": "Use colorblind-friendly territory and border colors", "emojis_label": "Emojis", "emojis_desc": "Toggle whether emojis are shown in game", "alert_frame_label": "Alert Frame", @@ -930,6 +932,7 @@ "colored": "Colored", "black": "Black", "section_structure_icons": "Structure Icons", + "section_accessibility": "Accessibility", "classic_icons_label": "Classic icons", "classic_icons_desc": "Lighter outline with near-black interior", "reset_label": "Reset to defaults", diff --git a/src/client/UserSettingModal.ts b/src/client/UserSettingModal.ts index b7b821e926..b48938eb1f 100644 --- a/src/client/UserSettingModal.ts +++ b/src/client/UserSettingModal.ts @@ -206,6 +206,25 @@ export class UserSettingModal extends BaseModal { console.log("🌙 Dark Mode:", this.userSettings.darkMode() ? "ON" : "OFF"); } + /** Whether colorblind mode is currently enabled in the graphics overrides. */ + private colorblindMode(): boolean { + return ( + this.userSettings.graphicsOverrides().accessibility?.colorblind ?? false + ); + } + + /** Flip the colorblind-mode graphics override and persist it. */ + private toggleColorblindMode() { + const overrides = this.userSettings.graphicsOverrides(); + this.userSettings.setGraphicsOverrides({ + ...overrides, + accessibility: { + ...overrides.accessibility, + colorblind: !this.colorblindMode(), + }, + }); + } + private toggleEmojis() { this.userSettings.toggleEmojis(); @@ -751,6 +770,15 @@ export class UserSettingModal extends BaseModal { @change=${this.toggleDarkMode} > + + + , + ) { + const current = this.userSettings.graphicsOverrides(); + this.userSettings.setGraphicsOverrides({ + ...current, + accessibility: { ...current.accessibility, ...patch }, + }); + this.requestUpdate(); + } + + /** Whether colorblind mode is currently enabled. */ + private currentColorblind(): boolean { + return ( + this.userSettings.graphicsOverrides().accessibility?.colorblind ?? false + ); + } + + /** Toggle colorblind-friendly colors. */ + private onToggleColorblind() { + this.patchAccessibility({ colorblind: !this.currentColorblind() }); + } + private onNameScaleChange(event: Event) { const value = parseFloat((event.target as HTMLInputElement).value); this.patchName({ nameScaleFactor: value }); @@ -179,6 +203,7 @@ export class GraphicsSettingsModal extends LitElement implements Controller { const nameCull = this.currentNameCull(); const namesColored = !this.currentDarkNames(); const classicIcons = this.currentClassicIcons(); + const colorblind = this.currentColorblind(); return html`
+
+ ${translateText("graphics_setting.section_accessibility")} +
+ + +