b0esche_cloud/b0esche_cloud/lib/theme

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:

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:

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:

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