Admonish looks weird with the Rust theme

[meator]

This might not be a bug. But I find it weird.

I have created a book based off of https://rust-lang.github.io/mdBook/format/markdown.html which should show all of the distinct elements mdBook can render. It can be found here: book.tar.gz

It shows that no other element is using such dark colors in the body of the page with the Rust theme. This makes the admonish notes pretty disruptive. All of the notes immediately stand out from the page, even though they should just be additional informative notes (or something else).

[tommilligan]

Agreed this doesn't look great - happy for some alternative that doesn't create such a high contrast element.

I'm aware of this as we use the theme CSS variables to do the styling, which in this case are

.rust :is(.admonition) {
    background-color: var(--sidebar-bg);
    color: var(--sidebar-fg);
}

Honestly IMO the easiest thing might be to just add a hardcoded special case for the rust theme because it's pretty weird compared to the others - this high contrast is kind of a feature of the theme, but I agree how we're using it doesn't look good.

The place to start investigating that would be here - actually looks like we already have a bunch of overrides specifically for Rust, so maybe just hardcoding some hex values is fine:

mdbook-admonish/compile_assets/scss/admonition.scss

Line 255 in 85fde44

.rust {

[alxiong]

Ran into the same issue, here's my config with hardcoded colors that I find reasonable:

Custom CSS

/* ==================== */
/* mdbook-admonish base styling */
/* ==================== */

:is(.admonition) {
  display: flow-root;
  margin: 1.5625em 0;
  padding: 0 1.2rem;
  color: var(--fg);
  page-break-inside: avoid;
  background-color: var(--bg);
  border: 0 solid black;
  border-inline-start-width: 0.4rem;
  border-radius: 0.2rem;
  box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.05), 0 0 0.1rem rgba(0, 0, 0, 0.1);
}

@media print {
  :is(.admonition) {
    box-shadow: none;
  }
}

:is(.admonition) > * {
  box-sizing: border-box;
}

:is(.admonition) :is(.admonition) {
  margin-top: 1em;
  margin-bottom: 1em;
}

html :is(.admonition) > :last-child {
  margin-bottom: 1.2rem;
}

:is(.admonition-title, summary.admonition-title) {
  position: relative;
  min-height: 4rem;
  margin-block: 0;
  margin-inline: -1.6rem -1.2rem;
  padding-block: 0.8rem;
  padding-inline: 4.4rem 1.2rem;
  font-weight: 700;
  background-color: rgba(68, 138, 255, 0.1);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
  display: flex;
  border-inline-start-width: 0.4rem;
  border-inline-start-style: solid;
  border-color: inherit;
}

:is(.admonition-title, summary.admonition-title) p {
  margin: 0;
}

:is(.admonition-title, summary.admonition-title)::before {
  position: absolute;
  top: 0.625em;
  inset-inline-start: 1.6rem;
  width: 2rem;
  height: 2rem;
  background-color: #448aff;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-size: contain;
  content: "";
}

/* Icon SVG definitions */
:root {
  --md-admonition-icon--admonish-note: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25z'/></svg>");
  --md-admonition-icon--admonish-info: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 9h-2V7h2m0 10h-2v-6h2m-1-9A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2z'/></svg>");
  --md-admonition-icon--admonish-tip: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17.66 11.2c-.23-.3-.51-.56-.77-.82-.67-.6-1.43-1.03-2.07-1.66C13.33 7.26 13 4.85 13.95 3c-.95.23-1.78.75-2.49 1.32-2.59 2.08-3.61 5.75-2.39 8.9.04.1.08.2.08.33 0 .22-.15.42-.35.5-.23.1-.47.04-.66-.12a.58.58 0 0 1-.14-.17c-1.13-1.43-1.31-3.48-.55-5.12C5.78 10 4.87 12.3 5 14.47c.06.5.12 1 .29 1.5.14.6.41 1.2.71 1.73 1.08 1.73 2.95 2.97 4.96 3.22 2.14.27 4.43-.12 6.07-1.6 1.83-1.66 2.47-4.32 1.53-6.6l-.13-.26c-.21-.46-.77-1.26-.77-1.26m-3.16 6.3c-.28.24-.74.5-1.1.6-1.12.4-2.24-.16-2.9-.82 1.19-.28 1.9-1.16 2.11-2.05.17-.8-.15-1.46-.28-2.23-.12-.74-.1-1.37.17-2.06.19.38.39.76.63 1.06.77 1 1.98 1.44 2.24 2.8.04.14.06.28.06.43.03.82-.33 1.72-.93 2.27z'/></svg>");
  --md-admonition-icon--admonish-success: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m9 20.42-6.21-6.21 2.83-2.83L9 14.77l9.88-9.89 2.83 2.83L9 20.42z'/></svg>");
  --md-admonition-icon--admonish-warning: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 14h-2V9h2m0 9h-2v-2h2M1 21h22L12 2 1 21z'/></svg>");
  --md-admonition-icon--admonish-danger: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M11 15H6l7-14v8h5l-7 14v-8z'/></svg>");
  --md-admonition-icon--admonish-bug: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14 12h-4v-2h4m0 6h-4v-2h4m6-6h-2.81a5.985 5.985 0 0 0-1.82-1.96L17 4.41 15.59 3l-2.17 2.17a6.002 6.002 0 0 0-2.83 0L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8z'/></svg>");
  --md-admonition-icon--admonish-example: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 13v-2h14v2H7m0 6v-2h14v2H7M7 7V5h14v2H7M3 8V5H2V4h2v4H3m-1 9v-1h3v4H2v-1h2v-.5H3v-1h1V17H2m2.25-7a.75.75 0 0 1 .75.75c0 .2-.08.39-.21.52L3.12 13H5v1H2v-.92L4 11H2v-1h2.25z'/></svg>");
}

/* Default colors for all types */
:is(.admonition):is(.admonish-note) {
  border-color: #448aff;
}
:is(.admonish-note) > :is(.admonition-title, summary.admonition-title) {
  background-color: rgba(68, 138, 255, 0.1);
}
:is(.admonish-note) > :is(.admonition-title, summary.admonition-title)::before {
  background-color: #448aff;
  mask-image: var(--md-admonition-icon--admonish-note);
  -webkit-mask-image: var(--md-admonition-icon--admonish-note);
}

:is(.admonition):is(.admonish-info, .admonish-todo) {
  border-color: #00b8d4;
}
:is(.admonish-info, .admonish-todo) > :is(.admonition-title, summary.admonition-title) {
  background-color: rgba(0, 184, 212, 0.1);
}
:is(.admonish-info, .admonish-todo) > :is(.admonition-title, summary.admonition-title)::before {
  background-color: #00b8d4;
  mask-image: var(--md-admonition-icon--admonish-info);
  -webkit-mask-image: var(--md-admonition-icon--admonish-info);
}

:is(.admonition):is(.admonish-tip, .admonish-hint, .admonish-important) {
  border-color: #00bfa5;
}
:is(.admonish-tip, .admonish-hint, .admonish-important) > :is(.admonition-title, summary.admonition-title) {
  background-color: rgba(0, 191, 165, 0.1);
}
:is(.admonish-tip, .admonish-hint, .admonish-important) > :is(.admonition-title, summary.admonition-title)::before {
  background-color: #00bfa5;
  mask-image: var(--md-admonition-icon--admonish-tip);
  -webkit-mask-image: var(--md-admonition-icon--admonish-tip);
}

:is(.admonition):is(.admonish-success, .admonish-check, .admonish-done) {
  border-color: #00c853;
}
:is(.admonish-success, .admonish-check, .admonish-done) > :is(.admonition-title, summary.admonition-title) {
  background-color: rgba(0, 200, 83, 0.1);
}
:is(.admonish-success, .admonish-check, .admonish-done) > :is(.admonition-title, summary.admonition-title)::before {
  background-color: #00c853;
  mask-image: var(--md-admonition-icon--admonish-success);
  -webkit-mask-image: var(--md-admonition-icon--admonish-success);
}

:is(.admonition):is(.admonish-warning, .admonish-caution, .admonish-attention) {
  border-color: #ff9100;
}
:is(.admonish-warning, .admonish-caution, .admonish-attention) > :is(.admonition-title, summary.admonition-title) {
  background-color: rgba(255, 145, 0, 0.1);
}
:is(.admonish-warning, .admonish-caution, .admonish-attention) > :is(.admonition-title, summary.admonition-title)::before {
  background-color: #ff9100;
  mask-image: var(--md-admonition-icon--admonish-warning);
  -webkit-mask-image: var(--md-admonition-icon--admonish-warning);
}

:is(.admonition):is(.admonish-danger, .admonish-error) {
  border-color: #ff1744;
}
:is(.admonish-danger, .admonish-error) > :is(.admonition-title, summary.admonition-title) {
  background-color: rgba(255, 23, 68, 0.1);
}
:is(.admonish-danger, .admonish-error) > :is(.admonition-title, summary.admonition-title)::before {
  background-color: #ff1744;
  mask-image: var(--md-admonition-icon--admonish-danger);
  -webkit-mask-image: var(--md-admonition-icon--admonish-danger);
}

:is(.admonition):is(.admonish-bug) {
  border-color: #f50057;
}
:is(.admonish-bug) > :is(.admonition-title, summary.admonition-title) {
  background-color: rgba(245, 0, 87, 0.1);
}
:is(.admonish-bug) > :is(.admonition-title, summary.admonition-title)::before {
  background-color: #f50057;
  mask-image: var(--md-admonition-icon--admonish-bug);
  -webkit-mask-image: var(--md-admonition-icon--admonish-bug);
}

:is(.admonition):is(.admonish-example) {
  border-color: #7c4dff;
}
:is(.admonish-example) > :is(.admonition-title, summary.admonition-title) {
  background-color: rgba(124, 77, 255, 0.1);
}
:is(.admonish-example) > :is(.admonition-title, summary.admonition-title)::before {
  background-color: #7c4dff;
  mask-image: var(--md-admonition-icon--admonish-example);
  -webkit-mask-image: var(--md-admonition-icon--admonish-example);
}

/* ==================== */
/* Rust theme color overrides */
/* ==================== */

.rust :is(.admonition) {
    background-color: #f5ede4;
    color: #262625;
}

/* Note - muted blue */
.rust :is(.admonition):is(.admonish-note) {
    border-color: #6b8fb3;
    background-color: #e8f0f7;
}
.rust :is(.admonish-note) > :is(.admonition-title, summary.admonition-title) {
    background-color: #d5e4f0;
}
.rust :is(.admonish-note) > :is(.admonition-title, summary.admonition-title)::before {
    background-color: #6b8fb3;
}

/* Info - muted teal */
.rust :is(.admonition):is(.admonish-info, .admonish-todo) {
    border-color: #5a94aa;
    background-color: #e6f3f7;
}
.rust :is(.admonish-info, .admonish-todo) > :is(.admonition-title, summary.admonition-title) {
    background-color: #d0e8f0;
}
.rust :is(.admonish-info, .admonish-todo) > :is(.admonition-title, summary.admonition-title)::before {
    background-color: #5a94aa;
}

/* Tip - muted green */
.rust :is(.admonition):is(.admonish-tip, .admonish-hint, .admonish-important) {
    border-color: #5a9a82;
    background-color: #e8f5f0;
}
.rust :is(.admonish-tip, .admonish-hint, .admonish-important) > :is(.admonition-title, summary.admonition-title) {
    background-color: #d5ebe5;
}
.rust :is(.admonish-tip, .admonish-hint, .admonish-important) > :is(.admonition-title, summary.admonition-title)::before {
    background-color: #5a9a82;
}

/* Success - soft sage */
.rust :is(.admonition):is(.admonish-success, .admonish-check, .admonish-done) {
    border-color: #6a9a6a;
    background-color: #ecf5ec;
}
.rust :is(.admonish-success, .admonish-check, .admonish-done) > :is(.admonition-title, summary.admonition-title) {
    background-color: #dceadc;
}
.rust :is(.admonish-success, .admonish-check, .admonish-done) > :is(.admonition-title, summary.admonition-title)::before {
    background-color: #6a9a6a;
}

/* Warning - rust orange */
.rust :is(.admonition):is(.admonish-warning, .admonish-caution, .admonish-attention) {
    border-color: #c07850;
    background-color: #f7ede5;
}
.rust :is(.admonish-warning, .admonish-caution, .admonish-attention) > :is(.admonition-title, summary.admonition-title) {
    background-color: #f0e0d0;
}
.rust :is(.admonish-warning, .admonish-caution, .admonish-attention) > :is(.admonition-title, summary.admonition-title)::before {
    background-color: #c07850;
}

/* Danger/Error - muted red */
.rust :is(.admonition):is(.admonish-danger, .admonish-error) {
    border-color: #b75555;
    background-color: #f7e8e8;
}
.rust :is(.admonish-danger, .admonish-error) > :is(.admonition-title, summary.admonition-title) {
    background-color: #ecd5d5;
}
.rust :is(.admonish-danger, .admonish-error) > :is(.admonition-title, summary.admonition-title)::before {
    background-color: #b75555;
}

/* Bug - muted mauve */
.rust :is(.admonition):is(.admonish-bug) {
    border-color: #b76a8a;
    background-color: #f7e8f0;
}
.rust :is(.admonish-bug) > :is(.admonition-title, summary.admonition-title) {
    background-color: #ead5e0;
}
.rust :is(.admonish-bug) > :is(.admonition-title, summary.admonition-title)::before {
    background-color: #b76a8a;
}

/* Example - muted purple */
.rust :is(.admonition):is(.admonish-example) {
    border-color: #8a72aa;
    background-color: #f0eaf5;
}
.rust :is(.admonish-example) > :is(.admonition-title, summary.admonition-title) {
    background-color: #e0d5ea;
}
.rust :is(.admonish-example) > :is(.admonition-title, summary.admonition-title)::before {
    background-color: #8a72aa;
}

How it looks like