Themes

Here you can find the theme related files. It contains all the settings & logic for the theme. It is divided into 3 parts:

• providers: contains the providers for the theme, font family and theme mode.
• helpers: contains the helpers for the theme, font family and theme mode.
• extention: contains the extention for the theme, font family and theme mode.

If you want to add new themees this is the place to do it. By default there are 2 themes: light and dark. You can add more themes by adding a new file in the helpers folder. The file should be named after the theme and should contain the ThemeData for the theme.

lib/services/themes/
├── constants
│   └── app_fonts.dart
├── extention
│   └── color_extention.dart
├── helpers
│   ├── dark_mode
│   │   ├── dark_mode_helper.dart
│   │   └── dark_mode_helper.g.dart
│   └── light_mode
│       ├── light_mode_helper.dart
│       └── light_mode_helper.g.dart
└── providers
    ├── color_scheme_seed_provider.dart
    ├── color_scheme_seed_provider.g.dart
    ├── font_family_provider.dart
    ├── font_family_provider.g.dart
    ├── theme_mode_provider.dart
    ├── theme_mode_provider.g.dart
    ├── themes_provider.dart
    └── themes_provider.g.dart

Helpers

Here you will add themes for the app. By default there are 2 themes: light and dark. So there are 2 files in the helpers folder. dark_mode and light_mode. Each file contains the ThemeData for the theme. You can add more themes by adding a new file in the helpers folder.

Aurora use riverpod for state management. Here the ThemeData is managed by riverpod state provider.

part 'light_mode_helper.g.dart';
 
@riverpod
ThemeData lightTheme(LightThemeRef ref) {
  final fontFamily = ref.watch(appFontServiceProvider);
  final colorSchemeSeed = ref.watch(appColorSchemeSeedProvider);
 
  ThemeData lightTheme() {
    return ThemeData(
      brightness: Brightness.light,
      useMaterial3: true,
      colorSchemeSeed: colorSchemeSeed,
      fontFamily: fontFamily,
    );
  }
 
  return lightTheme();
}
 

// GENERATED CODE - DO NOT MODIFY BY HAND

Constants

Here I am adding a app_fonts file. This file contains the fonts that are used in the app. You can add more fonts here.

@immutable
class AppFonts {
  static List<String?> list = [
    GoogleFonts.ubuntu().fontFamily,
    GoogleFonts.notoSans().fontFamily,
    GoogleFonts.notoSansBengali().fontFamily,
  ];
}

Providers

Here you will find the providers for the theme, font family and theme mode. By default there are 3 providers: themes, fontFamily and themeMode. You can add more providers by adding a new file in the providers folder. The file should be named after the provider and should contain the provider.

appThemeServiceProvider

This is responsible for the theme mode. It is a state provider that returns the ThemeMode for the app. It is a state provider because it is used in the appThemeService provider. It depending on the appSettingsProvider provider. It returns the ThemeMode based on the isSystemThemeMode, isDarkMode and isLightMode values.

part 'theme_mode_provider.g.dart';
 
@riverpod
ThemeMode? appThemeService(AppThemeServiceRef ref) {
  final appSettings = ref.watch(appSettingsProvider);
 
  final k = appSettings.whenData(
    (value) => value.isSystemThemeMode
        ? ThemeMode.system
        : value.isDarkMode
            ? ThemeMode.dark
            : ThemeMode.light,
  );
 
  return k.value;
}

appFontServiceProvider

This is responsible for the font family. It is a state provider that returns the String for the font family. It is a state provider because it is used in the appFontService provider. It depending on the appSettingsProvider provider. It returns the String based on the isSystemFontFamily, isDefaultFontFamily and isCustomFontFamily values.

part 'font_family_provider.g.dart';
 
@riverpod
String? appFontService(AppFontServiceRef ref) {
  final appSettings =
      ref.watch(appSettingsProvider.select((data) => data.value?.fontFamily));
  return appSettings;
}

appColorSchemeSeedProvider

This is responsible for the color scheme seed. It is a state provider that returns the Color for the app. It is a state provider because it is used in the appColorSchemeSeed provider. It depending on the appSettingsProvider provider. It returns the ColorSchemeSeed value as Hex Code. We are using the hexToColor extension to convert the Hex Code to Color.

part 'color_scheme_seed_provider.g.dart';
 
extension HexToColor on String {
  Color hexToColor() {
    return Color(int.parse(replaceFirst('#', '0xFF')));
  }
}
 
@riverpod
Color? appColorSchemeSeed(AppColorSchemeSeedRef ref) {
  final color = ref
      .watch(appSettingsProvider.select((data) => data.value?.colorSchemeSeed));
 
  return color?.hexToColor();
}

others providers

Here you can add the providers that are related to the theme. By default there is only one provider for the isDarkMode and themeIcon. It is used to check if the theme is dark mode or not and to get the icon for the theme mode.

part 'themes_provider.g.dart';
 
@riverpod
bool isDarkMode(IsDarkModeRef ref) {
  final themeMode = ref.watch(appThemeServiceProvider);
  return themeMode == ThemeMode.dark;
}
 
@riverpod
IconData themeIcon(ThemeIconRef ref) {
  final themeMode = ref.watch(appThemeServiceProvider);
 
  switch (themeMode ?? ThemeMode.system) {
    case ThemeMode.light:
      return Icons.brightness_5;
 
    case ThemeMode.dark:
      return Icons.brightness_3;
 
    case ThemeMode.system:
      return Icons.brightness_auto;
  }
}
 

Extention

Here you can add the extentions that are related to the theme. By default there is only one extention for the Color class. It is used to convert the Color to a hex string.

import 'dart:ui' show Color;
 
extension ColorToHex on Color {
  String toHex() {
    return '#${value.toRadixString(16).padLeft(8, '0').substring(2)}';
  }
}