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
+
+
+
+