custom skin support

This commit is contained in:
zzossig 2019-11-07 15:14:35 +09:00
parent 2d6e0c2bca
commit 55dd9ba312
6 changed files with 428 additions and 3 deletions

View File

@ -17,7 +17,7 @@ It uses HTML5 with a modern CSS grid and flex layout. Recent versions of all the
* [Layout](#layout)
* [Gallery](#gallery)
* [Multi Language](#multi-language)
* [Sub Theme](#sub-theme)
* [Customizing](#customizing)
* [Shortcodes](#shortcodes)
@ -392,9 +392,60 @@ other = "태그"
...
```
## Sub Theme
## Customizing
### custom css
1. Add this line of code to your params.toml file
```bash
config/_default/params.toml
...
custom_css = ["css/custom.css", "scss/custom.scss", ...]
...
```
2. Add your file to assets folder. Filename must match with config params you set above.
```bash
assets/scss/custom.scss
assets/css/custom.css
```
3. If you want to modify zzo theme's default color, you should override the theme style. For example, if you want to change the body background-color, because I set the background-color in #body selector, not in body tag selector, you should override body background-color there. body tag selector won't work. And make sure to set !important.
```css
assets/scss/custom.scss or assets/css/custom.css
...
#body {
background-color: red !important;
}
...
```
### custom js
1. Add this line of code to your params.toml file
```bash
config/_default/params.toml
...
custom_js = ["js/custom.js", ...]
...
```
2. Add your file to assets folder. Filename must match with config params you set above.
```bash
assets/js/custom.js
```
### custom skin(sub theme)
I'm editing this part
## Shortcodes

View File

@ -1,3 +1,97 @@
{{- partial "functions/parse_theme" . -}}
{{- $scr := .Scratch -}}
$footer_background_color: {{ $scr.Get "footer_background_color" }};
$footer_color: {{ $scr.Get "footer_color" }};
$link: {{ $scr.Get "link" }};
$link_hover: {{ $scr.Get "link_hover" }};
$title_color: {{ $scr.Get "title_color" }};
$meta_color: {{ $scr.Get "meta_color" }};
$body_color: {{ $scr.Get "body_color" }};
$hr_color: {{ $scr.Get "hr_color" }};
$body_background_color: {{ $scr.Get "body_background_color" }};
$backdrop_background_color: {{ $scr.Get "backdrop_background_color" }};
$dropdown_border_color: {{ $scr.Get "dropdown_border_color" }};
$dropdown_border_top_color: {{ $scr.Get "dropdown_border_top_color" }};
$dropdown_item_active_background_color: {{ $scr.Get "dropdown_item_active_background_color" }};
$dropdown_title_background_color: {{ $scr.Get "dropdown_title_background_color" }};
$dropdown_content_background_color: {{ $scr.Get "dropdown_content_background_color" }};
$dropdown_footer_item_color: {{ $scr.Get "dropdown_footer_item_color" }};
$dropdown_item_hover_background_color: {{ $scr.Get "dropdown_item_hover_background_color" }};
$dropdown_item_hover_color: {{ $scr.Get "dropdown_item_hover_color" }};
$dropdown_item_color: {{ $scr.Get "dropdown_item_color" }};
$navbar_border_bottom_color: {{ $scr.Get "navbar_border_bottom_color" }};
$navbar_background_color: {{ $scr.Get "navbar_background_color" }};
$navbar_title_color: {{ $scr.Get "navbar_title_color" }};
$navbar_title_hover_color: {{ $scr.Get "navbar_title_hover_color" }};
$navbar_menu_hover_background_color: {{ $scr.Get "navbar_menu_hover_background_color" }};
$navbar_dropdown_item_hover_color: {{ $scr.Get "navbar_dropdown_item_hover_color" }};
$navbar_dropdown_item_hover_background_color: {{ $scr.Get "navbar_dropdown_item_hover_background_color" }};
$input_color: {{ $scr.Get "input_color" }};
$input_background_color: {{ $scr.Get "input_background_color" }};
$input_border_color: {{ $scr.Get "input_border_color" }};
$input_hover_border_color: {{ $scr.Get "input_hover_border_color" }};
$input_focus_border_color: {{ $scr.Get "input_focus_border_color" }};
$sidebar_title_color: {{ $scr.Get "sidebar_title_color" }};
$sidebar_li_color: {{ $scr.Get "sidebar_li_color" }};
$taxo_title_color: {{ $scr.Get "taxo_title_color" }};
$taxo_tags_background_color: {{ $scr.Get "taxo_tags_background_color" }};
$taxo_tags_color: {{ $scr.Get "taxo_tags_color" }};
$taxo_series_background_color: {{ $scr.Get "taxo_series_background_color" }};
$taxo_series_color: {{ $scr.Get "taxo_series_color" }};
$taxo_categories_background_color: {{ $scr.Get "taxo_categories_background_color" }};
$taxo_categories_color: {{ $scr.Get "taxo_categories_color" }};
$breadcrumb_item_color: {{ $scr.Get "breadcrumb_item_color" }};
$breadcrumb_background_color: {{ $scr.Get "breadcrumb_background_color" }};
$breadcrumb_item_active_color: {{ $scr.Get "breadcrumb_item_active_color" }};
$list_header_title_color: {{ $scr.Get "list_header_title_color" }};
$figcaption_color: {{ $scr.Get "figcaption_color" }};
$figcaption_strong_color: {{ $scr.Get "figcaption_strong_color" }};
$single_hr_background_color: {{ $scr.Get "single_hr_background_color" }};
$single_blockquote_border_color: {{ $scr.Get "single_blockquote_border_color" }};
$single_header_title_color: {{ $scr.Get "single_header_title_color" }};
$single_contents_title_color: {{ $scr.Get "single_contents_title_color" }};
$related_header_title_color: {{ $scr.Get "related_header_title_color" }};
$related_link_color: {{ $scr.Get "related_link_color" }};
$content_pre_main_color: {{ $scr.Get "content_pre_main_color" }};
$content_pre_background_color: {{ $scr.Get "content_pre_background_color" }};
$content_code_color: {{ $scr.Get "content_code_color" }};
$content_code_background_color: {{ $scr.Get "content_code_background_color" }};
$burger_menu_color: {{ $scr.Get "burger_menu_color" }};
$social_icon_color: {{ $scr.Get "social_icon_color" }};
$social_icon_hover_color: {{ $scr.Get "social_icon_hover_color" }};
$pagination_link_color: {{ $scr.Get "pagination_link_color" }};
$pagination_background_color: {{ $scr.Get "pagination_background_color" }};
$pagination_disabled_color: {{ $scr.Get "pagination_disabled_color" }};
$pagination_number_color: {{ $scr.Get "pagination_number_color" }};
$photoswipe_hover_color: {{ $scr.Get "photoswipe_hover_color" }};
$photoswipe_color: {{ $scr.Get "photoswipe_color" }};
$photoswipe_hover_background_color: {{ $scr.Get "photoswipe_hover_background_color" }};
$photoswipe_background_color: {{ $scr.Get "photoswipe_background_color" }};
$terms_title_color: {{ $scr.Get "terms_title_color" }};
$terms_tags_color: {{ $scr.Get "terms_tags_color" }};
$terms_categories_color: {{ $scr.Get "terms_categories_color" }};
$terms_series_color: {{ $scr.Get "terms_series_color" }};
$terms_len_color: {{ $scr.Get "terms_len_color" }};
$toc_label_color: {{ $scr.Get "toc_label_color" }};
$toc_title_color: {{ $scr.Get "toc_title_color" }};
$toc_vertical_line: {{ $scr.Get "toc_vertical_line" }};
$toc_vertical_line_active: {{ $scr.Get "toc_vertical_line_active" }};
$search_placeholder_color: {{ $scr.Get "search_placeholder_color" }};
$search_color: {{ $scr.Get "search_color" }};
$search_icon_color: {{ $scr.Get "search_icon_color" }};
$search_background_color: {{ $scr.Get "search_background_color" }};
$search_content_background_color: {{ $scr.Get "search_content_background_color" }};
$search_hover_background_color: {{ $scr.Get "search_hover_background_color" }};
$mark_color: {{ $scr.Get "mark_color" }};
$mark_background_color: {{ $scr.Get "mark_background_color" }};
$archive_key_color: {{ $scr.Get "archive_key_color" }};
$archive_type_color: {{ $scr.Get "archive_type_color" }};
$archive_meta_color: {{ $scr.Get "archive_meta_color" }};
$archive_key_background_color: {{ $scr.Get "archive_key_background_color" }};
$archive_type_background_color: {{ $scr.Get "archive_type_background_color" }};
$archive_hover_line_color: {{ $scr.Get "archive_hover_line_color" }};
@import 'abstracts/variables';
@import 'abstracts/mixins';
@import 'abstracts/functions';

View File

@ -0,0 +1,92 @@
$custom: (
footer-background-color: $footer_background_color,
footer-color: $footer_color,
link: $link,
link-hover: $link_hover,
title-color: $title_color,
meta-color: $meta_color,
body-color: $body_color,
hr-color: $hr_color,
body-background-color: $body_background_color,
backdrop-background-color: $backdrop_background_color,
dropdown-border-color: $dropdown_border_color,
dropdown-border-top-color: $dropdown_border_top_color,
dropdown-item-active-background-color: $dropdown_item_active_background_color,
dropdown-title-background-color: $dropdown_title_background_color,
dropdown-content-background-color: $dropdown_content_background_color,
dropdown-footer-item-color: $dropdown_footer_item_color,
dropdown-item-hover-background-color: $dropdown_item_hover_background_color,
dropdown-item-hover-color: $dropdown_item_hover_color,
dropdown-item-color: $dropdown_item_color,
navbar-border-bottom-color: $navbar_border_bottom_color,
navbar-background-color: $navbar_background_color,
navbar-title-color: $navbar_title_color,
navbar-title-hover-color: $navbar_title_hover_color,
navbar-menu-hover-background-color: $navbar_menu_hover_background_color,
navbar-dropdown-item-hover-color: $navbar_dropdown_item_hover_color,
navbar-dropdown-item-hover-background-color: $navbar_dropdown_item_hover_background_color,
input-color: $input_color,
input-background-color: $input_background_color,
input-border-color: $input_border_color,
input-hover-border-color: $input_hover_border_color,
input-focus-border-color: $input_focus_border_color,
sidebar-title-color: $sidebar_title_color,
sidebar-li-color: $sidebar_li_color,
taxo-title-color: $taxo_title_color,
taxo-tags-background-color: $taxo_tags-background-color,
taxo-tags-color: $taxo-tags-color,
taxo-series-background-color: $taxo-series-background-color,
taxo-series-color: $taxo-series-color,
taxo-categories-background-color: $taxo-categories-background-color,
taxo-categories-color: $taxo-categories-color,
breadcrumb-item-color: $breadcrumb-item-color,
breadcrumb-background-color: $breadcrumb-background-color,
breadcrumb-item-active-color: $breadcrumb-item-active-color,
list-header-title-color: $list-header-title-color,
figcaption-color: $figcaption-color,
figcaption-strong-color: $figcaption-strong-color,
single-hr-background-color: $single-hr-background-color,
single-blockquote-border-color: $single-blockquote-border-color,
single-header-title-color: $single-header-title-color,
single-contents-title-color: $single-contents-title-color,
related-header-title-color: $related-header-title-color,
related-link-color: $related-link-color,
content-pre-main-color: $content-pre-main-color,
content-pre-background-color: $content-pre-background-color,
content-code-color: $content-code-color,
content-code-background-color: $content-code-background-color,
burger-menu-color: $burger-menu-color,
social-icon-color: $social-icon-color,
social-icon-hover-color: $social-icon-hover-color,
pagination-link-color: $pagination-link-color,
pagination-background-color: $pagination-background-color,
pagination-disabled-color: $pagination-disabled-color,
pagination-number-color: $pagination-number-color,
photoswipe-hover-color: $photoswipe-hover-color,
photoswipe-color: $photoswipe-color,
photoswipe-hover-background-color: $photoswipe-hover-background-color,
photoswipe-background-color: $photoswipe-background-color,
terms-title-color: $terms-title-color,
terms-tags-color: $terms-tags-color,
terms-categories-color: $terms-categories-color,
terms-series-color: $terms-series-color,
terms-len-color: $terms-len-color,
toc-label-color: $toc-label-color,
toc-title-color: $toc-title-color,
toc-vertical-line: $toc-vertical-line,
toc-vertical-line-active: $toc-vertical-line-active,
search-placeholder-color: $search-placeholder-color,
search-color: $search-color,
search-icon-color: $search-icon-color,
search-background-color: $search-background-color,
search-content-background-color: $search-content-background-color,
search-hover-background-color: $search-hover-background-color,
mark-color: $mark-color,
mark-background-color: $mark-background-color,
archive-key-color: $archive-key-color,
archive-type-color: $archive-type-color,
archive-meta-color: $archive-meta-color,
archive-key-background-color: $archive-key-background-color,
archive-type-background-color: $archive-type-background-color,
archive-hover-line-color: $archive-hover-line-color,
) !default;

View File

@ -2,10 +2,12 @@
@import 'light';
@import 'hacker';
@import 'solarized';
@import 'custom';
$themes: (
dark: $dark,
light: $light,
hacker: $hacker,
solarized: $solarized,
custom: $custom,
);

92
data/themes/custom.toml Normal file
View File

@ -0,0 +1,92 @@
name = "custom"
footer_background_color = "#403E41"
footer_color = "#bdbdbd"
link = "#FFD866"
link_hover = "#FF6188"
title_color = "#FFD866"
meta_color = "#FCFCFA"
body_color = "#FCFCFA"
hr_color = "#FCFCFA"
body_background_color = "#2D2A2E"
backdrop_background_color = "#212121"
dropdown_border_color = "#212121"
dropdown_border_top_color = "#424242"
dropdown_item_active_background_color = "#424242"
dropdown_title_background_color = "#2D2A2E"
dropdown_content_background_color = "#595B5C"
dropdown_footer_item_color = "#bdbdbd"
dropdown_item_hover_background_color = "#727072"
dropdown_item_hover_color = "#FCFCFA"
dropdown_item_color = "#FCFCFA"
navbar_border_bottom_color = "#2D2A2E"
navbar_background_color = "#403E41"
navbar_title_color = "#FCFCFA"
navbar_title_hover_color = "#FFD866"
navbar_menu_hover_background_color = "#4e3d4f"
navbar_dropdown_item_hover_color = "#FFD866"
navbar_dropdown_item_hover_background_color = "#595B5C"
input_color = "#FCFCFA"
input_background_color = "#403E41"
input_border_color = "#595B5C"
input_hover_border_color = "#727072"
input_focus_border_color = "#727072"
sidebar_title_color = "#aed581"
sidebar_li_color = "#FCFCFA"
taxo_title_color = "#bdbdbd"
taxo_tags_background_color = "#212121"
taxo_tags_color = "#78DCE8"
taxo_series_background_color = "#212121"
taxo_series_color = "#EA9C77"
taxo_categories_background_color = "#212121"
taxo_categories_color = "#AB9DF2"
breadcrumb_item_color = "#82aaff"
breadcrumb_background_color = "#212121"
breadcrumb_item_active_color = "#bdbdbd"
list_header_title_color = "#FCFCFA"
figcaption_color = "#bdbdbd"
figcaption_strong_color = "#FCFCFA"
single_hr_background_color = "#595B5C"
single_blockquote_border_color = "#FCFCFA"
single_header_title_color = "#FCFCFA"
single_contents_title_color = "#aed581"
related_header_title_color = "#FCFCFA"
related_link_color = "#A9DC76"
content_pre_main_color = "#FFA7C4"
content_pre_background_color = "#011627"
content_code_color = "#FCFCFA"
content_code_background_color = "#595B5C"
burger_menu_color = "#FCFCFA"
social_icon_color = "#bdbdbd"
social_icon_hover_color = "#f0f0f0"
pagination_link_color = "#82aaff"
pagination_background_color = "#212121"
pagination_disabled_color = "#757575"
pagination_number_color = "#FCFCFA"
photoswipe_hover_color = "#FCFCFA"
photoswipe_color = "#FCFCFA"
photoswipe_hover_background_color = "#727072"
photoswipe_background_color = "#403E41"
terms_title_color = "#727072"
terms_tags_color = "#78DCE8"
terms_categories_color = "#AB9DF2"
terms_series_color = "#EA9C77"
terms_len_color = "#727072"
toc_label_color = "#727072"
toc_title_color = "#90a4ae"
toc_vertical_line = "#727072"
toc_vertical_line_active = "#FF6188"
search_placeholder_color = "#727072"
search_color = "#FCFCFA"
search_icon_color = "#727072"
search_background_color = "#212121"
search_content_background_color = "#595B5C"
search_hover_background_color = "#727072"
mark_color = "#FCFCFA"
mark_background_color = "#FF6188"
archive_key_color = "#FCFCFA"
archive_type_color = "#FCFCFA"
archive_meta_color = "#aed581"
archive_key_background_color = "#FF6188"
archive_type_background_color = "#82aaff"
archive_hover_line_color = "#FF6188"

View File

@ -0,0 +1,94 @@
{{- $scr := .Scratch -}}
{{- $theme_index := .Site.Params.custom_skin -}}
{{ $theme := index .Site.Data.themes $theme_index }}
{{- $scr.Set "footer_background_color" $theme.footer_background_color -}}
{{- $scr.Set "footer_color" $theme.footer_color -}}
{{- $scr.Set "link" $theme.link -}}
{{- $scr.Set "link_hover" $theme.link_hover -}}
{{- $scr.Set "title_color" $theme.title_color -}}
{{- $scr.Set "meta_color" $theme.meta_color -}}
{{- $scr.Set "body_color" $theme.body_color -}}
{{- $scr.Set "hr_color" $theme.hr_color -}}
{{- $scr.Set "body_background_color" $theme.body_background_color -}}
{{- $scr.Set "backdrop_background_color" $theme.backdrop_background_color -}}
{{- $scr.Set "dropdown_border_color" $theme.dropdown_border_color -}}
{{- $scr.Set "dropdown_border_top_color" $theme.dropdown_border_top_color -}}
{{- $scr.Set "dropdown_item_active_background_color" $theme.dropdown_item_active_background_color -}}
{{- $scr.Set "dropdown_title_background_color" $theme.dropdown_title_background_color -}}
{{- $scr.Set "dropdown_content_background_color" $theme.dropdown_content_background_color -}}
{{- $scr.Set "dropdown_footer_item_color" $theme.dropdown_footer_item_color -}}
{{- $scr.Set "dropdown_item_hover_background_color" $theme.dropdown_item_hover_background_color -}}
{{- $scr.Set "dropdown_item_hover_color" $theme.dropdown_item_hover_color -}}
{{- $scr.Set "dropdown_item_color" $theme.dropdown_item_color -}}
{{- $scr.Set "navbar_border_bottom_color" $theme.navbar_border_bottom_color -}}
{{- $scr.Set "navbar_background_color" $theme.navbar_background_color -}}
{{- $scr.Set "navbar_title_color" $theme.navbar_title_color -}}
{{- $scr.Set "navbar_title_hover_color" $theme.navbar_title_hover_color -}}
{{- $scr.Set "navbar_menu_hover_background_color" $theme.navbar_menu_hover_background_color -}}
{{- $scr.Set "navbar_dropdown_item_hover_color" $theme.navbar_dropdown_item_hover_color -}}
{{- $scr.Set "navbar_dropdown_item_hover_background_color" $theme.navbar_dropdown_item_hover_background_color -}}
{{- $scr.Set "input_color" $theme.input_color -}}
{{- $scr.Set "input_background_color" $theme.input_background_color -}}
{{- $scr.Set "input_border_color" $theme.input_border_color -}}
{{- $scr.Set "input_hover_border_color" $theme.input_hover_border_color -}}
{{- $scr.Set "input_focus_border_color" $theme.input_focus_border_color -}}
{{- $scr.Set "sidebar_title_color" $theme.sidebar_title_color -}}
{{- $scr.Set "sidebar_li_color" $theme.sidebar_li_color -}}
{{- $scr.Set "taxo_title_color" $theme.taxo_title_color -}}
{{- $scr.Set "taxo_tags_background_color" $theme.taxo_tags_background_color -}}
{{- $scr.Set "taxo_tags_color" $theme.taxo_tags_color -}}
{{- $scr.Set "taxo_series_background_color" $theme.taxo_series_background_color -}}
{{- $scr.Set "taxo_series_color" $theme.taxo_series_color -}}
{{- $scr.Set "taxo_categories_background_color" $theme.taxo_categories_background_color -}}
{{- $scr.Set "taxo_categories_color" $theme.taxo_categories_color -}}
{{- $scr.Set "breadcrumb_item_color" $theme.breadcrumb_item_color -}}
{{- $scr.Set "breadcrumb_background_color" $theme.breadcrumb_background_color -}}
{{- $scr.Set "breadcrumb_item_active_color" $theme.breadcrumb_item_active_color -}}
{{- $scr.Set "list_header_title_color" $theme.list_header_title_color -}}
{{- $scr.Set "figcaption_color" $theme.figcaption_color -}}
{{- $scr.Set "figcaption_strong_color" $theme.figcaption_strong_color -}}
{{- $scr.Set "single_hr_background_color" $theme.single_hr_background_color -}}
{{- $scr.Set "single_blockquote_border_color" $theme.single_blockquote_border_color -}}
{{- $scr.Set "single_header_title_color" $theme.single_header_title_color -}}
{{- $scr.Set "single_contents_title_color" $theme.single_contents_title_color -}}
{{- $scr.Set "related_header_title_color" $theme.related_header_title_color -}}
{{- $scr.Set "related_link_color" $theme.related_link_color -}}
{{- $scr.Set "content_pre_main_color" $theme.content_pre_main_color -}}
{{- $scr.Set "content_pre_background_color" $theme.content_pre_background_color -}}
{{- $scr.Set "content_code_color" $theme.content_code_color -}}
{{- $scr.Set "content_code_background_color" $theme.content_code_background_color -}}
{{- $scr.Set "burger_menu_color" $theme.burger_menu_color -}}
{{- $scr.Set "social_icon_color" $theme.social_icon_color -}}
{{- $scr.Set "social_icon_hover_color" $theme.social_icon_hover_color -}}
{{- $scr.Set "pagination_link_color" $theme.pagination_link_color -}}
{{- $scr.Set "pagination_background_color" $theme.pagination_background_color -}}
{{- $scr.Set "pagination_disabled_color" $theme.pagination_disabled_color -}}
{{- $scr.Set "pagination_number_color" $theme.pagination_number_color -}}
{{- $scr.Set "photoswipe_hover_color" $theme.photoswipe_hover_color -}}
{{- $scr.Set "photoswipe_color" $theme.photoswipe_color -}}
{{- $scr.Set "photoswipe_hover_background_color" $theme.photoswipe_hover_background_color -}}
{{- $scr.Set "photoswipe_background_color" $theme.photoswipe_background_color -}}
{{- $scr.Set "terms_title_color" $theme.terms_title_color -}}
{{- $scr.Set "terms_tags_color" $theme.terms_tags_color -}}
{{- $scr.Set "terms_categories_color" $theme.terms_categories_color -}}
{{- $scr.Set "terms_series_color" $theme.terms_series_color -}}
{{- $scr.Set "terms_len_color" $theme.terms_len_color -}}
{{- $scr.Set "toc_label_color" $theme.toc_label_color -}}
{{- $scr.Set "toc_title_color" $theme.toc_title_color -}}
{{- $scr.Set "toc_vertical_line" $theme.toc_vertical_line -}}
{{- $scr.Set "toc_vertical_line_active" $theme.toc_vertical_line_active -}}
{{- $scr.Set "search_placeholder_color" $theme.search_placeholder_color -}}
{{- $scr.Set "search_color" $theme.search_color -}}
{{- $scr.Set "search_icon_color" $theme.search_icon_color -}}
{{- $scr.Set "search_background_color" $theme.search_background_color -}}
{{- $scr.Set "search_content_background_color" $theme.search_content_background_color -}}
{{- $scr.Set "search_hover_background_color" $theme.search_hover_background_color -}}
{{- $scr.Set "mark_color" $theme.mark_color -}}
{{- $scr.Set "mark_background_color" $theme.mark_background_color -}}
{{- $scr.Set "archive_key_color" $theme.archive_key_color -}}
{{- $scr.Set "archive_type_color" $theme.archive_type_color -}}
{{- $scr.Set "archive_meta_color" $theme.archive_meta_color -}}
{{- $scr.Set "archive_key_background_color" $theme.archive_key_background_color -}}
{{- $scr.Set "archive_type_background_color" $theme.archive_type_background_color -}}
{{- $scr.Set "archive_hover_line_color" $theme.archive_hover_line_color -}}