Blinding white code blocks in dark mode

[ego-lay-atman-bay]

I just tried this notes app out, and it's nice, but has some issues. I use dark mode all the time, but when I use a code block in this app, the background is blinding white.

I tried to search for an existing issue for this, but it doesn't look like anyone else has reported this issue (and I'm surprised it even is, because the screenshots use dark mode).

My device: Google Pixel 6a OS: Android 14 App version: 1.3.0

[maelchiotti]

Thank you for reporting the issue.

I use the fleather library for the text editor, so I do not have direct control over this. However I agree that this white background is distracting.

I created an issue in the fleather repository, feel free to add a like reaction to it.

[simonbengtsson]

Note that you can customize the style of code blocks yourself. In my notes app I wrap the fleather editor with the following theme which looks great in dark mode. Note that my app uses material3 so you might have to customize it to match your theming system.

class AppFleatherTheme extends StatelessWidget {
  final FleatherEditor editor;
  final bool secondary;

  const AppFleatherTheme(
      {super.key, required this.editor, required this.secondary});

  @override
  Widget build(BuildContext context) {
    final defaultTheme = FleatherThemeData.fallback(context);
    final textTheme = TextBlockTheme(
      style:
          secondary ? Style.secondaryText(context) : Style.primaryText(context),
      spacing: VerticalSpacing.zero(),
    );
    final linkTheme = defaultTheme.link.copyWith(color: textTheme.style.color!);

    final theme = Theme.of(context);
    final inlineCodeTheme = InlineCodeThemeData(
      backgroundColor: theme.colorScheme.surfaceContainer,
      radius: defaultTheme.inlineCode.radius,
      style: defaultTheme.inlineCode.style,
      heading1: defaultTheme.inlineCode.heading1,
      heading2: defaultTheme.inlineCode.heading2,
      heading3: defaultTheme.inlineCode.heading3,
    );

    final codeTheme = TextBlockTheme(
      style: defaultTheme.code.style,
      spacing: defaultTheme.code.spacing,
      decoration: defaultTheme.code.decoration!
          .copyWith(color: theme.colorScheme.surfaceContainerLowest),
    );

    return FleatherTheme(
      data: defaultTheme.copyWith(
        lists: textTheme,
        paragraph: textTheme,
        link: linkTheme,
        inlineCode: inlineCodeTheme,
        code: codeTheme,
      ),
      child: editor,
    );
  }
}

[maelchiotti]

Oh I did not know that @simonbengtsson, thank you. I will try it, if it works great it will be a perfect temporary fix until the fleather team address my issue.

[maelchiotti]

Hi @ego-lay-atman-bay, this is fixed by #85. It will be in the next release. Thank you for your tip @simonbengtsson!

[ego-lay-atman-bay]

Thanks!