From 1f99b1278c0b19f49fee214d288a2549beb13f06 Mon Sep 17 00:00:00 2001 From: sameeranageshwar Date: Sat, 11 Apr 2026 20:05:19 -0400 Subject: [PATCH] acessibility --- website/src/lib/components/MapControls.svelte | 16 +++--- website/src/lib/states/map.svelte.ts | 2 +- website/src/lib/states/theme.svelte.ts | 46 ++++++++++++++++ website/src/routes/layout.css | 21 +++++++- website/src/routes/settings/+page.svelte | 54 ++++++++++++++++++- 5 files changed, 128 insertions(+), 11 deletions(-) diff --git a/website/src/lib/components/MapControls.svelte b/website/src/lib/components/MapControls.svelte index e43c5fa..ea2c690 100644 --- a/website/src/lib/components/MapControls.svelte +++ b/website/src/lib/components/MapControls.svelte @@ -1,15 +1,17 @@
diff --git a/website/src/lib/states/map.svelte.ts b/website/src/lib/states/map.svelte.ts index 396ea2a..962e568 100644 --- a/website/src/lib/states/map.svelte.ts +++ b/website/src/lib/states/map.svelte.ts @@ -12,7 +12,7 @@ export const UMD_LOCATIONS: StudyLocation[] = [ { id: 'mckeldin', name: 'McKeldin Library', hasFloors: true, floors: ['Floor 1', 'Floor 2', 'Floor 3', 'Floor 4', 'Floor 5', 'Floor 6', 'Floor 7'], lng: -76.94494907523277, lat: 38.986021017749366 }, { id: 'hornbake', name: 'Hornbake Library', hasFloors: false, lng: -76.94161787005467, lat: 38.988233373664826 }, { id: 'stem', name: 'STEM Library', hasFloors: false, lng: -76.93942003731279, lat: 38.988991437126195 }, - { id: 'clarice', name: 'Clarice Library', hasFloors: false, lng: -76.94967344225785, lat: 38.99029330703877 }, + { id: 'clarice', name: 'Clarice Library', hasFloors: false, lng: -76.9500912552473, lat: 38.990547823732285 }, { id: 'yahentamitsi', name: 'Yahentamitsi', hasFloors: false, lng: -76.9448027183373, lat: 38.99108961575231 }, { id: 'iribe', name: 'Iribe', hasFloors: false, lng: -76.93643838603555, lat: 38.98933701397555 }, { id: 'reckord', name: 'Reckord Armory', hasFloors: false, lng: -76.93897470250619, lat: 38.98609556181066 }, diff --git a/website/src/lib/states/theme.svelte.ts b/website/src/lib/states/theme.svelte.ts index bc6ff36..f94bda4 100644 --- a/website/src/lib/states/theme.svelte.ts +++ b/website/src/lib/states/theme.svelte.ts @@ -2,15 +2,61 @@ import { browser } from '$app/environment'; class ThemeState { isLight = $state(false); + isHighContrast = $state(false); + isColorBlindFriendly = $state(false); + + constructor() { + if (browser) { + this.isLight = localStorage.getItem('theme') === 'light'; + this.isHighContrast = localStorage.getItem('highContrast') === 'true'; + this.isColorBlindFriendly = localStorage.getItem('colorBlind') === 'true'; + this.updateDOM(); + } + } toggle() { this.isLight = !this.isLight; + if (browser) { + localStorage.setItem('theme', this.isLight ? 'light' : 'dark'); + this.updateDOM(); + } + } + + toggleHighContrast() { + this.isHighContrast = !this.isHighContrast; + if (browser) { + localStorage.setItem('highContrast', this.isHighContrast ? 'true' : 'false'); + this.updateDOM(); + } + } + + toggleColorBlind() { + this.isColorBlindFriendly = !this.isColorBlindFriendly; + if (browser) { + localStorage.setItem('colorBlind', this.isColorBlindFriendly ? 'true' : 'false'); + this.updateDOM(); + } + } + + private updateDOM() { if (browser) { if (this.isLight) { document.documentElement.classList.add('light-theme'); } else { document.documentElement.classList.remove('light-theme'); } + + if (this.isHighContrast) { + document.documentElement.classList.add('high-contrast'); + } else { + document.documentElement.classList.remove('high-contrast'); + } + + if (this.isColorBlindFriendly) { + document.documentElement.classList.add('color-blind'); + } else { + document.documentElement.classList.remove('color-blind'); + } } } } diff --git a/website/src/routes/layout.css b/website/src/routes/layout.css index fcea424..0175be1 100644 --- a/website/src/routes/layout.css +++ b/website/src/routes/layout.css @@ -43,7 +43,26 @@ color: #585b70 !important; } -.light-theme .border-white { +/* Color Blind (Protanopia/Deuteranopia safe swaps) */ +:root.color-blind { + --color-neon-primary: #ffb86c; + --color-neon-blue: #8be9fd; +} + +/* High Contrast: Pitch black backgrounds and pure white texts */ +:root.high-contrast { + --color-crust: #000000; + --color-mantle: #0a0a0a; + --color-base: #111111; +} + +:root.light-theme.high-contrast { + --color-crust: #ffffff; + --color-mantle: #f4f4f4; + --color-base: #ebebeb; +} + +.light-theme border-white { border-color: rgba(88, 91, 112, 0.1); } diff --git a/website/src/routes/settings/+page.svelte b/website/src/routes/settings/+page.svelte index 641b40d..2c33fb0 100644 --- a/website/src/routes/settings/+page.svelte +++ b/website/src/routes/settings/+page.svelte @@ -9,6 +9,15 @@ EchoNode | Settings + +
@@ -27,12 +36,15 @@

- Appearance + Appearance and Accesibility

-

Light / Dark Mode

+

+ + Light / Dark Mode +

+ +
+
+

+ + High Contrast Mode +

+
+ + +
+ +
+
+

+ + Color Blind Friendly +

+
+ + +
+ +
+
+

Global Translation

+
+ +
+
+
+