Options
With Monophase as a baseline theme for Jekyll, there aren’t many options available out of the box. Basic light and dark mode support is included. Colors are also provided for your own customization.
Dark mode
Dark mode is enabled automatically via CSS media query—you’ll find the source code for this in the _sass/monophase/_variables.scss stylesheet. If you’re familiar with CSS custom properties, you can also use this method to build your own color schemes.
Read more about using CSS dark mode via media queries like this:
// Example media query to detect dark mode
@media (prefers-color-scheme: dark) {
// ...
}
Creating themes
If you want to make your own color schemes, modify the CSS variables in the _sass/monophase/_variables.scss stylesheet with a scoped data attribute or class name.
For example, below we’ve created the beginnings of a blue theme:
// Example blue theme
[data-theme="blue"] {
--body-bg: var(--blue);
--body-color: #fff;
}
Then, apply the theme by adding data-theme="blue" to the <html> element.
Google Analytics 4
To enable Google Analytics 4, you just need to set the Measurement ID in your _config.yml, for example,
google_analytics: G-XXXXXXX
Math
Specify math: true on the page where you want to enable MathJax. For example,
f(a) = \frac{1}{2\pi i}\oint_{\gamma}\frac{f(z)}{z-a}\mathrm{d}z
will be rendered as
\[f(a) = \frac{1}{2\pi i}\oint_{\gamma}\frac{f(z)}{z-a}\mathrm{d}z\]