fomally publish

22 files changed, 719 insertions, 352 deletions

diff --git a/README-zh.md b/README-zh.md
index 13f3c39..251ab75 100644
--- a/README-zh.md
+++ b/README-zh.md
@@ -1,37 +1,115 @@
 # Edidor
-类似编辑器的hugo主题.
+[English](https://github.com/jacobsun/edidor/blob/master/README.md)
 
-感谢[@GoHugoIO](https://twitter.com/GoHugoIO) 的 [推荐](https://twitter.com/GoHugoIO/status/1127175277673631744)
+自带主题颜色生成器的主题, 从营销的角度看有无限主题. 😂
 
-# 演示
-[链接](https://ziox.xyz/)
+感谢 [@GoHugoIO](https://twitter.com/GoHugoIO)的[推荐](https://twitter.com/GoHugoIO/status/1127175277673631744)
 
 # 截图
+白色模式
 ![screenshot](https://raw.githubusercontent.com/jacobsun/edidor/master/images/screenshot.png)
-![screenshot](https://raw.githubusercontent.com/jacobsun/edidor/master/images/tags.png)
-![screenshot](https://raw.githubusercontent.com/jacobsun/edidor/master/images/comment.png)
+暗色模式
+![screenshot](https://raw.githubusercontent.com/jacobsun/edidor/master/images/dark.png)
+狂野模式
+![screenshot](https://raw.githubusercontent.com/jacobsun/edidor/master/images/wild_mode.png)
+还是狂野模式
+![screenshot](https://raw.githubusercontent.com/jacobsun/edidor/master/images/wild_mode2.png)
+仍然是狂野模式
+![screenshot](https://raw.githubusercontent.com/jacobsun/edidor/master/images/wild_mode3.png)
 
+# 狂野模式
+亲自试试狂野模式吧, 不用下载安装, 到我的网站 [my site](https://ziox.xyz/). 持续点击 'Theme > Wild mode' 🙃
 
+**不保证你能得到满意的配色**
+
+# 特色
+
+- 视口单位, 测试了从 1920 x 1080 到 to 320 x 568 的分辨率
+- 无框架, 为了性能使用了单独的lodash throttle函数
+- 所有图标都是mask-image svg, 可以随意改变颜色
+- highlight.js 提供语法高亮, 可关闭从而不加载文件
+- Disqus 评论
+- 多国语言
+
+i18n 还没完成, 实在没空!!
+不支持IE!!
 
 # 安装
-在hugo网站根目录运行:
+Hugo 网站根目录运行
 
 ```
 cd themes
-git clone https://github.com/jacobsun/edidor
+git submodule add https://github.com/jacobsun/edidor
 ```
-或者(推荐这种方式)
-
+或者(这种方式, 请删除隐藏的.git文件夹)
 ```
 cd themes
-git submodule add https://github.com/jacobsun/edidor
+git clone https://github.com/jacobsun/edidor
 ```
 
 # 使用
-复制 `exampleSite/config.toml` 到网站根目录, 运行`hogo server`预览.
 
-# 问题
-主题多语言还不完整, 只有几处有.
+ 从 `exampleSite` 复制 `config.toml`到网站根目录中. 运行'hugo server' 预览.
+
+# 配置
+
+## Logo
+
+Logo文件必须是 `svg` 格式, 以后会修改, 复制到 根目录/static/images/ 目录里. 你可以提供3种版本.
+
+- logo.svg
+- logo_light.svg
+- logo_dark.svg
+
+主题会自动载入合适的版本.
+
+## 菜单
+有些菜单条目不要修改.
+
+下面的别改
+- name是'Theme'的顶级菜单值不要改
+- 所有主题自带的的'identifier' 的值不要改.
+
+其他可随意修改
+
+**为什么Theme不能改, 为什么不用identifier**
+不知道为什么, 给顶级菜单加identifier会有奇怪的事情发生, 所以暂时只能用Name.
+
+## 狂野模式
+狂野模式的工作原理: 当你点击'Wild mode'时, 一份随机生成的样式会被插入到页面里, 同时保存到本地. 当你去其他页面时, 本地保存的样式会被读取. 如果你想把样式应用到服务器端, 你需要使用自定义css
+
+## 自定义css
+
+点击 `Export Wild mode`, 输入主题名字, 你会下载一份css文件. 用记事本打开会看到需要的代码.
+类似这个样子:
+```
+/*
+    Hugo Edidor theme wild mode exported.
+    homepage: https://github.com/jacobsun/edidor
+    Usage:
+    1. Throw me to your site root folder/static/css directory, you can rename me to whatever you like.
+    2. Copy below code to your config file.
+    --------
+    [[menu.main]]
+    parent = "Theme"
+    identifier = "adf-a--"
+    name = "adf a -"
+    url = "#"
+    weight = 30
+    --------
+    3. Change the field 'name' and 'weight' to whatever you like. Leave others alone.
+*/
+      .adf-a---mode code {   background: #e7e7e7  }
+```
+
+你需要把这份文件复制到根目录/static/css 中, 文件名可修改, 然后复制中间的菜单的代码, 就是--(连字符)之间的, 你可以修改`name(菜单显示的文本`和`weight(菜单顺序)`, 但是`identifier(程序需要用)`不能改.
+
+# Todo
+使用项目构建工具, 压缩js
+
+# 其他
+这是一个新主题, 如果你发现任何bug, 请发issue, 欢迎贡献代码! 😊
+
 
-# 许可方式
+# License
 MIT
diff --git a/README.md b/README.md
index 9d0d012..ee7dc7b 100644
--- a/README.md
+++ b/README.md
@@ -1,37 +1,101 @@
 # Edidor
 [中文](https://github.com/jacobsun/edidor/blob/master/README-zh.md)
 
-A hugo theme that looks like an editor.
+A hugo theme that looks like an editor with a builtin style generator, INFINITE COLOR MODE from a market perspective. 😂
 
-Thanks for [@GoHugoIO](https://twitter.com/GoHugoIO)'s [promotion](https://twitter.com/GoHugoIO/status/1127175277673631744)
 
-# Demo
-[Live](https://ziox.xyz/)
+Thanks for [@GoHugoIO](https://twitter.com/GoHugoIO)'s [promotion](https://twitter.com/GoHugoIO/status/1127175277673631744)
 
 # Screenshot
+This is the light mode.
 ![screenshot](https://raw.githubusercontent.com/jacobsun/edidor/master/images/screenshot.png)
-![screenshot](https://raw.githubusercontent.com/jacobsun/edidor/master/images/tags.png)
-![screenshot](https://raw.githubusercontent.com/jacobsun/edidor/master/images/comment.png)
+This is the dark mode.
+![screenshot](https://raw.githubusercontent.com/jacobsun/edidor/master/images/dark.png)
+
+Now this is the interesting part -- wild mode.
+![screenshot](https://raw.githubusercontent.com/jacobsun/edidor/master/images/wild_mode.png)
+Wild mode too.
+![screenshot](https://raw.githubusercontent.com/jacobsun/edidor/master/images/wild_mode2.png)
+Still wild mode.
+![screenshot](https://raw.githubusercontent.com/jacobsun/edidor/master/images/wild_mode3.png)
+
+# Wild Mode Demo
+I don't need to post more images, you can generate it by your self. Just head to [my site](https://ziox.xyz/). Keep clicking 'Theme > Wild mode'
 
+** No guarantee for what colors you can get** 🙃
+# Features
 
+- viewport unit, test from 1920 x 1080 desktop to 320 x 568 mobile
+- No frameworks, only a Lodash throttle function for performance
+- All static icons are inline svgs, coloring available due to mask-image
+- syntax hightlighting by highlight.js, can be turn off
+- Disqus comment system
+- multiple languages
+
+i18n isn't completed!!
+NO IE support, and does in future!
 
 # Installation
 Inside the folder of your Hugo site run:
 
 ```
 cd themes
-git clone https://github.com/jacobsun/edidor
+git submodule add https://github.com/jacobsun/edidor
 ```
-or
-
+Or
 ```
 cd themes
-git submodule add https://github.com/jacobsun/edidor
+git clone https://github.com/jacobsun/edidor
 ```
 
 # Usage
 
 Copy `config.toml` in `exampleSite` to your site root folder, you are good to go, you can also find more information there.
 
+# Config
+
+## Logo
+
+Logo images should be `svg` file, they are in the root/static/images/ directory. You can have three versions.
+
+- logo.svg
+- logo_light.svg
+- logo_dark.svg
+
+The theme will load the appropriate file automatically.
+
+## Menu
+Some menu entries are important to the theme, if you change it, some functions will be broke.
+
+Do not change these fields:
+- the name of 'Theme'
+- all 'identifier' shipped with the theme.
+
+Beyond those, you can customize it as you like.
+
+*Why the field 'Theme' in menu doesn't use identifier, but name?*
+I tried, but when I add an identifier to the top menu, some weired things happend, this is just a temporary workaroud.
+
+## Wild mode
+
+This is my favourite, and here is how it works.
+When you click the 'wild mode' link, some random css color rules will be applied to the page, and also saved in your browser's localStorage.
+When you go to another page, thoese rules will be loaded from local machine and applied again.
+
+If you want to publish the local styles to your server end. You have to use custom css in hugo.
+
+## Custom CSS
+
+Click `Export Wild mode`, and enter a theme name, a css file will be downloaded.
+You can find the code that you need in this file.
+
+# Todo
+- Use build tools, minify source code
+
+# Other
+This is a new theme, if you found any problems, feel free to open an issue, and contribution is welcome! 😊
+
+
+
 # License
 MIT
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 5c3fe67..e5139cc 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -1,6 +1,6 @@
 theme = "edidor"
 title = "Edidor Demo"
-baseurl = "https://ziox.xyz"
+baseurl = "https://your site url"
 AuthorName = "Jon Doe"
 # place your logo file to ./static/images to set logo
 
@@ -34,53 +34,72 @@ googleAnalytics = "your ga id"
 
 # author, title, description are used in the home page, you can embed html tag in description
 [params]
-    # will use AuthorName if you leave it blank, but you can set it to arbitrary text to display
+    # will use AuthorName if you leave it blank, but you can set it to arbitrary text
     author = "Ziox"
     title = "ZIOX DEMO"
     description = "A hugo site using Edidor. <br/><br/> Ctrl+B toggle sidebar. "
     # change it to false if you don't need syntax highlighting, and save a little bandwidth
     isHighlightCode = true
 
-# menubar setting, feel free to customize it, can be deleted
+# menubar setting, you can change url, weight and name except the 'Theme'.
 [[menu.main]]
-    name = "File"
+    name = "Article"
     url = "#"
     weight = 1
-
 [[menu.main]]
-    name = "Edit"
+    name = "View"
     url = "#"
-    weight = 2
-
+    weight = 10
+# You can change the name, but please don't edit the identifier
 [[menu.main]]
-    name = "Selection"
+    parent = "View"
+    identifier = "toggle-sidebar"
+    name = "Toggle Sidebar"
     url = "#"
-    weight = 3
-
+    weight = 10
 [[menu.main]]
-    name = "View"
-    url = "#"
-    weight = 4
+    parent = "Article"
+    name = "Posts"
+    url = "/posts"
+    weight = 1
+[[menu.main]]
+    parent = "Article"
+    name = "Tags"
+    url = "/tags"
+    weight = 20
+[[menu.main]]
+    parent = "Article"
+    name = "Categories"
+    url = "/categories"
+    weight = 30
 
+# Please don't edit the identifier
+# I can't make the identifier works on top menu so please don't change the name of 'Theme' at the moment
 [[menu.main]]
-    name = "Help"
+    name = "Theme"
     url = "#"
-    weight = 5
-
-# sub menu
+    weight = 25
 [[menu.main]]
-    parent = "File"
-    name = "open posts"
-    url = "/posts"
+    parent = "Theme"
+    identifier = "light"
+    name = "Light"
+    url = "#"
     weight = 1
 [[menu.main]]
-    parent = "File"
-    name = "open categories"
-    url = "/categories"
+    parent = "Theme"
+    identifier = "dark"
+    name = "Dark"
+    url = "#"
     weight = 10
-
 [[menu.main]]
-    parent = "File"
-    name = "open tags"
-    url = "/tags"
+    parent = "Theme"
+    identifier = "wild"
+    name = "Wild"
+    url = "#"
     weight = 20
+[[menu.main]]
+    parent = "Theme"
+    identifier = "export-wild"
+    name = "Export Wild Style"
+    url = "#"
+    weight = 25
diff --git a/exampleSite/static/images/logo_light.svg b/exampleSite/static/images/logo_light.svg
new file mode 100644
index 0000000..b05abea
--- /dev/null
+++ b/exampleSite/static/images/logo_light.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>

+<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

+<svg version="1.1" id="ziox" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

+	 viewBox="0 0 298.4 103.1" enable-background="new 0 0 298.4 103.1" xml:space="preserve">

+<path id="z" fill="#24292E" d="M13.6,18.1h47.7L12.8,85.7c-0.4,0.6-0.6,1.3-0.6,1.9v2h55.9v-4.6H19.5l48.3-67.4

+	c0.5-0.7,0.8-1.5,0.8-2.2v-1.9h-55V18.1z"/>

+<rect id="i" x="105.3" y="13.5" fill="#24292E" width="5.5" height="76.1"/>

+<path id="o" fill="#24292E" d="M184.3,23.3c-3.2-3.4-7-6-11.5-7.9c-4.4-1.8-9.4-2.8-14.8-2.8c-5.3,0-10.2,0.9-14.7,2.8

+	c-4.4,1.9-8.3,4.5-11.5,7.9c-3.2,3.4-5.7,7.5-7.4,12.3c-1.8,4.8-2.7,10.1-2.7,15.9c0,5.9,0.9,11.2,2.7,16c1.8,4.8,4.3,8.9,7.4,12.3

+	c3.2,3.4,7,6,11.5,7.9c4.4,1.8,9.3,2.8,14.7,2.8c5.4,0,10.3-0.9,14.8-2.8c4.4-1.8,8.3-4.5,11.5-7.9c3.2-3.4,5.7-7.5,7.4-12.3

+	c1.8-4.8,2.6-10.1,2.6-16c0-5.8-0.9-11.2-2.6-15.9S187.5,26.7,184.3,23.3z M186.5,65.9c-1.5,4.2-3.5,7.8-6.2,10.7

+	c-2.7,2.9-5.9,5.2-9.7,6.7c-3.8,1.5-7.9,2.3-12.5,2.3c-4.5,0-8.7-0.8-12.4-2.3c-3.7-1.5-7-3.8-9.7-6.7c-2.7-2.9-4.8-6.5-6.3-10.7

+	c-1.5-4.2-2.2-9-2.2-14.3c0-5.3,0.7-10.1,2.2-14.3c1.5-4.2,3.6-7.8,6.3-10.8c2.7-2.9,5.9-5.2,9.7-6.7c3.7-1.6,7.9-2.3,12.4-2.3

+	c4.6,0,8.8,0.8,12.5,2.3c3.8,1.6,7,3.8,9.7,6.7c2.7,2.9,4.7,6.5,6.2,10.8c1.5,4.2,2.2,9,2.2,14.3C188.7,56.9,187.9,61.7,186.5,65.9z

+	"/>

+<path id="x" fill="#24292E" d="M261.3,50.3l26.3-36.8h-5.3c-0.4,0-0.7,0.1-0.9,0.3c-0.3,0.2-0.5,0.5-0.7,0.8l-22.3,31.6

+	c-0.2,0.3-0.3,0.6-0.5,0.8c-0.1,0.3-0.2,0.5-0.4,0.8l-23.1-33.3c-0.2-0.3-0.4-0.5-0.6-0.8c-0.2-0.2-0.6-0.3-1.1-0.3h-5.4l26.2,37.1

+	l-27.5,39h5c0.4,0,0.8-0.1,1.1-0.4c0.3-0.3,0.6-0.6,0.9-0.9l23.6-33.5c0.4-0.5,0.6-1,0.8-1.6l24,35.1c0.2,0.3,0.4,0.6,0.7,0.9

+	c0.3,0.3,0.7,0.5,1.2,0.5h5.4L261.3,50.3z"/>

+</svg>

diff --git a/images/comment.png b/images/comment.png
deleted file mode 100644
index a4a3572..0000000
--- a/images/comment.png
+++ /dev/null
diff --git a/images/dark.png b/images/dark.png
new file mode 100644
index 0000000..6a2de99
--- /dev/null
+++ b/images/dark.png
diff --git a/images/export.png b/images/export.png
new file mode 100644
index 0000000..c4473b5
--- /dev/null
+++ b/images/export.png
diff --git a/images/screenshot.png b/images/screenshot.png
index 6e12627..60424e5 100644
--- a/images/screenshot.png
+++ b/images/screenshot.png
diff --git a/images/tags.png b/images/tags.png
deleted file mode 100644
index a5300be..0000000
--- a/images/tags.png
+++ /dev/null
diff --git a/images/tn.png b/images/tn.png
index 68f4a50..d6c7a9e 100644
--- a/images/tn.png
+++ b/images/tn.png
diff --git a/images/wild_mode2.png b/images/wild_mode2.png
new file mode 100644
index 0000000..11bb8fa
--- /dev/null
+++ b/images/wild_mode2.png
diff --git a/images/wild_mode3.png b/images/wild_mode3.png
new file mode 100644
index 0000000..63548a6
--- /dev/null
+++ b/images/wild_mode3.png
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index ff5c08f..e188c14 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -15,9 +15,11 @@
     </ul>
 
     <ul class="control status clearfix">
-        <li><a href="#" class="btn">Posts: {{ len (where (where .Site.Pages "Section" "posts") "Params.hidden" "!=" true) }}</a>
+        <li><a href="#" class="btn">Posts:
+                {{ len (where (where .Site.Pages "Section" "posts") "Params.hidden" "!=" true) }}</a>
         </li>
-        <li><a href="#" class="btn">Pages: {{ len (where (where .Site.Pages "Section" "page") "Params.hidden" "!=" true) }}</a></li>
+        <li><a href="#" class="btn">Pages:
+                {{ len (where (where .Site.Pages "Section" "page") "Params.hidden" "!=" true) }}</a></li>
         <li><a href="#" class="btn">{{ .Site.Language.Lang }}</a></li>
         <li><a href="https://gohugo.io" class="btn">Hugo, {{ $.Hugo.Version }}</a></li>
         <li><a href="https://github.com/jacobsun/edidor" class="btn">Theme: Edidor</a></li>
@@ -28,3 +30,26 @@
         </li>
     </ul>
 </footer>
+<div class="dialog">
+    <div class="wrapper">
+        <div class="clearfix"><button class="btn close-dialog">X</button></div>
+        <header>
+            <h1 class="title">Theme Name</h1>
+        </header>
+        <main>
+            <div class="clearfix">
+                <label for="theme-name">
+                    <p>Only English Character, space, hyphen are allowed!</p>
+                    <p>Valid name examples: "custom", "fantastic theme", "my-theme"</p>
+                    <p>Invalid name expamles: "我的主题", ":)", "123"</p>
+                </label>
+                <input type="text" name="theme-name" id="theme-name">
+            </div>
+            <div class="clearfix">
+                <button class="btn export">Export</button>
+            </div>
+
+        </main>
+        <footer></footer>
+    </div>
+</div>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 1f2d11e..82cd6ff 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -2,45 +2,38 @@
     <ul class="menu clearfix control">
         <li>
             <a href="{{ .Site.BaseURL }}" class="btn logo-link">
-                {{ if (eq .Site.Params.Mode "light") }}
-                    {{ if (fileExists "static/images/logo_light.svg") }}
-                    <img class="logo" src="{{ "images/logo_light.svg" | absURL }}" alt="logo"/>
-                    {{ else }}
-                    <img class="logo" src="{{ "images/logo.svg" | absURL }}" alt="logo"/>
-                    {{ end }}
-                {{ else if (eq .Site.Params.Mode "wild") }}
-                    {{ if (fileExists "static/images/logo_wild.svg") }}
-                    <img class="logo" src="{{ "images/logo_wild.svg" | absURL }}" alt="logo"/>
-                    {{ else }}
-                    <img class="logo" src="{{ "images/logo.svg" | absURL }}" alt="logo"/>
-                    {{ end }}
-                {{ else }}
-                    {{ if (fileExists "static/images/logo_dark.svg") }}
-                    <img class="logo" src="{{ "images/logo_dark.svg" | absURL }}" alt="logo"/>
-                    {{ else }}
-                    <img class="logo" src="{{ "images/logo.svg" | absURL }}" alt="logo"/>
-                    {{ end }}
-                {{ end }}
+                {{ partial "logo.html" . }}
             </a>
         </li>
         {{ $currentPage := . }}
         {{ range .Site.Menus.main }}
         {{ if .HasChildren }}
-        <li class="{{ if $currentPage.HasMenuCurrent "main" . }}active{{ end }}">
-            <a class="btn">
-                {{ .Name }}
+        {{ $name := .Name }}
+        <li {{if (eq $name "Theme")}} id="theme-switcher" {{end}}
+            class="{{ if $currentPage.HasMenuCurrent "main" . }}active{{ end }}">
+            <a class="btn" id="theme-switcher-button">
+                {{ $name }}
             </a>
             <ul class="sub-menu control">
                 {{ range .Children }}
                 <li class="{{ if $currentPage.IsMenuCurrent "main" . }}active{{ end }}">
-                    <a href="{{ .URL }}" class="btn {{ if eq .Name "Toggle Sidebar" }}sidebar-toggler{{ end }}{{ if eq .Name "Light" }}to-light-mode{{ end }}{{ if eq .Name "Dark" }}to-dark-mode{{ end }}{{ if eq .Name "Wild" }}to-wild-mode{{ end }}">{{ .Name }}</a>
+                    <a href="{{ .URL }}"
+                    {{if (eq $name "Theme") }}
+                        {{if (eq .Identifier "export-wild") }}
+                        class="{{.Identifier}} btn"
+                        {{else}}
+                        data-theme="{{.Identifier}}" class="btn"
+                        {{end}}
+                    {{else}}
+                        class="btn {{ .Identifier }}"
+                    {{end}}>{{ .Name }}</a>
                 </li>
                 {{ end }}
             </ul>
         </li>
         {{ else }}
         <li>
-            <a href="{{ .URL | absURL }}" class="btn">
+            <a href="{{ .URL }}" class="btn">
                 {{ .Name }}
             </a>
         </li>
diff --git a/layouts/partials/intro.html b/layouts/partials/intro.html
index 8c83a8a..e360b07 100644
--- a/layouts/partials/intro.html
+++ b/layouts/partials/intro.html
@@ -1,5 +1,5 @@
 <div class="intro">
-    <img src="{{ "images/logo.svg" | absURL }}" alt="logo">
+    {{ partial "logo.html" .}}
     <h2>
         {{ with .Param "title" }}
         {{ . }}
diff --git a/layouts/partials/js.html b/layouts/partials/js.html
index e1a4200..b0b33d3 100644
--- a/layouts/partials/js.html
+++ b/layouts/partials/js.html
@@ -1,4 +1,6 @@
 <script src="{{ "js/throttle.js" | absURL }}"></script>
+<script src="{{ "js/helpers.js" | absURL }}"></script>
+<script src="{{ "js/wild_template.js" | absURL }}"></script>
 <script src="{{ "js/edidor.js" | absURL }}"></script>
 
 {{ if (.Site.Params.isHighlightCode) }}
diff --git a/layouts/partials/logo.html b/layouts/partials/logo.html
new file mode 100644
index 0000000..db76482
--- /dev/null
+++ b/layouts/partials/logo.html
@@ -0,0 +1,19 @@
+{{ if (eq .Site.Params.Mode "light") }}
+{{ if (fileExists "static/images/logo_light.svg") }}
+<img class="logo" src="{{ "images/logo_light.svg" | absURL }}" alt="logo" />
+{{ else }}
+<img class="logo" src="{{ "images/logo.svg" | absURL }}" alt="logo" />
+{{ end }}
+{{ else if (eq .Site.Params.Mode "wild") }}
+{{ if (fileExists "static/images/logo_wild.svg") }}
+<img class="logo" src="{{ "images/logo_wild.svg" | absURL }}" alt="logo" />
+{{ else }}
+<img class="logo" src="{{ "images/logo.svg" | absURL }}" alt="logo" />
+{{ end }}
+{{ else }}
+{{ if (fileExists "static/images/logo_dark.svg") }}
+<img class="logo" src="{{ "images/logo_dark.svg" | absURL }}" alt="logo" />
+{{ else }}
+<img class="logo" src="{{ "images/logo.svg" | absURL }}" alt="logo" />
+{{ end }}
+{{ end }}
diff --git a/static/css/edidor.css b/static/css/edidor.css
index f4bafaa..d9dcb56 100644
--- a/static/css/edidor.css
+++ b/static/css/edidor.css
@@ -118,8 +118,8 @@ a:hover {
 .footer a {
     line-height  : 5vh;
     display      : block;
-    padding-left : 1rem;
-    padding-right: 1rem;
+    padding-left : 0.8rem;
+    padding-right: 0.8rem;
 }
 
 .header>ul,
@@ -183,8 +183,8 @@ a:hover {
     transform : translateY(-50%);
 }
 
-.intro img {
-    width: 40%;
+.intro img.logo {
+    display: inline;
 }
 
 .header ul ul {
@@ -276,10 +276,6 @@ code {
     display: inline-block;
 }
 
-.footer a {
-    padding: 0 0.5rem;
-}
-
 .footer .icon {
     position: relative;
     top     : 0.2rem;
@@ -423,7 +419,7 @@ a.terms-title,
     color     : #FFF;
 }
 
-.local-info {
+.local-info, .dialog label {
     background: #FFFF99;
     color     : #333;
     box-shadow: 2px 3px 1px 1px #000;
@@ -434,7 +430,8 @@ body,
 .main,
 .header .menu>li:hover,
 .footer a:hover,
-.logo-link {
+.logo-link,
+.dialog {
     background: #282C34;
 }
 
@@ -444,7 +441,8 @@ blockquote.twitter-tweet,
 .header .sub-menu a,
 .sidebar a,
 .taxonomy-key,
-.main .title a {
+.main .title a,
+.dialog .title {
     color: #C6C6C7;
 }
 
@@ -530,9 +528,66 @@ code {
     text-shadow: 0 1px 1px #000;
 }
 
+.dialog {
+    width: 100vw;
+    height: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+    overflow: hidden;
+    font-size: 1rem;
+}
+.dialog .wrapper {
+    padding: 1rem;
+}
+.dialog header, .dialog main, .dialog footer {
+    margin-bottom: 2rem;
+}
+
+.dialog header {
+    margin-top: -2rem;
+}
+.dialog div {
+    margin-bottom: 1rem;
+}
+.dialog.show {
+    height: 100vh;
+}
+
+.dialog label {
+    display: block;
+    margin-bottom: 1rem;
+    padding: 0.8rem 1rem;
+    box-shadow: none;
+}
+.dialog input {
+    padding: 0.3rem;
+}
+.dialog input, .dialog button {
+    font-size: 1.2rem;
+    float: right;
+}
+
+.dialog button {
+    padding: 0.3rem 1rem;
+    background: #3083FE;
+    color: #FFF;
+}
+
+.dialog .close-dialog {
+    font-size: 3rem;
+    background: none;
+    border: none;
+}
+
+
 /* == default dark color end == */
 
 /* == light color == */
+.light-mode .dialog button {
+    color: #3083FE;
+}
 .light-mode .main a {
     color: #3083FE;
 }
@@ -559,7 +614,8 @@ body.light-mode,
 .light-mode blockquote.twitter-tweet,
 .light-mode .sidebar a,
 .light-mode .taxonomy-key,
-.light-mode .main .title a {
+.light-mode .main .title a,
+.light-mode .dialog .title {
     color: #4C4C4C;
 }
 
@@ -615,7 +671,9 @@ body.light-mode,
 .light-mode .footer,
 .light-mode .header .sub-menu li:hover,
 .light-mode .sidebar a:hover,
-.light-mode .logo-link {
+.light-mode .logo-link,
+.light-mode .dialog,
+.light-mode .dialog button {
     background: #DDDDDD;
 }
 
@@ -659,36 +717,8 @@ body.light-mode,
 .light-mode .title {
     text-shadow: none;
 }
-
 /* == light color end == */
-/* == wild mode text color == */
-.wild-mode .main .article-tags a,
-.wild-mode .local-info,
-.wild-mode .main,
-.wild-mode .terms-list a,
-.wild-mode blockquote.twitter-tweet,
-.wild-mode .sidebar a,
-.wild-mode .taxonomy-key,
-.wild-mode .main .title a,
-.wild-mode .header a,
-.wild-mode .footer a,
-.wild-mode .footer time,
-.wild-mode .pagination a,
-.wild-mode .header .sub-menu a {
-    color: #333333;
-}
-
-.wild-mode .icon,
-.wild-mode .footer .icon {
-    background: #333333;
-}
-
-.wild-mode .article-meta,
-.wild-mode .item-meta,
-.wild-mode .footnotes {
-    color: #666666;
-}
-
+/* == it's a disaster for random shadow == */
 .wild-mode .main h1,
 .wild-mode .main h2,
 .wild-mode .main h3,
@@ -698,12 +728,10 @@ body.light-mode,
 .wild-mode .title {
     text-shadow: none;
 }
-
 .wild-mode .local-info {
     box-shadow: none;
 }
-
-/* == wild mode text color end == */
+/* == wild mode end == */
 @media only screen and (max-width: 800px) {
     .status li:last-child {
         display: none;
diff --git a/static/js/edidor.js b/static/js/edidor.js
index cdd6176..69ae17f 100644
--- a/static/js/edidor.js
+++ b/static/js/edidor.js
@@ -1,208 +1,6 @@
+/* eslint-disable no-undef */
 ;
 (function (window, document) {
-  const wildStyle = styleTemplate`.wild-mode .main a {
-    color: ${'dark'};
-    }
-    .wild-mode .main .article-tags a {
-        background: ${'light'};
-    }
-    .wild-mode .local-info {
-        background: ${'light'};
-    }
-    body.wild-mode,
-    .wild-mode .main {
-        background: ${'light'};
-    }
-    .wild-mode th,
-    .wild-mode td {
-        border-bottom: 1px solid ${'dark'};
-    }
-    .wild-mode hr {
-        border: 1px solid ${'dark'};
-    }
-    .wild-mode .pagination {
-        background: ${'dark'};
-    }
-    .wild-mode .sidebar {
-        background: ${'dark'};
-    }
-    .wild-mode .count,
-    .wild-mode .taxonomy-key {
-        color: ${'lightGray'};
-    }
-    .wild-mode .header,
-    .wild-mode .footer,
-    .wild-mode .header .sub-menu li:hover,
-    .wild-mode .sidebar a:hover,
-    .wild-mode .logo-link {
-        background: ${'dark'};
-    }
-    .wild-mode .header .menu>li:hover,
-    .wild-mode .footer a:hover {
-        background: ${'light'};
-    }
-    .wild-mode .header ul ul {
-        box-shadow: 0 0.1em 0.2em 0 ${'dark'};
-    }
-    .wild-mode .header ul ul,
-    .wild-mode .pagination a:hover {
-        background: ${'dark'};
-    }`
-  // dom helper functions ...
-  function qs (sel, parent = document.body) {
-    if (typeof parent === 'string') {
-      parent = document.querySelector(parent)
-    }
-    return parent.querySelector(sel)
-  }
-
-  function elt (name, attr = {}, ...text) {
-    const node = document.createElement(name)
-    Object.keys(attr).forEach(k => {
-      node.setAttribute(k, attr[k])
-    })
-    text.forEach(t => {
-      if (typeof t === 'string') {
-        t = document.createTextNode(t)
-      }
-      node.appendChild(t)
-    })
-    return node
-  }
-
-  function removeClass (dom, cls) {
-    if (typeof dom === 'string') {
-      dom = qs(dom)
-    }
-    dom.classList.remove(cls)
-    return dom
-  }
-  function clearClass (dom, cls) {
-    if (typeof dom === 'string') {
-      dom = qs(dom)
-    }
-    dom.className = ''
-    return dom
-  }
-  function addClass (dom, cls) {
-    if (typeof dom === 'string') {
-      dom = qs(dom)
-    }
-    dom.classList.add(cls)
-    return dom
-  }
-  // function toggleClass (dom, cls) { // eslint-disable-line
-  //   if (typeof dom === 'string') {
-  //     dom = qs(dom)
-  //   }
-  //   dom.classList.toggle(cls)
-  //   return dom
-  // }
-  function hasClass (dom, cls) {
-    if (typeof dom === 'string') {
-      dom = qs(dom)
-    }
-    return dom.classList.contains(cls)
-  }
-  function setStyle (dom, styles) {
-    if (typeof dom === 'string') {
-      dom = qs(dom)
-    }
-
-    Object.keys(styles).forEach(key => {
-      dom.style[key] = styles[key]
-    })
-  }
-  function onEvent (event, cb, limit = 0, dom = document.body) {
-    if (typeof dom === 'string') {
-      dom = qs(dom)
-    }
-    if (limit > 0) {
-      dom.addEventListener(event, throttle(cb, limit)) // eslint-disable-line
-    } else {
-      dom.addEventListener(event, cb)
-    }
-  }
-  // mousemove and touchmove abstraction
-  function onPointerMove (cb, limit, dom = document.body) {
-    onEvent('mousemove', e => {
-      cb({ // eslint-disable-line
-        clientX: e.clientX,
-        clientY: e.clientY,
-        type: e.type
-      })
-    }, limit, dom)
-
-    onEvent('touchmove', e => {
-      cb({ // eslint-disable-line
-        clientX: e.touches[0].clientX,
-        clientY: e.touches[0].clientY,
-        type: e.type
-      })
-    }, limit, dom)
-  }
-  // local storage
-  const ls = {}
-  ls.get = key => window.localStorage.getItem(key)
-
-  ls.set = (key, value) => {
-    if (value === null || value === undefined) {
-      value = ''
-    } else if (typeof value !== 'string') {
-      value = JSON.stringify(value)
-    }
-    window.localStorage.setItem(key, value)
-  }
-  // color generators
-  const gen = {
-    darkCode: ['c', 'f', '6', '9'],
-    lightCode: ['a', 'b', 'c', 'd', 'e', 'f']
-  }
-
-  gen.dark = () => {
-    let d = ''
-    for (let i = 0; i !== 3; i++) {
-      let c = gen.darkCode[randomInt(0, gen.darkCode.length)]
-      d += c + c
-    }
-    return '#' + d
-  }
-  gen.light = () => {
-    let d = ''
-    for (let i = 0; i !== 6; i++) {
-      d += gen.lightCode[randomInt(0, gen.lightCode.length)]
-    }
-    return '#' + d
-  }
-
-  gen.gray = (base = 0) => {
-    let ret = ''
-    for (let i = 0; i !== 6; i++) {
-      if (base > 3) {
-        ret += String.fromCharCode(65 + base - 4)
-      } else {
-        ret += (6 + base).toString()
-      }
-    }
-    return '#' + ret
-  }
-  gen.lightGray = gen.gray.bind(5)
-  function randomInt (min, max) {
-    min = Math.ceil(min)
-    max = Math.floor(max)
-    return Math.floor(Math.random() * (max - min)) + min
-  }
-  // tagged template function, make wild styles
-  function styleTemplate (strings, ...keys) {
-    return function () {
-      let temp = strings.slice()
-      keys.forEach((key, i) => {
-        temp[i] += gen[key]()
-      })
-      return temp.join('').replace(/\s{2}/gm, ' ')
-    }
-  }
-  // utility functions end
   let pane
   let main
   let paneLeft
@@ -215,9 +13,10 @@
     paneLeft = pane.getBoundingClientRect().left
     tryLoadMode()
     tryRestoreSidebar()
-    activateSidebarToggler()
+    activateSidebarToggle()
     activateModeSwitcher()
     activateSidebarDrag()
+    activateDialog()
   }, 0, document)
   // sidebar function dragging wrapper
   function activateSidebarDrag () {
@@ -298,8 +97,8 @@
     let flag = ls.get('is_sidebar_hide')
     flag === '1' ? addClass(pane, 'hide') : removeClass(pane, 'hide')
   }
-  function activateSidebarToggler () {
-    onEvent('click', toggleSidebar, 0, '.sidebar-toggler')
+  function activateSidebarToggle () {
+    onEvent('click', toggleSidebar, 0, '.toggle-sidebar')
   }
 
   function toggleSidebar (e) {
@@ -316,11 +115,12 @@
   }
   // style mode functions
   const toMode = name => {
-    addClass(clearClass(document.body), name)
+    if (!hasClass(document.body, name)) {
+      addClass(clearClass(document.body), name)
+    }
     ls.set('mode', name)
   }
   function tryLoadMode () {
-    console.log('load mode')
     let mode = ls.get('mode')
     mode && toMode(mode)
     if (mode === 'wild-mode') {
@@ -334,24 +134,33 @@
   }
   function activateModeSwitcher () {
     onEvent('click', e => {
-      toMode('light-mode')
-    }, 0, qs('.to-light-mode'))
-
-    onEvent('click', e => {
-      toMode('dark-mode')
-    }, 0, qs('.to-dark-mode'))
-
-    onEvent('click', e => {
-      toMode('wild-mode')
-      let wildEle = qs('.wild-ele')
-      const style = wildStyle()
-      if (wildEle) {
-        wildEle.innerText = style
-      } else {
-        document.body.appendChild(elt('style', { class: 'wild-ele' }, style))
+      e.preventDefault()
+      e.stopPropagation()
+      if (e.target.id === 'theme-switcher-button') {
+        return
+      }
+      if (hasClass(e.target, 'export-wild')) {
+        addClass('.dialog', 'show')
+        qs('#theme-name').focus()
+        return
+      }
+      let theme = e.target.dataset.theme
+      if (!theme) {
+        console.error('Theme name not found, probably missing an "Identifier" field in Config file.')
+        return
       }
-      ls.set('wild_style', style)
-    }, 0, qs('.to-wild-mode'))
+      toMode(theme + '-mode')
+      if (theme === 'wild') {
+        const wildEle = qs('.wild-ele')
+        const style = wildStyle()
+        if (wildEle) {
+          wildEle.innerText = style
+        } else {
+          document.body.appendChild(elt('style', { class: 'wild-ele' }, style))
+        }
+        ls.set('wild_style', style)
+      }
+    }, 0, '#theme-switcher')
   }
 
   // function showCloak () {
@@ -360,4 +169,72 @@
   function hideCloak () {
     addClass(cloak, 'hide')
   }
+
+  function activateDialog () {
+    onEvent('click', e => {
+      removeClass('.dialog', 'show')
+    }, 0, '.close-dialog')
+    onEvent('click', e => {
+      const themeName = qs('#theme-name').value.trim()
+      if (!themeName) {
+        alert('Name is required.')
+        return
+      }
+      if (!/^[a-zA-Z\s-]+$/.test(themeName)) {
+        alert('Only English letters, space, hyphens are allowed.')
+        return
+      }
+      if (themeName === 'light' || themeName === 'dark' || themeName === 'wild') {
+        alert('Mess up builtin themes.')
+        return
+      }
+      exportWild(themeName)
+      removeClass('.dialog', 'show')
+    }, 0, '.export')
+  }
+  function exportWild (themeName) {
+    let content = generateText(themeName)
+    download(themeName + '.css', content)
+  }
+
+  function generateText (themeName) {
+    let style = ls.get('wild_style')
+    let identifier = themeName.replace(/\s/g, '-')
+    style = style.replace(/wild-mode/g, `${identifier}-mode`)
+    const content = `/*
+    Hugo Edidor theme wild mode exported.
+    homepage: https://github.com/jacobsun/edidor
+    Usage:
+    1. Throw me to your site root folder/static/css directory, you can rename me to whatever you like.
+    2. Copy the code below to your config file.
+
+    --------
+    [[menu.main]]
+    parent = "Theme"
+    identifier = "${identifier}"
+    name = "${themeName}"
+    url = "#"
+    weight = 30
+    --------
+
+    3. Change the field 'name' and 'weight' to whatever you like. Leave others alone, and don't add your custom field, hugo doesn't support that, though I really hope so :/.
+*/
+    ${style}`
+    return content
+  }
+  function download (filename, text) {
+    const a = elt('a', {
+      href: 'data:text/plain;charset=utf-8,' + encodeURIComponent(text),
+      download: filename,
+      style: {
+        display: 'none'
+      }
+    })
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+  }
+
+  // Start file download.
+
 })(window, document)
diff --git a/static/js/helpers.js b/static/js/helpers.js
new file mode 100644
index 0000000..0f7f9a9
--- /dev/null
+++ b/static/js/helpers.js
@@ -0,0 +1,111 @@
+/* eslint-disable no-unused-vars */
+// dom helper functions
+function qs (sel, parent = document.body) {
+  if (typeof parent === 'string') {
+    parent = document.querySelector(parent)
+  }
+  return parent.querySelector(sel)
+}
+
+function elt (name, attr = {}, ...text) {
+  const node = document.createElement(name)
+  Object.keys(attr).forEach(k => {
+    node.setAttribute(k, attr[k])
+  })
+  text.forEach(t => {
+    if (typeof t === 'string') {
+      t = document.createTextNode(t)
+    }
+    node.appendChild(t)
+  })
+  return node
+}
+
+function removeClass (dom, cls) {
+  if (typeof dom === 'string') {
+    dom = qs(dom)
+  }
+  dom.classList.remove(cls)
+  return dom
+}
+function clearClass (dom, cls) {
+  if (typeof dom === 'string') {
+    dom = qs(dom)
+  }
+  dom.className = ''
+  return dom
+}
+function addClass (dom, cls) {
+  if (typeof dom === 'string') {
+    dom = qs(dom)
+  }
+  dom.classList.add(cls)
+  return dom
+}
+// function toggleClass (dom, cls) { // eslint-disable-line
+//   if (typeof dom === 'string') {
+//     dom = qs(dom)
+//   }
+//   dom.classList.toggle(cls)
+//   return dom
+// }
+function hasClass (dom, cls) {
+  if (typeof dom === 'string') {
+    dom = qs(dom)
+  }
+  return dom.classList.contains(cls)
+}
+function setStyle (dom, styles) {
+  if (typeof dom === 'string') {
+    dom = qs(dom)
+  }
+
+  Object.keys(styles).forEach(key => {
+    dom.style[key] = styles[key]
+  })
+}
+function onEvent (event, cb, limit = 0, dom = document.body) {
+  if (typeof dom === 'string') {
+    dom = qs(dom)
+  }
+  if (limit > 0) {
+    dom.addEventListener(event, throttle(cb, limit)) // eslint-disable-line
+  } else {
+    dom.addEventListener(event, cb)
+  }
+}
+// mousemove and touchmove abstraction
+function onPointerMove (cb, limit, dom = document.body) {
+  onEvent('mousemove', e => {
+    cb({ // eslint-disable-line
+      clientX: e.clientX,
+      clientY: e.clientY,
+      type: e.type
+    })
+  }, limit, dom)
+
+  onEvent('touchmove', e => {
+    cb({ // eslint-disable-line
+      clientX: e.touches[0].clientX,
+      clientY: e.touches[0].clientY,
+      type: e.type
+    })
+  }, limit, dom)
+}
+// local storage
+const ls = {}
+ls.get = key => window.localStorage.getItem(key)
+
+ls.set = (key, value) => {
+  if (value === null || value === undefined) {
+    value = ''
+  } else if (typeof value !== 'string') {
+    value = JSON.stringify(value)
+  }
+  window.localStorage.setItem(key, value)
+}
+function randomInt (min, max) {
+  min = Math.ceil(min)
+  max = Math.floor(max)
+  return Math.floor(Math.random() * (max - min)) + min
+}
diff --git a/static/js/wild_template.js b/static/js/wild_template.js
new file mode 100644
index 0000000..bc6edd2
--- /dev/null
+++ b/static/js/wild_template.js
@@ -0,0 +1,131 @@
+/* eslint-disable no-undef, no-unused-vars */
+// tagged template function, produce wild styles
+function styleTemplate (strings, ...keys) {
+  return function () {
+    let temp = strings.slice()
+    keys.forEach((key, i) => {
+      temp[i] += gen[key]()
+    })
+    return temp.join('').replace(/\s{2}/gm, ' ')
+  }
+}
+
+const gen = {
+  darkCode: ['c', 'f', '6', '9'],
+  lightCode: ['a', 'b', 'c', 'd', 'e', 'f'],
+  textCode: ['1a2a3a', '2a3a4a', '3a4a5a', '4a5a6a', '5a6a7a', '6a7a8a', '7a8a9a'],
+  grayCode: ['aaa', 'bbb', 'ccc', 'ddd'],
+  lightGrayCode: ['e2e2e2', 'e7e7e7', 'ececec'],
+  deepGrayCode: ['222', '333', '444']
+}
+
+gen.dark = () => {
+  let d = ''
+  for (let i = 0; i !== 3; i++) {
+    let c = gen.darkCode[randomInt(0, gen.darkCode.length)]
+    d += c + c
+  }
+  return '#' + d
+}
+gen.light = () => {
+  let d = ''
+  for (let i = 0; i !== 6; i++) {
+    d += gen.lightCode[randomInt(0, gen.lightCode.length)]
+  }
+  return '#' + d
+}
+
+gen.gray = () => {
+  let i = randomInt(0, gen.grayCode.length)
+  return '#' + gen.grayCode[i]
+}
+gen.lightGray = () => {
+  let i = randomInt(0, gen.lightGrayCode.length)
+  return '#' + gen.lightGrayCode[i]
+}
+gen.deepGray = () => {
+  let i = randomInt(0, gen.deepGrayCode.length)
+  return '#' + gen.deepGrayCode[i]
+}
+gen.text = (base = 0, max = 7) => {
+  let i = randomInt(base, max)
+  return '#' + gen.textCode[i]
+}
+
+gen.deepText = gen.text.bind(gen, 0, 2)
+gen.mediumText = gen.text.bind(gen, 2, 5)
+gen.lightText = gen.text.bind(gen, 5, 6)
+
+const wildStyle = styleTemplate`
+  .wild-mode code {
+    background: ${'lightGray'}
+  }
+  .wild-mode .main .article-tags a {
+      background: ${'light'};
+  }
+  .wild-mode .local-info {
+      background: ${'light'};
+  }
+  body.wild-mode,
+  .wild-mode .main {
+      background: ${'light'};
+  }
+  .wild-mode th,
+  .wild-mode td {
+      border-bottom: 1px solid ${'dark'};
+  }
+  .wild-mode hr {
+      border: 1px solid ${'dark'};
+  }
+  .wild-mode .pagination {
+      background: ${'dark'};
+  }
+  .wild-mode .sidebar {
+      background: ${'dark'};
+  }
+  .wild-mode .header,
+  .wild-mode .footer,
+  .wild-mode .header .sub-menu li:hover,
+  .wild-mode .sidebar a:hover,
+  .wild-mode .logo-link {
+      background: ${'dark'};
+  }
+  .wild-mode .header .menu>li:hover,
+  .wild-mode .footer a:hover {
+      background: ${'light'};
+  }
+  .wild-mode .header ul ul {
+      box-shadow: 0 0.1em 0.2em 0 ${'dark'};
+  }
+  .wild-mode .header ul ul,
+  .wild-mode .pagination a:hover {
+      background: ${'dark'};
+  }
+  .wild-mode .article-meta,
+  .wild-mode .item-meta,
+  .wild-mode .footnotes,
+  .wild-mode .count,
+  .wild-mode .taxonomy-key {
+      color: ${'mediumText'};
+  }
+  .wild-mode .main .article-tags a,
+  .wild-mode .local-info,
+  .wild-mode .main,
+  .wild-mode .main a,
+  .wild-mode .terms-list a,
+  .wild-mode blockquote.twitter-tweet,
+  .wild-mode .sidebar a,
+  .wild-mode .taxonomy-key,
+  .wild-mode .main .title a,
+  .wild-mode .header a,
+  .wild-mode .footer a,
+  .wild-mode .footer time,
+  .wild-mode .pagination a,
+  .wild-mode .header .sub-menu a {
+      color: ${'deepGray'};
+  }
+  .wild-mode .icon,
+  .wild-mode .footer .icon {
+      background: ${'deepGray'};
+  }
+  `
diff --git a/theme.toml b/theme.toml
index 3fd7745..1e10cfb 100644
--- a/theme.toml
+++ b/theme.toml
@@ -4,10 +4,10 @@
 name = "edidor"
 license = "MIT"
 licenselink = "https://github.com/jacobsun/edidor/blob/master/LICENSE"
-description = "a hugo theme that looks like editors"
+description = "a hugo theme that looks like editors with infinite color modes"
 homepage = "https://github.com/jacobsun/edidor"
 tags = ["blog", "editor", "edidor"]
-features = ["personal"]
+features = ["personal", "color generator", "infinite color modes"]
 min_version = 0.40
 
 [author]