Skip to content

Improve background color options on table block #19659

@talldan

Description

@talldan

Summary

The table block currently has a hard-coded background color list (themes cannot disable or provide an alternative set of colors).

This was introduced in #10611 as a trade-off—a way to ensure sufficient contrast between background and text colors. Normally providing contrast isn't an issue, the user can change a text color. The table block is a little more complicated since it has a row striping style, alternate rows have a transparent background that the user has no control over, while other rows have the chosen background color with dark text.

Provided theme colors were not subtle enough to provide contrast, so we went with a set of hard-coded colors that would complement the light background of those alternate rows.

#10611 initially tried dynamically lightening theme colors, but this resulted in those colors looking washed out and dull.

Ideas

Add additional color pickers for table block

Use theme colors like other blocks, allow the user to specify the following colors:

  • Primary Background Color. Used for the body of the table.
  • Secondary Background Color. Used for Headers, Footers and even rows in the body of the table when row-striping is enabled.
  • Text Color

This would also require migrating the current hard-coded colors to custom colors.

Add an additional secondary background color picker when row-striping is enabled

Use theme colors like other blocks, and add an extra option for a secondary background color that is only visible when row-striping is enabled.

A text color option could also be added.

Dynamically change text and background colors to provide sufficient contrast

Use the theme colors for the background option (migrate the current color choices to custom colors). When a darker background color is selected dynamically change text color to light. If row-striping is enabled also dynamically change the rows with a transparent background to a black background.

Allow the theme to specify an extra range of colors for backgrounds

This could be an option that works in combination with another solution. The theme could provide a set of colors that are suitable for use in backgrounds and provide sufficient contrast with black or white text.


Related #16478, #18766

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions