Customize Website Colour Themes in Jeykll

Install Theme

The theme is based on Poole so I followed their instruction.

If there’s any error message when running the server, double check if all dependencies has been installed.

bundle install

Customize Theme Color

I’m using Cyan color schemes that ship with Lanyon, but I customized the default color into a deeper cyan color #408F96.

To change it, go to /public/css/lanyon.css and search cyan.

Replace the code below:

.theme-base-0c .sidebar,
.theme-base-0c .sidebar-toggle:active,
.theme-base-0c #sidebar-checkbox:checked ~ .sidebar-toggle {
  background-color: #408F96;
}
.theme-base-0c .container a,
.theme-base-0c .sidebar-toggle,
.theme-base-0c .related-posts li a:hover {
  color: #009688;
}

I also made some small adjustment, such as changing font size and etc. The biggest change I made is to add a table of content bar on the side. The plugin is jekyll-toc

As of now, I haven’t figured it out how to make it hidden when sizing the webpage to small window. I guess I should add some code on the layout css and html file, but the testing did not achieve what I want.

06/08 updated:

Just discovered that Github pages doesn’t support jekyll-toc so I had to disable it from the site.