Add color themes support

This commit is contained in:
vimux 2019-01-20 12:55:19 -05:00
parent 521e84b74c
commit e674706aab
No known key found for this signature in database
GPG key ID: 5A34FDC4EE832E34
5 changed files with 65 additions and 4 deletions

View file

@ -10,6 +10,7 @@
* Responsive * Responsive
* Card-based list layout * Card-based list layout
* Color themes
* Internal Hugo templates for Open Graph and Twitter Cards meta data, Google Analytics, and Disqus comments * Internal Hugo templates for Open Graph and Twitter Cards meta data, Google Analytics, and Disqus comments
* Table of contents * Table of contents
* Related content * Related content
@ -121,7 +122,7 @@ googleAnalytics = "" # Enable Google Analytics by entering your tracking id
avatar = "img/avatar.png" avatar = "img/avatar.png"
[Params] [Params]
description = "Responsive card-based & code-light Hugo theme" # Description of your site. Used in meta description description = "Responsive card-based & code-light Hugo theme" # Site Description. Used in meta description
copyright = "Binario" # Copyright holder, otherwise will use .Site.Title copyright = "Binario" # Copyright holder, otherwise will use .Site.Title
opengraph = true # Enable OpenGraph if true opengraph = true # Enable OpenGraph if true
twitter_cards = true # Enable Twitter Cards if true twitter_cards = true # Enable Twitter Cards if true
@ -129,6 +130,7 @@ googleAnalytics = "" # Enable Google Analytics by entering your tracking id
mainSections = ["post"] # Set main page sections mainSections = ["post"] # Set main page sections
post_meta = ["date", "categories"] # Enable post meta fields in given order post_meta = ["date", "categories"] # Enable post meta fields in given order
dateFormat = "January 02, 2006" # Change the format of dates dateFormat = "January 02, 2006" # Change the format of dates
colorTheme = "dark-green" # dark-green, dark-blue
customCSS = ["css/custom.css"] # Include custom CSS files customCSS = ["css/custom.css"] # Include custom CSS files
authorbox = true # Show authorbox at bottom of single pages if true authorbox = true # Show authorbox at bottom of single pages if true
toc = true # Enable Table of Contents for all site pages toc = true # Enable Table of Contents for all site pages

View file

@ -16,6 +16,9 @@
{{- range .Site.Params.customCSS }} {{- range .Site.Params.customCSS }}
<link rel="stylesheet" href="{{ . | relURL }}"> <link rel="stylesheet" href="{{ . | relURL }}">
{{- end }} {{- end }}
{{- with .Site.Params.colorTheme }}
<link rel="stylesheet" href="{{ (printf "css/themes/%s.css" .) | relURL }}">
{{- end }}
<link rel="icon" href="{{ "icons/16.png" | relURL }}" sizes="16x16" type="image/png"> <link rel="icon" href="{{ "icons/16.png" | relURL }}" sizes="16x16" type="image/png">
<link rel="icon" href="{{ "icons/32.png" | relURL }}" sizes="32x32" type="image/png"> <link rel="icon" href="{{ "icons/32.png" | relURL }}" sizes="32x32" type="image/png">
{{- with .OutputFormats.Get "rss" }} {{- with .OutputFormats.Get "rss" }}

View file

@ -217,7 +217,7 @@ kbd {
padding: 2px 3px; padding: 2px 3px;
font-weight: 700; font-weight: 700;
color: #111; color: #111;
background: #888; background-color: #888;
} }
figure { figure {
@ -728,7 +728,7 @@ button:not(:-moz-focusring):focus > .main-nav__btn-box {
margin-bottom: 1rem; margin-bottom: 1rem;
color: #f8ae00; color: #f8ae00;
list-style: none; list-style: none;
background: #111; background-color: #111;
} }
.toc[open] { .toc[open] {
@ -1002,7 +1002,7 @@ button:not(:-moz-focusring):focus > .main-nav__btn-box {
} }
mark { mark {
background: #25a; background-color: #25a;
} }
blockquote { blockquote {

View file

@ -0,0 +1,28 @@
a {
color: #77baff;
}
blockquote {
border-color: #77baff;
}
mark {
background-color: #77baff;
}
.logo:hover {
color: #77baff;
}
.main-nav__btn {
fill: #77baff;
}
.toc {
color: #77baff;
}
.share__icon {
fill: #77baff;
stroke: #77baff;
}

View file

@ -0,0 +1,28 @@
a {
color: #9ccc6c;
}
blockquote {
border-color: #9ccc6c;
}
mark {
background-color: #9ccc6c;
}
.logo:hover {
color: #9ccc6c;
}
.main-nav__btn {
fill: #9ccc6c;
}
.toc {
color: #9ccc6c;
}
.share__icon {
fill: #9ccc6c;
stroke: #9ccc6c;
}