color_theme_provider

Description:

color theme provider

Color Theme Provider #
Use your custom theme without relying on Material Design or Cupertino design tokens.
The ColorThemeProvider package lets you define your own color scheme according to your app's needs.
Features #

Define your own color properties. No need to depend on Google's ColorScheme or Apple's CupertinoThemeData
Automatically uses the theme parameter when the device is in light mode
Uses the darkTheme parameter when the device is in dark mode
Properly scoped and accessible within the widget tree


Usage #
Import it #
Use pub add in your project:
flutter pub add color_theme_provider
copied to clipboard
Or manually add the package to your pubspec.yaml
dependencies:

color_theme_provider: 1.1.1
copied to clipboard
Defining your own theme #
To make your own theme, create a base class that extends or implements the ColorTheme abstract class and define your required properties.
For example:
import 'package:color_theme_provider/color_theme_provider.dart';
import 'package:flutter/material.dart';

abstract class MyTheme implements ColorTheme {
Color get mainColor;
Color get containerColor;
Color get backgroundColor;
Color get textColor;
}

final class LightMyTheme implements MyTheme {
@override
final Color mainColor = const Color(0xFF7BD3EA);

@override
final Color containerColor = const Color(0xFFA1EEBD);

@override
final Color backgroundColor = const Color(0xFFFCFCFC);

@override
final Color textColor = Colors.black;
}

final class DarkMyTheme implements MyTheme {
@override
final Color mainColor = const Color(0xFF7BD3EA);

@override
final Color containerColor = const Color(0xFF007F73);

@override
final Color backgroundColor = const Color(0xFF2C2C2C);

@override
final Color textColor = Colors.white;
}
copied to clipboard
Accessing your theme through ColorThemeProvider #
The ColorThemeProvider uses an InheritedNotifier under the hood. This means your custom theme can be accessed if your widgets have the same scope as the theme provider.
ColorThemeProvider(
theme: LightMyTheme,
darkTheme: DarkMyTheme(),
child: const MyApp(),
),
copied to clipboard
Using the color theme #
If your widgets are under the ColorThemeProvider widget tree, you can access your theme through the context. You can get the nearest ColorTheme using the BuildContext's extension function colorTheme<T>.
final theme = context.colorTheme<MyTheme>();
//Access the properties of your custom theme
theme.mainColor;
theme.backgroundColor;
theme.textColor;
copied to clipboard
Setting the color theme dynamically #
It is possible to change the theme used for light or darkmode while running the app through the ColorThemeManager. Obtain this instance using the BuildContext.
final colorThemeManager = context.colorThemeManager<MyTheme>();

/// Update current light theme
colorThemeManager.setTheme(newTheme);

/// Update current dark theme
colorThemeManager.setDarkTheme(newTheme);
copied to clipboard
Checking if platform is in dark mode #
Use the ColorThemeManager to check whether the platform is in dark mode or not.
final colorThemeManager = context.colorThemeManager<MyTheme>();

/// Check whether app is in light or darkmode
/// [Brightness.dark] for dark mode and [Brightness.light] for light mode;
colorThemeManager.getCurrentMode();
copied to clipboard