diff --git a/docs/pages/docs/themes.mdx b/docs/pages/docs/themes.mdx index 6ab5c2127..6b7b364bb 100644 --- a/docs/pages/docs/themes.mdx +++ b/docs/pages/docs/themes.mdx @@ -20,7 +20,7 @@ Our theming solution is designed to help you get started quickly while offering Forui does not manage the theme brightness (light or dark) automatically. - You need to specify the theme explicitly in `FTheme()`. + You need to specify the theme explicitly in `FTheme(...)`. ```dart filename="main.dart" {3} @override @@ -75,30 +75,36 @@ A more detailed explanation of each class can be found in the [Class Diagram](#c ## Customize Themes -It's recommended to use the predefined themes as a starting point and customize them with the `copyWith(...)` method to suit your needs. +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. -```dart filename="main.dart" {3-4, 8, 11, 14} +```dart filename="main.dart" {3-14, 17-23} @override -Widget build(BuildContext context) => FTheme( - data: FThemes.zinc.light.copyWith( - colorScheme: FThemes.zinc.light.colorScheme.copyWith( - primary: const Color(0xFF0D47A1), // dark blue - primaryForeground: const Color(0xFFFFFFFF), // white - ), - typography: FThemes.zinc.light.typography.copyWith( - defaultFontFamily: 'Roboto', - ).scale(sizeScalar: 0.8), - style: FThemes.zinc.light.style.copyWith( - borderRadius: BorderRadius.zero, - ), - cardStyle: FThemes.zinc.light.cardStyle.copyWith( - decoration: FThemes.zinc.light.cardStyle.decoration.copyWith( - borderRadius: const BorderRadius.all(Radius.circular(8)), - ), +Widget build(BuildContext context) { + final theme = FThemeData.inherit( + colorScheme: FThemes.zinc.light.colorScheme.copyWith( + primary: const Color(0xFF0D47A1), // dark blue + primaryForeground: const Color(0xFFFFFFFF), // white + ), + typography: FThemes.zinc.light.typography.copyWith( + defaultFontFamily: 'Roboto', + ).scale(sizeScalar: 0.8), + style: FThemes.zinc.light.style.copyWith( + borderRadius: BorderRadius.zero, + ), + ); + + return FTheme( + data: theme.copyWith( + cardStyle: theme.cardStyle.copyWith( + decoration: theme.cardStyle.decoration.copyWith( + borderRadius: const BorderRadius.all(Radius.circular(8)), ), ), - child: const FScaffold(...), - ); + ), + child: const FScaffold(...), + ); +} ``` The example above uses `FThemes.zinc.light` theme as a starting point and customizes the following: diff --git a/forui/CHANGELOG.md b/forui/CHANGELOG.md index 606ad0f22..da5c8e6ef 100644 --- a/forui/CHANGELOG.md +++ b/forui/CHANGELOG.md @@ -22,6 +22,11 @@ * **Breaking:** Rename `FCalendarSingleRangeController` to `FCalendarRangeController`. +* **Breaking:** Remove `colorScheme`, `typography` and `style` parameters from `FThemeData.copyWith(...)`. + The problem was widget-specific styles not being re-created after the removed parameters were updated. + This led to unintuitive behavior where the style of a widget was not updated when the `FThemeData` was updated. + This should only affect people that customize `FThemeData`. Use the `FThemeData.inherit(...)` constructor instead. + ### Fixes * Fix `FCalendar` dates not being toggleable using `Enter` key. * Fix `FCalendar` dates sometimes not being navigable using arrow keys. diff --git a/forui/lib/src/theme/theme_data.dart b/forui/lib/src/theme/theme_data.dart index 88cfe9a32..0628303b4 100644 --- a/forui/lib/src/theme/theme_data.dart +++ b/forui/lib/src/theme/theme_data.dart @@ -140,24 +140,18 @@ final class FThemeData with Diagnosticable { /// Returns a copy of this [FThemeData] with the given properties replaced. /// /// ```dart - /// final foo = FTypography(); - /// final bar = FTypography(); - /// - /// final theme = FThemeData.inherit( - /// colorScheme: FColorScheme(...), - /// typography: foo, + /// final theme = FThemeData( + /// alertStyles: ..., + /// avatarStyle: ..., /// ); /// - /// final copy = theme.copyWith(typography: bar); + /// final copy = theme.copyWith(avatarStyle: bar); /// - /// print(theme.colorScheme == copy.colorScheme); // true - /// print(copy.typography); // bar + /// print(theme.alertStyles == copy.alertStyles); // true + /// print(theme.avatarStyle == copy.avatarStyle); // false /// ``` @useResult FThemeData copyWith({ - FColorScheme? colorScheme, - FTypography? typography, - FStyle? style, FAlertStyles? alertStyles, FAvatarStyle? avatarStyle, FBadgeStyles? badgeStyles, @@ -177,9 +171,9 @@ final class FThemeData with Diagnosticable { FSwitchStyle? switchStyle, }) => FThemeData( - colorScheme: colorScheme ?? this.colorScheme, - typography: typography ?? this.typography, - style: style ?? this.style, + colorScheme: colorScheme, + typography: typography, + style: style, alertStyles: alertStyles ?? this.alertStyles, avatarStyle: avatarStyle ?? this.avatarStyle, badgeStyles: badgeStyles ?? this.badgeStyles,