Skip to content

Commit

Permalink
Update themes doc
Browse files Browse the repository at this point in the history
  • Loading branch information
Pante committed Aug 1, 2024
1 parent fffe971 commit a314a8d
Show file tree
Hide file tree
Showing 2 changed files with 32 additions and 11 deletions.
9 changes: 5 additions & 4 deletions docs/pages/docs/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,10 @@ flutter pub add forui
### Forui Icons

<Callout type="info">
Forui Icons is bundled with forui package. You don't need to install it separately if you installed `forui`.
Forui Icons is bundled with the forui package. You don't need to install it separately if you install `forui`.
</Callout>

If you would like to only use the icon package, run the following command from your Flutter project directory.
If you would like to only use the icons, run the following command from your Flutter project's directory.

```bash filename="bash"
flutter pub add forui_assets
Expand All @@ -31,7 +31,8 @@ flutter pub add forui_assets

## Usage

To use Forui widgets in your Flutter app, import the Forui package and place the `FTheme` widget at the root of the widget tree.
To use Forui widgets in your Flutter app, import the Forui package and place the
[`FTheme`](https://pub.dev/documentation/forui/latest/forui.theme/FTheme-class.html) widget at the root of the widget tree.

```dart filename="main.dart" {3,12-16}
import 'package:flutter/widgets.dart';
Expand Down Expand Up @@ -75,7 +76,7 @@ Widget build(BuildContext context) => MaterialApp(
// Other configurations...
builder: (context, child) => FTheme(
data: FThemes.zinc.light,
child: child,
child: child!,
),
home: const FScaffold(...)
);
Expand Down
34 changes: 27 additions & 7 deletions docs/pages/docs/themes.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,8 @@ The color schemes are heavily inspired by [shadcn/ui themes](https://ui.shadcn.c

## Usage

`FTheme` uses inherited widgets to provide the `FThemeData` to all widgets in the subtree.
[`FTheme`](https://pub.dev/documentation/forui/latest/forui.theme/FTheme-class.html) uses inherited widgets to provide the
[`FThemeData`](https://pub.dev/documentation/forui/latest/forui.theme/FThemeData-class.html) to all widgets in the subtree.
Forui provides an extension on `BuildContext` which allows for direct access to `FThemeData` through `context.theme`.

```dart {3-6}
Expand All @@ -65,18 +66,19 @@ Widget build(BuildContext context) {
```

A high level overview of the theme data structure is as follows:
- **`FThemeData`** contains `FColorScheme`, `FTypography`, `FStyle`, and widget styles (eg. `FCardStyle`).
- **`FColorScheme`** contains the color scheme (eg. `background`, `foreground`, and `primary`).
- **`FTypography`** contains the `defaultFontFamily` and various `TextStyle`s.
- **`FStyle`** contains other miscellaneous styling options (eg. `borderRadius`).
- [**`FThemeData`**](https://pub.dev/documentation/forui/latest/forui.theme/FThemeData-class.html) contains `FColorScheme`, `FTypography`, `FStyle`, and widget styles (eg. `FCardStyle`).
- [**`FColorScheme`**](https://pub.dev/documentation/forui/latest/forui.theme/FColorScheme-class.html) contains the color scheme (eg. `background`, `foreground`, and `primary`).
- [**`FTypography`**](https://pub.dev/documentation/forui/latest/forui.theme/FTypography-class.html) contains the `defaultFontFamily` and various `TextStyle`s.
- [**`FStyle`**](https://pub.dev/documentation/forui/latest/forui.theme/FStyle-class.html) contains other miscellaneous styling options (eg. `borderRadius`).

A more detailed explanation of each class can be found in the [Class Diagram](#class-diagram) section.


## Customize Themes

It's recommended to use the predefined themes as a starting point and customize them with the `inhert(...)`[] constructor
and `copyWith(...)` method to suit your needs.
It's recommended to use the predefined themes as a starting point and customize them with the
[`inhert(...)`](https://pub.dev/documentation/forui/latest/forui.theme/FThemeData/FThemeData.inherit.html) constructor
and [`copyWith(...)`](https://pub.dev/documentation/forui/latest/forui.theme/FThemeData/copyWith.html) method to suit your needs.

```dart filename="main.dart" {3-14, 17-23}
@override
Expand Down Expand Up @@ -114,6 +116,24 @@ The example above uses `FThemes.zinc.light` theme as a starting point and custom
- Remove the `borderRadius` through the style.
- Although we removed the `borderRadius` for all widgets, override the `borderRadius` to `8` for the `FCard()` widget.

<Callout type="info">
It's important to use the newly created `theme` instead of `FThemes.zinc.light`. This allows `colorScheme`,
`typography`, and `style` to be inherited by widget-specific themes.

```dart {3-4}
return FTheme(
data: theme.copyWith(
cardStyle: theme.cardStyle.copyWith(
decoration: theme.cardStyle.decoration.copyWith(
borderRadius: const BorderRadius.all(Radius.circular(8)),
),
),
),
child: const FScaffold(...),
);
```
</Callout>

While the example may seem overwhelming, most use cases will only require customizations to the `FColorScheme`, `FTypography`, and `FStyle` class.
Sensible defaults for each Forui widget will be automatically inherited.

Expand Down

0 comments on commit a314a8d

Please sign in to comment.