👨🏻‍💻 Harry Kalantzis Instructional designer

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