Working with Color Scheme

FlutKit provides a centralized and scalable color scheme system that allows developers to define, switch, and manage multiple theme palettes across the entire application. This system is tightly integrated with the Theme Selector in the top navigation bar and can be easily extended.

This guide explains:

• How the color scheme system works
• How to add a new theme palette
• How to expose it in the Theme Selector
• How to set a default color scheme

Overview of the Color Scheme Architecture

FlutKit uses a singleton-based palette manager (ThemePalette) that stores all core colors used throughout the UI, such as:

• Primary
• Secondary
• Error
• Success
• Info
• Warning
• Text color

The active palette is selected by an index, making it simple to switch themes dynamically at runtime.

1. Adding a New Color Scheme (Theme Palette)

File Location

lib/theme/themes.dart

lib/theme/themes.dart

Core Class: ThemePalette

The ThemePalette class defines all color roles used by the UI and provides a setPalette(int index) method to switch between palettes.

To add a new palette:

1. Open lib/theme/themes.dart
2. Add a new case inside setPalette(int index)
3. Assign all required colors

Example: Adding a New Palette (Case 5)

case 5:
  primary = const Color(0xFF1E1E2F);
  primaryDark = const Color(0xFF0F0F1A);
  secondary = const Color(0xFF6C63FF);
  error = const Color(0xFFE63946);
  success = const Color(0xFF2EC4B6);
  info = const Color(0xFF4EA8DE);
  warning = const Color(0xFFFFC857);
  text = const Color(0xFFADB5BD);
  break;

case 5:
  primary = const Color(0xFF1E1E2F);
  primaryDark = const Color(0xFF0F0F1A);
  secondary = const Color(0xFF6C63FF);
  error = const Color(0xFFE63946);
  success = const Color(0xFF2EC4B6);
  info = const Color(0xFF4EA8DE);
  warning = const Color(0xFFFFC857);
  text = const Color(0xFFADB5BD);
  break;

Important:

• Always define all color roles
• Keep contrast and accessibility in mind
• The index value must be unique

2. Displaying the Palette in Theme Selector (Top Nav Bar)

Adding a palette in ThemePalette alone does not automatically show it in the Theme Selector UI.
You must also register it in the mockup data used by the selector.

File Location

/lib/views/widgets/advanced_ui/top_nav_bar_widget.dart

/lib/views/widgets/advanced_ui/top_nav_bar_widget.dart

Theme Palette Mockup Data

const List<Palette> palettes = [
  Palette(
    'Default Blue',
    Color(0xFF313F6C),
  ),
  Palette(
    'Deep Blue',
    Color(0xFF303e8a),
  ),
  Palette(
    'Purple',
    Color(0xFF463171),
  ),
  Palette(
    'Indigo',
    Color(0xFF520DC2),
  ),
  Palette(
    'Cyan',
    Color(0xFF087990),
  ),
];

const List<Palette> palettes = [
  Palette(
    'Default Blue',
    Color(0xFF313F6C),
  ),
  Palette(
    'Deep Blue',
    Color(0xFF303e8a),
  ),
  Palette(
    'Purple',
    Color(0xFF463171),
  ),
  Palette(
    'Indigo',
    Color(0xFF520DC2),
  ),
  Palette(
    'Cyan',
    Color(0xFF087990),
  ),
];

To add your new palette:

• Append a new Palette entry
• Ensure the order matches the palette index in ThemePalette

Example:

Palette(
  'Dark Violet',
  Color(0xFF1E1E2F),
),

Palette(
  'Dark Violet',
  Color(0xFF1E1E2F),
),

3. Setting the Default Color Scheme

You can define which palette is active when the app starts.

File Location

lib/configs/global_config.dart

lib/configs/global_config.dart

Default Theme Index

static const int defaultThemeIndex = 0;

static const int defaultThemeIndex = 0;

Index mapping example:

• 0 → Default Blue
• 1 → Deep Blue
• 2 → Purple
• 3 → Indigo
• 4 → Cyan
• 5 → Your custom palette

Update this value to change the app’s default color scheme.

Best Practices

• Keep color contrast WCAG-compliant
• Avoid changing palette order after release (index-based)
• Use semantic colors (error, success, etc.) instead of hardcoded values
• Test palettes in both light and dark modes
• Treat top_nav_bar_data.dart as mockup data—you may later replace it with API-driven data

Summary

FlutKit’s color scheme system allows you to:

• Define unlimited theme palettes
• Switch themes dynamically via index
• Integrate seamlessly with the Top Navigation Theme Selector
• Control default appearance globally

By following this structure, you ensure a maintainable, scalable, and brand-ready theming system across your Flutter dashboard.