Theme Data
Defines the theme and color scheme for the app.
The supported color schemes are:
- blue
- gray
- green
- neutral
- orange
- red
- rose
- slate
- stone
- violet
- yellow
- zinc
Usage
import 'package:shadcn_ui/shadcn_ui.dart';
@overrideWidget build(BuildContext context) { return ShadApp( darkTheme: ShadThemeData( brightness: Brightness.dark, colorScheme: const ShadSlateColorScheme.dark(), ), child: ... );}
You can override specific properties of the selected theme/color scheme:
import 'package:shadcn_ui/shadcn_ui.dart';
@overrideWidget build(BuildContext context) { return ShadApp( darkTheme: ShadThemeData( brightness: Brightness.dark, colorScheme: const ShadSlateColorScheme.dark( background: Colors.blue, ), primaryButtonTheme: const ShadButtonTheme( backgroundColor: Colors.cyan, ), ), ), child: ... );}
ShadColorScheme.fromName
If you want to allow the user to change the default shadcn themes, I suggest using ShadColorScheme.fromName
.
// available color scheme namesfinal shadThemeColors = [ 'blue', 'gray', 'green', 'neutral', 'orange', 'red', 'rose', 'slate', 'stone', 'violet', 'yellow', 'zinc',];
final lightColorScheme = ShadColorScheme.fromName('blue');final darkColorScheme = ShadColorScheme.fromName('slate', brightness: Brightness.dark);
In this way you can easily create a select to change the color scheme, for example:
import 'package:awesome_flutter_extensions/awesome_flutter_extensions.dart';import 'package:shadcn_ui/shadcn_ui.dart';
// Somewhere in your appShadSelect<String>( initialValue: 'slate', maxHeight: 200, options: shadThemeColors.map( (option) => ShadOption( value: option, child: Text( option.capitalizeFirst(), ), ), ), selectedOptionBuilder: (context, value) { return Text(value.capitalizeFirst()); }, onChanged: (value) { // rebuild the app using your state management solution },),
For example I’m using solidart as state management, here it is the example code used to rebuild the app widget when the user changes the theme mode. Check the “Toggle Theme” example at https://solidart.mariuti.com/examples
The same can be done for the color scheme, using a Signal<String>()