Options
With Poole 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, while other Poole themes build on this to create more unique looks.
Dark mode
Dark mode is enabled automatically via CSS media query—you’ll find the source code for this in the _sass/_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/_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.
Colors
Change your site styles by modifying the source code with these CSS custom properties. Poole’s colors come from the Open Color project.
-
var(--red)
#fa5252 -
var(--pink)
#e64980 -
var(--grape)
#be4bdb -
var(--purple)
#7950f2 -
var(--indigo)
#4c6ef5 -
var(--blue)
#228be6 -
var(--cyan)
#15aabf -
var(--teal)
#12b886 -
var(--green)
#40c057 -
var(--yellow)
#fab005 -
var(--orange)
#fd7e14
Gray colors
There are also ten grayscale colors to choose from.
-
var(--gray-000)
#f8f9fa -
var(--gray-100)
#f1f3f5 -
var(--gray-200)
#e9ecef -
var(--gray-300)
#dee2e6 -
var(--gray-400)
#ced4da -
var(--gray-500)
#adb5bd -
var(--gray-600)
#868e96 -
var(--gray-700)
#495057 -
var(--gray-800)
#343a40 -
var(--gray-900)
#212529
Google Analytics
Specify ga_analytics in your _config.yml and restart the server to add Google Analytics tracking code.
# Google Analytics example
ga_analytics: UA-000000-0