always light theme, even if dark theme is active

[thomas725]

Hi there!

I'm sorry if this might be stupid, I'm just starting to learn flutter right now.

I've used easy_dynamic_theme in my playground app to enable it to manually switch between light and dark themes.

Adding the SettingsList to my Playground made it not work at all at first, had to add shrinkWrap: true, to get it to display, and now it always displays in light theme, no matter what the device theme is set to.

How can I make your settings theming compatible with the one I'm using for the rest of my playground app (easy_dynamic_theme)?

UPDATE: I've just now found one thing that actually changes when the theme is switched between dark & light: The toggle-slider of switchTile settings is colored teal in dark theme and blue in light theme.

[thomas725]

Okey, so I found a workaround:

  var lightTheme = const SettingsThemeData();
  
  var darkTheme = const SettingsThemeData(
    settingsListBackground: Colors.black,
    dividerColor: Colors.green,
    inactiveTitleColor: Colors.grey,
    inactiveSubtitleColor: Colors.grey,
    settingsTileTextColor: Colors.white,
  );

  SettingsThemeData getSettingsTheme(BuildContext context) {
    switch (EasyDynamicTheme.of(context).themeMode) {
      case ThemeMode.dark:
        return darkTheme;
      case ThemeMode.light:
        return lightTheme;
      case ThemeMode.system:
        if (MediaQuery.platformBrightnessOf(context) == Brightness.light) {
          return lightTheme;
        } else {
          return darkTheme;
        }
      case null:
        return darkTheme;
    }
  }

And use that method when creating SettingsList like that: lightTheme: getSettingsTheme(context)

[Denzel101]

The reason why it's on light theme it's because you haven't defined the colorscheme, which is crucial since it depends on the Brightnessproperty. What you can do is :

1. Create a seperate class themes.dart with different theming options i.e light mode and dark mode

class MyThemes {
  static final darkTheme = ThemeData(
      scaffoldBackgroundColor: Colors.grey[900],
      ),
      primaryColor: Colors.white,
      visualDensity: VisualDensity.adaptivePlatformDensity,
      fontFamily: 'CustomFont',
      colorScheme: const ColorScheme.dark(),
);

  static final lightTheme = ThemeData(
    scaffoldBackgroundColor: Colors.white,
    ),
    primaryColor: Colors.black,
    visualDensity: VisualDensity.adaptivePlatformDensity,
    fontFamily: 'CustomFont',
    colorScheme: const ColorScheme.light(),
  );
}

2. And then in your main.dart file, import your themes file

return MaterialApp( 
      title: title,
       theme: MyThemes.lightTheme, 
      darkTheme: MyThemes.darkTheme, 
      themeMode: EasyDynamicTheme.of(context).themeMode, 
      home: new MyHomePage(title: title,) 
    ); 

3. Restart your app and it should work now.

[thomas725]

That's very similar to what I'm using, find my playground here: https://gitlab.com/thomas351/flutter-playground/

This theming automatically works everywhere, but not in the SettingsList. Its constructor allows passing instances of SettingsThemeData for lightTheme & darkTheme, though I couldn't find any way to get it to use the SettingsThemeData passed as darkTheme (even though my system default theme-mode is dark).

So the only way I could get it to work until now is as described two comments above (on Februar 24th).

[M-ixai-L]

Hey, @thomas725 can you add brightness: Brightness.dark parameter to your darkThemeData and brightness: Brightness.light to lightThemeData respectively, don't forget about appBarTheme so that everything works correctly. This way you can not set the themes directly in SettingsList, but just specify them in MaterialApp. Let me know if it works.

[yadaniyil]

Hey @thomas725, please reopen the issue if you still have questions

[Shunt22]

Hey, @thomas725 can you add brightness: Brightness.dark parameter to your darkThemeData and brightness: Brightness.light to lightThemeData respectively, don't forget about appBarTheme so that everything works correctly. This way you can not set the themes directly in SettingsList, but just specify them in MaterialApp. Let me know if it works.

Hi! I was playing with themes today. Thanks to your advise I got it working. But it appears that brightness parameter in SettingsListTile constructor does nothing since you calculate brightness here: https://github.com/yako-dev/flutter-settings-ui/blob/d8d97b23474fc0697334812e9dcfc4d5adb5d071/lib/src/list/settings_list.dart#L53

Am I missing something?