░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░░░░░░░░░██╗███████╗██╗░░██╗░░░░░░░░░ ░░░░░░░░░░██║██╔════╝██║░██╔╝░░░░░░░░░ ░░░░░░░░░░██║█████╗░░█████═╝░░░░░░░░░░ ░░░░░██╗░░██║██╔══╝░░██╔═██╗░░░░░░░░░░ ░░░░░╚█████╔╝███████╗██║░╚██╗░░░░░░░░░ ░░░░░░╚════╝░╚══════╝╚═╝░░╚═╝░░░░░░░░░ ░░░░░░░░░░░░░ 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.
Check out the Demo site, deployed and hosted on Netlify.
Warning - this theme requires Jekyll 4 and so will not work on GitHub Pages (with Jekyll 3), unless you add a custom CI flow using GitHub Actions.
⚡ Features¶ ↑
-
[x] toggle light/dark
-
[x] choose random theme
-
[x] save current theme for next visit
-
[x] open/close settings
-
[x] clear settings
💡 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¶ ↑
👩🚀 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 your main.css
. Once you're done, add your theme to _data/themes.yaml
. Check out colorhunt for inspiration.
-
Add a new scheme to your
main.css
withbackground-color
andcolor
set..mytheme { background-color: #0a1d37; color: #ffeedb; }
-
Add a color scheme name to your
_data/themes.yaml
.- name: mytheme enabled: true
License¶ ↑
Licensed under MIT by @tcbutler320.