void main() { runApp(_SwitchingThemeApp()); } /// Properties that help me keep track of the example being run. bool _useMaterial = false; class _SwitchingThemeApp extends StatefulWidget { @override _SwitchingThemeAppState createState() => _SwitchingThemeAppState(); static Future updateTheme( final BuildContext context, final ThemeMode themeMode, ) async { final state = context.ancestorStateOfType( const TypeMatcher<_SwitchingThemeAppState>(), ) as _SwitchingThemeAppState; if (state?.mounted == true) { state.updateTheme(themeMode); return true; } return false; } } class _SwitchingThemeAppState extends State<_SwitchingThemeApp> { ThemeMode _themeMode = ThemeMode.system; final ThemeData _light = ThemeData.from(colorScheme: ColorScheme.light()); final ThemeData _dark = ThemeData.from(colorScheme: ColorScheme.dark()); void updateTheme(ThemeMode mode) { setState(() { _themeMode = mode; }); } @override Widget build(BuildContext context) { if (_useMaterial) { return MaterialApp( home: _DummyPage(), themeMode: _themeMode, theme: _light, darkTheme: _dark, ); } else { final platformBrightness = MediaQuery.platformBrightnessOf(context); ThemeData currentTheme; if (_themeMode == ThemeMode.system) { currentTheme = platformBrightness == Brightness.light ? _light : _dark; } else { currentTheme = _themeMode == ThemeMode.light ? _light : _dark; } return CupertinoApp( home: _DummyPage(), theme: MaterialBasedCupertinoThemeData(materialTheme: currentTheme), ); } } } class _DummyPage extends StatelessWidget { @override Widget build(BuildContext context) { /// Required only because we don't if the example /// is being run using material widget or cupertino widget. final messageStyle = _useMaterial ? Theme.of(context).textTheme.headline : CupertinoTheme.of(context).textTheme.navLargeTitleTextStyle; final background = _useMaterial ? Theme.of(context).scaffoldBackgroundColor : CupertinoTheme.of(context).scaffoldBackgroundColor; final brightness = _useMaterial ? Theme.of(context).brightness : CupertinoTheme.of(context).brightness; return SafeArea( child: Container( color: background, child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( "My color will change depending on the theme", style: messageStyle, textAlign: TextAlign.center, ), Switch.adaptive( value: brightness == Brightness.dark, onChanged: (enable) { _SwitchingThemeApp.updateTheme( context, enable ? ThemeMode.dark : ThemeMode.light, ); }, ) ], ), ), ); } }