You can change the whole look and feel by changing the value in MukThemeData. Go to Project > MukSetting > MukThemeData > _DefaultTheme. You can change the iOS theme in iOSDefaultTheme, and the material design theme in MaterialDefaultTheme.
Create and assign new theme #
You can create different theme objects, and assign the one you like. In Project right click Create > Muk > MukThemeData > iOS / Material. Where iOS is for iOS theme and Material is for Material design.
After you have created a new theme object. You can assign it in the MukAppData. Then you can change all the values, please check the properties table below for each property’s details.. You will see the change immediately.
Properties - iOS #
There are three sections in iOSThemeData, Font Asset, Light theme, and Dark Theme. Light theme and Dark Theme are basally the same things, the only difference is that Light theme colors are applied to light mode Muk Components, and Dark theme colors are applied to dark mode Muk Components. So the Properties below for colors will only show the Light theme colors, but the same concept applies to Dark Theme colors as well.
Property | Desciption |
|---|---|
Font Asset | The Font for all text in Muk Components |
Primary Color Light | The primary color of Muk components, for the nav bar items, buttons etc |
Secondary Color Light | The secondary color of Muk components, for background etc |
Spinner Color Light | The color of CircularIndicator |
Seperator Color Light | The color for the seperator of Muk components |
System Background Color Light | The background color |
Secondary System Background Color Light | secondary background color |
Nav Bar Color Light | The background color for the nav bar |
Nav Bar Title Color Light | The nav bar title text color |
Nav Bar Buttons Color Light | The nav bar buttons color |
Main Text Color Light | The color for most of the text and Muk Text |
SecondaryText Color Light | The secondary color for text like desciption or TextField hint color |
Button Text Color Light | Button's text color |
Disabled Text Color Light | Color for when button is disabled |
Popup Barrier Color Light | The background barrier color when alert / bottom sheet is showing |
Popup Seperator Color Light | The alert / bottom sheet seperator color. The color between the buttons gap |
Alert Background Color Light | The alert body color |
Action Sheet Background Color Light | The bottom sheet body color |
Popup Button Pressed Color Light | The button color when the alert / bottom sheet button is being pressed |
Action Sheet Cancel Button Normal Color Light | The bottom sheet cancel button color |
Action Sheet Cancel Button Pressed Color Light | The bottom sheet cancel button color when the button is being pressed |
iOS toggle On Color Light | Toggle background color when it's on |
iOS toggle Off Color Light | Toggle background color when it's on |
Text Field Color Light | The TextField background color |
Text Field Stroke Color Light | The TextField border color |
Grey Color Light | Grey Color 1 |
Grey2 Color Light | Grey Color 1 |
Grey3 Color Light | Grey Color 1 |
Properties - Material #
There are three sections in MaterialThemeData, Font Asset, Light Theme, and Dark Theme. Light theme and Dark Theme are basally the same things, the only difference is that Light theme colors are applied to light mode Muk Components, and Dark theme colors are applied to dark mode Muk Components. So the Properties below for colors will only show the Light theme colors, but the same concept applies to Dark Theme colors as well.
Property | Desciption |
|---|---|
Font Asset | The Font for all text in Muk Components |
Main Color Light | The main color use in material design |
Accent Color Light | The accent / pop out color in matreial design |
Background Color Light | The background color |
Nav Bar Color Light | The nav bar background color |
Bav Bar Title Color Light | The nav bar title text color |
Nav Bar Buttons Color Light | The nav bar button color |
Disable Color Light | Color for when Muk component is diabled |
Dark Grey Color Light | THe grey color |
TextField Color Light | The background color for TextField |
Main Text Color Light | The main text color use for most of the text |
Second Text Color Light | The secondary text color use for somet text like desciption |
Popup Barrier Color Light | Popup's background barrier color |
Popup Body Background Color Light | The popup body color |
* Note that the MukAppTheme values are universal so when you change it, it will affect all the Muk components.