Custom Theme

This guide will walk you through customizing the appearance of your Altitude Crew Center. Whether you're looking to match your airline's branding or create a unique visual identity, Altitude offers flexible theming options for all skill levels.

Quick Start: Built-in Themes

The easiest way to change your Crew Center's appearance is to use one of our built-in themes.

Accessing Theme Settings

1. Log into your Altitude admin panel
2. Navigate to admin/settings?page=theme
3. You'll see the theme customization options

Theme Settings

Customize the appearance and branding of your airline by selecting a theme.

Built-in Themes

Choose from a variety of professionally designed themes:

• Default Theme – Clean, balanced look with a neutral palette.
• Aviation Blue – Professional, aviation-inspired blue theme.
• Corporate Red – Strong and bold with a corporate red accent.
• Executive Green – Sleek and modern with an executive green finish.
• Premium Purple – Distinctive purple theme with a premium touch.

Applying a Built-in Theme

1. In the theme settings page, scroll through the available themes
2. Click on any theme to see a live preview
3. Click Apply Theme to make it active
4. The theme will be applied immediately to all users

Advanced: Custom Themes

For complete control over your Crew Center's appearance, you can create a fully custom theme.

Getting Started with Custom Themes

1. Go to admin/settings?page=theme
2. Scroll down to the Custom Theme section
3. Click "Theme template & example"
4. This will open a dialog with the complete CSS template

Understanding the Template

The template uses modern CSS with OKLCH color format for better color accuracy and accessibility. Here's what each section controls:

Color Variables

:root {
  --background: oklch(0.98 0.005 240);     /* Main background */
  --foreground: oklch(0.15 0.02 240);      /* Main text color */
  --primary: oklch(0.2 0.02 250);          /* Primary buttons/links */
  --card: oklch(0.96 0.01 240);            /* Card backgrounds */
  --border: oklch(0.88 0.02 240);          /* Borders and dividers */
}

OKLCH Color Format

OKLCH (Lightness, Chroma, Hue) is a modern color format that provides:

• Better accuracy - More consistent colors across devices
• Natural color mixing - Colors blend more naturally
• Accessibility - Better contrast calculations

How OKLCH works:

• L (Lightness): 0 = black, 1 = white
• C (Chroma): 0 = gray, higher = more vivid
• H (Hue): 0-360 degrees (like a color wheel)

Creating Your Custom Theme

Step 1: Copy the Template

1. Click "Theme template & example"
2. Copy the entire CSS code that appears

Step 2: Choose Your Colors

Use OKLCH Values Replace the color values with your preferred OKLCH colors:

:root {
  --primary: oklch(0.6 0.25 280);    /* Your brand purple */
  --secondary: oklch(0.7 0.2 180);   /* Your accent blue */
  --background: oklch(0.98 0.01 280); /* Light purple background */
}

Step 3: Customize Dark Mode

The template includes both light and dark mode variants:

.dark {
  --background: oklch(0.18 0.01 240);    /* Dark background */
  --foreground: oklch(0.96 0.005 240);   /* Light text */
  /* ... other dark mode colors */
}

Step 4: Apply Your Theme

1. Upload your new css file
2. Select it and click "Apply Theme"

For Non-Developers: Get Help from AI

Not comfortable editing CSS? You can get help from AI assistants like ChatGPT!

How to Use AI for Theme Creation

1. Copy the CSS template from the "Theme template & example" button
2. Go to ChatGPT or Claude
3. Ask something like: "Help me modify this CSS theme template to use navy blue as primary, sky blue as secondary, and gold for accents"
4. Copy the modified CSS back to Altitude

Note: Always use OKLCH color format in your requests - this ensures the best color accuracy and consistency across devices.

Best Practices

Color Selection

• Contrast: Ensure text is readable on backgrounds
• Brand consistency: Use your airline's official colors

Testing

• Multiple devices: Test on desktop, tablet, and mobile
• Both modes: If using custom dark mode, test thoroughly
• All pages: Check dashboard, pilot roster, flight logging, etc.
• User feedback: Show to a few pilots before finalizing

Maintenance

• Document changes: Keep notes on your custom colors
• Save your CSS: Keep a backup of your theme file
• Regular reviews: Update themes as your brand evolves

Troubleshooting

Common Issues

• Theme not applying: Check that your CSS file is valid
• Colors look wrong: Double-check your OKLCH values are correct
• Need to revert: Use a built-in theme to reset changes

Support

Need help with theming?

• Documentation: Check this tutorial for guidance
• Community: Join our Discord server for help
• AI Assistance: Use ChatGPT or Claude to help modify CSS templates

Ready to make your Crew Center uniquely yours? Start with a built-in theme or dive into custom creation - your pilots will appreciate the personalized touch!