Skip to content

Appearance settings (dark/light/glass/snow) are unreachable for non-admins #95

Description

@atwine

Filed from a read-only UX/product audit of main. Not urgent — batching under nice-to-have.

What's there

A genuinely well-built 4-theme system — light, dark, glass (dark + glass-effect), snow (light default) — with system-preference auto-detection and localStorage persistence. See web/lib/theme.ts, web/components/settings/SettingsContext.tsx, web/app/(utility)/settings/appearance/page.tsx.

The actual problem

This isn't just "hard to find." The entire Settings tree (~25 pages) sits behind one RoleGuard allow={["admin"]} at the layout level (web/app/(utility)/settings/layout.tsx:12), which also blocks direct URL navigation, silently bouncing to /. Students and instructors — everyone who isn't an admin — cannot reach Settings → Appearance through any path at all.

Appearance is purely client-side (theme.ts:37,60, localStorage, zero server dependency), but it currently sits behind the same gate as genuinely admin-only config like LLM provider keys.

Suggested fix, in order

  1. Carve Appearance (and any other purely client-side, per-user setting) out from behind the admin-only RoleGuard so every role can reach it.
  2. Only then, add a single sun/moon icon button in the header next to Notifications, cycling through the themes (or opening a small popover for all four) — the pattern Linear, Vercel, and Notion all use. A header icon pointing at a page most users still can't open wouldn't fix anything on its own — the access change has to come first.

Metadata

Metadata

Assignees

No one assigned

    Labels

    nice-to-haveWorth doing eventually, not urgent — UX polish, ideas, low-priority improvements

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions