Dark mode for mark tag (text highlighting)

[angely-dev]

Hello,

I'm using the <mark> tag quite often, e.g.:

But I find it too bright in dark mode:

In my specific case (bg-light-subtle as background color), I'd prefer something like:

So I ended up using this CSS snippet:

[data-bs-theme=dark] { --bs-highlight-bg: var(--bs-gray-700); }

Questions:

• Don't you find it too bright too in dark mode?
• Does Bootstrap plan to implement a dark mode version of <mark>?

Current implementation is:

:root,
[data-bs-theme=light] {
--bs-highlight-bg: #fff3cd;
}

[data-bs-theme=dark] {
/* No color override for --bs-highlight-bg in dark mode */
}

mark, .mark {
  padding: 0.1875em;
  background-color: var(--bs-highlight-bg);
}

Thanks!

[julien-deramond]

Don't you find it too bright too in dark mode?

I'll let the designer answer in the PR since it is more of a design choice.

Does Bootstrap plan to implement a dark mode version of ?

We could indeed have an overridable Sass var (e.g. $mark-bg-dark) with whatever value and then have in our _root.scss:

@if $enable-dark-mode {
  @include color-mode(dark, true) {
    /* ... */
    --#{$prefix}highlight-bg: #{$mark-bg-dark};
  }
}

Created a PR for that (#39141), thanks for pointing that out @angely-dev.

[angely-dev]

Thanks @julien-deramond for the quick answer and PR, I appreciate it.

I marked it as answer, hoping for the PR to be reviewed and accepted in a future release.