-
-
Notifications
You must be signed in to change notification settings - Fork 129
Description
Problem
Users are seeking an immersive, deeply calming theme that feels vibrant, beautiful, and alive—something that blends rainforest energy and prism light with perfect accessibility and ergonomics for hours of focused study.
Solution
Introduce Prism Rainforest (id: prism-rainforest) under the Dark group in static/themes.ts.
Mood and Concept
A unique palette inspired by the magic of tropical rainforest at dawn after rain: deep emerald canopies, cool shadows, sunbeams through mist, and the rainbow glint of water droplets on leaves. It's lush, sparkling, and tranquil—designed to be ergonomic for eyes and bring optimism to lengthy coding or learning sessions.
Color Palette (All HSLA—tested for WCAG 2.1 AA accessibility)
- backgroundColor: hsla(158, 35%, 13%, 1) // Deep emerald green (rainforest at night)
- cardColor: hsla(163, 24%, 18%, 1) // Louder misty jade (sunlit undergrowth)
- borderColor: hsla(92, 60%, 44%, 1) // Dewdrop moss (sun on foliage)
- mainColor: hsla(191, 85%, 71%, 1) // Rainbow blue (morning sky reflection)
- secondaryColor: hsla(54, 96%, 73%, 1) // Bright gold (sunburst on leaves)
Key design & accessibility notes
- All colors achieve AA minimum contrast for normal UI text (4.5:1); main/secondary stand apart for clarity and highlight.
- Follows the 5-variable color system and docs/UI_DESIGN.md ergonomics best practices.
- Theme is mindful of eye comfort over long sessions—no aggressive brights, but alive and vibrant.
- Unique, friendly, non-repetitive versus other dark-green themes; distinctly "prismatic" and inviting.
Implementation
- Add theme to
static/themes.tsunder the Dark group:
{
id: "prism-rainforest",
backgroundColor: "hsla(158, 35%, 13%, 1)",
cardColor: "hsla(163, 24%, 18%, 1)",
borderColor: "hsla(92, 60%, 44%, 1)",
mainColor: "hsla(191, 85%, 71%, 1)",
secondaryColor: "hsla(54, 96%, 73%, 1)",
}- Add "Prism Rainforest" to the theme picker.
- Confirm contrast and accessibility with a11y tools as described in docs/UI_DESIGN.md.
- Document and preview in docs with a color palette image for contributors.
Additional Context
Prism Rainforest fuses the optimism of a rainbow, serenity of a lush forest, and the polished accessibility standard for a world-class UI theme. Designed for KanaDojo and inspired by nature, contrast, and clarity for all users.