A long-lived project that still receives updates
Dark theme for a playful and creative aesthetic
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
 Dependencies

Runtime

> 3.5, < 5.0
 Project Readme

Doodle: A Jekyll blog theme for a playful and creative aesthetic

Table of Contents

  • Features
  • Installation
    • remote-themes
    • Alternate Method
  • Usage
    • Pin a post
    • Add tagline in header
    • Google analytics
    • Adding icons to naviagtion links
    • Setting default color scheme
  • Contributing
  • License

Features

  • automatic table of contents generation
  • dark mode with 5 color schemes
  • pinned/featured posts at top of home page
  • handwriting fonts
  • google analytics support

You can preview the theme here

GitHub GitHub

Installation

remote-themes

if you are using github pages, the recommended method is following:

  • Add following lines to your Gemfile:
source "https://rubygems.org"

gem "github-pages", "~> 231", group: :jekyll_plugins
gem "jekyll-include-cache", group: :jekyll_plugins
  • Add jekyll-include-cache to the plugins array of your _config.yml
plugins:
  - jekyll-include-cache
  • And then execute this command in shell:
$ bundle
  • Add this your _config.yml file.
remote_theme: "gulnoor/jekyll-theme-doodle"
  • Remove any other theme: or remote_theme: entry.

Alternate Method

Add this line to your Jekyll site's Gemfile:

gem "jekyll-theme-doodle"

And add this line to your Jekyll site's _config.yml:

theme: jekyll-theme-doodle

And then execute:

$ bundle

Or install it yourself as:

$ gem install jekyll-theme-doodle

Usage

Pin a post

To pin a post add status: pinned to the front matter of the post markdown file e.g

---
layout: post
title: "Welcome to Jekyll!"
status: pinned
---
<!-- post content -->

Set default color scheme

add the color_scheme property to _config.yml. in the format [light/dark]-[color] e.g.

color_scheme: light-green

following colors are available: green, blue, pink, yellow, cyan

Add tagline in header

To add a tagline/description below the site title, add a tagline property to _config.yml

tagline: "Your awesome tagline"

Google analytics

just add your google analytics tracking id to _config.yml

google_analytics: UA-NNNNNNNN-N

Adding icons to naviagtion links

add the icon path to the page front matter e.g

---
layout: page
title: "About"
permalink: /about/
icon: "/assets/icons/about.svg"
---

TODO

  • Add support for comments
  • Search functionality
  • automatic table of contents generation (button in mobile view/ sidebar in desktop view)
  • scroll progress indicator

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/gulnoor/jekyll-theme-doodle

License

The theme is available as open source under the terms of the MIT License.