Modify the table hover attribute

[santaimpersonator]

Context

Modify the background color of a table row when a mouse hovers over a table's row.

Description

When using the default dark color palette, the background color change when hovering over a table's row is almost indistinguishable.

From the MkDocs-Material documentation

Related links

• Data Table documentation
• Light/Dark Color Palette documentation
• Stylesheet code (from repo: lines 512-521)

Use Cases

A white or black color won't work with both colr schemes. However, a nuetral color like yellow or green seems to be fine, with a higher alpha value.

Obviously, a new color variable could be created and called to match each of the light and dark color schemes. However, this seemed like a simple solution to the problem. Plus, the information for this modification could be documented as a stylesheet override in the data table section for users who'd want to customize it.

Visuals

Yellow Modification:

.md-typeset table:not([class]) tbody tr:hover {
    background-color: rgba(255,255,0,.08);
}

Green Modification:

.md-typeset table:not([class]) tbody tr:hover {
    background-color: rgba(0,255,0,.08);
}

Before submitting

• I have read and followed the change request guidelines.
• I have verified that my idea is a change request and not a bug report.
• I have ensured that, to the best knowledge, my idea will benefit the entire community.
• I have included relevant links to the documentation, related issues and discussions to underline the need for my idea.

[squidfunk]

Thanks for reporting. Fixed in 8796d90. There's now a designated CSS variable which defines the table hover color. The slate color scheme defines a shade that mimics the same intensity as the light scheme now:

Additionally, if wished, you can now easily override the hover color with additional CSS.

For all color schemes:

[data-md-color-scheme] {
  --md-typeset-table-color--light: rgba(255, 255, 0, .08);
}

For slate color scheme only:

[data-md-color-scheme="slate"] {
  --md-typeset-table-color--light: rgba(255, 255, 0, .08);
}

[squidfunk]

Released as part of 9.0.13.