How to use?

[xmeaindes]

I did it:

1. flutter pub add moon_design
2. add to MaterialApp

   theme: ThemeData.light()
         .copyWith(extensions: [MoonTheme(tokens: MoonTokens.light)]),
     darkTheme: ThemeData.dark()
         .copyWith(extensions: [MoonTheme(tokens: MoonTokens.dark)]),

3. create button

   MoonButton(
             buttonSize: MoonButtonSize.sm,
             onTap: () {},
             leading: const Icon(MoonIcons.other_frame_24_light),
             label: const Text('MoonButton'),
             trailing: const Icon(MoonIcons.other_frame_24_light),
           ),

4. run app and view result, where's the button's theme?

[Kypsis]

The theme is there it's just unfortunate that the white we use for the "default" color is very close to Material 3 default background color. It was much more visible with M2 default background color. We never got around to changing that color when M3 became enabled by default in Flutter.

[xmeaindes]

Still don't understand what to do, I tried the following:

theme: ThemeData.light().copyWith(
          scaffoldBackgroundColor: const Color(0xfffafafa),
          extensions: [
            MoonTheme(
                tokens: MoonTokens.light.copyWith(
              colors: mdsLightColors,
            ))
          ]),
darkTheme: ThemeData.dark().copyWith(extensions: [
        MoonTheme(
            tokens: MoonTokens.dark.copyWith(
          colors: mdsDarkColors,
        ))
      ]),

The effect is the same

[Kypsis]

There's no need to pass in mdsLightColors or mdsDarkColors as they are the default Moon Design colors anyway. I didn't notice at first the type of button you were using but the issue is that you are using the default MoonButton that does not do theme lookups. Probably should rename it to MoonRawButton or something like that. If you want the theming use either the filled, outlined or text button variants.