Home / Blog

note: jek is currently in alpha release, things will break. When in doubt, click clear settings. If you encounter an bug, create an issue
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░██╗███████╗██╗░░██╗░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░██║██╔════╝██║░██╔╝░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░██║█████╗░░█████═╝░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░██╗░░██║██╔══╝░░██╔═██╗░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░╚█████╔╝███████╗██║░╚██╗░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░╚════╝░╚══════╝╚═╝░░╚═╝░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░ by Tyler Butler ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░

Jek is a minimalist jekyll theme putting the power of color schemes in the user’s hands. Toggle between schemes hassle-free, create new ones on the go, and store settings in-browser.

⚡ Features

  • toggle light/dark with
  • choose theme with
  • save current theme for next visit with
  • open/close settings with , or press escape key
  • clear settings with

💡 All About The Theme

Theme settings are saved in session and local storage. Toggling light/dark mode or choosing a random palette saves settings for only the current session. Clicking the save button adds the theme to local storage for future visits.

🍭 Default Themes

Hover your mouse over the following sections to try out different themes!

light ~ Lorem ipsum dolor sit amet

dark ~ Lorem ipsum dolor sit amet

dragos ~ Lorem ipsum dolor sit amet

ocean ~ Lorem ipsum dolor sit amet

sunset ~ Lorem ipsum dolor sit amet

sandcastle ~ Lorem ipsum dolor sit amet

greenturtle ~ Lorem ipsum dolor sit amet

dunes ~ Lorem ipsum dolor sit amet

arctic ~ Lorem ipsum dolor sit amet

marsian ~ Lorem ipsum dolor sit amet

bumble ~ Lorem ipsum dolor sit amet

pinkapple ~ Lorem ipsum dolor sit amet

dracula ~ Lorem ipsum dolor sit amet

greenpeas ~ Lorem ipsum dolor sit amet

lavender ~ Lorem ipsum dolor sit amet

limeade ~ Lorem ipsum dolor sit amet

anakin ~ Lorem ipsum dolor sit amet

storm ~ Lorem ipsum dolor sit amet

purpman ~ Lorem ipsum dolor sit amet

clay ~ Lorem ipsum dolor sit amet

hallowseve ~ Lorem ipsum dolor sit amet

graph ~ Lorem ipsum dolor sit amet

👩‍🚀 Add New Themes

Adding new themes to your new jek site could not be easier, just pick a background color and text color and add them to main.css. Once you’re done, add your theme to _data/themes.yaml. Check out colorhunt for inspiration.

  1. Add a new scheme to main.css with background-color and color set.
  .mytheme {
    background-color: #0a1d37;
    color: #ffeedb;
  }
  1. Add a color scheme name to _data/themes.yaml.
  - name: mytheme
    enabled: true