Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Added documentation for Mirai theme data #171

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions docs/docs/design/_category_.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"label": "Design",
"position": 3
}
5 changes: 5 additions & 0 deletions docs/docs/design/input_decoration_theme.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
sidebar_position: 2
---

# InputDecorationTheme
88 changes: 88 additions & 0 deletions docs/docs/design/theme.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
---
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<String, dynamic> 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<String, dynamic> 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);

```

## 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

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(),
},
);

```

16 changes: 8 additions & 8 deletions examples/mirai_gallery/pubspec.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down Expand Up @@ -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:
Expand All @@ -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:
Expand Down Expand Up @@ -393,7 +393,7 @@ packages:
path: "../../packages/mirai"
relative: true
source: path
version: "0.2.0"
version: "0.4.0"
nested:
dependency: transitive
description:
Expand Down Expand Up @@ -593,4 +593,4 @@ packages:
version: "3.1.1"
sdks:
dart: ">=3.0.0 <4.0.0"
flutter: ">=1.17.0"
flutter: ">=1.17.0"