Testing CSS Attributes

This page lists the values of the CSS variables involved in the theme. I use this when testing values for a new theme. I do this by changing the values in the variables.css file, then reloading the browser window, to make sure the colours look the way I want them to.

The page contains an embedded Javascript function which reads the variables' values and inserts them into <span> tags in the tables below. If you change the theme you're using in your browser, you'll need to click one of the Refresh buttons (or reload the page) to update the values.

Notes:

• This is NOT a complete list of the CSS variables used in the pages that mdbook generates. These are only the ones I have found useful when creating different coloured themes.
• The Refresh buttons only run the Javascript function to update the values in the tables. They do not reload the entire page.
• The list of variables can change between different mdbook versions. The list below is accurate for mdbook v0.5.2, which is the latest version as of the time I'm writing this (2026-03-16).

Examples

Core Background & Text Colours

Refresh

Blockquotes

Refresh

This is a blockquote.

Tables

Refresh

Code Highlighting

Refresh

#!/usr/bin/env perl

require 5.005 ;
use strict ;
use warnings ;      # since 'env' won't let us add the '-w' option on the #! line

my $x = 0 ;
while ( $x <= 5 )
{
    $x ++ ;
    print "$x\n" ;
}

Interactive Elements

Sidebar

Refresh

Embedded in this page

If you look at this page's Markdown source, you'll see that it contains some HTML fragments. I don't normally include HTML when writing Markdown, however I wanted this page to show not only the effects of the different colour values I'm trying, but the actual values as well.

You will also notice (in the Markdown source) that the values in the tables are enclosed with <tt>...</tt> rather than with backticks. This is because part of how mdbook handles backticks involves converting any < and > characters in the monospaced text to < and >, which makes the browser show the <span> tags instead of the values.

To save you the hassle of viewing the source in your browser and digging through that to see how I did this, I'm including visible copies of these HTML fragments here.

Javascript - Show CSS Variable Values

This is a Javascript function which walks through every element on the rendered page which has class='show-value', and sets the element's contents to the value of the CSS variable whose name is in the element's data-var= attribute.

<!-- Update every `<span/>` with `class='show-value'` to have the value of
     the CSS variable named in the `data-var=` attribute, as its content. -->
<script>
function update_values() {
    var elements = document.querySelectorAll( '.show-value' ) ;
    elements.forEach( e => {
        e.innerHTML = getComputedStyle( e ).getPropertyValue( e.dataset.var ) ;
    } )
}
update_values()
</script>

Stylesheet - Do Not Center Tables

The default stylesheets that come with mdbook make tables centered on the page. I don't particularly like this, I think the pages look better with tables aligned to the left (which is HTML's default behaviour), so I'm adding this little block of CSS to override the margin: auto in mdbook's default stylesheet.

<!-- Do not center tables. -->
<style>
table {
    margin : 0 ;
}
</style>

Generated using mdbook v0.5.2
2026-03-16 18:44:36 +0000

initial-54-g40c61a0
2026-03-16 18:44:20 +0000