Improve the colors of inline code and code blocks

[maelchiotti]

Steps to Reproduce

1. Add some inline code or a code block

I find the colors of inline code and code blocks make them hard to use:

• In light mode (pure white background), the code block especially is so light that I can barely distinguish it from the background. I prefer the background color of the inline code.
• In dark mode, and even more in black mode, the background of the inline code and the code block should really be a dark gray. The inline code also has some really bad contrast that make it hard to read.

Environment

• OS: Android
• Flutter version: 3.22
• Fleather version: 1.14.5+1

[Amir-P]

Our default theme does not care much about the brightness and the base app theme. We need to improve it but for now it's better to customize it the way you want.

[maelchiotti]

In the meantime, if it can be useful to anyone: here is how I customized the theme in my material 3 app. Inline code and code blocks look great in light, dark and black theme, with or without dynamic colors. I also made the text colors the same.

@override
Widget build(BuildContext context) {
  final theme = Theme.of(context);
  final fleatherThemeFallback = FleatherThemeData.fallback(context);

  return FleatherTheme(
    data: fleatherThemeFallback.copyWith(
      inlineCode: InlineCodeThemeData(
        backgroundColor: theme.colorScheme.surfaceContainerHigh, // Changed
        radius: fleatherThemeFallback.inlineCode.radius,
        style: fleatherThemeFallback.inlineCode.style.copyWith(
          color: theme.colorScheme.primary, // Changed
        ),
        heading1: fleatherThemeFallback.inlineCode.heading1,
        heading2: fleatherThemeFallback.inlineCode.heading2,
        heading3: fleatherThemeFallback.inlineCode.heading3,
      ),
      code: TextBlockTheme(
        decoration: fleatherThemeFallback.code.decoration!.copyWith(
          color: theme.colorScheme.surfaceContainerHigh, // Changed
        ),
        style: fleatherThemeFallback.code.style.copyWith(
          color: theme.colorScheme.primary, // Changed
        ),
        spacing: fleatherThemeFallback.code.spacing,
      ),
    ),
    child: FleatherField(
      controller: FleatherController(),
    ),
  );
}

[Amir-P]

Thanks! I haven't checked it yet but do you want to create a PR? @maelchiotti

[maelchiotti]

Yeah why not! That would be my first ever! I'll fork the repo and check that my modifications do work properly

[maelchiotti]

@Amir-P done in #365! Let me know over there if anything needs to be changed.