Button to switch from dark to light theme

Question

This code is responsible for switching from a light theme to a dark one. The last line of code is responsible for the options for switching from dark to light theme: a white button and a sliding yellow color.

Tell me how can I achieve that on a light background this button is black and slides with yellow accompaniment.

I will also be grateful if you tell me how to make the width of this button the same as the top two.

class ChangeThemeButtonWidget extends StatelessWidget {
  const ChangeThemeButtonWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final themeProvider = Provider.of<ThemeProvider>(context);

    return Switch.adaptive(
      value: themeProvider.isDarkMode,
      onChanged: (value) async {
        SharedPreferences prefs = await SharedPreferences.getInstance();
        await prefs.setBool('isDarkMode', value);
        final provider = Provider.of<ThemeProvider>(context, listen: false);
        provider.toggleTheme(value);
      },
      activeColor: themeProvider.isDarkMode ? Colors.white : Colors.yellow,
    );
  }
}

Answer 1

I think the issue is that you are expecting both the left position and the right position to be active state.

But a switch works in a way that the left position is the inactive position and the right is the active position.

You need to set the inactiveThumbColor as black for light mode.

  activeColor: themeProvider.isDarkMode ? Colors.white : Colors.yellow,
  inactiveThumbColor: themeProvider.isDarkMode ? Colors.yellow : Colors.black,