Home / Blog 

░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░██╗███████╗██╗░░██╗░░░░░░░░░
░░░░░░░░░░██║██╔════╝██║░██╔╝░░░░░░░░░
░░░░░░░░░░██║█████╗░░█████═╝░░░░░░░░░░
░░░░░██╗░░██║██╔══╝░░██╔═██╗░░░░░░░░░░
░░░░░╚█████╔╝███████╗██║░╚██╗░░░░░░░░░
░░░░░░╚════╝░╚══════╝╚═╝░░╚═╝░░░░░░░░░
░░░░░░░░░░░░░ 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 random 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!

<div class="theme-options light" onmouseover="setSpeceficPallet('light');">
    <p class="center">light ~ Lorem ipsum dolor sit amet</p>
</div>

<div class="theme-options dark" onmouseover="setSpeceficPallet('dark');">
    <p class="center">dark ~ Lorem ipsum dolor sit amet</p>
</div>

<div class="theme-options dragos" onmouseover="setSpeceficPallet('dragos');">
    <p class="center">dragos ~ Lorem ipsum dolor sit amet</p>
</div>

<div class="theme-options ocean" onmouseover="setSpeceficPallet('ocean');">
    <p class="center">ocean ~ Lorem ipsum dolor sit amet</p>
</div>

<div class="theme-options sunset" onmouseover="setSpeceficPallet('sunset');">
    <p class="center">sunset ~ Lorem ipsum dolor sit amet</p>
</div>

<div class="theme-options sandcastle" onmouseover="setSpeceficPallet('sandcastle');">
    <p class="center">sandcastle ~ Lorem ipsum dolor sit amet</p>
</div>

<div class="theme-options greenturtle" onmouseover="setSpeceficPallet('greenturtle');">
    <p class="center">greenturtle ~ Lorem ipsum dolor sit amet</p>
</div>

<div class="theme-options dunes" onmouseover="setSpeceficPallet('dunes');">
    <p class="center">dunes ~ Lorem ipsum dolor sit amet</p>
</div>

<div class="theme-options arctic" onmouseover="setSpeceficPallet('arctic');">
    <p class="center">arctic ~ Lorem ipsum dolor sit amet</p>
</div>

<div class="theme-options marsian" onmouseover="setSpeceficPallet('marsian');">
    <p class="center">marsian ~ Lorem ipsum dolor sit amet</p>
</div>

<div class="theme-options bumble" onmouseover="setSpeceficPallet('bumble');">
    <p class="center">bumble ~ Lorem ipsum dolor sit amet</p>
</div>

<div class="theme-options pinkapple" onmouseover="setSpeceficPallet('pinkapple');">
    <p class="center">pinkapple ~ Lorem ipsum dolor sit amet</p>
</div>

👩‍🚀 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;
 }
  2. Add a color scheme name to _data/themes.yaml.
    ```yaml
    • name: mytheme enabled: true ```