gallery size bug fixed, new theme(kimbie) added, some style bug fixed

2020-01-08 02:05:51 +09:00 · 2020-01-08 02:05:51 +09:00 · a94fecf221
parent a7a859ede5
commit a94fecf221
24 changed files with 381 additions and 343 deletions
--- a/README.ko.md
+++ b/README.ko.md
@ -696,14 +696,6 @@ custom_js = ["js/custom.js", ...]
 assets/js/custom.js
 ```

-### custom skin(sub theme)
-
-1. data폴더에 skin.toml 파일을 만들어주세요. (data/skin.toml)
-
-2. custom_theme_primary_color항목의 값을 변경해주세요. 값의 범위는 "0" 부터 "359" 까지 입니다.
-
-3. 변경 후, 휴고를 다시 시작해주세요. 안그러면 변경사항이 적용 안될 수도 있습니다.
-
 ### custom syntax highlighting

 1. root/data 폴더에 skin.toml파일을 만들어주세요. theme_dark_chroma, theme_light_chroma, ... 파라미터의 항목의 값을 원하시는 코드 하이라이트 테마값으로 변경해주세요. [이 링크](https://xyproto.github.io/splash/docs/all.html)를 참조해서 값을 변경하시면 됩니다. 만약 theme_[xxxx]_chroma 값에 - 나 _ 같은 특수문자가 있다면 지워주세요.
@ -997,3 +989,11 @@ A notice disclaimer
 ```bash
 {{< color "#0000ff" >}}*text*{{< /color >}}
 ```
+
+### box
+
+```bash
+{{< box >}}
+Some markdown contents
+{{< /box >}}
+```
--- a/README.md
+++ b/README.md
@ -688,16 +688,6 @@ custom_js = ["js/custom.js", ...]
 assets/js/custom.js
 ```

-### custom skin(sub theme)
-
-1. Make a skin.toml file in data folder. (data/skin.toml)
-
-2. Set custom_theme_primary_color variable. The range of value that can be set is from "0" to "359".
-
-3. Restart hugo.
-
-5. Once you change the skin.toml file, restart hugo.
-
 ### custom syntax highlighting

 1. Make a skin.toml file at root/data folder. Set the theme_dark_chroma, theme_light_chroma, ... params value as you want. Refer this [link](https://xyproto.github.io/splash/docs/all.html). If theme_[xxxx]_chroma value include - or _ like special character, just delete it.
@ -998,3 +988,11 @@ A notice disclaimer
 ```bash
 {{< color "#0000ff" >}}*text*{{< /color >}}
 ```
+
+### box
+
+```bash
+{{< box >}}
+Some markdown contents
+{{< /box >}}
+```
--- a/archetypes/default.md
+++ b/archetypes/default.md
@ -2,6 +2,8 @@
 title: "{{ replace .Name "-" " " | title }}"
 date: {{ .Date }}
 description:
+draft: false
+enableTocContent: false
 tags:
 -
 series:
--- a/assets/sass/main.scss
+++ b/assets/sass/main.scss
@ -9,18 +9,17 @@ $grid_column_gap_unit: {{ .Site.Data.grid.grid_column_gap_unit }};
 $grid_navbar_height: {{ .Site.Data.grid.grid_navbar_height }};
 $grid_row_gap: {{ .Site.Data.grid.grid_row_gap }};

-$custom_theme_primary_color: {{ .Site.Data.skin.custom_theme_primary_color }};
 $theme_light_chroma: {{ .Site.Data.skin.theme_light_chroma }};
 $theme_dark_chroma: {{ .Site.Data.skin.theme_dark_chroma }};
 $theme_hacker_chroma: {{ .Site.Data.skin.theme_hacker_chroma }};
 $theme_solarized_chroma: {{ .Site.Data.skin.theme_solarized_chroma }};
-$theme_custom_chroma: {{ .Site.Data.skin.theme_custom_chroma }};
+$theme_kimbie_chroma: {{ .Site.Data.skin.theme_kimbie_chroma }};

 $theme_light_chroma_background: {{ .Site.Data.skin.theme_light_chroma_background }};
 $theme_dark_chroma_background: {{ .Site.Data.skin.theme_dark_chroma_background }};
 $theme_hacker_chroma_background: {{ .Site.Data.skin.theme_hacker_chroma_background }};
 $theme_solarized_chroma_background: {{ .Site.Data.skin.theme_solarized_chroma_background }};
-$theme_custom_chroma_background: {{ .Site.Data.skin.theme_custom_chroma_background }};
+$theme_kimbie_chroma_background: {{ .Site.Data.skin.theme_kimbie_chroma_background }};

 $title-font: {{ .Site.Data.font.title_font }};
 $content-font: {{ .Site.Data.font.content_font }};
--- a/assets/sass/pages/_single.scss
+++ b/assets/sass/pages/_single.scss
@ -165,7 +165,7 @@
      }
    }

-    p > code {
+    p > code:not([class^=language]) {
      padding: 0.25rem 0.5rem;
      @include themify($codeblock) {
        color: themed('content-code-color');
@ -241,6 +241,9 @@
      code:not([class^=language]) {
        padding: 3px 5px;
        margin: 0 0.25rem;
+        @include themify($codeblock) {
+          color: themed('content-code-color');
+        }
      }
    }

@ -257,6 +260,9 @@
      code:not([class^=language]) {
        padding: 3px 5px;
        margin: 0 0.25rem;
+        @include themify($codeblock) {
+          color: themed('content-code-color');
+        }
      }
    }

@ -274,6 +280,9 @@
      code:not([class^=language]) {
        padding: 3px 5px;
        margin: 0 0.25rem;
+        @include themify($codeblock) {
+          color: themed('content-code-color');
+        }
      }
    }

@ -344,6 +353,9 @@
      code:not([class^=language]) {
        padding: 3px 5px;
        margin: 0 0.25rem;
+        @include themify($codeblock) {
+          color: themed('content-code-color');
+        }
      }
    }
  }
@ -387,6 +399,9 @@ code, pre {
 code:not([class^=language]) {  
  padding: 3px 5px;  
  border-radius: 4px;
+  @include themify($codeblock) {
+    color: themed('content-code-color');
+  }
 }

 pre:not(.chroma) {
--- a/assets/sass/syntax/_fruity.scss
+++ b/assets/sass/syntax/_fruity.scss
@ -38,13 +38,13 @@
  /* LiteralNumberInteger */ .chroma .mi { color: #0086f7; font-weight: bold }
  /* LiteralNumberIntegerLong */ .chroma .il { color: #0086f7; font-weight: bold }
  /* LiteralNumberOct */ .chroma .mo { color: #0086f7; font-weight: bold }
-  /* Comment */ .chroma .c { color: #008800; background-color: #0f140f; font-style: italic }
-  /* CommentHashbang */ .chroma .ch { color: #008800; background-color: #0f140f; font-style: italic }
-  /* CommentMultiline */ .chroma .cm { color: #008800; background-color: #0f140f; font-style: italic }
-  /* CommentSingle */ .chroma .c1 { color: #008800; background-color: #0f140f; font-style: italic }
-  /* CommentSpecial */ .chroma .cs { color: #008800; background-color: #0f140f; font-style: italic }
-  /* CommentPreproc */ .chroma .cp { color: #ff0007; background-color: #0f140f; font-weight: bold; font-style: italic }
-  /* CommentPreprocFile */ .chroma .cpf { color: #ff0007; background-color: #0f140f; font-weight: bold; font-style: italic }
+  /* Comment */ .chroma .c { color: #008800; font-style: italic }
+  /* CommentHashbang */ .chroma .ch { color: #008800; font-style: italic }
+  /* CommentMultiline */ .chroma .cm { color: #008800; font-style: italic }
+  /* CommentSingle */ .chroma .c1 { color: #008800; font-style: italic }
+  /* CommentSpecial */ .chroma .cs { color: #008800; font-style: italic }
+  /* CommentPreproc */ .chroma .cp { color: #ff0007; font-weight: bold; font-style: italic }
+  /* CommentPreprocFile */ .chroma .cpf { color: #ff0007; font-weight: bold; font-style: italic }
  /* GenericHeading */ .chroma .gh { font-weight: bold }
  /* GenericOutput */ .chroma .go { color: #444444; background-color: #222222 }
  /* GenericSubheading */ .chroma .gu { font-weight: bold }
--- a/assets/sass/syntax/_monokailight.scss
+++ b/assets/sass/syntax/_monokailight.scss
@ -13,27 +13,27 @@
  /* KeywordPseudo */ .chroma .kp { color: #00a8c8 }
  /* KeywordReserved */ .chroma .kr { color: #00a8c8 }
  /* KeywordType */ .chroma .kt { color: #00a8c8 }
-  /* Name */ .chroma .n { color: #111111 }
+  /* Name */ .chroma .n { color: #8ab1b0 }
  /* NameAttribute */ .chroma .na { color: #75af00 }
-  /* NameBuiltin */ .chroma .nb { color: #111111 }
-  /* NameBuiltinPseudo */ .chroma .bp { color: #111111 }
+  /* NameBuiltin */ .chroma .nb { color: #8ab1b0 }
+  /* NameBuiltinPseudo */ .chroma .bp { color: #8ab1b0 }
  /* NameClass */ .chroma .nc { color: #75af00 }
  /* NameConstant */ .chroma .no { color: #00a8c8 }
  /* NameDecorator */ .chroma .nd { color: #75af00 }
-  /* NameEntity */ .chroma .ni { color: #111111 }
+  /* NameEntity */ .chroma .ni { color: #8ab1b0 }
  /* NameException */ .chroma .ne { color: #75af00 }
  /* NameFunction */ .chroma .nf { color: #75af00 }
-  /* NameFunctionMagic */ .chroma .fm { color: #111111 }
-  /* NameLabel */ .chroma .nl { color: #111111 }
-  /* NameNamespace */ .chroma .nn { color: #111111 }
+  /* NameFunctionMagic */ .chroma .fm { color: #8ab1b0 }
+  /* NameLabel */ .chroma .nl { color: #8ab1b0 }
+  /* NameNamespace */ .chroma .nn { color: #8ab1b0 }
  /* NameOther */ .chroma .nx { color: #75af00 }
-  /* NameProperty */ .chroma .py { color: #111111 }
+  /* NameProperty */ .chroma .py { color: #8ab1b0 }
  /* NameTag */ .chroma .nt { color: #f92672 }
-  /* NameVariable */ .chroma .nv { color: #111111 }
-  /* NameVariableClass */ .chroma .vc { color: #111111 }
-  /* NameVariableGlobal */ .chroma .vg { color: #111111 }
-  /* NameVariableInstance */ .chroma .vi { color: #111111 }
-  /* NameVariableMagic */ .chroma .vm { color: #111111 }
+  /* NameVariable */ .chroma .nv { color: #8ab1b0 }
+  /* NameVariableClass */ .chroma .vc { color: #8ab1b0 }
+  /* NameVariableGlobal */ .chroma .vg { color: #8ab1b0 }
+  /* NameVariableInstance */ .chroma .vi { color: #8ab1b0 }
+  /* NameVariableMagic */ .chroma .vm { color: #8ab1b0 }
  /* Literal */ .chroma .l { color: #ae81ff }
  /* LiteralDate */ .chroma .ld { color: #d88200 }
  /* LiteralString */ .chroma .s { color: #d88200 }
@ -59,7 +59,7 @@
  /* LiteralNumberOct */ .chroma .mo { color: #ae81ff }
  /* Operator */ .chroma .o { color: #f92672 }
  /* OperatorWord */ .chroma .ow { color: #f92672 }
-  /* Punctuation */ .chroma .p { color: #111111 }
+  /* Punctuation */ .chroma .p { color: #8ab1b0 }
  /* Comment */ .chroma .c { color: #75715e }
  /* CommentHashbang */ .chroma .ch { color: #75715e }
  /* CommentMultiline */ .chroma .cm { color: #75715e }
--- a/assets/sass/syntax/_syntax.scss
+++ b/assets/sass/syntax/_syntax.scss
@ -366,84 +366,84 @@
  }
 }

-.theme__custom {
-  @if $theme_custom_chroma == default {
-    @include chroma-autumn;
-  } @else if $theme_custom_chroma == abap {
-    @include chroma-abap;
-  } @else if $theme_custom_chroma == algol {
-    @include chroma-algol;
-  } @else if $theme_custom_chroma == algolnu {
-    @include chroma-algolnu;
-  } @else if $theme_custom_chroma == api {
-    @include chroma-api;
-  } @else if $theme_custom_chroma == arduino {
-    @include chroma-arduino;
-  } @else if $theme_custom_chroma == autumn {
-    @include chroma-autumn;
-  } @else if $theme_custom_chroma == borland {
-    @include chroma-borland;
-  } @else if $theme_custom_chroma == bw {
-    @include chroma-bw;
-  } @else if $theme_custom_chroma == colorful {
-    @include chroma-colorful;
-  } @else if $theme_custom_chroma == dracula {
-    @include chroma-dracula;
-  } @else if $theme_custom_chroma == emacs {
-    @include chroma-emacs;
-  } @else if $theme_custom_chroma == friendly {
-    @include chroma-friendly;
-  } @else if $theme_custom_chroma == fruity {
-    @include chroma-fruity;
-  } @else if $theme_custom_chroma == github {
-    @include chroma-github;
-  } @else if $theme_custom_chroma == igor {
-    @include chroma-igor;
-  } @else if $theme_custom_chroma == lovelace {
-    @include chroma-lovelace;
-  } @else if $theme_custom_chroma == manni {
-    @include chroma-manni;
-  } @else if $theme_custom_chroma == monokai {
-    @include chroma-monokai;
-  } @else if $theme_custom_chroma == monokailight {
+.theme__kimbie {
+  @if $theme_kimbie_chroma == default {
    @include chroma-monokailight;
-  } @else if $theme_custom_chroma == murphy {
+  } @else if $theme_kimbie_chroma == abap {
+    @include chroma-abap;
+  } @else if $theme_kimbie_chroma == algol {
+    @include chroma-algol;
+  } @else if $theme_kimbie_chroma == algolnu {
+    @include chroma-algolnu;
+  } @else if $theme_kimbie_chroma == api {
+    @include chroma-api;
+  } @else if $theme_kimbie_chroma == arduino {
+    @include chroma-arduino;
+  } @else if $theme_kimbie_chroma == autumn {
+    @include chroma-autumn;
+  } @else if $theme_kimbie_chroma == borland {
+    @include chroma-borland;
+  } @else if $theme_kimbie_chroma == bw {
+    @include chroma-bw;
+  } @else if $theme_kimbie_chroma == colorful {
+    @include chroma-colorful;
+  } @else if $theme_kimbie_chroma == dracula {
+    @include chroma-dracula;
+  } @else if $theme_kimbie_chroma == emacs {
+    @include chroma-emacs;
+  } @else if $theme_kimbie_chroma == friendly {
+    @include chroma-friendly;
+  } @else if $theme_kimbie_chroma == fruity {
+    @include chroma-fruity;
+  } @else if $theme_kimbie_chroma == github {
+    @include chroma-github;
+  } @else if $theme_kimbie_chroma == igor {
+    @include chroma-igor;
+  } @else if $theme_kimbie_chroma == lovelace {
+    @include chroma-lovelace;
+  } @else if $theme_kimbie_chroma == manni {
+    @include chroma-manni;
+  } @else if $theme_kimbie_chroma == monokai {
+    @include chroma-monokai;
+  } @else if $theme_kimbie_chroma == monokailight {
+    @include chroma-monokailight;
+  } @else if $theme_kimbie_chroma == murphy {
    @include chroma-murphy;
-  } @else if $theme_custom_chroma == native {
+  } @else if $theme_kimbie_chroma == native {
    @include chroma-native;
-  } @else if $theme_custom_chroma == paraisodark {
+  } @else if $theme_kimbie_chroma == paraisodark {
    @include chroma-paraisodark;
-  } @else if $theme_custom_chroma == paraisolight {
+  } @else if $theme_kimbie_chroma == paraisolight {
    @include chroma-paraisolight;
-  } @else if $theme_custom_chroma == pastie {
+  } @else if $theme_kimbie_chroma == pastie {
    @include chroma-pastie;
-  } @else if $theme_custom_chroma == perldoc {
+  } @else if $theme_kimbie_chroma == perldoc {
    @include chroma-perldoc;
-  } @else if $theme_custom_chroma == pygments {
+  } @else if $theme_kimbie_chroma == pygments {
    @include chroma-pygments;
-  } @else if $theme_custom_chroma == rainbowdash {
+  } @else if $theme_kimbie_chroma == rainbowdash {
    @include chroma-rainbowdash;
-  } @else if $theme_custom_chroma == rrt {
+  } @else if $theme_kimbie_chroma == rrt {
    @include chroma-rrt;
-  } @else if $theme_custom_chroma == solarizeddark {
+  } @else if $theme_kimbie_chroma == solarizeddark {
    @include chroma-solarizeddark;
-  } @else if $theme_custom_chroma == solarizeddark256 {
+  } @else if $theme_kimbie_chroma == solarizeddark256 {
    @include chroma-solarizeddark256;
-  } @else if $theme_custom_chroma == solarizedlight {
+  } @else if $theme_kimbie_chroma == solarizedlight {
    @include chroma-solarizedlight;
-  } @else if $theme_custom_chroma == swapoff {
+  } @else if $theme_kimbie_chroma == swapoff {
    @include chroma-swapoff;
-  } @else if $theme_custom_chroma == tango {
+  } @else if $theme_kimbie_chroma == tango {
    @include chroma-tango;
-  } @else if $theme_custom_chroma == trac {
+  } @else if $theme_kimbie_chroma == trac {
    @include chroma-trac;
-  } @else if $theme_custom_chroma == vim {
+  } @else if $theme_kimbie_chroma == vim {
    @include chroma-vim;
-  } @else if $theme_custom_chroma == vs {
+  } @else if $theme_kimbie_chroma == vs {
    @include chroma-vs;
-  } @else if $theme_custom_chroma == xcode {
+  } @else if $theme_kimbie_chroma == xcode {
    @include chroma-xcode;
  } @else {
-    @include chroma-autumn;
+    @include chroma-monokailight;
  }
 }
--- a/assets/sass/themes/_custom.scss
+++ b/assets/sass/themes/_custom.scss
@ -1,96 +0,0 @@
-$custom: (
-  footer-background-color: hsl($custom_theme_primary_color, 60%, 95%),
-  footer-color: hsl($custom_theme_primary_color, 100%, 10%),
-  link: hsl($custom_theme_primary_color, 65%, 32%),
-  link-hover: hsl($custom_theme_primary_color, 65%, 22%),
-  title-color: hsl($custom_theme_primary_color, 100%, 8%),
-  meta-color: hsl($custom_theme_primary_color, 40%, 40%),
-  body-color: hsl($custom_theme_primary_color, 100%, 10%),
-  hr-color: hsl($custom_theme_primary_color, 60%, 30%),
-  body-background-color: hsl($custom_theme_primary_color, 100%, 99%),
-  backdrop-background-color: hsl($custom_theme_primary_color, 100%, 98.5%),
-  dropdown-border-top-color: hsl($custom_theme_primary_color, 100%, 45%),
-  dropdown-item-active-background-color: hsl($custom_theme_primary_color, 100%, 90%),
-  dropdown-content-background-color: hsl($custom_theme_primary_color, 100%, 98%),
-  dropdown-item-hover-background-color: hsl($custom_theme_primary_color, 100%, 82%),
-  dropdown-item-hover-color: hsl($custom_theme_primary_color, 100%, 35%),
-  dropdown-item-color: hsl($custom_theme_primary_color, 100%, 10%),
-  navbar-border-bottom-color: hsl($custom_theme_primary_color, 65%, 32%),
-  navbar-background-color: hsl($custom_theme_primary_color, 60%, 86%),
-  navbar-mobile-background-color: hsl($custom_theme_primary_color, 60%, 92%),
-  navbar-title-color: hsl($custom_theme_primary_color, 82%, 20%),
-  navbar-title-hover-color: hsl($custom_theme_primary_color, 100%, 35%),
-  navbar-title-active-color: hsl($custom_theme_primary_color, 100%, 35%),
-  navbar-menu-hover-background-color: hsl($custom_theme_primary_color, 100%, 90%),
-  navbar-dropdown-item-hover-color: hsl($custom_theme_primary_color, 100%, 35%),
-  sidebar-title-color: hsl($custom_theme_primary_color, 50%, 25%),
-  sidebar-li-color: hsl($custom_theme_primary_color, 85%, 30%),
-  taxo-title-color: hsl($custom_theme_primary_color, 70%, 35%),
-  taxo-num-color: hsl($custom_theme_primary_color, 100%, 10%),
-  taxo-num-background-color: hsl($custom_theme_primary_color, 60%, 88%),
-  taxo-tags-background-color: hsl($custom_theme_primary_color, 100%, 96%),
-  taxo-tags-color: hsl($custom_theme_primary_color, 100%, 10%),
-  taxo-series-background-color: hsl($custom_theme_primary_color, 100%, 96%),
-  taxo-series-color: hsl($custom_theme_primary_color, 100%, 10%),
-  taxo-categories-background-color: hsl($custom_theme_primary_color, 100%, 96%),
-  taxo-categories-color: hsl($custom_theme_primary_color, 100%, 10%),
-  breadcrumb-item-color: hsl($custom_theme_primary_color, 85%, 30%),
-  breadcrumb-background-color: hsl($custom_theme_primary_color, 100%, 96%),
-  breadcrumb-item-active-color: hsl($custom_theme_primary_color, 15%, 25%),
-  list-header-title-color: hsl($custom_theme_primary_color, 100%, 10%),
-  figcaption-color: hsl($custom_theme_primary_color, 100%, 40%),
-  figcaption-strong-color: hsl($custom_theme_primary_color, 100%, 25%),
-  single-hr-background-color: hsl($custom_theme_primary_color, 100%, 40%),
-  single-blockquote-border-color: hsl($custom_theme_primary_color, 100%, 25%),
-  single-header-title-color: hsl($custom_theme_primary_color, 100%, 10%),
-  single-contents-title-color: hsl($custom_theme_primary_color, 70%, 22%),
-  related-header-title-color: hsl($custom_theme_primary_color, 100%, 10%),
-  related-link-color: hsl($custom_theme_primary_color, 65%, 32%),
-  content-box-border-color: hsl($custom_theme_primary_color, 100%, 86%),
-  content-box-background-color: hsl($custom_theme_primary_color, 100%, 94%),
-  burger-menu-color: hsl($custom_theme_primary_color, 86%, 20%),
-  social-icon-color: hsl($custom_theme_primary_color, 25%, 35%),
-  social-icon-hover-color: hsl($custom_theme_primary_color, 25%, 50%),
-  pagination-link-color: hsl($custom_theme_primary_color, 65%, 32%),
-  pagination-background-color: hsl($custom_theme_primary_color, 60%, 90%),
-  pagination-disabled-color: hsl($custom_theme_primary_color, 25%, 75%),
-  pagination-number-color: hsl($custom_theme_primary_color, 100%, 40%),
-  terms-title-color: hsl($custom_theme_primary_color, 25%, 60%),
-  terms-tags-color: hsl($custom_theme_primary_color, 100%, 30%),
-  terms-categories-color: hsl($custom_theme_primary_color, 100%, 30%),
-  terms-series-color: hsl($custom_theme_primary_color, 100%, 30%),
-  terms-len-color: hsl($custom_theme_primary_color, 100%, 12%),
-  toc-label-color: hsl($custom_theme_primary_color, 100%, 10%),
-  toc-title-color: hsl($custom_theme_primary_color, 10%, 60%),
-  toc-vertical-line: hsl($custom_theme_primary_color, 65%, 85%),
-  toc-vertical-line-active: hsl($custom_theme_primary_color, 65%, 35%),
-  search-placeholder-color: hsl($custom_theme_primary_color, 65%, 65%),
-  search-color: hsl($custom_theme_primary_color, 100%, 10%),
-  search-icon-color: hsl($custom_theme_primary_color, 65%, 80%),
-  search-border-color: hsl($custom_theme_primary_color, 85%, 85%),
-  search-content-color: hsl($custom_theme_primary_color, 100%, 10%),
-  search-background-color: hsl($custom_theme_primary_color, 100%, 96%),
-  search-content-background-color: hsl($custom_theme_primary_color, 100%, 99%),
-  search-hover-background-color: hsl($custom_theme_primary_color, 100%, 95%),
-  search-highlight-color: #FF6188,
-  selection-color: hsl($custom_theme_primary_color, 65%, 95%),
-  selection-background-color: hsl($custom_theme_primary_color, 65%, 32%),
-  archive-key-color: hsl($custom_theme_primary_color, 100%, 92%),
-  archive-type-color: hsl($custom_theme_primary_color, 60%, 20%),
-  archive-meta-color: hsl($custom_theme_primary_color, 80%, 40%),
-  archive-key-background-color: hsl($custom_theme_primary_color, 100%, 12%),
-  archive-type-background-color: hsl($custom_theme_primary_color, 100%, 95%),
-  archive-hover-line-color: hsl($custom_theme_primary_color, 65%, 32%),
-  gtt-color: hsl($custom_theme_primary_color, 60%, 25%),
-  gtt-background-color: hsl($custom_theme_primary_color, 60%, 95%),
-  gtt-hover-color: hsl($custom_theme_primary_color, 60%, 60%),
-  gtt-hover-background-color: hsl($custom_theme_primary_color, 60%, 95%),
-  switch-background-color: hsl($custom_theme_primary_color, 80%, 80%),
-  switch-button-color: hsl($custom_theme_primary_color, 100%, 95%),
-  switch-active-color: hsl($custom_theme_primary_color, 80%, 60%),
-  gallery-mask-color: hsl($custom_theme_primary_color, 100%, 10%),
-  gallery-mask-background-color: hsla($custom_theme_primary_color, 100%, 90%, 0.7),
-  contact-input-color: hsl($custom_theme_primary_color, 100%, 28.5%),
-  contact-input-background-color: hsl($custom_theme_primary_color, 100%, 94.5%),
-  contact-button-background-color: hsl($custom_theme_primary_color, 100%, 94.5%),
-) !default;
--- a/assets/sass/themes/_customcode.scss
+++ b/assets/sass/themes/_customcode.scss
@ -1,69 +0,0 @@
-$customcode: '';
-
-@if $theme_custom_chroma_background == dark {
-  $customcode: (
-    content-code-color: #fcfcfa,
-    content-pre-main-color: #FFA7C4,
-    content-pre-color: #eee,
-    content-pre-number-color: #666,
-    content-pre-background-color: #171f2e,
-    content-pre-header-background-color: darken(#011627, 1.5%),
-    content-pre-border-background-color: #3a3a3a,
-    content-pre-header-color: #FCFCFA,
-  );
-} @else if $theme_custom_chroma_background == light {
-  $customcode: (
-    content-code-color: #827d70,
-    content-pre-main-color: #607d8b,
-    content-pre-color: #344952,
-    content-pre-number-color: #aaa,
-    content-pre-background-color: #F5F2F0,
-    content-pre-border-background-color: darken(#F5F2F0, 7%),
-    content-pre-header-background-color: darken(#F5F2F0, 3%),
-    content-pre-header-color: #344952,
-  );
-} @else if $theme_custom_chroma_background == hacker {
-  $customcode: (
-    content-code-color: #1fff2a,
-    content-pre-main-color: #1FFF2A,
-    content-pre-color: #d1d1d1,
-    content-pre-number-color: #666,
-    content-pre-background-color: #282a36,
-    content-pre-border-background-color: #f3ff6e,
-    content-pre-header-background-color: darken(#202420, 1.5%),
-    content-pre-header-color: #f3ff6e,
-  );
-} @else if $theme_custom_chroma_background == solarized {
-  $customcode: (
-    content-code-color: #424242,
-    content-pre-main-color: #B58900,
-    content-pre-color: #344952,
-    content-pre-number-color: #aaa,
-    content-pre-background-color: #faf1cd,
-    content-pre-border-background-color: darken(#FBF1D1, 12%),
-    content-pre-header-background-color: darken(#FBF1D1, 6%),
-    content-pre-header-color: #344952,
-  );
-} @else if $theme_custom_chroma_background == custom {
-  $customcode: (
-    content-code-color: #002633,
-    content-pre-main-color: hsl($custom_theme_primary_color, 65%, 32%),
-    content-pre-color: hsl($custom_theme_primary_color, 100%, 10%),
-    content-pre-number-color: hsl($custom_theme_primary_color, 0%, 67%),
-    content-pre-background-color: hsl($custom_theme_primary_color, 100%, 97%),
-    content-pre-header-color: hsl($custom_theme_primary_color, 100%, 10%),
-    content-pre-header-background-color: hsl($custom_theme_primary_color, 100%, 92%),
-    content-pre-border-background-color: hsl($custom_theme_primary_color, 100%, 86%),
-  );
-} @else {
-  $customcode: (
-    content-code-color: #002633,
-    content-pre-main-color: hsl($custom_theme_primary_color, 65%, 32%),
-    content-pre-color: hsl($custom_theme_primary_color, 100%, 10%),
-    content-pre-number-color: hsl($custom_theme_primary_color, 0%, 67%),
-    content-pre-background-color: hsl($custom_theme_primary_color, 100%, 97%),
-    content-pre-header-color: hsl($custom_theme_primary_color, 100%, 10%),
-    content-pre-header-background-color: hsl($custom_theme_primary_color, 100%, 92%),
-    content-pre-border-background-color: hsl($custom_theme_primary_color, 100%, 86%),
-  );
-}
--- a/assets/sass/themes/_darkcode.scss
+++ b/assets/sass/themes/_darkcode.scss
@ -13,7 +13,7 @@ $darkcode: '';
  );
 } @else if $theme_dark_chroma_background == light {
  $darkcode: (
-    content-code-color: #827d70,
+    content-code-color: #26a69a,
    content-pre-main-color: #607d8b,
    content-pre-color: #344952,
    content-pre-number-color: #aaa,
@ -24,7 +24,7 @@ $darkcode: '';
  );
 } @else if $theme_dark_chroma_background == hacker {
  $darkcode: (
-    content-code-color: #1fff2a,
+    content-code-color: #E3CD26,
    content-pre-main-color: #1FFF2A,
    content-pre-color: #d1d1d1,
    content-pre-number-color: #666,
@ -35,7 +35,7 @@ $darkcode: '';
  );
 } @else if $theme_dark_chroma_background == solarized {
  $darkcode: (
-    content-code-color: #424242,
+    content-code-color: #268bd2,
    content-pre-main-color: #B58900,
    content-pre-color: #344952,
    content-pre-number-color: #aaa,
@ -44,16 +44,16 @@ $darkcode: '';
    content-pre-header-background-color: darken(#FBF1D1, 6%),
    content-pre-header-color: #344952,
  );
-} @else if $theme_dark_chroma_background == custom {
+} @else if $theme_dark_chroma_background == kimbie {
  $darkcode: (
-    content-code-color: #002633,
-    content-pre-main-color: hsl($custom_theme_primary_color, 65%, 32%),
-    content-pre-color: hsl($custom_theme_primary_color, 100%, 10%),
-    content-pre-number-color: hsl($custom_theme_primary_color, 0%, 67%),
-    content-pre-background-color: hsl($custom_theme_primary_color, 100%, 97%),
-    content-pre-header-color: hsl($custom_theme_primary_color, 100%, 10%),
-    content-pre-header-background-color: hsl($custom_theme_primary_color, 100%, 92%),
-    content-pre-border-background-color: hsl($custom_theme_primary_color, 100%, 86%),
+    content-code-color: #f06431,
+    content-pre-main-color: #dc3958,
+    content-pre-color: #d3af86,
+    content-pre-number-color: #666,
+    content-pre-background-color: #423523,
+    content-pre-header-color: #8ab1b0,
+    content-pre-header-background-color: #362712,
+    content-pre-border-background-color: #e3b583,
  );
 } @else {
  $darkcode: (
--- a/assets/sass/themes/_hacker.scss
+++ b/assets/sass/themes/_hacker.scss
@ -57,9 +57,9 @@ $hacker: (
    pagination-disabled-color: #424242,
    pagination-number-color: #FCFCFA,
    terms-title-color: #C7BA00,
-    terms-tags-color: #1FFF2A,
-    terms-categories-color: #1FFF2A,
-    terms-series-color: #1FFF2A,
+    terms-tags-color: #78DCE8,
+    terms-categories-color: #AB9DF2,
+    terms-series-color: #EA9C77,
    terms-len-color: #E08C48,
    toc-label-color: #727072,
    toc-title-color: #727072,
--- a/assets/sass/themes/_hackercode.scss
+++ b/assets/sass/themes/_hackercode.scss
@ -13,7 +13,7 @@ $hackercode: '';
  );
 } @else if $theme_hacker_chroma_background == light {
  $hackercode: (
-    content-code-color: #827d70,
+    content-code-color: #26a69a,
    content-pre-main-color: #607d8b,
    content-pre-color: #344952,
    content-pre-number-color: #aaa,
@ -24,7 +24,7 @@ $hackercode: '';
  );
 } @else if $theme_hacker_chroma_background == hacker {
  $hackercode: (
-    content-code-color: #1fff2a,
+    content-code-color: #E3CD26,
    content-pre-main-color: #1FFF2A,
    content-pre-color: #d1d1d1,
    content-pre-number-color: #666,
@ -35,7 +35,7 @@ $hackercode: '';
  );
 } @else if $theme_hacker_chroma_background == solarized {
  $hackercode: (
-    content-code-color: #424242,
+    content-code-color: #268bd2,
    content-pre-main-color: #B58900,
    content-pre-color: #344952,
    content-pre-number-color: #aaa,
@ -44,20 +44,20 @@ $hackercode: '';
    content-pre-header-background-color: darken(#FBF1D1, 6%),
    content-pre-header-color: #344952,
  );
-} @else if $theme_hacker_chroma_background == custom {
+} @else if $theme_hacker_chroma_background == kimbie {
  $hackercode: (
-    content-code-color: #002633,
-    content-pre-main-color: hsl($custom_theme_primary_color, 65%, 32%),
-    content-pre-color: hsl($custom_theme_primary_color, 100%, 10%),
-    content-pre-number-color: hsl($custom_theme_primary_color, 0%, 67%),
-    content-pre-background-color: hsl($custom_theme_primary_color, 100%, 97%),
-    content-pre-header-color: hsl($custom_theme_primary_color, 100%, 10%),
-    content-pre-header-background-color: hsl($custom_theme_primary_color, 100%, 92%),
-    content-pre-border-background-color: hsl($custom_theme_primary_color, 100%, 86%),
+    content-code-color: #f06431,
+    content-pre-main-color: #dc3958,
+    content-pre-color: #d3af86,
+    content-pre-number-color: #666,
+    content-pre-background-color: #423523,
+    content-pre-header-color: #8ab1b0,
+    content-pre-header-background-color: #362712,
+    content-pre-border-background-color: #e3b583,
  );
 } @else {
  $hackercode: (
-    content-code-color: #1fff2a,
+    content-code-color: #E3CD26,
    content-pre-main-color: #1FFF2A,
    content-pre-color: #d1d1d1,
    content-pre-number-color: #666,
--- a/assets/sass/themes/_kimbie.scss
+++ b/assets/sass/themes/_kimbie.scss
@ -0,0 +1,96 @@
+$kimbie: (
+  footer-background-color: #423523,
+  footer-color: #d3af86,
+  link: #DC322F,
+  link-hover: #DC322F,
+  title-color: #7c5021,
+  meta-color: #98676a,
+  body-color: #e3b583,
+  hr-color: #7f5d38,
+  body-background-color: #221a0f,
+  backdrop-background-color: #362712,
+  dropdown-border-top-color: #d3af86,
+  dropdown-item-active-background-color: #5e452b,
+  dropdown-content-background-color: #6e583b,
+  dropdown-item-hover-background-color: #5e452b,
+  dropdown-item-hover-color: #f06431,
+  dropdown-item-color: lighten(#d3af86, 20%),
+  navbar-border-bottom-color: #6e583b,
+  navbar-background-color: #51412c,
+  navbar-mobile-background-color: #423523,
+  navbar-title-color: #d3af86,
+  navbar-title-hover-color: #f06431,
+  navbar-title-active-color: #889b4a,
+  navbar-menu-hover-background-color: #6e583b,
+  navbar-dropdown-item-hover-color: #f06431,
+  sidebar-title-color: #dc3958,
+  sidebar-li-color: #a57a4c,
+  taxo-title-color: #98676a,
+  taxo-num-color: #d3af86,
+  taxo-num-background-color: #6e583b,
+  taxo-tags-background-color: #423523,
+  taxo-tags-color: #f06431,
+  taxo-series-background-color: #423523,
+  taxo-series-color: #dc3958 ,
+  taxo-categories-background-color: #423523,
+  taxo-categories-color: #8ab1b0,
+  breadcrumb-item-color: #DC322F,
+  breadcrumb-background-color: #362712,
+  breadcrumb-item-active-color: #bdbdbd,
+  list-header-title-color: #98676a,
+  figcaption-color: #e3b583,
+  figcaption-strong-color: #7e602c,
+  single-hr-background-color: #7f5d38,
+  single-blockquote-border-color: #84613d,
+  single-header-title-color: #e3b583,
+  single-contents-title-color: #889b4a,
+  related-header-title-color: #889b4a,
+  related-link-color: #f06431,
+  content-box-border-color: #6e583b,
+  content-box-background-color: #7c502166,
+  burger-menu-color: #a57a4c,
+  social-icon-color: #ccc,
+  social-icon-hover-color: #fff,
+  pagination-link-color: #DC322F,
+  pagination-background-color: #362712,
+  pagination-disabled-color: #bdbdbd,
+  pagination-number-color: #fff,
+  terms-title-color: #889b4a,
+  terms-tags-color: #f06431,
+  terms-categories-color: #8ab1b0,
+  terms-series-color: #dc3958,
+  terms-len-color: #d3af86,
+  toc-label-color: #7f5d38,
+  toc-title-color: #a57a4c,
+  toc-vertical-line: #a57a4c,
+  toc-vertical-line-active: #889b4a,
+  search-placeholder-color: #6e583b,
+  search-color: #d3af86,
+  search-icon-color: #6e583b,
+  search-border-color: #5e452b,
+  search-content-color: #d3af86,
+  search-background-color: #362712,
+  search-content-background-color: #362712,
+  search-hover-background-color: #5e452b,
+  search-highlight-color: #f06431,
+  selection-color: #FCFCFA,
+  selection-background-color: #FF6188,
+  archive-key-color: #8ab1b0,
+  archive-type-color: #f06431,
+  archive-meta-color: #d3af86,
+  archive-key-background-color: #423523,
+  archive-type-background-color: #5e452b,
+  archive-hover-line-color: #dc3958,
+  gtt-color: #d3af86,
+  gtt-background-color: #423523,
+  gtt-hover-color: #f06431,
+  gtt-hover-background-color: #5e452b,
+  switch-background-color: #6e583b,
+  switch-button-color: #FCFCFA,
+  switch-active-color: #dc3958,
+  gallery-mask-color: #fff,
+  gallery-mask-background-color: rgba(110, 88, 59, 0.6),
+  contact-input-color: #e3b583,
+  contact-input-background-color: #362712,
+  contact-button-background-color: #362712,
+) !default;
--- a/assets/sass/themes/_kimbiecode.scss
+++ b/assets/sass/themes/_kimbiecode.scss
@ -0,0 +1,69 @@
+$kimbiecode: '';
+
+@if $theme_kimbie_chroma_background == dark {
+  $kimbiecode: (
+    content-code-color: #fcfcfa,
+    content-pre-main-color: #FFA7C4,
+    content-pre-color: #eee,
+    content-pre-number-color: #666,
+    content-pre-background-color: #171f2e,
+    content-pre-header-background-color: darken(#011627, 1.5%),
+    content-pre-border-background-color: #3a3a3a,
+    content-pre-header-color: #FCFCFA,
+  );
+} @else if $theme_kimbie_chroma_background == light {
+  $kimbiecode: (
+    content-code-color: #26a69a,
+    content-pre-main-color: #607d8b,
+    content-pre-color: #344952,
+    content-pre-number-color: #aaa,
+    content-pre-background-color: #F5F2F0,
+    content-pre-border-background-color: darken(#F5F2F0, 7%),
+    content-pre-header-background-color: darken(#F5F2F0, 3%),
+    content-pre-header-color: #344952,
+  );
+} @else if $theme_kimbie_chroma_background == hacker {
+  $kimbiecode: (
+    content-code-color: #E3CD26,
+    content-pre-main-color: #1FFF2A,
+    content-pre-color: #d1d1d1,
+    content-pre-number-color: #666,
+    content-pre-background-color: #282a36,
+    content-pre-border-background-color: #f3ff6e,
+    content-pre-header-background-color: darken(#202420, 1.5%),
+    content-pre-header-color: #f3ff6e,
+  );
+} @else if $theme_kimbie_chroma_background == solarized {
+  $kimbiecode: (
+    content-code-color: #268bd2,
+    content-pre-main-color: #B58900,
+    content-pre-color: #344952,
+    content-pre-number-color: #aaa,
+    content-pre-background-color: #faf1cd,
+    content-pre-border-background-color: darken(#FBF1D1, 12%),
+    content-pre-header-background-color: darken(#FBF1D1, 6%),
+    content-pre-header-color: #344952,
+  );
+} @else if $theme_kimbie_chroma_background == kimbie {
+  $kimbiecode: (
+    content-code-color: #f06431,
+    content-pre-main-color: #dc3958,
+    content-pre-color: #d3af86,
+    content-pre-number-color: #666,
+    content-pre-background-color: #423523,
+    content-pre-header-color: #8ab1b0,
+    content-pre-header-background-color: #362712,
+    content-pre-border-background-color: #e3b583,
+  );
+} @else {
+  $kimbiecode: (
+    content-code-color: #f06431,
+    content-pre-main-color: #dc3958,
+    content-pre-color: #d3af86,
+    content-pre-number-color: #666,
+    content-pre-background-color: #423523,
+    content-pre-header-color: #8ab1b0,
+    content-pre-header-background-color: #362712,
+    content-pre-border-background-color: #e3b583,
+  );
+}
--- a/assets/sass/themes/_light.scss
+++ b/assets/sass/themes/_light.scss
@ -34,7 +34,7 @@ $light: (
    taxo-series-color: #424242,
    taxo-categories-background-color: darken(#eee, 2%),
    taxo-categories-color: #424242,
-    breadcrumb-item-color: #424242,
+    breadcrumb-item-color: #728fcb,
    breadcrumb-background-color: #eee,
    breadcrumb-item-active-color: #bdbdbd,
    list-header-title-color: #424242,
--- a/assets/sass/themes/_lightcode.scss
+++ b/assets/sass/themes/_lightcode.scss
@ -13,7 +13,7 @@ $lightcode: '';
  );
 } @else if $theme_light_chroma_background == light {
  $lightcode: (
-    content-code-color: #827d70,
+    content-code-color: #26a69a,
    content-pre-main-color: #607d8b,
    content-pre-color: #344952,
    content-pre-number-color: #aaa,
@ -24,7 +24,7 @@ $lightcode: '';
  );
 } @else if $theme_light_chroma_background == hacker {
  $lightcode: (
-    content-code-color: #1fff2a,
+    content-code-color: #E3CD26,
    content-pre-main-color: #1FFF2A,
    content-pre-color: #d1d1d1,
    content-pre-number-color: #666,
@ -35,7 +35,7 @@ $lightcode: '';
  );
 } @else if $theme_light_chroma_background == solarized {
  $lightcode: (
-    content-code-color: #424242,
+    content-code-color: #268bd2,
    content-pre-main-color: #B58900,
    content-pre-color: #344952,
    content-pre-number-color: #aaa,
@ -44,20 +44,20 @@ $lightcode: '';
    content-pre-header-background-color: darken(#FBF1D1, 6%),
    content-pre-header-color: #344952,
  );
-} @else if $theme_light_chroma_background == custom {
+} @else if $theme_light_chroma_background == kimbie {
  $lightcode: (
-    content-code-color: #002633,
-    content-pre-main-color: hsl($custom_theme_primary_color, 65%, 32%),
-    content-pre-color: hsl($custom_theme_primary_color, 100%, 10%),
-    content-pre-number-color: hsl($custom_theme_primary_color, 0%, 67%),
-    content-pre-background-color: hsl($custom_theme_primary_color, 100%, 97%),
-    content-pre-header-color: hsl($custom_theme_primary_color, 100%, 10%),
-    content-pre-header-background-color: hsl($custom_theme_primary_color, 100%, 92%),
-    content-pre-border-background-color: hsl($custom_theme_primary_color, 100%, 86%),
+    content-code-color: #f06431,
+    content-pre-main-color: #dc3958,
+    content-pre-color: #d3af86,
+    content-pre-number-color: #666,
+    content-pre-background-color: #423523,
+    content-pre-header-color: #8ab1b0,
+    content-pre-header-background-color: #362712,
+    content-pre-border-background-color: #e3b583,
  );
 } @else {
  $lightcode: (
-    content-code-color: #827d70,
+    content-code-color: #26a69a,
    content-pre-main-color: #607d8b,
    content-pre-color: #344952,
    content-pre-number-color: #aaa,
--- a/assets/sass/themes/_solarized.scss
+++ b/assets/sass/themes/_solarized.scss
@ -56,9 +56,9 @@ $solarized: (
    pagination-disabled-color: #bdbdbd,
    pagination-number-color: #455a64,
    terms-title-color: lighten(#B58900, 7%),
-    terms-tags-color: #ffb300,
-    terms-categories-color: #B58900,
-    terms-series-color: #B58900,
+    terms-tags-color: lighten(#B58900, 5%),
+    terms-categories-color: #cb4b16,
+    terms-series-color: #859900,
    terms-len-color: #727072,
    toc-label-color: #727072,
    toc-title-color: #727072,
--- a/assets/sass/themes/_solarizedcode.scss
+++ b/assets/sass/themes/_solarizedcode.scss
@ -13,7 +13,7 @@ $solarizedcode: '';
  );
 } @else if $theme_solarized_chroma_background == light {
  $solarizedcode: (
-    content-code-color: #827d70,
+    content-code-color: #26a69a,
    content-pre-main-color: #607d8b,
    content-pre-color: #344952,
    content-pre-number-color: #aaa,
@ -24,7 +24,7 @@ $solarizedcode: '';
  );
 } @else if $theme_solarized_chroma_background == hacker {
  $solarizedcode: (
-    content-code-color: #1fff2a,
+    content-code-color: #E3CD26,
    content-pre-main-color: #1FFF2A,
    content-pre-color: #d1d1d1,
    content-pre-number-color: #666,
@ -35,7 +35,7 @@ $solarizedcode: '';
  );
 } @else if $theme_solarized_chroma_background == solarized {
  $solarizedcode: (
-    content-code-color: #424242,
+    content-code-color: #268bd2,
    content-pre-main-color: #B58900,
    content-pre-color: #344952,
    content-pre-number-color: #aaa,
@ -44,20 +44,20 @@ $solarizedcode: '';
    content-pre-header-background-color: darken(#FBF1D1, 6%),
    content-pre-header-color: #344952,
  );
-} @else if $theme_solarized_chroma_background == custom {
+} @else if $theme_solarized_chroma_background == kimbie {
  $solarizedcode: (
-    content-code-color: #002633,
-    content-pre-main-color: hsl($custom_theme_primary_color, 65%, 32%),
-    content-pre-color: hsl($custom_theme_primary_color, 100%, 10%),
-    content-pre-number-color: hsl($custom_theme_primary_color, 0%, 67%),
-    content-pre-background-color: hsl($custom_theme_primary_color, 100%, 97%),
-    content-pre-header-color: hsl($custom_theme_primary_color, 100%, 10%),
-    content-pre-header-background-color: hsl($custom_theme_primary_color, 100%, 92%),
-    content-pre-border-background-color: hsl($custom_theme_primary_color, 100%, 86%),
+    content-code-color: #f06431,
+    content-pre-main-color: #dc3958,
+    content-pre-color: #d3af86,
+    content-pre-number-color: #666,
+    content-pre-background-color: #423523,
+    content-pre-header-color: #8ab1b0,
+    content-pre-header-background-color: #362712,
+    content-pre-border-background-color: #e3b583,
  );
 } @else {
  $solarizedcode: (
-    content-code-color: #424242,
+    content-code-color: #268bd2,
    content-pre-main-color: #B58900,
    content-pre-color: #344952,
    content-pre-number-color: #aaa,
--- a/assets/sass/themes/_theme.scss
+++ b/assets/sass/themes/_theme.scss
@ -2,20 +2,20 @@
@import 'light';
@import 'hacker';
@import 'solarized';
-@import 'custom';
+@import 'kimbie';

@import 'darkcode';
@import 'lightcode';
@import 'hackercode';
@import 'solarizedcode';
-@import 'customcode';
+@import 'kimbiecode';

 $themes: (
  dark: $dark,
  light: $light,
  hacker: $hacker,  
  solarized: $solarized,
-  custom: $custom,
+  kimbie: $kimbie,
 );

 $codeblock: (
@ -23,5 +23,5 @@ $codeblock: (
  light: $lightcode,
  hacker: $hackercode,  
  solarized: $solarizedcode,
-  custom: $customcode,
+  kimbie: $kimbiecode,
 );
--- a/data/skin.toml
+++ b/data/skin.toml
@ -1,17 +1,15 @@
-custom_theme_primary_color = "195" # 0 ~ 359, Colors HSL, restart hugo after change this value
-
 # https://xyproto.github.io/splash/docs/longer/all.html
 # restart hugo after change this value
 theme_light_chroma = "default"
 theme_dark_chroma = "default"
 theme_hacker_chroma = "default"
 theme_solarized_chroma = "default"
-theme_custom_chroma = "default"
+theme_kimbie_chroma = "default"

-# possible value: default, dark, light, hacker, solarized, custom
+# possible value: default, dark, light, hacker, solarized, kimbie
 # restart hugo after change this value
 theme_light_chroma_background = "default"
 theme_dark_chroma_background = "default"
 theme_hacker_chroma_background = "default"
 theme_solarized_chroma_background = "default"
-theme_custom_chroma_background = "default"
+theme_kimbie_chroma_background = "default"
--- a/exampleSite/config/_default/params.toml
+++ b/exampleSite/config/_default/params.toml
@ -3,7 +3,7 @@ description = "The Zzo theme for Hugo example site."
 custom_css = []
 custom_js = []

-themeOptions = ["dark", "light", "hacker", "solarized", "custom"]
+themeOptions = ["dark", "light", "hacker", "solarized", "kimbie"]
 notAllowedTypesInHome = ["contact", "talks", "about"]

 # header
--- a/exampleSite/resources/_gen/assets/scss/sass/main.scss_b4f67ac5085b89b62b54c1923e5a9145.content
+++ b/exampleSite/resources/_gen/assets/scss/sass/main.scss_b4f67ac5085b89b62b54c1923e5a9145.content
--- a/layouts/partials/body/photoswipe.html
+++ b/layouts/partials/body/photoswipe.html
@ -125,11 +125,23 @@ document.addEventListener('DOMContentLoaded', function () {
    debugMode: false,
  });

+  var imageLoad = function(src) {
+    return new Promise(function(resolve, reject) {
+      var newImg = new Image;
+      newImg.onload = function() {
+        resolve(newImg);
+      }
+      newImg.onerror = reject;
+      newImg.src = src;
+    });
+  }
+
  singleContentsElem.querySelectorAll('img').forEach(function (elem, idx) {
    elem.style.cursor = 'pointer';

    var clonedElem = elem.cloneNode(true);
-    clonedElem.style.maxHeight = '100vh';
+    clonedElem.style.maxHeight = '100%';
+    clonedElem.style.maxWidth = '100%';
    clonedElem.onclick = function (e) {
      e.stopPropagation();
    }
@ -151,18 +163,23 @@ document.addEventListener('DOMContentLoaded', function () {
    wrapper.onmouseleave = function () {
      myFadeTimeout = setTimeout(function () {
        fadeOut(itemsElem, 200);
-      }, 1000);
+      }, 2500);
    }
    wrapper.append(clonedElem);
    swipeWrapElem.append(wrapper);

-    elem.addEventListener('click', function (e) {
+    elem.addEventListener('click', async function (e) {
      MicroModal.show('modal');
      if (mySwipe) {
        mySwipe.kill();
        mySwipe = null;
      }

+      var imgSrc = e.target.getAttribute('data-src') || e.target.getAttribute('src');
+      var img = await imageLoad(imgSrc);
+      clonedElem.style.width = img.width + 'px';
+      clonedElem.style.height = img.height + 'px';
+      
      // swipe initialize
      mySwipe = new Swipe(mySwipeElem, {
        startSlide: idx,
@ -171,9 +188,15 @@ document.addEventListener('DOMContentLoaded', function () {
        continuous: false,
        disableScroll: true,
        stopPropagation: true,
-        callback: function (index, element) {
-          // caption
+        callback: async function (index, element) {
+          // original image size
          var imgElem = element.querySelector('img');
+          var imgSrc = imgElem.getAttribute('data-src') || imgElem.getAttribute('src');
+          var img = await imageLoad(imgSrc);
+          imgElem.style.width = img.width + 'px';
+          imgElem.style.height = img.height + 'px';
+
+          // caption
          if (captionElem && imgElem) {
            var caption = null;
            if (imgElem.getAttribute('data-caption')) {
@ -188,6 +211,9 @@ document.addEventListener('DOMContentLoaded', function () {

            captionElem.querySelector('.modal__caption--text').innerText = caption;
            pagingElem.innerText = (index + 1) + ' / ' + imgTotalNum;
+
+            clearTimeout(myFadeTimeout);
+            fadeIn(itemsElem, 200);
          }
        },
      });
@ -223,13 +249,13 @@ document.addEventListener('DOMContentLoaded', function () {
  });

  arrowLeftElem ?
-    arrowLeftElem.addEventListener('click', function () {
+    arrowLeftElem.addEventListener('click', function (e) {
      if (mySwipe) {
        mySwipe.prev();
      }
    }) : null;
  arrowRightElem ?
-    arrowRightElem.addEventListener('click', function () {
+    arrowRightElem.addEventListener('click', function (e) {
      if (mySwipe) {
        mySwipe.next();
      }