gruvbox_color_scheme 0.0.1

Gruvbox color palette as Material 3 ColorScheme for Flutter. Provides light and dark themes with all official Gruvbox colors.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:gruvbox_color_scheme/gruvbox_color_scheme.dart';

/// Flutter code sample for [ColorScheme].

const Widget horizontalDivider = SizedBox(height: 10);
const Widget verticalDivider = SizedBox(width: 10);

void main() => runApp(const ColorSchemeExample());

class ColorSchemeExample extends StatefulWidget {
  const ColorSchemeExample({super.key});

  @override
  State<ColorSchemeExample> createState() => _ColorSchemeExampleState();
}

class _ColorSchemeExampleState extends State<ColorSchemeExample> {
  ThemeMode themeMode = ThemeMode.system;

  void updateTheme(ThemeMode value) {
    setState(() {
      themeMode = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(colorScheme: GruvboxColorScheme.light),
      darkTheme: ThemeData(colorScheme: GruvboxColorScheme.dark),
      themeMode: themeMode,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Gruvbox Color Scheme'),
          actions: <Widget>[
            SettingsButton(
              themeMode: themeMode,
              updateTheme: updateTheme,
              iconData: Icons.dark_mode,
            ),
          ],
        ),
        body: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.only(top: 5),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[ColorSchemeVariantColumn()],
            ),
          ),
        ),
      ),
    );
  }
}

class SettingsButton extends StatefulWidget {
  const SettingsButton({
    super.key,
    required this.updateTheme,
    required this.themeMode,
    required this.iconData,
  });

  final ThemeMode themeMode;
  final IconData iconData;

  final void Function(ThemeMode) updateTheme;

  @override
  State<SettingsButton> createState() => _SettingsButtonState();
}

class _SettingsButtonState extends State<SettingsButton> {
  late ThemeMode themeMode = widget.themeMode;
  late IconData iconData = widget.iconData;

  @override
  Widget build(BuildContext context) {
    final bool isLight = Theme.of(context).brightness == Brightness.light;

    return IconButton(
      icon: Icon(iconData),
      onPressed: () {
        setState(() {
          iconData = isLight ? Icons.light_mode : Icons.dark_mode;
          themeMode = isLight ? ThemeMode.dark : ThemeMode.light;
        });
        widget.updateTheme(themeMode);
      },
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final bool isLight = Theme.of(context).brightness == Brightness.light;
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 15),
      child: ColorSchemeView(
        colorScheme: isLight
            ? GruvboxColorScheme.light
            : GruvboxColorScheme.dark,
      ),
    );
  }
}

class ColorSchemeView extends StatelessWidget {
  const ColorSchemeView({super.key, required this.colorScheme});

  final ColorScheme colorScheme;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Row(
          children: <Widget>[
            Expanded(
              child: ColorGroup(
                children: <ColorChip>[
                  ColorChip(
                    'primary',
                    colorScheme.primary,
                    colorScheme.onPrimary,
                  ),
                  ColorChip(
                    'onPrimary',
                    colorScheme.onPrimary,
                    colorScheme.primary,
                  ),
                  ColorChip(
                    'primaryContainer',
                    colorScheme.primaryContainer,
                    colorScheme.onPrimaryContainer,
                  ),
                  ColorChip(
                    'onPrimaryContainer',
                    colorScheme.onPrimaryContainer,
                    colorScheme.primaryContainer,
                  ),
                ],
              ),
            ),
            verticalDivider,
            Expanded(
              child: ColorGroup(
                children: <ColorChip>[
                  ColorChip(
                    'primaryFixed',
                    colorScheme.primaryFixed,
                    colorScheme.onPrimaryFixed,
                  ),
                  ColorChip(
                    'onPrimaryFixed',
                    colorScheme.onPrimaryFixed,
                    colorScheme.primaryFixed,
                  ),
                  ColorChip(
                    'primaryFixedDim',
                    colorScheme.primaryFixedDim,
                    colorScheme.onPrimaryFixedVariant,
                  ),
                  ColorChip(
                    'onPrimaryFixedVariant',
                    colorScheme.onPrimaryFixedVariant,
                    colorScheme.primaryFixedDim,
                  ),
                ],
              ),
            ),
          ],
        ),
        horizontalDivider,
        Row(
          children: <Widget>[
            Expanded(
              child: ColorGroup(
                children: <ColorChip>[
                  ColorChip(
                    'secondary',
                    colorScheme.secondary,
                    colorScheme.onSecondary,
                  ),
                  ColorChip(
                    'onSecondary',
                    colorScheme.onSecondary,
                    colorScheme.secondary,
                  ),
                  ColorChip(
                    'secondaryContainer',
                    colorScheme.secondaryContainer,
                    colorScheme.onSecondaryContainer,
                  ),
                  ColorChip(
                    'onSecondaryContainer',
                    colorScheme.onSecondaryContainer,
                    colorScheme.secondaryContainer,
                  ),
                ],
              ),
            ),
            verticalDivider,
            Expanded(
              child: ColorGroup(
                children: <ColorChip>[
                  ColorChip(
                    'secondaryFixed',
                    colorScheme.secondaryFixed,
                    colorScheme.onSecondaryFixed,
                  ),
                  ColorChip(
                    'onSecondaryFixed',
                    colorScheme.onSecondaryFixed,
                    colorScheme.secondaryFixed,
                  ),
                  ColorChip(
                    'secondaryFixedDim',
                    colorScheme.secondaryFixedDim,
                    colorScheme.onSecondaryFixedVariant,
                  ),
                  ColorChip(
                    'onSecondaryFixedVariant',
                    colorScheme.onSecondaryFixedVariant,
                    colorScheme.secondaryFixedDim,
                  ),
                ],
              ),
            ),
          ],
        ),
        horizontalDivider,
        Row(
          children: <Widget>[
            Expanded(
              child: ColorGroup(
                children: <ColorChip>[
                  ColorChip(
                    'tertiary',
                    colorScheme.tertiary,
                    colorScheme.onTertiary,
                  ),
                  ColorChip(
                    'onTertiary',
                    colorScheme.onTertiary,
                    colorScheme.tertiary,
                  ),
                  ColorChip(
                    'tertiaryContainer',
                    colorScheme.tertiaryContainer,
                    colorScheme.onTertiaryContainer,
                  ),
                  ColorChip(
                    'onTertiaryContainer',
                    colorScheme.onTertiaryContainer,
                    colorScheme.tertiaryContainer,
                  ),
                ],
              ),
            ),
            verticalDivider,
            Expanded(
              child: ColorGroup(
                children: <ColorChip>[
                  ColorChip(
                    'tertiaryFixed',
                    colorScheme.tertiaryFixed,
                    colorScheme.onTertiaryFixed,
                  ),
                  ColorChip(
                    'onTertiaryFixed',
                    colorScheme.onTertiaryFixed,
                    colorScheme.tertiaryFixed,
                  ),
                  ColorChip(
                    'tertiaryFixedDim',
                    colorScheme.tertiaryFixedDim,
                    colorScheme.onTertiaryFixedVariant,
                  ),
                  ColorChip(
                    'onTertiaryFixedVariant',
                    colorScheme.onTertiaryFixedVariant,
                    colorScheme.tertiaryFixedDim,
                  ),
                ],
              ),
            ),
          ],
        ),
        horizontalDivider,
        Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Expanded(
              child: Column(
                children: <Widget>[
                  ColorGroup(
                    children: <ColorChip>[
                      ColorChip(
                        'error',
                        colorScheme.error,
                        colorScheme.onError,
                      ),
                      ColorChip(
                        'onError',
                        colorScheme.onError,
                        colorScheme.error,
                      ),
                      ColorChip(
                        'errorContainer',
                        colorScheme.errorContainer,
                        colorScheme.onErrorContainer,
                      ),
                      ColorChip(
                        'onErrorContainer',
                        colorScheme.onErrorContainer,
                        colorScheme.errorContainer,
                      ),
                    ],
                  ),
                  SizedBox(height: 44),
                  ColorGroup(
                    children: <ColorChip>[
                      ColorChip('outline', colorScheme.outline, null),
                      ColorChip('shadow', colorScheme.shadow, null),
                      ColorChip(
                        'inverseSurface',
                        colorScheme.inverseSurface,
                        colorScheme.onInverseSurface,
                      ),
                      ColorChip(
                        'onInverseSurface',
                        colorScheme.onInverseSurface,
                        colorScheme.inverseSurface,
                      ),
                      ColorChip(
                        'inversePrimary',
                        colorScheme.inversePrimary,
                        colorScheme.primary,
                      ),
                    ],
                  ),
                ],
              ),
            ),
            verticalDivider,
            Expanded(
              child: ColorGroup(
                children: <ColorChip>[
                  ColorChip(
                    'surfaceDim',
                    colorScheme.surfaceDim,
                    colorScheme.onSurface,
                  ),
                  ColorChip(
                    'surface',
                    colorScheme.surface,
                    colorScheme.onSurface,
                  ),
                  ColorChip(
                    'surfaceBright',
                    colorScheme.surfaceBright,
                    colorScheme.onSurface,
                  ),
                  ColorChip(
                    'surfaceContainerLowest',
                    colorScheme.surfaceContainerLowest,
                    colorScheme.onSurface,
                  ),
                  ColorChip(
                    'surfaceContainerLow',
                    colorScheme.surfaceContainerLow,
                    colorScheme.onSurface,
                  ),
                  ColorChip(
                    'surfaceContainer',
                    colorScheme.surfaceContainer,
                    colorScheme.onSurface,
                  ),
                  ColorChip(
                    'surfaceContainerHigh',
                    colorScheme.surfaceContainerHigh,
                    colorScheme.onSurface,
                  ),
                  ColorChip(
                    'surfaceContainerHighest',
                    colorScheme.surfaceContainerHighest,
                    colorScheme.onSurface,
                  ),
                  ColorChip(
                    'onSurface',
                    colorScheme.onSurface,
                    colorScheme.surface,
                  ),
                  ColorChip(
                    'onSurfaceVariant',
                    colorScheme.onSurfaceVariant,
                    colorScheme.surfaceContainerHighest,
                  ),
                ],
              ),
            ),
          ],
        ),
      ],
    );
  }
}

class ColorGroup extends StatelessWidget {
  const ColorGroup({super.key, required this.children});

  final List<Widget> children;

  @override
  Widget build(BuildContext context) {
    return RepaintBoundary(
      child: Card(
        clipBehavior: Clip.antiAlias,
        child: Column(children: children),
      ),
    );
  }
}

class ColorChip extends StatelessWidget {
  const ColorChip(this.label, this.color, this.onColor, {super.key});

  final Color color;
  final Color? onColor;
  final String label;

  static Color contrastColor(Color color) {
    final Brightness brightness = ThemeData.estimateBrightnessForColor(color);
    return brightness == Brightness.dark ? Colors.white : Colors.black;
  }

  @override
  Widget build(BuildContext context) {
    final Color labelColor = onColor ?? contrastColor(color);
    return ColoredBox(
      color: color,
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Row(
          children: <Expanded>[
            Expanded(
              child: Text(label, style: TextStyle(color: labelColor)),
            ),
          ],
        ),
      ),
    );
  }
}