Skip to main content

Dark Mode

Guidelines for implementing dark mode across Juniro's platforms.

Color Mapping​

When designing for dark mode, colors shift to maintain contrast and readability:

Light Mode

bg-white
bg-gray-50
bg-gray-100
text-gray-900
→

Dark Mode

dark:bg-gray-900
dark:bg-gray-800
dark:bg-gray-700
dark:text-gray-100

Background Mappings​

Light ModeDark ModeUsage
bg-whitedark:bg-gray-900Page backgrounds
bg-gray-50dark:bg-gray-800Card backgrounds
bg-gray-100dark:bg-gray-700Secondary surfaces
bg-orange-50dark:bg-orange-900/20Brand highlights

Text Color Mappings​

Light ModeDark ModeUsage
text-gray-900dark:text-gray-100Primary text
text-gray-600dark:text-gray-300Secondary text
text-gray-400dark:text-gray-500Muted text

Brand Colors in Dark Mode​

The primary orange stays vibrant but slightly lightened for better contrast:

Light Mode
#FF6B35
Dark Mode
#ff8a66

Card Example​

Light Mode
Activity Title
Description text here
Dark Mode
Activity Title
Description text here

Implementation Pattern​

Always include both light and dark variants in Tailwind classes:

// Card component
<div className="
  bg-white dark:bg-gray-800
  text-gray-900 dark:text-gray-100
  border border-gray-200 dark:border-gray-700
  shadow-sm dark:shadow-gray-900/20
">
  <h3 className="text-gray-900 dark:text-white">Title</h3>
  <p className="text-gray-600 dark:text-gray-300">Description</p>
</div>

// Button
<button className="
  bg-orange-500 hover:bg-orange-600
  dark:bg-orange-400 dark:hover:bg-orange-500
  text-white
">
  Action
</button>

// Input
<input className="
  bg-white dark:bg-gray-800
  border-gray-300 dark:border-gray-600
  text-gray-900 dark:text-gray-100
  placeholder-gray-400 dark:placeholder-gray-500
"/>

Status Colors​

Status colors remain consistent but may need slight adjustments:

Success (Light)Success (Dark)
Warning (Light)Warning (Dark)
Error (Light)Error (Dark)

Checklist​

Before shipping, verify:

  • All backgrounds have dark: variants
  • Text colors maintain 4.5:1 contrast ratio
  • Borders are visible in both modes
  • Brand orange is legible on dark backgrounds
  • Images/icons work in both modes
  • Focus states are visible
  • Status colors are distinguishable

Test both modes using the theme toggle in Storybook.