From 379a3afdfcbbaed55e4d9cfd7a01e5ccc04a4489 Mon Sep 17 00:00:00 2001 From: Aasim Khan Date: Wed, 19 Jul 2023 16:52:11 +0400 Subject: [PATCH 1/2] Added themes docs in Mirai `Use themes to share colors and font styles` --- docs/docs/design/_category_.json | 4 ++ docs/docs/design/theme.md | 86 +++++++++++++++++++++++++++++ examples/mirai_gallery/pubspec.lock | 16 +++--- 3 files changed, 98 insertions(+), 8 deletions(-) create mode 100644 docs/docs/design/_category_.json create mode 100644 docs/docs/design/theme.md diff --git a/docs/docs/design/_category_.json b/docs/docs/design/_category_.json new file mode 100644 index 00000000..f0380dd3 --- /dev/null +++ b/docs/docs/design/_category_.json @@ -0,0 +1,4 @@ +{ + "label": "Design", + "position": 3 +} \ No newline at end of file diff --git a/docs/docs/design/theme.md b/docs/docs/design/theme.md new file mode 100644 index 00000000..0bd78fd9 --- /dev/null +++ b/docs/docs/design/theme.md @@ -0,0 +1,86 @@ +--- +sidebar_position: 1 +--- + +# Use themes to share colors and font styles + +Just like in Flutter themes are used to share colors and font styles, and app-wide themes is used the same way in Mirai with the help of `MiraiTheme.fromJson`. +Simple `Theme` widgets are not supported in Mirai but can be expected in future releases. + + +## Creating an app theme + +To share a Theme across an entire app, needs to create the particular theme first using `MiraiTheme.fromJson` and, then can be used across the app. Here is an example of creating light and dark themes from JSON. + +```dart + +// for light theme +final Map lightThemeJsonData = { + "brightness": "light", + "disabledColor": "#60FEF7FF", + "colorScheme": { + "brightness": "light", + "primary": "#6750a4", + "onPrimary": "#FFFFFF", + "secondary": "#615B6F", + "onSecondary": "#FFFFFF", + "surface": "#FEFBFF", + "onSurface": "#1C1B1E", + "background": "#FEFBFF", + "onBackground": "#1C1B1E", + "surfaceVariant": "#E6E0EA", + "onSurfaceVariant": "#48454D", + "error": "#AB2D25", + "onError": "#FFFFFF", + "success": "#27BA62", + "onSuccess": "#FFFFFF" + } +}; + +final lightTheme = MiraiTheme.fromJson(lightThemeJsonData); + +// for dark theme +final Map darkThemeJsonData = { + "brightness": "dark", + "disabledColor": "#60FFFFFF", + "colorScheme": { + "brightness": "dark", + "primary": "#CCBDFA", + "onPrimary": "#341F6E", + "secondary": "#C9C2D9", + "onSecondary": "#322D40", + "surface": "#1C1B1E", + "onSurface": "#E5E1E6", + "background": "#1C1B1E", + "onBackground": "#E5E1E6", + "surfaceVariant": "#48454D", + "onSurfaceVariant": "#C9C4CE", + "error": "#F4B7AE", + "onError": "#600F0C", + "success": "#27BA62", + "onSuccess": "#FFFFFF" + } +}; + +final darkTheme = MiraiTheme.fromJson(darkThemeJsonData); + +``` + +Mirai does not support themed widget like this in Flutter `Theme(child: Container())` hence app based themes can only be created using Mirai and for that we need to pass these to the MaterialApp constructor like this. + +```dart + +return MiraiApp( + theme: state.lightTheme, + darkTheme: darkTheme, + themeMode: themeMode, + homeBuilder: (context) => const HomeScreen(), + title: 'Mirai Gallery', + routes: { + '/homeScreen': (context) => const HomeScreen(), + '/detailsScreen': (context) => const DetailsScreen(), + }, +); + +``` + diff --git a/examples/mirai_gallery/pubspec.lock b/examples/mirai_gallery/pubspec.lock index 5a98c692..348fd210 100644 --- a/examples/mirai_gallery/pubspec.lock +++ b/examples/mirai_gallery/pubspec.lock @@ -189,10 +189,10 @@ packages: dependency: transitive description: name: dio - sha256: "347d56c26d63519552ef9a569f2a593dda99a81fdbdff13c584b7197cfe05059" + sha256: "3866d67f93523161b643187af65f5ac08bc991a5bcdaf41a2d587fe4ccb49993" url: "https://pub.dev" source: hosted - version: "5.1.2" + version: "5.3.0" fake_async: dependency: transitive description: @@ -319,10 +319,10 @@ packages: dependency: "direct main" description: name: json_annotation - sha256: c33da08e136c3df0190bd5bbe51ae1df4a7d96e7954d1d7249fea2968a72d317 + sha256: b10a7b2ff83d83c777edba3c6a0f97045ddadd56c944e1a23a3fdf43a1bf4467 url: "https://pub.dev" source: hosted - version: "4.8.0" + version: "4.8.1" json_serializable: dependency: "direct dev" description: @@ -343,10 +343,10 @@ packages: dependency: transitive description: name: logger - sha256: db2ff852ed77090ba9f62d3611e4208a3d11dfa35991a81ae724c113fcb3e3f7 + sha256: "7ad7215c15420a102ec687bb320a7312afd449bac63bfb1c60d9787c27b9767f" url: "https://pub.dev" source: hosted - version: "1.3.0" + version: "1.4.0" logging: dependency: transitive description: @@ -393,7 +393,7 @@ packages: path: "../../packages/mirai" relative: true source: path - version: "0.2.0" + version: "0.4.0" nested: dependency: transitive description: @@ -593,4 +593,4 @@ packages: version: "3.1.1" sdks: dart: ">=3.0.0 <4.0.0" - flutter: ">=1.17.0" \ No newline at end of file + flutter: ">=1.17.0" From 97bd43619e11fe72840005ee0d2ebc7b7849b33e Mon Sep 17 00:00:00 2001 From: Aasim Khan Date: Thu, 20 Jul 2023 14:46:25 +0400 Subject: [PATCH 2/2] Added Input decoration theme data documentation file --- docs/docs/design/input_decoration_theme.md | 5 +++++ docs/docs/design/theme.md | 2 ++ 2 files changed, 7 insertions(+) create mode 100644 docs/docs/design/input_decoration_theme.md diff --git a/docs/docs/design/input_decoration_theme.md b/docs/docs/design/input_decoration_theme.md new file mode 100644 index 00000000..720b184a --- /dev/null +++ b/docs/docs/design/input_decoration_theme.md @@ -0,0 +1,5 @@ +--- +sidebar_position: 2 +--- + +# InputDecorationTheme \ No newline at end of file diff --git a/docs/docs/design/theme.md b/docs/docs/design/theme.md index 0bd78fd9..c9c68536 100644 --- a/docs/docs/design/theme.md +++ b/docs/docs/design/theme.md @@ -66,6 +66,8 @@ final darkTheme = MiraiTheme.fromJson(darkThemeJsonData); ``` +## Usage + Mirai does not support themed widget like this in Flutter `Theme(child: Container())` hence app based themes can only be created using Mirai and for that we need to pass these to the MaterialApp constructor like this. ```dart