# App Theme Guide

This directory contains the centralized theme configuration for the b0esche.cloud application.

## Files

- `app_theme.dart` - Main theme file containing all color constants and theme definitions

## Using the Theme

Import the theme in any file:
```dart
import '../theme/app_theme.dart';
```

### Color Constants

Use the predefined colors throughout your app:

- `AppTheme.primaryBackground` - Black background (Colors.black)
- `AppTheme.primaryText` - White text (Colors.white)
- `AppTheme.secondaryText` - Light gray text (Colors.white70)
- `AppTheme.accentColor` - Cyan accent color (RGB 100, 200, 255)
- `AppTheme.glassBackground` - White color for glass effect

### Glass Morphism

Use the predefined glass decoration:
```dart
Container(
  decoration: AppTheme.glassDecoration,
  child: YourWidget(),
)
```

This provides:
- 10% white background opacity
- 10px blur effect
- 16px border radius
- 0.2 opacity white border

### Dimensions

- `AppTheme.glassOpacity` - 0.1 (10%)
- `AppTheme.glassBlur` - 10.0

### Theme Data

The app uses `AppTheme.darkTheme` which is set in `main.dart`:
```dart
MaterialApp.router(
  routerConfig: _router,
  theme: AppTheme.darkTheme,
)
```

## Best Practices

1. Always use `AppTheme` constants instead of hardcoding colors
2. For new colors, add them to the `AppTheme` class first
3. Update this README when adding new theme properties
4. Use semantic naming (e.g., `primaryText` instead of `lightColor`)

## Files Using Theme

- `lib/pages/home_page.dart` - Main page with navigation buttons
- `lib/pages/login_form.dart` - Login form styling
- `lib/pages/file_explorer.dart` - File explorer interface
- `lib/pages/document_viewer.dart` - Document viewer
