change copy/paste menu theme and text style

[LinoAlejandro]

I changed the global theme data, specifically the canvasColor property to a black color,

ThemeData(
      canvasColor: Color.fromRGBO(10, 10, 10, 1) ...

but now the copy/paste menu shows black words over a black background, making it unreadable

How can i change the textstyle of this menu?

[HansMuller]

CC @justinmc

[justinmc]

This is confusing because the selection menu is in the top level Overlay, so it doesn't necessarily receive the Theme nearest to its TextField in the tree.

Here is an example of setting different themes for the selection menu and the app background.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      // This theme will apply to the text selection menu.
      theme: ThemeData(
        canvasColor: Color.fromRGBO(0, 0, 255, 1),
      ),
      home: Theme(
        // This theme will apply to the app background.
        data: ThemeData(
          canvasColor: Color.fromRGBO(10, 10, 10, 1),
        ),
        child: Scaffold(
          body: Center(
            child: TextField(),
          ),
        ),
      ),
    );
  }
}

[LinoAlejandro]

hi @justinmc, thank you very much for your time, but i was looking forward to change the textstyle of the copy/paste menu, not only the background color. I think this shouldn't be closed yet

[justinmc]

Hmm it looks like primarySwatch in the MaterialApp theme can change the color of the selection menu text. What exactly are you trying to do?

[LinoAlejandro]

a menú like this

white letters over black background

already used this MaterialColor on primarySwatch

Map<int, Color> colorMap = {
      50: Color.fromRGBO(255, 255, 255, .1),
      100: Color.fromRGBO(255, 255, 255, .2),
      200: Color.fromRGBO(255, 255, 255, .3),
      300: Color.fromRGBO(255, 255, 255, .4),
      400: Color.fromRGBO(255, 255, 255, .5),
      500: Color.fromRGBO(255, 255, 255, .6),
      600: Color.fromRGBO(255, 255, 255, .7),
      700: Color.fromRGBO(255, 255, 255, .8),
      800: Color.fromRGBO(255, 255, 255, .9),
      900: Color.fromRGBO(255, 255, 255, 1),
   };

ThemeData theme = ThemeData(
      primarySwatch: MaterialColor(0xFFffffff, colorMap),
      canvasColor: ColorsPersonalScheme.darkColor,

but the best i got is replacing the blueish circles and shadow selection to white circles and shadow

before:

after:

i'm getting near, actually that white shadow looks better on the dark background, but i still can't accomplish white letters

*note: i changed the canvas color to red, so you can see that the cut/copy/paste words are still in black color

this is my full theme data:

ThemeData theme = ThemeData(
      primarySwatch: MaterialColor(0xFFffffff, colorMap),
      canvasColor: Colors.red,
      cursorColor: ColorsPersonalScheme.lightColor,
      unselectedWidgetColor: ColorsPersonalScheme.lightColorShade4,
      dialogBackgroundColor: ColorsPersonalScheme.darkColor,
      backgroundColor: ColorsPersonalScheme.darkColor,
      accentColor: ColorsPersonalScheme.lightColor,
      brightness: Brightness.light,
      textTheme: defaultTheme.textTheme.copyWith(
        body1: TextStyle(
          color: ColorsPersonalScheme.lightColor,
        ),
        body2: TextStyle(
          color: ColorsPersonalScheme.lightColor,
        ),
      ).apply(
        bodyColor: ColorsPersonalScheme.lightColor,
        displayColor: ColorsPersonalScheme.lightColor,
      ),
      inputDecorationTheme: InputDecorationTheme(
        prefixStyle: TextStyle(color: ColorsPersonalScheme.lightColor),
        labelStyle: TextStyle(
          color: ColorsPersonalScheme.lightColorShade2,
        ),
        enabledBorder: UnderlineInputBorder(
          borderSide: BorderSide(
            color: ColorsPersonalScheme.lightColorShade2,
          ),
        ),
        focusedBorder: UnderlineInputBorder(
          borderSide: BorderSide(color: ColorsPersonalScheme.lightColor),
        ),
      ),
      colorScheme: defaultTheme.colorScheme.copyWith(
        primary: primary,
        primaryVariant: primaryVariant,
        secondary: ColorsPersonalScheme.lightColor,
        secondaryVariant: secondaryVariant,
      ),
      errorColor: danger,
      primaryColor: ColorsPersonalScheme.lightColor,
      appBarTheme: defaultTheme.appBarTheme.copyWith(
        elevation: 0,
        color: ColorsPersonalScheme.darkColorElevation4,
        iconTheme: IconThemeData(
          color: ColorsPersonalScheme.lightColor,
        ),
        textTheme: TextTheme(
          title: TextStyle(
            fontSize: 20.0,
          ),
        ),
      ),
      scaffoldBackgroundColor: ColorsPersonalScheme.darkColor,
      cardTheme: CardTheme(
        color: ColorsPersonalScheme.darkColorElevation2,
        elevation: 0,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(10.0))
        )
      ),
    );

and this is the color palette

class ColorsPersonalScheme {
  static Color eventoColor = Colors.red[300];
  static Color tareaColor = Colors.purple[300];
  static Color recordatorioColor = Colors.indigo[300];

  static Color primaryColorLight = Colors.cyan[300];
  static Color primaryColorDark = Colors.cyan[800];

  static Color secondaryColorLight = Colors.pink[300];
  static Color secondaryColorDark = Colors.pink[800];

  static Color danger = Colors.red[400];
  static Color success = Colors.green[400];

  static const Color darkColor = Color.fromRGBO(10, 10, 10, 1);
  static const Color darkColorElevation1 = Color.fromRGBO(20, 20, 20, 1);
  static const Color darkColorElevation2 = Color.fromRGBO(30, 30, 30, 1);
  static const Color darkColorElevation3 = Color.fromRGBO(40, 40, 40, 1);
  static const Color darkColorElevation4 = Color.fromRGBO(50, 50, 50, 1);
  static const Color darkColorElevation5 = Color.fromRGBO(60, 60, 60, 1);
  static const Color darkColorElevation6 = Color.fromRGBO(70, 70, 70, 1);
  static const Color darkColorElevation7 = Color.fromRGBO(80, 80, 80, 1);
  static const Color darkColorElevation8 = Color.fromRGBO(90, 90, 90, 1);

  static const Color lightColor = Color.fromRGBO(235, 235, 235, 1);
  static const Color lightColorShade1 = Color.fromRGBO(225, 225, 225, 1);
  static const Color lightColorShade2 = Color.fromRGBO(215, 215, 215, 1);
  static const Color lightColorShade3 = Color.fromRGBO(205, 205, 205, 1);
  static const Color lightColorShade4 = Color.fromRGBO(195, 195, 195, 1);
}

thanks for the patience 🙇

[LinoAlejandro]

@justinmc

[justinmc]

I just tried quickly and couldn't get it to change the text color. I'm going to try to figure out what the long term idea is for this sort of thing at the end of the week.

In the meantime, the actual buttons are created here as FlatButtons with Text inside of them. If you were open to hacking your copy of the Flutter framework, you could definitely pass in color and textColor there.
https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/text_selection.dart#L45

Or you could also fully customize the menu by implementing your own TextSelectionControls to pass in to EditableText: https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/widgets/editable_text.dart#L739

Long term, we have some things with theming that we'd like to clean up, and some known issues with theming inside of an Overlay (as the text selection menu is). We also would like to provide a better interface for customization of the selection menu. None of this is likely to solve your problem in the next few days, though.

[hamed-rv]

for your problem, you just need to add brightness to ThemeData.

brightness: Brightness.dark

[justinmc]

Here is a design document for upcoming theme work that discusses potential changes to selection menu theming: https://docs.google.com/document/d/1kzIOQN4QYfVsc5lMZgy_A-FWGXBAJBMySGqZqsJytcE/edit#heading=h.odkaoncg37sq

[syntaxlexx]

for your problem, you just need to add brightness to ThemeData.

brightness: Brightness.dark

The primarySwatch didn't seem to work for me, but changing brightness to Brightness.dark in ThemeData, everything just worked! Even the modal DateTime Picker which has given me headaches switching to a dark variant, now has a dark background with white text.

[carman247]

Is there a more direct way of changing the text colour other than changing the brightness parameter in the main theme

[torbenkeller]

You can also define a textSelectionTheme in your AppTheme.

ThemeData get lightTheme => const ColorScheme(
  brightness: Brightness.light,
  onSurface: CustomColors.black,
  surface: CustomColors.white,
  ....
);

ThemeData theme(ColorScheme colorScheme) => ThemeData(
  textSelectionTheme : TextSelectionThemeData(
    cursorColor: colorScheme.onSurface,
    selectionColor: colorScheme.brightness == Brightness.light
        ? Colors.black.withOpacity(0.4)
        : Colors.white.withOpacity(0.4),
    selectionHandleColor: colorScheme.secondary,
  ),
);

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: lightTheme,
      ...
    );
  }
}

[Qabbout]

Hey, any updates concerning this problem? It's like we have no high level control over the copy / paste menu

[ndawod]

Lately there have been many changes in theming, could this feature be implemented in the near future? Would be nice to post an update. Thanks :)

[justinmc]

You can now completely customize the text selection toolbar on mobile. Sorry, I should have updated this issue earlier.

Example: https://github.com/justinmc/flutter-text-selection-menu-examples/blob/master/lib/custom_menu_page.dart

TextSelectionToolbar, a public widget that imitates the native Android text selection toolbar: https://master-api.flutter.dev/flutter/material/TextSelectionToolbar-class.html

TextSelectionToolbarTextButton, a public widget that imitates the buttons in that widget: https://master-api.flutter.dev/flutter/material/TextSelectionToolbarTextButton-class.html

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.