Skip to content

[FEATURE] Prism Rainforest Theme #145

@tentoumushii

Description

@tentoumushii

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

  1. Add theme to static/themes.ts under 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)",
}
  1. Add "Prism Rainforest" to the theme picker.
  2. Confirm contrast and accessibility with a11y tools as described in docs/UI_DESIGN.md.
  3. 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions