CSS » Themes

The m-theme-*.css files provide fi­nal them­ing for the style. Cur­rently, m.css provides two themes, a dark and a light one. A theme file con­sists of just a set of CSS vari­ables, which af­fect fonts, col­ors and oth­er prop­er­ties. To­geth­er with theme file, m.css provides also a “driver file” that in­cludes all the oth­er ne­ces­sary CSS files ex­cept fonts via CSS @import state­ments — so you can ref­er­ence just m-dark.css in­stead of four dis­tinct files.

Dark

The dark theme is con­tained in the m-dark.css (or m-dark.compiled.css) file. Be­sides that, you need to ref­er­ence also Source Sans Pro font (used for page copy) and Source Code Pro (used for pre-format­ted text and code). You can get them on Google Fonts. Full markup in­clud­ing theme col­or (used for ex­ample by Viv­aldi or An­droid browser) is be­low:

<link rel="stylesheet" href="m-dark.css" /> <!-- or m-dark.compiled.css -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?Source+Sans+Pro:400,400i,600,600i%7Cfamily=Source+Code+Pro:400,400i,600" />
<meta name="theme-color" content="#22272e" />

This theme is used on this site and also on https://magnum.graphics.

Light

The light theme is con­tained in the m-light.css (or m-light.compiled.css) file. Be­sides that, you need to ref­er­ence also Libre Bask­erville font (used for page copy) and Source Code Pro (used for pre-format­ted text and code).

<link rel="stylesheet" href="m-light.css" /> <!-- or m-light.compiled.css -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700,700i%7CSource+Code+Pro:400,400i,600" />
<meta name="theme-color" content="#cb4b16" />

If you want to see this theme live, go to http://blog.mosra.cz.

Make your own

Mak­ing your own theme is usu­ally just a mat­ter of modi­fy­ing CSS vari­ables in the theme file. To give an ex­ample, a por­tion of the m-theme-dark.css file looks like this:

*/

:root {
  /* Text properties */
  --font: 'Source Sans Pro', sans-serif;
  --code-font: 'Source Code Pro', monospace;
  --font-size: 16px;
  --code-font-size: 0.9em; /* *not* rem, so it follows surrounding font size */
  --line-height: normal;
  --paragraph-indent: 1.5rem;
  --paragraph-align: justify;
  --link-decoration: underline;
  --link-decoration-nav: none;
  --link-decoration-heading: none;
  --nav-brand-case: uppercase;
  --nav-menu-case: none;
  --nav-heading-case: uppercase;
  --nav-categories-case: lowercase;
  --landing-header-case: lowercase;
  --heading-font-weight: 600;

  /* Shapes */
  --border-radius: 0.2rem;

The pro­ject also bundles a Py­thon script for postpro­cessing the CSS files in­to a single *.compiled.css file without @import state­ments or vari­ables, if you need. Down­load it here:

Its us­age is simple — just call it with the files you want to com­pile to­geth­er and it will cre­ate a *.compiled.css file in the same dir­ect­ory:

cd css
./postprocess.py m-dark.css # Creates a m-dark.compiled.css file

Modi­fy­ing the Pyg­ments high­light­ing style

If you want to modi­fy the Pyg­ments style, it’s a bit more in­volved. You need to edit the *.py file in­stead of the *.css:

After mak­ing changes, copy it some­where so Pyg­ments can load it as a style and then gen­er­ate a CSS file out of it:

sudo cp pygments-dark.py /usr/lib/python3.10/site-packages/pygments/styles/dark.py
pygmentize -f html -S dark -a .m-code > pygments-dark.css

sudo cp pygments-console.py /usr/lib/python3.10/site-packages/pygments/styles/console.py
pygmentize -f html -S console -a .m-console > pygments-console.css

Al­tern­at­ively, you can use any of the built­in styles — pick the one you like at http://pygments.org/demo/ and then tell pygmentize to gen­er­ate a CSS for it. For ex­ample, the be­low com­mand is for the pastie style. Note that you might want to re­move the first two lines of the res­ult­ing CSS (set­ting background-color) as those would in most cases con­flict with the style in m.css.

pygmentize -f html -S pastie -a .m-code > pygments-pastie.css