Theme in Shadcn-ui

[ZorinFoss]

Hi @nank1ro ,

I have 2 question:

1. How i can change AppBar theme ex. background-color in ShadThemeData.
2. Can i use flex_color_scheme package with shadcn-ui, and if i can how i use it.

Thanks,

shadcn_ui version

0.20.3

[nank1ro]

1.  ShadApp.material(
          materialThemeBuilder: (context, theme) {
            return theme.copyWith(
              appBarTheme: theme.appBarTheme.copyWith(
                backgroundColor: Colors.red,
              ),
            );
          },
    ),

2.  ShadApp.material(
          materialThemeBuilder: (context, theme) {
            return FlexThemeData.light(scheme: FlexScheme.mandyRed);
          },
    ),

[nank1ro]

Refer to the documentation for any other issue https://flutter-shadcn-ui.mariuti.com/

[ZorinFoss]

what if i want to use themeMode

theme: AppTheme.light,
darkTheme: AppTheme.dark,
themeMode: ThemeMode.system,

it only take ShadThemeData

[nank1ro]

pass the themeMode also to ShadApp

[ZorinFoss]

i use this code but theme mode not changed

materialThemeBuilder: (context, theme) {
        return theme.brightness == Brightness.light
            ? AppTheme.light
            : AppTheme.dark;
      },

[nank1ro]

can't help without seeing all the code you used

[ZorinFoss]

here the code

class AppTheme {
  static ThemeData dark = ThemeData.dark().copyWith();

  static ThemeData light = ThemeData.light().copyWith();
}

class MainApp extends ConsumerWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final appRouter = ref.watch(appRouterProvider);
    final currentThemeMode = ref.watch(appThemeModeProvider);

    return ShadApp.router(
      materialThemeBuilder: (context, theme) {
        return theme.brightness == Brightness.light
            ? AppTheme.light
            : AppTheme.dark;
      },
      themeMode: currentThemeMode,
      routerConfig: appRouter,
    );
  }
}

[ZorinFoss]

If i add theme and darkTheme it works, but theme and darkTheme need ShadThemeData.

[nank1ro]

Again, follow the documentation, if you need to have material widgets in combination with shadcn you should use ShadApp.material or ShadApp.materialRouter.
By default no darkTheme is created, you have to provide one.

[ZorinFoss]

Thank you for trying helping me.

[nank1ro]

I suggest you to join discord where other can help you too (you can find the link in the discord badge in the Readme).
The darkTheme behaviour is the same of Material