Moon Design System

Note: This project uses Release Please and Conventional Commits spec, please follow the conventions or consider using Commitizen to write commit messages.

Resources

• 📱 Playground

Applying theming and overrides

• Declare tokens variable and optionally override values:

final lightTokens = MoonTokens.light.copyWith(
  colors: MoonColors.light.copyWith(
    piccolo: Colors.blue,
    textPrimary: Colors.amber,
  ),
  typography: MoonTypography.typography.copyWith(
    heading: MoonTypography.typography.heading.apply(fontFamily: "DMSans"),
  ),
);

final lightTheme = ThemeData.light().copyWith(
    extensions: <ThemeExtension<dynamic>>[MoonTheme(tokens: lightTokens)],
  );

• Or if needed override widget theming:

final lightTheme = ThemeData.light().copyWith(
  extensions: <ThemeExtension<dynamic>>[
    MoonTheme(tokens: lightTokens).copyWith(
      accordionTheme: MoonAccordionTheme(tokens: lightTokens).copyWith(
        colors: MoonAccordionTheme(tokens: lightTokens).colors.copyWith(
              backgroundColor: Colors.green,
            ),
      ),
    ),
  ],
);

• Apply the declared theme:

return MaterialApp(
      title: 'Moon Design System example',
      theme: lightTheme,
      home: const HomePage(),
 );