Custom CSS light/dark mode switching

[ironicbadger]

I have written some very basic code to customize the bg color of alternate rows in table so that it looks like this:

This works great in light mode but I can't figure out how to have access to a dynamic bg color var in plain css. I attempted to compile as SCSS so that I could use similar if logic that is used in the main theme itself, but the build ignored the file.

• This is the working code I have for light mode.

.md-typeset__table tr:nth-child(2n) {
    background-color: #f8f8f8;
}

• This is my hacky attempt to set the bg color based on data-md-color-scheme:

[data-md-color-scheme="#{$name}"] {
    --md-table-nth-child-bg-color-light: hsl(0, 0%, 97%);
    --md-table-nth-child-bg-color-dark:    hsla(var(--md-hue),15%,15%,1);

    @if scheme("slate", $name) {
        var(--md-table-nth-child-bg-color-computed): var(--md-table-nth-child-bg-color-dark);
    } @else {
      var(--md-table-nth-child-bg-color-computed): var(--md-table-nth-child-bg-color-light);
    }
}

.md-typeset__table tr:nth-child(2n) {
    background-color: var(--md-table-nth-child-bg-color-computed);
}

This code doesn't work and the browser tells me it's an unknown property. So my question is, how do I access the "state" of the color theme in the CSS that we can include in a build as "extra"?

[squidfunk]

In order to compile SCSS, you need to set up the theme development process (mentioned in the customization guide). Other than that, you might just use regular CSS. If you're using slate as a dark theme, just prefix your rules accordingly:

[data-md-color-scheme="slate"] .md-typeset__table tr:nth-child(2n) {
  background-color: red; /* Just for demonstration purposes */
}

Adding this as extra CSS, this will only be applied if the dark theme is active.

[ironicbadger]

SCSS is a requirement? I assume so but confirmation would be helpful. Thanks for the code.

[squidfunk]

SCSS is used by Material for MkDocs. If you want to use SCSS, you need to compile it to CSS yourself, or fork the repository and add your _*.scss files to main.scss, so that the build process will pick it up. It is, however, not a requirement. If you don't want to recompile the theme, you can just use CSS. as noted in my comment.

[ironicbadger]

Ah I see! Thanks for clarifying, works as expected. I was so close!