Table box-shadow does not change with slate theme

• I’ve read the contribution guidelines and agree with them

I’ve found a bug and checked that …

• … the problem doesn’t occur with the default MkDocs template
• … the problem is not in any of my customizations (CSS, JS, template)
• … the documentation does not mention anything about my problem
• … there are no open or closed issues that are related to my problem

Description

data tables have scss where the box-shadow color does not change with the theme.

https://github.com/squidfunk/mkdocs-material/blob/b72314d7da0e7c8bd2dda2f45c21d9cf55557706/src/assets/stylesheets/main/_typeset.scss#L475-L486

Expected behavior

I expected the box shadow to lighten up on a slate theme so that the data tables do not blend in completely with the slate background.

This could be achieved with the following custom CSS added

/* fix box shadow for dark theme */
body[data-md-color-scheme="slate"] .md-typeset table:not([class]) {
  box-shadow: 0 0.2rem 0.5rem rgba(255,255,255,.05), 0 0 0.05rem rgba(255,255,255,.1);
}

Actual behavior

box-shadow remains dark, even on a slate theme.

Steps to reproduce the bug

Enable slate theme in mkdocs.yml

theme:
  palette:
    scheme: slate

then build and look at a data table in the docs.

Package versions

• Python: python --version
• MkDocs: mkdocs --version
• Material: pip show mkdocs-material | grep -E ^Version

bash-4.2$ python --version
Python 3.6.9
bash-4.2$ mkdocs --version
mkdocs, version 1.1 from /opt/app-root/venv/lib64/python3.6/site-packages/mkdocs (Python 3.6)
bash-4.2$ pip show mkdocs-material | grep -E ^Version
Version: 5.5.14

Project configuration

theme:
  palette:
    scheme: slate
    primary: blue
    accent: light blue
  name: material
  icon:
    logo: octicons/rocket-16
    repo: fontawesome/brands/gitlab

plugins:
  - search
  - mknotebooks:
      execute: false
      write_markdown: false
  - bibtex:
      bib_file: "docs/refs.bib"
      cite_style: "pandoc"
      full_bib_page: "/references"
  - mermaid2:
      arguments:
          theme: 'dark'

System information

• OS: mkdocs docker image

• Browser: Mac OS Chrome Version 86.0.4240.198 (Official Build) (x86_64)

[squidfunk]

There is a very gentle border, as can be seen in the screenshot I shared. As said, we’ll revisit it as part of a general redesign, but it’s not considered an error.

[Sieboldianus]

Aware this is closed. The original override did not work due to CSS precedence.

I was trying to get the old Table style back, from Mkdocs Version 7.1.1, undoing the Table facelift (I prefer the box-shadow style).

Create a extra.css in docs/stylesheets/extra.css and add it to mkdocs.yml:

extra_css:
  - stylesheets/extra.css

Then add the following CSS overrides, for getting back table styles from 7.1.1:

.md-typeset table:not([class]) {
	 background-color: var(--md-default-bg-color);
         border: 0.05rem solid var(--md-default-bg-color);
	 border-radius: 0.1rem;
	 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05), 0 0 1px rgba(0, 0, 0, 0.1);
	 touch-action: auto;
}

.md-typeset table:not([class]) th {
	 min-width: 100px;
	 padding: px2em(12px, 12.8px) px2em(16px, 12.8px);
	 color: var(--md-default-bg-color);
	 vertical-align: top;
	 background-color: var(--md-default-fg-color--light);
         font-weight: normal;
}
.md-typeset table:not([class]) th a {
	 color: inherit;
}
.md-typeset table:not([class]) td {
	 padding: px2em(12px, 12.8px) px2em(16px, 12.8px);
	 vertical-align: top;
	 border-top: 1px solid var(--md-default-fg-color--lightest);
}

.md-typeset table:not([class]) tr:first-child td {
	 border-top: 0;
}

This is matching the 7.1.1 style, except for the round corners:

7.1.1:

8.2.4, with overridden extra.css:

8.2.4 official style: