theming-typography

Theming

Hiện tại, chúng tôi hỗ trợ hai loại Theme là Light và Dark. Chúng là triển khai của lớp giao diện PSColors

Basic example

class App extends StatelessWidget {
  const App({super.key});

  @override
    Widget build(BuildContext context) {
      return MaterialApp(
        ...
        theme: ThemeData.light().copyWith(
          scaffoldBackgroundColor:  PSColors.light.base0,
          extensions: [
            AppThemeExtension(
              colors: PSColors.light,
              typography: PSTypography.defaults,
            ),
            PSChatThemeExtension(
              colors:  PSColors.light,
              typography: PSTypography.defaults,
            )
          ],
        ),
        darkTheme: ThemeData.dark().copyWith(
          scaffoldBackgroundColor:  PSColors.dark.base0,
          extensions: [
            AppThemeExtension(
              colors:  PSColors.dark,
              typography: PSTypography.defaults,
            ),
            PSChatThemeExtension(
              colors:  PSColors.dark,
              typography: PSTypography.defaults,
            )
          ],
        ),
        themeMode: appResourceStore.themeMode, /// Determines which theme will be used by the application.
      );
  }
}

Để custom theme theo ý muốn, hãy thực hiện như ví dụ bên dưới đây.

Customize example

class AppColors {
  final lightColors = PSColors.light.copyWith(
    base0: const Color(0xffffffff),
    base25: const Color(0xffEFEFEF),
    ...
  );
  final darkColors = PSColors.dark.copyWith(
    base0: const Color(0xff000000),
    base25: const Color(0xff393B40),
    ...
  );
}

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      ...
      theme: ThemeData.light().copyWith(
        scaffoldBackgroundColor: AppColors().lightColors.base0,
        extensions: [
          AppThemeExtension(
            colors: AppColors().lightColors,
            typography: PSTypography.defaults,
          ),
          PSChatThemeExtension(
            colors: AppColors().lightColors,
            typography: PSTypography.defaults,
          )
        ],
      ),
      darkTheme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: AppColors().darkColors.base0,
        extensions: [
          AppThemeExtension(
            colors: AppColors().darkColors,
            typography: PSTypography.defaults,
          ),
          PSChatThemeExtension(
            colors: AppColors().darkColors,
            typography: PSTypography.defaults,
          )
        ],
      ),
      themeMode: appResourceStore.themeMode, /// Determines which theme will be used by the application.
    );
  }
}

Ghi chú

Lớp AppThemeExtension được extends từ ThemeExtension

Typography

PSTypography.defaults là triển khai của lớp giao diện PSTypography với nhiệm vụ quy định các TextStyle.

Đoạn mã dưới đây ví dụ về cách sử dụng PSColors để xử lý việc thay đổi ColorValue trong toàn bộ giao diện Chat khi Appearance của ứng dụng thay đổi và PSTypography để xử lý việc thay đổi TextStyle trong toàn bộ giao diện Chat:

Basic example

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      ...
      theme: ThemeData.light().copyWith(
        scaffoldBackgroundColor: PSColors.light.base0,
        extensions: [
          AppThemeExtension(
            colors: PSColors.light,
            typography: PSTypography.defaults,
          ),
          PSChatThemeExtension(
            colors: PSColors.light,
            typography: PSTypography.defaults,
          )
        ],
      ),
      darkTheme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: PSColors.dark.base0,
        extensions: [
          AppThemeExtension(
            colors: PSColors.dark,
            typography: PSTypography.defaults,
          ),
          PSChatThemeExtension(
            colors: PSColors.dark,
            typography: PSTypography.defaults,
          )
        ],
      ),
      themeMode: appResourceStore.themeMode,
    );
  }
}

Để custom typography theo ý muốn, hãy thực hiện như ví dụ bên dưới đây.

Custom example

class AppStyle {
  final textStyle = PSTypography.defaults.copyWith(
    B12M: PSTextStyle(
      fontFamily: 'FONT_FAMILY',
      fontSize: 12,
      fontWeight: FontWeight.bold,
    ),
    ...
  );
}

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      ...
      theme: ThemeData.light().copyWith(
        scaffoldBackgroundColor: PSColors.light.base0,
        extensions: [
          AppThemeExtension(
            colors: PSColors.light,
            typography: AppStyle().textStyle,
          ),
          PSChatThemeExtension(
            colors: PSColors.light,
            typography: AppStyle().textStyle,
          )
        ],
      ),
      darkTheme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: PSColors.dark.base0,
        extensions: [
          AppThemeExtension(
            colors: PSColors.dark,
            typography: AppStyle().textStyle,
          ),
          PSChatThemeExtension(
            colors: PSColors.dark,
            typography: AppStyle().textStyle,
          )
        ],
      ),
      themeMode: appResourceStore.themeMode,
    );
  }
}