Skip to main content
Neo provides built-in theme switching capabilities through the neoCurrentThemeProvider. You can switch between theme modes (light, dark, system) or switch to completely different custom themes.

Understanding Modes vs Themes

Theme Modes control which theme to use:
  • light - Always use the light theme
  • dark - Always use the dark theme
  • system - Automatically choose based on device settings
Themes are the actual theme objects:
  • Default themes: NeoThemeLight(), NeoThemeDark()
  • Custom themes: Your brand themes, seasonal themes, compact themes, etc.

Example

class ThemeToggle extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final currentMode = ref.read(neoCurrentThemeProvider.notifier).getSelectedThemeMode();
    
    return NeoButton(
      label: currentMode == NeoThemeMode.light ? "Dark Mode" : "Light Mode",
      icon: currentMode == NeoThemeMode.light 
        ? PhosphorIconsRegular.moon 
        : PhosphorIconsRegular.sun,
      onPressed: () {
        final newMode = currentMode == NeoThemeMode.light 
          ? NeoThemeMode.dark 
          : NeoThemeMode.light;
          
        ref.read(neoCurrentThemeProvider.notifier).updateTheme(mode: newMode);
      },
    );
  }
}

Theme Provider

neoCurrentThemeProvider
StateNotifierProvider
Manages theme modes and custom themes throughout your application.

Provider Methods

// Switch to a specific mode
ref.read(neoCurrentThemeProvider.notifier).updateTheme(mode: NeoThemeMode.dark);

// Switch to system mode
ref.read(neoCurrentThemeProvider.notifier).updateTheme(mode: NeoThemeMode.system);

Enums

NeoThemeMode

Controls which theme to display based on different strategies.
  • system: Automatically follows device’s system theme setting and updates in real-time.
  • light: Always uses the light theme regardless of system settings.
  • dark: Always uses the dark theme regardless of system settings.
I