Rework Arrays to Theme classes

[zs-dima]

Could be nice to rework Arrays to Theme classes.
Currently it is not obvious to find certain color for the certain theme to change for example.

@tailor
class _$MyTheme {
  static List<Color> background = [darkColor, lightColor, orangeColor, greenColor, ...];
  static List<Color> iconColor = [darkColor, lightColor, orangeColor, greenColor, ...];
  static List<TextStyle> h1 = [darkStyle, lightStyle, orangeStyle, greenStyle, ...];
  static List<TextStyle> h2 = [darkStyle, lightStyle, orangeStyle, greenStyle, ...];
}

into

@tailor
class _$MyThemeOrangeColors {
  static Color background = orangeColor;
  static Color iconColor = orangeColor;
}

@tailor
class _$MyThemeOrangeTextStyles {
  static TextStyle h1 = orangeStyle;
  static TextStyle h2 = orangeStyle;
}

and etc

[Rongix]

Hey, I agree that it might be a bit confusing for a large number of themes, and in these situations, I'd suggest creating some kind of helper that will return list of themes. The example below is refactoring friendly if you were to change theme names (that would not be the case if that was a map)

@Tailor(themes: ['dark', 'light', 'orange', 'green'])
class _$MyTheme {
  static final background = const Prop(
    dark: Colors.black,
    light: Colors.white,
    orange: Colors.orange,
    green: Colors.green,
  )();

  static List<TextStyle> h2 = const Prop(
    dark: TextStyle(),
    light: TextStyle(),
    orange: TextStyle(),
    green: TextStyle(),
  )();
}

class Prop<T> {
  const Prop({
    required this.dark,
    required this.green,
    required this.light,
    required this.orange,
  });

  final T dark;
  final T green;
  final T light;
  final T orange;

  List<T> call() => [dark, light, orange, green];
}

// OR
List<T> prop<T>({
  required T dark,
  required T light,
  required T orange,
  required T green,
}) {
  return [dark, light, orange, green];
}

I'm not sure if I completely understand your suggestion but that would require creating a separate class per theme (or even per property). If that's the case I think a better approach is to generate an empty class and create your themes as you would normally do:

@Tailor(themes: [])
class _$MyTheme {
  static List<Color> background = [];
  static List<Color> iconColor = [];
  static List<TextStyle> h1 = [];
  static List<TextStyle> h2 = [];
}

final myThemeDark = const MyTheme(
  background: Colors.black,
  iconColor: Colors.white,
  h1: TextStyle(),
  h2: TextStyle(),
);

/// etc
final myThemeOrange = const MyTheme(
  background: Colors.orange,
  iconColor: Colors.white,
  h1: TextStyle(),
  h2: TextStyle(),
);

[zs-dima]

@Rongix thanks a lot for looking into
The main idea to place each theme colors separately as usually you set colors for the certain theme.
Currently all themes colors mixed all together.
The same with TextStyle, Sizes and etc

Please let me know if I clearly described that you looking into Theme colors and etc form the certain theme point of view?
When you setting certain theme or changing certain color you do not care other themes values, but mixing everything into 1 class or array complicate it a lot.

[Rongix]

I think you're looking for nested themes with the @tailorComponent annotation. Please have a look at these docs:
https://github.com/Iteo/theme_tailor#nesting-generated-themeextensions-modular-themes--designsystems.

If it doesn't fully cover your requirements, it might be worth trying it out mixed with my previous suggestion of introducing some code-base-specific helpers / generating empty themes. Otherwise, I'd need more info / full code sample, as I didn't fully understand the example

[zs-dima]

@Rongix thanks for reply
As I could see nested themes still placing all themes colors in the same class - so I still could not separate certain theme colors in the different class and file.

[Rongix]

I think I'd need an example to understand. If you have some time I'd appreciate a bigger code sample (for example when using vanilla ThemeExtension classes)

[Rongix]

Hello, I wanted to let you know that we recently released version 2.0.0 of the package: https://pub.dev/packages/theme_tailor. It adds a new generator that allows for different code style, which might be useful for your case. Therefore, I will close this issue. If you have any questions or need further assistance, please don't hesitate to ask