Brand Color Demo

Select a color:

EatlyPOS Documentation
v1.0.0Back to Dashboard

Styling Customization

EatlyPOS uses Radix UI Theme as its primary UI framework, with a carefully configured theme system that supports both light and dark modes.

Theme Configuration

The application's theme is configured with the following settings:

src/app/layout.tsx
// Root Theme Configuration
<Theme 
  accentColor="orange"
  hasBackground={true}
  panelBackground="solid"
  appearance={isDarkMode ? 'dark' : 'light'}
>
  {children}
</Theme>

CSS Variables

The application overrides Radix UI Themes variables and defines custom CSS variables for consistent theming:

src/app/globals.css

/* Radix variables overrides */
/*
check the file for detailed overrides
*/


/* Theme specific */
:root {
  --primary: var(--orange-9);
  --primary75: var(--orange-7);
  --primary50: var(--orange-5);
  --primary25: var(--orange-3);
  --secondary: #26272b;
}

Customizing Colors

To customize the application's color scheme:

1. Modify the accent color in src/app/layout.tsx by updating the Theme component's accentColor prop.

2. Update the CSS variables in src/app/globals.css to match your brand colors. To change your brand color, provide your color to --orange-9 Radix variable.

  • --primary: Main brand color
  • --primary75: Brand color at 75% intensity
  • --primary50: Brand color at 50% intensity
  • --primary25: Brand color at 25% intensity
  • --secondary: Secondary brand color
  • --background: Background color
  • --text: Text color

Dark Mode

Dark mode is automatically supported through Radix UI Theme and next-themes. The application will:

• Respect the user's system preferences by default

• Allow manual toggling between light and dark modes

• Persist the user's theme preference in localStorage