Loading...
Loading...
Configure Shadcn UI theme and color schemes (ShadThemeData, ShadColorScheme), override colors, use ShadColorScheme.fromName for theme switchers, and add custom colors. Use when theming a Flutter shadcn_ui app, changing color scheme, or adding custom theme colors.
npx skill4agent add serverpod/skills-registry shadcn_ui-themeShadThemeDataShadColorSchemeimport 'package:shadcn_ui/shadcn_ui.dart';
return ShadApp(
darkTheme: ShadThemeData(
brightness: Brightness.dark,
colorScheme: const ShadSlateColorScheme.dark(),
),
child: ...,
);ShadApp(
darkTheme: ShadThemeData(
brightness: Brightness.dark,
colorScheme: const ShadSlateColorScheme.dark(
background: Colors.blue,
),
primaryButtonTheme: const ShadButtonTheme(
backgroundColor: Colors.cyan,
),
),
...
);ShadColorSchemeShadColorScheme.fromNamefinal 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);ShadSelect<String>customreturn ShadApp(
theme: ShadThemeData(
colorScheme: const ShadZincColorScheme.light(
custom: {
'myCustomColor': Color.fromARGB(255, 177, 4, 196),
},
),
),
);ShadTheme.of(context).colorScheme.custom['myCustomColor']!extension CustomColorExtension on ShadColorScheme {
Color get myCustomColor => custom['myCustomColor']!;
}ShadTheme.of(context).colorScheme.myCustomColor