CSS » Themes

The m-theme-*.css files pro­vide fi­nal them­ing for the style. Cur­rent­ly, m.css pro­vides 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 pro­vides al­so a “driv­er file” that in­cludes all the oth­er nec­es­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 al­so Source Sans Pro font (used for page copy) and Source Code Pro (used for pre-for­mat­ted text and code). You can get them on Google Fonts. Full markup in­clud­ing theme col­or (used for ex­am­ple by Vi­val­di or An­droid brows­er) 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 al­so 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 al­so Li­bre Baskerville font (used for page copy) and Source Code Pro (used for pre-for­mat­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­al­ly just a mat­ter of mod­i­fy­ing CSS vari­ables in the theme file. To give an ex­am­ple, 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 */
  --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;

  /* Basics */
  --background-color: #2f363f;
  --color: #dcdcdc;

The project al­so bun­dles a Python script for postpro­cess­ing the CSS files in­to a sin­gle *.compiled.css file with­out @import state­ments or vari­ables, if you need. Down­load it here:

Its us­age is sim­ple — 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 di­rec­to­ry:

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

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

Af­ter 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.6/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.6/site-packages/pygments/styles/console.py
pygmentize -f html -S console -a .m-console > pygments-console.css