The app is starting on dark theme even after setting the initial theme as light mode.

[haaris94]

The app is starting on dark theme even after setting the initial theme as light mode. If I remove the Adaptive theme code and set the app theme to light mode in Material app it works fine.

Here I have set the app theme explicitly to light mode.

class Home extends StatelessWidget {
  const Home({super.key});

  @override
  Widget build(BuildContext context) {
    return AdaptiveTheme(
      light: AppTheme.lightTheme,
      dark: AppTheme.darkTheme,
      initial: AdaptiveThemeMode.light, // <- Explicit light mode
      builder: (theme, darkTheme) {
        return MaterialApp(
          title: 'HexaWriter',
          theme: theme,
          darkTheme: darkTheme,
          debugShowCheckedModeBanner: false,
          home: const SplashScreen(),
        );
      },
    );
  }
}

and here is my app theme code

class AppTheme {
  AppTheme._();

  static ThemeData lightTheme = ThemeData(
    useMaterial3: true,
    colorScheme: const ColorScheme.light(
      primary: primaryColor,
      secondary: secondaryColor,
      surface: surfaceColor,
      error: errorColor,
      onPrimary: onPrimaryColor,
      onSecondary: onSecondaryColor,
      onSurface: onSurfaceColor,
      onError: onErrorColor,
    ),
    scaffoldBackgroundColor: Colors.white,
    textTheme: GoogleFonts.outfitTextTheme().apply(bodyColor: Colors.black, displayColor: Colors.black),
    inputDecorationTheme: InputTheme.light,
    checkboxTheme: CheckboxThemeData(
      fillColor: WidgetStateProperty.all(primaryColor),
    ),
    radioTheme: RadioThemeData(
      fillColor: WidgetStateProperty.all(primaryColor),
    ),
    elevatedButtonTheme: ElevatedButtonThemeData(
      style: ElevatedButton.styleFrom(
        backgroundColor: primaryColor,
        foregroundColor: onPrimaryColor,
        disabledForegroundColor: Colors.grey,
      ),
    ),
    textButtonTheme: TextButtonThemeData(
      style: TextButton.styleFrom(
        foregroundColor: primaryColor,
        disabledForegroundColor: Colors.grey,
      ),
    ),
    outlinedButtonTheme: OutlinedButtonThemeData(
      style: OutlinedButton.styleFrom(
        foregroundColor: primaryColor,
        disabledForegroundColor: Colors.grey,
      ),
    ),
    tabBarTheme: const TabBarTheme(
      unselectedLabelColor: unselectedItemColor,
    ),
    navigationRailTheme: const NavigationRailThemeData(
      unselectedIconTheme: IconThemeData(color: unselectedItemColor),
      unselectedLabelTextStyle: TextStyle(color: unselectedItemColor),
    ),
    bottomNavigationBarTheme: const BottomNavigationBarThemeData(
      unselectedItemColor: unselectedItemColor,
    ),
    navigationBarTheme: const NavigationBarThemeData(
      indicatorColor: primaryColor,
    ),
  );

  static ThemeData darkTheme = ThemeData(
    useMaterial3: true,
    colorScheme: const ColorScheme.dark(
      primary: darkPrimaryColor,
      secondary: darkSecondaryColor,
      surface: darkSurfaceColor,
      error: darkErrorColor,
      onPrimary: darkOnPrimaryColor,
      onSecondary: darkOnSecondaryColor,
      onSurface: darkOnSurfaceColor,
      onError: darkOnErrorColor,
    ),
    textTheme: GoogleFonts.outfitTextTheme().apply(bodyColor: Colors.white, displayColor: Colors.white),
    inputDecorationTheme: InputTheme.dark,
    checkboxTheme: CheckboxThemeData(
      fillColor: WidgetStateProperty.all(darkPrimaryColor),
    ),
    radioTheme: RadioThemeData(
      fillColor: WidgetStateProperty.all(darkPrimaryColor),
    ),
    elevatedButtonTheme: ElevatedButtonThemeData(
      style: ElevatedButton.styleFrom(
        backgroundColor: darkPrimaryColor,
        foregroundColor: darkOnPrimaryColor,
        disabledForegroundColor: Colors.grey,
      ),
    ),
    textButtonTheme: TextButtonThemeData(
      style: TextButton.styleFrom(
        foregroundColor: darkPrimaryColor,
        disabledForegroundColor: Colors.grey,
      ),
    ),
    outlinedButtonTheme: OutlinedButtonThemeData(
      style: OutlinedButton.styleFrom(
        foregroundColor: darkPrimaryColor,
        disabledForegroundColor: Colors.grey,
      ),
    ),
    tabBarTheme: const TabBarTheme(
      unselectedLabelColor: darkUnselectedItemColor,
    ),
    navigationRailTheme: const NavigationRailThemeData(
      unselectedIconTheme: IconThemeData(color: darkUnselectedItemColor),
      unselectedLabelTextStyle: TextStyle(color: darkUnselectedItemColor),
    ),
    bottomNavigationBarTheme: const BottomNavigationBarThemeData(
      unselectedItemColor: darkUnselectedItemColor,
    ),
  );
}

[BirjuVachhani]

What platform are you testing this on? Did you try uninstalling the app or clearing the preferences? (This is required in debug mode because if you have changed the theme once using AdaptiveTheme.of(context) api then that information is stored in storage to be used in sub-sequent runs!)

[haaris94]

What platform are you testing this on?

I am testing this on windows desktop in debug mode.

Did you try uninstalling the app or clearing the preferences?

Uninstalling and reinstalling the app launches the app on specified theme mode, but only on first launch. If in the next launch I set the theme from dark to light or vice-versa it does not work.

This is required in debug mode because if you have changed the theme once using AdaptiveTheme.of(context) api then that information is stored in storage to be used in sub-sequent runs!

I have not changed the theme using the AdaptiveTheme.of(context) api. My app only has Splashscreen, so I was testing theme modes by explicitly setting it in the AdaptiveTheme wrapper on MaterialApp.

[BirjuVachhani]

Passing theme mode in AdaptiveTheme is only for initial loading. Notice that the property name is called initial. If you want to change the theme, you change it with AdaptiveTheme.of(context).setThemeMode(mode).

What usecase do you have to pass a different mode in initial property? Or were you just testing it?

[haaris94]

Yeah that makes sense. I was just testing how the colors looked in different theme modes. Thank you for clarifying.