Springe zum Hauptinhalt

Nikola: some new colour flavours for the Hybrid theme

The Hybrid theme for Nikola is a member of the Hyde theme family. You are able to set any subtheme it provides which are the main colours from the base16 project.

I'm not really a fan of these so I added some additional strong colours to the Hybrid theme that I use. My PR to the themes' repository was accepted so this is included in the theme when downloading from the application.

Now there are plenty of subthemes to choose from:

THEME_CONFIG = {
    DEFAULT_LANG: {
        # "hyde_subtheme": "theme-custom",
        # "hyde_subtheme": "theme-hybrid-01", # petrol
        # "hyde_subtheme": "theme-hybrid-02", # dark red
        # "hyde_subtheme": "theme-hybrid-03", # forest
        # "hyde_subtheme": "theme-hybrid-04", # eggplant
        # "hyde_subtheme": "theme-hybrid-05", # dark orange
        # "hyde_subtheme": "theme-base-08", # red
        # "hyde_subtheme": "theme-base-09", # orange
        # "hyde_subtheme": "theme-base-0a", # yellow
        # "hyde_subtheme": "theme-base-0b", # green
        # "hyde_subtheme": "theme-base-0c", # cyan
        # "hyde_subtheme": "theme-base-0d", # blue
        # "hyde_subtheme": "theme-base-0e", # magenta
        # "hyde_subtheme": "theme-base-0f", # brown
        # ...
    }
}

Hyde colours

/images/hybrid-colours/base-08.png

theme-base-08

/images/hybrid-colours/base-09.png

theme-base-09

/images/hybrid-colours/base-0a.png

theme-base-0a

/images/hybrid-colours/base-0b.png

theme-base-0b

/images/hybrid-colours/base-0c.png

theme-base-0c

/images/hybrid-colours/base-0d.png

theme-base-0d

/images/hybrid-colours/base-0e.png

theme-base-0e

/images/hybrid-colours/base-0f.png

theme-base-0f

Hybrid colours

/images/hybrid-colours/hybrid-01.png
/images/hybrid-colours/hybrid-02.png

theme-hybrid-01

theme-hybrid-02

/images/hybrid-colours/hybrid-03.png
/images/hybrid-colours/hybrid-04.png

theme-hybrid-03

theme-hybrid-04

/images/hybrid-colours/hybrid-05.png
/images/hybrid-colours/custom.png

theme-hybrid-05

theme-custom

Custom colour

The custom-theme has preset colours that you can directly change in the hybrid.css or better in your custom.css. Just create the file if you haven't already and add and adapt this snippet:

/* custom subtheme for hyde/hybrid theme */
.theme-custom .hsidebar {
  background-color: #070512;
}
.theme-custom .content a,
.theme-custom .related-posts li a:hover {
  color: #1582ae;
}

Comments

You can use your Mastodon account to reply to this post.

Reply