Skip to main content
Arre features a thoughtfully designed theme system with light and dark modes, both embracing a “White Paper” aesthetic enhanced with vibrant neon accents. The theme system includes automatic system preference detection and manual controls.

​
Theme Options

Arre offers three theme settings:

Light Mode

Crisp white backgrounds with jewel-tone accents

Dark Mode

Deep blacks with the same vibrant accent palette

System

Automatically matches your operating system preference

​
How to Toggle Themes

The theme toggle is located in the sidebar footer:
1

Locate the theme button

Look at the bottom of the left sidebar for a button with an icon (Sun, Moon, or Laptop).
2

Click to cycle

Each click cycles through the three options:
Light → Dark → System → Light → ...
3

Current mode displays

The button shows the active mode:
  • ☀️ “Light Mode”
  • 🌙 “Dark Mode”
  • 💻 “System Mode”
Your theme preference is saved to browser localStorage, so it persists across sessions.

​
System Preference Option

When set to “System” mode, Arre automatically matches your operating system’s theme:
Follows System Preferences → General → Appearance
  • Auto mode switches at sunset (if configured)
  • Manual toggle: Light/Dark/Auto

​
Why Use System Mode?

  • Consistency: Match Arre to your entire OS appearance
  • Automatic switching: If your OS switches at sunset, Arre follows
  • Eye comfort: Leverage OS-level comfort settings
  • Less decision fatigue: Set it once and forget it

​
White Paper Aesthetic

Arre’s design philosophy centers on a “White Paper” aesthetic - clean, minimal, with unexpected pops of color:

​
Light Mode Palette

/* Backgrounds */
--bg-app: #f5f5f7;        /* Outer frame */
--bg-paper: #ffffff;      /* Main surface */
--bg-elevated: #ffffff;   /* Cards and modals */

/* Text */
--text-primary: #1d1d1f;  /* Headings and body */
--text-secondary: #86868b; /* Metadata */
--text-tertiary: #d2d2d7;  /* Disabled */

/* Borders */
--border-subtle: #e5e5e5;  /* Dividers and outlines */

​
Dark Mode Palette

/* Backgrounds */
--bg-app: #000000;         /* True black outer frame */
--bg-paper: #1c1c1e;       /* Dark grey main surface */
--bg-elevated: #2c2c2e;    /* Slightly lighter cards */

/* Text */
--text-primary: #f5f5f7;   /* Near white for readability */
--text-secondary: #86868b; /* Same grey (works in both modes) */
--text-tertiary: #48484a;  /* Darker for dark mode */

/* Borders */
--border-subtle: #38383a;  /* Subtle dark borders */
Notice that --text-secondary (#86868b) stays the same in both modes - it’s a perfectly balanced grey that works beautifully in light and dark contexts.

​
Neon Accent Colors

Both themes use the same vibrant accent palette, creating visual consistency:

Emerald

#10b981 - Success states, low energy tasks

Sapphire

#2563eb - Links, Upcoming view

Ruby

#dc2626 - Alerts, Anytime view

Lavender

#7c3aed - Someday view, AI features

Gold

#f59e0b - Highlights, special markers

Cyan

#06b6d4 - Current day indicator

Purple Neon

#a855f7 - High focus tasks, premium elements

​
Energy Level Colors

Task energy indicators use specific accent colors:
  • Low Energy: Emerald #10b981 - Green suggests ease and flow
  • Neutral: Yellow #eab308 - Balanced, moderate effort
  • High Focus: Purple #9333ea - Deep, intense concentration
These colors remain vivid in both light and dark modes, ensuring energy levels are always clearly visible.

​
Visual Effects

Themes support subtle visual enhancements:

​
Shadows

--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
Soft, subtle shadows that lift elements slightly off the page.

​
Glassmorphism

Modals and overlays use subtle glassmorphism effects: 
/* Light mode */
--bg-overlay: rgba(255, 255, 255, 0.85);

/* Dark mode */
--bg-overlay: rgba(28, 28, 30, 0.85);
Combined with backdrop blur, this creates a modern, layered interface.

​
Theme Implementation

Under the hood, Arre’s theme system is elegant and simple:
1

CSS Variables

All colors are defined as CSS custom properties in variables.css
2

Data Attribute

Theme is controlled via data-theme="light" or data-theme="dark" on the root element
3

Media Query

System preference uses @media (prefers-color-scheme: dark)
4

React Context

ThemeProvider component manages state and localStorage persistence

​
Storage Key

Theme preference is saved to localStorage: 
Key: "vite-ui-theme"
Value: "light" | "dark" | "system"
Clearing browser data will reset the theme preference to “system” (default).

​
Accessibility Considerations

The theme system is designed with accessibility in mind:
  • Light mode text: #1d1d1f on #ffffff = 19.5:1 (exceeds WCAG AAA)
  • Dark mode text: #f5f5f7 on #1c1c1e = 15.8:1 (exceeds WCAG AAA)
  • Accent colors: All tested for AA compliance on both backgrounds
  • Energy levels use both color AND position
  • Icons accompany color-coded elements
  • Text labels always present with colored indicators
Respects prefers-reduced-motion for theme transition animations.
Theme toggle button includes visible focus states for keyboard navigation.

​
Best Practices

​
Choosing Your Theme

Best for:
  • Daytime use in well-lit environments
  • Outdoor or bright office settings
  • Users who prefer high contrast
  • Printed screenshots or documentation

​
Productivity Tips

Try this: Use light mode for planning and creative work (morning), dark mode for execution and deep work (afternoon/evening). The visual shift reinforces the mental context switch.
Some users report that dark mode helps them focus on the current task by reducing visual distraction from the surrounding interface.

​
Theme Showcase

Here’s how key UI elements look across themes:
ElementLight ModeDark Mode
Task checkboxGrey border on whiteGrey border on dark grey
High focus badgePurple text on light purple bgPurple text on darker purple bg
Project dotsVibrant jewel tonesSame vibrant jewel tones
SidebarWhite with subtle bordersTrue black (#000)
CardsWhite with soft shadowDark grey (#1c1c1e) with deeper shadow
Hover statesSubtle grey backgroundLighter grey background
The consistent use of accent colors across both themes creates a cohesive experience, making it feel like the same app with different lighting rather than two separate designs.

Build docs developers (and LLMs) love

Get started for freeTalk to us