From 6853ff3eea9b1d5cd26d8f8a817a6f3ef834812b Mon Sep 17 00:00:00 2001
From: cu <cu@localhost.localdomain>
Date: Fri, 29 May 2020 12:46:01 +0900
Subject: [PATCH] Update html

---
 docs/dev_note/vst3_dev.html                   | 213 +++++++++---------
 .../CubicPadSynth/CubicPadSynth_en.html       |  71 +++++-
 .../CubicPadSynth/CubicPadSynth_ja.html       |  76 ++++++-
 .../EnvelopedSine/EnvelopedSine_en.html       |  71 +++++-
 .../EnvelopedSine/EnvelopedSine_ja.html       |  76 ++++++-
 docs/manual/EsPhaser/EsPhaser_en.html         |  71 +++++-
 docs/manual/EsPhaser/EsPhaser_ja.html         |  76 ++++++-
 docs/manual/FDNCymbal/FDNCymbal_en.html       |  71 +++++-
 docs/manual/FDNCymbal/FDNCymbal_ja.html       |  76 ++++++-
 .../IterativeSinCluster_en.html               |  75 +++++-
 .../IterativeSinCluster_ja.html               |  80 ++++++-
 .../LatticeReverb/LatticeReverb_en.html       |  74 +++++-
 .../LatticeReverb/LatticeReverb_ja.html       |  79 ++++++-
 .../LightPadSynth/LightPadSynth_en.html       |  71 +++++-
 .../LightPadSynth/LightPadSynth_ja.html       |  76 ++++++-
 docs/manual/SevenDelay/SevenDelay_en.html     |  71 +++++-
 docs/manual/SevenDelay/SevenDelay_ja.html     |  76 ++++++-
 docs/manual/SyncSawSynth/SyncSawSynth_en.html |  71 +++++-
 docs/manual/SyncSawSynth/SyncSawSynth_ja.html |  76 ++++++-
 .../TrapezoidSynth/TrapezoidSynth_en.html     |  71 +++++-
 .../TrapezoidSynth/TrapezoidSynth_ja.html     |  76 ++++++-
 docs/manual/WaveCymbal/WaveCymbal_en.html     |  71 +++++-
 docs/manual/WaveCymbal/WaveCymbal_ja.html     |  76 ++++++-
 23 files changed, 1508 insertions(+), 336 deletions(-)
diff --git a/docs/dev_note/vst3_dev.html b/docs/dev_note/vst3_dev.html
index b37c8adb..d4916da4 100644
--- a/docs/dev_note/vst3_dev.html
+++ b/docs/dev_note/vst3_dev.html
@@ -5,7 +5,7 @@
 <meta charset="utf-8" />
 <meta name="generator" content="pandoc" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
-<meta name="dcterms.date" content="2020-01-20" />
+<meta name="dcterms.date" content="2020-05-26" />
 <title>vst3_dev</title>
 <style>
 code { white-space: pre-wrap; }
@@ -14,19 +14,18 @@
 div.column { display: inline-block; vertical-align: top; width: 50%; }
 </style>
 <style>
-code.sourceCode > span { display: inline-block; line-height: 1.25; }
+pre > code.sourceCode { white-space: pre; position: relative; }
+pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
+pre > code.sourceCode > span:empty { height: 1.2em; }
 code.sourceCode > span { color: inherit; text-decoration: inherit; }
-code.sourceCode > span:empty { height: 1.2em; }
-.sourceCode { overflow: visible; }
-code.sourceCode { white-space: pre; position: relative; }
 div.sourceCode { margin: 1em 0; }
 pre.sourceCode { margin: 0; }
 @media screen {
 div.sourceCode { overflow: auto; }
 }
 @media print {
-code.sourceCode { white-space: pre-wrap; }
-code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
+pre > code.sourceCode { white-space: pre-wrap; }
+pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
 }
 pre.numberSource code
   { counter-reset: source-line 0; }
@@ -46,7 +45,7 @@
 div.sourceCode
   {   }
 @media screen {
-code.sourceCode > span > a:first-child::before { text-decoration: underline; }
+pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
 }
 code span.al { color: #ff0000; font-weight: bold; } /* Alert */
 code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
@@ -251,9 +250,9 @@
 
 <body>
 <header>
-    <p><a href="..\index.html">Back to Index</a></p>
+    <p><a href="../index.html">Back to Index</a></p>
       <p>
-  Update: 2020-01-20
+  Update: 2020-05-26
   </p>
       <details>
   <summary translate="yes">Table of Contents</summary>
@@ -928,42 +927,40 @@ <h4 id="カスタムビューの追加">カスタムビューの追加</h4>
 <span id="cb35-17"><a href="#cb35-17"></a>  <span class="at">const</span> <span class="dt">double</span> halfBorderWidth = borderWidth / <span class="fl">2.0</span>;</span>
 <span id="cb35-18"><a href="#cb35-18"></a></span>
 <span id="cb35-19"><a href="#cb35-19"></a>  <span class="co">// Background.</span></span>
-<span id="cb35-20"><a href="#cb35-20"></a>  <span class="at">const</span> <span class="kw">auto</span> bgColor = CColor(<span class="dv">255</span>, <span class="dv">255</span>, <span class="dv">255</span>, <span class="dv">255</span>);</span>
-<span id="cb35-21"><a href="#cb35-21"></a>  pContext-&gt;setLineWidth(borderWidth);</span>
-<span id="cb35-22"><a href="#cb35-22"></a>  pContext-&gt;setFillColor(bgColor);</span>
-<span id="cb35-23"><a href="#cb35-23"></a>  pContext-&gt;drawRect(CRect(<span class="fl">0.0</span>, <span class="fl">0.0</span>, width, height), kDrawFilled);</span>
-<span id="cb35-24"><a href="#cb35-24"></a></span>
-<span id="cb35-25"><a href="#cb35-25"></a>  <span class="co">// Waveform.</span></span>
-<span id="cb35-26"><a href="#cb35-26"></a>  pContext-&gt;setLineWidth(<span class="fl">2.0</span>);</span>
-<span id="cb35-27"><a href="#cb35-27"></a>  pContext-&gt;setLineStyle(lineStyle);</span>
-<span id="cb35-28"><a href="#cb35-28"></a>  pContext-&gt;setFrameColor(CColor(<span class="dv">19</span>, <span class="dv">193</span>, <span class="dv">54</span>, <span class="dv">255</span>));</span>
-<span id="cb35-29"><a href="#cb35-29"></a>  <span class="at">const</span> <span class="dt">size_t</span> size = (<span class="dt">size_t</span>)(width + <span class="fl">1.0</span>);</span>
-<span id="cb35-30"><a href="#cb35-30"></a>  <span class="cf">if</span> (points.size() != size) points.resize(size);</span>
-<span id="cb35-31"><a href="#cb35-31"></a>  <span class="cf">for</span> (<span class="dt">size_t</span> x = <span class="dv">0</span>; x &lt; points.size(); ++x)</span>
-<span id="cb35-32"><a href="#cb35-32"></a>    points[x] = CPoint((CCoord)x, height * lfo(x / width));</span>
-<span id="cb35-33"><a href="#cb35-33"></a>  pContext-&gt;drawPolygon(points);</span>
-<span id="cb35-34"><a href="#cb35-34"></a></span>
-<span id="cb35-35"><a href="#cb35-35"></a>  <span class="co">// Always draw border at last. Otherwise, inner object will be drawn over border.</span></span>
-<span id="cb35-36"><a href="#cb35-36"></a>  <span class="at">const</span> <span class="kw">auto</span> borderColor = CColor(<span class="dv">0</span>, <span class="dv">0</span>, <span class="dv">0</span>, <span class="dv">255</span>);</span>
-<span id="cb35-37"><a href="#cb35-37"></a>  pContext-&gt;setFrameColor(borderColor);</span>
-<span id="cb35-38"><a href="#cb35-38"></a>  pContext-&gt;drawRect(</span>
-<span id="cb35-39"><a href="#cb35-39"></a>    CRect(halfBorderWidth, halfBorderWidth, width, height), kDrawStroked);</span>
-<span id="cb35-40"><a href="#cb35-40"></a></span>
-<span id="cb35-41"><a href="#cb35-41"></a>  setDirty(<span class="kw">false</span>);</span>
-<span id="cb35-42"><a href="#cb35-42"></a>}</span>
-<span id="cb35-43"><a href="#cb35-43"></a></span>
-<span id="cb35-44"><a href="#cb35-44"></a><span class="dt">double</span> WaveView::lfo(<span class="dt">double</span> phase)</span>
-<span id="cb35-45"><a href="#cb35-45"></a>{</span>
-<span id="cb35-46"><a href="#cb35-46"></a>  <span class="at">const</span> <span class="dt">double</span> twopi = <span class="fl">6.283185307179586</span>;</span>
-<span id="cb35-47"><a href="#cb35-47"></a></span>
-<span id="cb35-48"><a href="#cb35-48"></a>  phase = <span class="kw">this</span>-&gt;phase + phase * twopi;</span>
-<span id="cb35-49"><a href="#cb35-49"></a>  <span class="cf">if</span> (phase &gt; twopi) phase -= twopi;</span>
-<span id="cb35-50"><a href="#cb35-50"></a>  <span class="kw">auto</span> sign = (pi &lt; phase) - (phase &lt; pi);</span>
-<span id="cb35-51"><a href="#cb35-51"></a>  <span class="kw">auto</span> wave = gain * sign * pow(fabs(sin(phase)), shape);</span>
-<span id="cb35-52"><a href="#cb35-52"></a>  <span class="cf">return</span> (wave + <span class="fl">1.0</span>) * <span class="fl">0.5</span>;</span>
-<span id="cb35-53"><a href="#cb35-53"></a>}</span>
-<span id="cb35-54"><a href="#cb35-54"></a></span>
-<span id="cb35-55"><a href="#cb35-55"></a>} <span class="co">// namespace VSTGUI</span></span></code></pre></div>
+<span id="cb35-20"><a href="#cb35-20"></a>  pContext-&gt;setLineWidth(borderWidth);</span>
+<span id="cb35-21"><a href="#cb35-21"></a>  pContext-&gt;setFillColor(pal.background());</span>
+<span id="cb35-22"><a href="#cb35-22"></a>  pContext-&gt;drawRect(CRect(<span class="fl">0.0</span>, <span class="fl">0.0</span>, width, height), kDrawFilled);</span>
+<span id="cb35-23"><a href="#cb35-23"></a></span>
+<span id="cb35-24"><a href="#cb35-24"></a>  <span class="co">// Waveform.</span></span>
+<span id="cb35-25"><a href="#cb35-25"></a>  pContext-&gt;setLineWidth(<span class="fl">2.0</span>);</span>
+<span id="cb35-26"><a href="#cb35-26"></a>  pContext-&gt;setLineStyle(lineStyle);</span>
+<span id="cb35-27"><a href="#cb35-27"></a>  pContext-&gt;setFrameColor(CColor(<span class="dv">19</span>, <span class="dv">193</span>, <span class="dv">54</span>, <span class="dv">255</span>));</span>
+<span id="cb35-28"><a href="#cb35-28"></a>  <span class="at">const</span> <span class="dt">size_t</span> size = (<span class="dt">size_t</span>)(width + <span class="fl">1.0</span>);</span>
+<span id="cb35-29"><a href="#cb35-29"></a>  <span class="cf">if</span> (points.size() != size) points.resize(size);</span>
+<span id="cb35-30"><a href="#cb35-30"></a>  <span class="cf">for</span> (<span class="dt">size_t</span> x = <span class="dv">0</span>; x &lt; points.size(); ++x)</span>
+<span id="cb35-31"><a href="#cb35-31"></a>    points[x] = CPoint((CCoord)x, height * lfo(x / width));</span>
+<span id="cb35-32"><a href="#cb35-32"></a>  pContext-&gt;drawPolygon(points);</span>
+<span id="cb35-33"><a href="#cb35-33"></a></span>
+<span id="cb35-34"><a href="#cb35-34"></a>  <span class="co">// Always draw border at last. Otherwise, inner object will be drawn over border.</span></span>
+<span id="cb35-35"><a href="#cb35-35"></a>  pContext-&gt;setFrameColor(isMouseEntered ? pal.highlightMain() : pal.border());</span>
+<span id="cb35-36"><a href="#cb35-36"></a>  pContext-&gt;drawRect(</span>
+<span id="cb35-37"><a href="#cb35-37"></a>    CRect(halfBorderWidth, halfBorderWidth, width, height), kDrawStroked);</span>
+<span id="cb35-38"><a href="#cb35-38"></a></span>
+<span id="cb35-39"><a href="#cb35-39"></a>  setDirty(<span class="kw">false</span>);</span>
+<span id="cb35-40"><a href="#cb35-40"></a>}</span>
+<span id="cb35-41"><a href="#cb35-41"></a></span>
+<span id="cb35-42"><a href="#cb35-42"></a><span class="dt">double</span> WaveView::lfo(<span class="dt">double</span> phase)</span>
+<span id="cb35-43"><a href="#cb35-43"></a>{</span>
+<span id="cb35-44"><a href="#cb35-44"></a>  <span class="at">const</span> <span class="dt">double</span> twopi = <span class="fl">6.283185307179586</span>;</span>
+<span id="cb35-45"><a href="#cb35-45"></a></span>
+<span id="cb35-46"><a href="#cb35-46"></a>  phase = <span class="kw">this</span>-&gt;phase + phase * twopi;</span>
+<span id="cb35-47"><a href="#cb35-47"></a>  <span class="cf">if</span> (phase &gt; twopi) phase -= twopi;</span>
+<span id="cb35-48"><a href="#cb35-48"></a>  <span class="kw">auto</span> sign = (pi &lt; phase) - (phase &lt; pi);</span>
+<span id="cb35-49"><a href="#cb35-49"></a>  <span class="kw">auto</span> wave = gain * sign * pow(fabs(sin(phase)), shape);</span>
+<span id="cb35-50"><a href="#cb35-50"></a>  <span class="cf">return</span> (wave + <span class="fl">1.0</span>) * <span class="fl">0.5</span>;</span>
+<span id="cb35-51"><a href="#cb35-51"></a>}</span>
+<span id="cb35-52"><a href="#cb35-52"></a></span>
+<span id="cb35-53"><a href="#cb35-53"></a>} <span class="co">// namespace VSTGUI</span></span></code></pre></div>
 <p><code>SomeFX/source/gui/waveviewcreator.cpp</code> の内容です。</p>
 <div class="sourceCode" id="cb36"><pre class="sourceCode cpp"><code class="sourceCode cpp"><span id="cb36-1"><a href="#cb36-1"></a><span class="pp">#pragma once</span></span>
 <span id="cb36-2"><a href="#cb36-2"></a></span>
@@ -1284,42 +1281,40 @@ <h4 id="カスタムビューの実装と関連するコントロールの表示
 <span id="cb42-22"><a href="#cb42-22"></a>  <span class="at">const</span> <span class="dt">double</span> halfBorderWidth = borderWidth / <span class="fl">2.0</span>;</span>
 <span id="cb42-23"><a href="#cb42-23"></a></span>
 <span id="cb42-24"><a href="#cb42-24"></a>  <span class="co">// Background.</span></span>
-<span id="cb42-25"><a href="#cb42-25"></a>  <span class="at">const</span> <span class="kw">auto</span> bgColor = CColor(<span class="dv">255</span>, <span class="dv">255</span>, <span class="dv">255</span>, <span class="dv">255</span>);</span>
-<span id="cb42-26"><a href="#cb42-26"></a>  pContext-&gt;setLineWidth(borderWidth);</span>
-<span id="cb42-27"><a href="#cb42-27"></a>  pContext-&gt;setFillColor(bgColor);</span>
-<span id="cb42-28"><a href="#cb42-28"></a>  pContext-&gt;drawRect(CRect(<span class="fl">0.0</span>, <span class="fl">0.0</span>, width, height), kDrawFilled);</span>
-<span id="cb42-29"><a href="#cb42-29"></a></span>
-<span id="cb42-30"><a href="#cb42-30"></a>  <span class="co">// Waveform.</span></span>
-<span id="cb42-31"><a href="#cb42-31"></a>  pContext-&gt;setLineWidth(<span class="fl">2.0</span>);</span>
-<span id="cb42-32"><a href="#cb42-32"></a>  pContext-&gt;setLineStyle(lineStyle);</span>
-<span id="cb42-33"><a href="#cb42-33"></a>  pContext-&gt;setFrameColor(CColor(<span class="dv">19</span>, <span class="dv">193</span>, <span class="dv">54</span>, <span class="dv">255</span>));</span>
-<span id="cb42-34"><a href="#cb42-34"></a>  <span class="at">const</span> <span class="dt">size_t</span> size = (<span class="dt">size_t</span>)(width + <span class="fl">1.0</span>);</span>
-<span id="cb42-35"><a href="#cb42-35"></a>  <span class="cf">if</span> (points.size() != size) points.resize(size);</span>
-<span id="cb42-36"><a href="#cb42-36"></a>  <span class="cf">for</span> (<span class="dt">size_t</span> x = <span class="dv">0</span>; x &lt; points.size(); ++x)</span>
-<span id="cb42-37"><a href="#cb42-37"></a>    points[x] = CPoint((CCoord)x, height * lfo(x / width));</span>
-<span id="cb42-38"><a href="#cb42-38"></a>  pContext-&gt;drawPolygon(points);</span>
-<span id="cb42-39"><a href="#cb42-39"></a></span>
-<span id="cb42-40"><a href="#cb42-40"></a>  <span class="co">// Always draw border at last. Otherwise, inner object will be drawn over border.</span></span>
-<span id="cb42-41"><a href="#cb42-41"></a>  <span class="at">const</span> <span class="kw">auto</span> borderColor = CColor(<span class="dv">0</span>, <span class="dv">0</span>, <span class="dv">0</span>, <span class="dv">255</span>);</span>
-<span id="cb42-42"><a href="#cb42-42"></a>  pContext-&gt;setFrameColor(borderColor);</span>
-<span id="cb42-43"><a href="#cb42-43"></a>  pContext-&gt;drawRect(</span>
-<span id="cb42-44"><a href="#cb42-44"></a>    CRect(halfBorderWidth, halfBorderWidth, width, height), kDrawStroked);</span>
-<span id="cb42-45"><a href="#cb42-45"></a></span>
-<span id="cb42-46"><a href="#cb42-46"></a>  setDirty(<span class="kw">false</span>);</span>
-<span id="cb42-47"><a href="#cb42-47"></a>}</span>
-<span id="cb42-48"><a href="#cb42-48"></a></span>
-<span id="cb42-49"><a href="#cb42-49"></a><span class="dt">double</span> WaveView::lfo(<span class="dt">double</span> phase)</span>
-<span id="cb42-50"><a href="#cb42-50"></a>{</span>
-<span id="cb42-51"><a href="#cb42-51"></a>  <span class="at">const</span> <span class="dt">double</span> pi = <span class="fl">3.14159265358979323846</span>;</span>
-<span id="cb42-52"><a href="#cb42-52"></a></span>
-<span id="cb42-53"><a href="#cb42-53"></a>  phase = <span class="kw">this</span>-&gt;phase + phase * <span class="dv">2</span> * pi;</span>
-<span id="cb42-54"><a href="#cb42-54"></a>  <span class="cf">if</span> (phase &gt; <span class="dv">2</span> * pi) phase -= <span class="dv">2</span> * pi;</span>
-<span id="cb42-55"><a href="#cb42-55"></a>  <span class="kw">auto</span> sign = (pi &lt; phase) - (phase &lt; pi);</span>
-<span id="cb42-56"><a href="#cb42-56"></a>  <span class="kw">auto</span> wave = amount * sign * pow(fabs(sin(phase)), shape);</span>
-<span id="cb42-57"><a href="#cb42-57"></a>  <span class="cf">return</span> (wave + <span class="fl">1.0</span>) * <span class="fl">0.5</span>;</span>
-<span id="cb42-58"><a href="#cb42-58"></a>}</span>
-<span id="cb42-59"><a href="#cb42-59"></a></span>
-<span id="cb42-60"><a href="#cb42-60"></a>} <span class="co">// namespace VSTGUI</span></span></code></pre></div>
+<span id="cb42-25"><a href="#cb42-25"></a>  pContext-&gt;setLineWidth(borderWidth);</span>
+<span id="cb42-26"><a href="#cb42-26"></a>  pContext-&gt;setFillColor(pal.background());</span>
+<span id="cb42-27"><a href="#cb42-27"></a>  pContext-&gt;drawRect(CRect(<span class="fl">0.0</span>, <span class="fl">0.0</span>, width, height), kDrawFilled);</span>
+<span id="cb42-28"><a href="#cb42-28"></a></span>
+<span id="cb42-29"><a href="#cb42-29"></a>  <span class="co">// Waveform.</span></span>
+<span id="cb42-30"><a href="#cb42-30"></a>  pContext-&gt;setLineWidth(<span class="fl">2.0</span>);</span>
+<span id="cb42-31"><a href="#cb42-31"></a>  pContext-&gt;setLineStyle(lineStyle);</span>
+<span id="cb42-32"><a href="#cb42-32"></a>  pContext-&gt;setFrameColor(CColor(<span class="dv">19</span>, <span class="dv">193</span>, <span class="dv">54</span>, <span class="dv">255</span>));</span>
+<span id="cb42-33"><a href="#cb42-33"></a>  <span class="at">const</span> <span class="dt">size_t</span> size = (<span class="dt">size_t</span>)(width + <span class="fl">1.0</span>);</span>
+<span id="cb42-34"><a href="#cb42-34"></a>  <span class="cf">if</span> (points.size() != size) points.resize(size);</span>
+<span id="cb42-35"><a href="#cb42-35"></a>  <span class="cf">for</span> (<span class="dt">size_t</span> x = <span class="dv">0</span>; x &lt; points.size(); ++x)</span>
+<span id="cb42-36"><a href="#cb42-36"></a>    points[x] = CPoint((CCoord)x, height * lfo(x / width));</span>
+<span id="cb42-37"><a href="#cb42-37"></a>  pContext-&gt;drawPolygon(points);</span>
+<span id="cb42-38"><a href="#cb42-38"></a></span>
+<span id="cb42-39"><a href="#cb42-39"></a>  <span class="co">// Always draw border at last. Otherwise, inner object will be drawn over border.</span></span>
+<span id="cb42-40"><a href="#cb42-40"></a>  pContext-&gt;setFrameColor(isMouseEntered ? pal.highlightMain() : pal.border());</span>
+<span id="cb42-41"><a href="#cb42-41"></a>  pContext-&gt;drawRect(</span>
+<span id="cb42-42"><a href="#cb42-42"></a>    CRect(halfBorderWidth, halfBorderWidth, width, height), kDrawStroked);</span>
+<span id="cb42-43"><a href="#cb42-43"></a></span>
+<span id="cb42-44"><a href="#cb42-44"></a>  setDirty(<span class="kw">false</span>);</span>
+<span id="cb42-45"><a href="#cb42-45"></a>}</span>
+<span id="cb42-46"><a href="#cb42-46"></a></span>
+<span id="cb42-47"><a href="#cb42-47"></a><span class="dt">double</span> WaveView::lfo(<span class="dt">double</span> phase)</span>
+<span id="cb42-48"><a href="#cb42-48"></a>{</span>
+<span id="cb42-49"><a href="#cb42-49"></a>  <span class="at">const</span> <span class="dt">double</span> pi = <span class="fl">3.14159265358979323846</span>;</span>
+<span id="cb42-50"><a href="#cb42-50"></a></span>
+<span id="cb42-51"><a href="#cb42-51"></a>  phase = <span class="kw">this</span>-&gt;phase + phase * <span class="dv">2</span> * pi;</span>
+<span id="cb42-52"><a href="#cb42-52"></a>  <span class="cf">if</span> (phase &gt; <span class="dv">2</span> * pi) phase -= <span class="dv">2</span> * pi;</span>
+<span id="cb42-53"><a href="#cb42-53"></a>  <span class="kw">auto</span> sign = (pi &lt; phase) - (phase &lt; pi);</span>
+<span id="cb42-54"><a href="#cb42-54"></a>  <span class="kw">auto</span> wave = amount * sign * pow(fabs(sin(phase)), shape);</span>
+<span id="cb42-55"><a href="#cb42-55"></a>  <span class="cf">return</span> (wave + <span class="fl">1.0</span>) * <span class="fl">0.5</span>;</span>
+<span id="cb42-56"><a href="#cb42-56"></a>}</span>
+<span id="cb42-57"><a href="#cb42-57"></a></span>
+<span id="cb42-58"><a href="#cb42-58"></a>} <span class="co">// namespace VSTGUI</span></span></code></pre></div>
 <p>エディタクラスに関数を追加します。</p>
 <div class="sourceCode" id="cb43"><pre class="sourceCode cpp"><code class="sourceCode cpp"><span id="cb43-1"><a href="#cb43-1"></a><span class="kw">class</span> PlugEditor : <span class="kw">public</span> VSTGUIEditor, <span class="kw">public</span> IControlListener {</span>
 <span id="cb43-2"><a href="#cb43-2"></a><span class="co">// ...</span></span>
@@ -1471,33 +1466,31 @@ <h4 id="スプラッシュスクリーンの追加">スプラッシュスクリ
 <span id="cb51-17"><a href="#cb51-17"></a>  <span class="at">const</span> <span class="dt">double</span> halfBorderWidth = borderWidth / <span class="fl">2.0</span>;</span>
 <span id="cb51-18"><a href="#cb51-18"></a></span>
 <span id="cb51-19"><a href="#cb51-19"></a>  <span class="co">// Background.</span></span>
-<span id="cb51-20"><a href="#cb51-20"></a>  <span class="at">const</span> <span class="kw">auto</span> bgColor = CColor(<span class="dv">255</span>, <span class="dv">255</span>, <span class="dv">255</span>, <span class="dv">255</span>);</span>
-<span id="cb51-21"><a href="#cb51-21"></a>  pContext-&gt;setLineWidth(borderWidth);</span>
-<span id="cb51-22"><a href="#cb51-22"></a>  pContext-&gt;setFillColor(bgColor);</span>
-<span id="cb51-23"><a href="#cb51-23"></a>  pContext-&gt;drawRect(CRect(<span class="fl">0.0</span>, <span class="fl">0.0</span>, width, height), kDrawFilled);</span>
-<span id="cb51-24"><a href="#cb51-24"></a></span>
-<span id="cb51-25"><a href="#cb51-25"></a>  pContext-&gt;setFont(</span>
-<span id="cb51-26"><a href="#cb51-26"></a>    <span class="kw">new</span> CFontDesc(fontName, fontSizeTitle, CTxtFace::kBoldFace | CTxtFace::kItalicFace));</span>
-<span id="cb51-27"><a href="#cb51-27"></a>  pContext-&gt;setFontColor(CColor(<span class="dv">0</span>, <span class="dv">0</span>, <span class="dv">0</span>, <span class="dv">255</span>));</span>
-<span id="cb51-28"><a href="#cb51-28"></a>  pContext-&gt;drawString(</span>
-<span id="cb51-29"><a href="#cb51-29"></a>    UTF8String(<span class="st">&quot;🐸🍻🐨🍻🐰&quot;</span>).getPlatformString(), CPoint(<span class="fl">20.0</span>, <span class="fl">50.0</span>));</span>
-<span id="cb51-30"><a href="#cb51-30"></a></span>
-<span id="cb51-31"><a href="#cb51-31"></a>  <span class="co">// Border.</span></span>
-<span id="cb51-32"><a href="#cb51-32"></a>  <span class="at">const</span> <span class="kw">auto</span> borderColor = CColor(<span class="dv">0</span>, <span class="dv">0</span>, <span class="dv">0</span>, <span class="dv">255</span>);</span>
-<span id="cb51-33"><a href="#cb51-33"></a>  pContext-&gt;setFrameColor(borderColor);</span>
-<span id="cb51-34"><a href="#cb51-34"></a>  pContext-&gt;drawRect(</span>
-<span id="cb51-35"><a href="#cb51-35"></a>    CRect(</span>
-<span id="cb51-36"><a href="#cb51-36"></a>      halfBorderWidth,</span>
-<span id="cb51-37"><a href="#cb51-37"></a>      halfBorderWidth,</span>
-<span id="cb51-38"><a href="#cb51-38"></a>      width - halfBorderWidth,</span>
-<span id="cb51-39"><a href="#cb51-39"></a>      height - halfBorderWidth),</span>
-<span id="cb51-40"><a href="#cb51-40"></a>    kDrawStroked);</span>
-<span id="cb51-41"><a href="#cb51-41"></a></span>
-<span id="cb51-42"><a href="#cb51-42"></a>  setDirty(<span class="kw">false</span>);</span>
-<span id="cb51-43"><a href="#cb51-43"></a>}</span>
-<span id="cb51-44"><a href="#cb51-44"></a></span>
-<span id="cb51-45"><a href="#cb51-45"></a>} <span class="co">// namespace Vst</span></span>
-<span id="cb51-46"><a href="#cb51-46"></a>} <span class="co">// namespace Steinberg</span></span></code></pre></div>
+<span id="cb51-20"><a href="#cb51-20"></a>  pContext-&gt;setLineWidth(borderWidth);</span>
+<span id="cb51-21"><a href="#cb51-21"></a>  pContext-&gt;setFillColor(pal.background());</span>
+<span id="cb51-22"><a href="#cb51-22"></a>  pContext-&gt;drawRect(CRect(<span class="fl">0.0</span>, <span class="fl">0.0</span>, width, height), kDrawFilled);</span>
+<span id="cb51-23"><a href="#cb51-23"></a></span>
+<span id="cb51-24"><a href="#cb51-24"></a>  pContext-&gt;setFont(</span>
+<span id="cb51-25"><a href="#cb51-25"></a>    <span class="kw">new</span> CFontDesc(fontName, fontSizeTitle, CTxtFace::kBoldFace | CTxtFace::kItalicFace));</span>
+<span id="cb51-26"><a href="#cb51-26"></a>  pContext-&gt;setFontColor(pal.foreground());</span>
+<span id="cb51-27"><a href="#cb51-27"></a>  pContext-&gt;drawString(</span>
+<span id="cb51-28"><a href="#cb51-28"></a>    UTF8String(<span class="st">&quot;🐸🍻🐨🍻🐰&quot;</span>).getPlatformString(), CPoint(<span class="fl">20.0</span>, <span class="fl">50.0</span>));</span>
+<span id="cb51-29"><a href="#cb51-29"></a></span>
+<span id="cb51-30"><a href="#cb51-30"></a>  <span class="co">// Border.</span></span>
+<span id="cb51-31"><a href="#cb51-31"></a>  pContext-&gt;setFrameColor(isMouseEntered ? pal.highlightMain() : pal.border());</span>
+<span id="cb51-32"><a href="#cb51-32"></a>  pContext-&gt;drawRect(</span>
+<span id="cb51-33"><a href="#cb51-33"></a>    CRect(</span>
+<span id="cb51-34"><a href="#cb51-34"></a>      halfBorderWidth,</span>
+<span id="cb51-35"><a href="#cb51-35"></a>      halfBorderWidth,</span>
+<span id="cb51-36"><a href="#cb51-36"></a>      width - halfBorderWidth,</span>
+<span id="cb51-37"><a href="#cb51-37"></a>      height - halfBorderWidth),</span>
+<span id="cb51-38"><a href="#cb51-38"></a>    kDrawStroked);</span>
+<span id="cb51-39"><a href="#cb51-39"></a></span>
+<span id="cb51-40"><a href="#cb51-40"></a>  setDirty(<span class="kw">false</span>);</span>
+<span id="cb51-41"><a href="#cb51-41"></a>}</span>
+<span id="cb51-42"><a href="#cb51-42"></a></span>
+<span id="cb51-43"><a href="#cb51-43"></a>} <span class="co">// namespace Vst</span></span>
+<span id="cb51-44"><a href="#cb51-44"></a>} <span class="co">// namespace Steinberg</span></span></code></pre></div>
 <p><code>SomeFX/CMakeLists.txt</code> にファイルを追加します。</p>
 <div class="sourceCode" id="cb52"><pre class="sourceCode cmake"><code class="sourceCode cmake"><span id="cb52-1"><a href="#cb52-1"></a><span class="kw">set</span>(plug_sources</span>
 <span id="cb52-2"><a href="#cb52-2"></a>    //...</span>
@@ -1820,7 +1813,7 @@ <h4 id="コンテキストメニューにズーム機能を追加">コンテキ
 <p>どこを右クリックしてもメニューが開くようにするには <code>COptionMenu</code> でメニューを作っておいて、コントロール上で右クリックされているときは <code>IContextMenu</code> に変換する、そうでなければ <code>COptionMenu</code> をそのままポップアップする、という処理が考えられます。 <code>vstgui4/vstgui/plugin-bindings/vst3editor.*</code> に実装例があります。</p>
 
 <footer>
-    <p><a href="..\index.html">Back to Index</a></p>
+    <p><a href="../index.html">Back to Index</a></p>
   </footer>
 </body>
 
diff --git a/docs/manual/CubicPadSynth/CubicPadSynth_en.html b/docs/manual/CubicPadSynth/CubicPadSynth_en.html
index 2b554e13..1f496705 100644
--- a/docs/manual/CubicPadSynth/CubicPadSynth_en.html
+++ b/docs/manual/CubicPadSynth/CubicPadSynth_en.html
@@ -14,19 +14,18 @@
 div.column { display: inline-block; vertical-align: top; width: 50%; }
 </style>
 <style>
-code.sourceCode > span { display: inline-block; line-height: 1.25; }
+pre > code.sourceCode { white-space: pre; position: relative; }
+pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
+pre > code.sourceCode > span:empty { height: 1.2em; }
 code.sourceCode > span { color: inherit; text-decoration: inherit; }
-code.sourceCode > span:empty { height: 1.2em; }
-.sourceCode { overflow: visible; }
-code.sourceCode { white-space: pre; position: relative; }
 div.sourceCode { margin: 1em 0; }
 pre.sourceCode { margin: 0; }
 @media screen {
 div.sourceCode { overflow: auto; }
 }
 @media print {
-code.sourceCode { white-space: pre-wrap; }
-code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
+pre > code.sourceCode { white-space: pre-wrap; }
+pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
 }
 pre.numberSource code
   { counter-reset: source-line 0; }
@@ -46,7 +45,7 @@
 div.sourceCode
   {   }
 @media screen {
-code.sourceCode > span > a:first-child::before { text-decoration: underline; }
+pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
 }
 code span.al { color: #ff0000; font-weight: bold; } /* Alert */
 code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
@@ -251,7 +250,7 @@
 
 <body>
 <header>
-    <p><a href="..\..\index.html">Back to Index</a></p>
+    <p><a href="../../index.html">Back to Index</a></p>
       <p>
   Update: 2020-05-14
   </p>
@@ -266,6 +265,7 @@
   <li><a href="#windows-specific">Windows Specific</a></li>
   <li><a href="#linux-specific">Linux Specific</a></li>
   </ul></li>
+  <li><a href="#color-configuration">Color Configuration</a></li>
   <li><a href="#controls">Controls</a></li>
   <li><a href="#caution">Caution</a></li>
   <li><a href="#wavetable-specification">Wavetable Specification</a></li>
@@ -307,7 +307,7 @@ <h1 id="cubicpadsynth">CubicPadSynth</h1>
 <p><img src="img/cubicpadsynth.png" /></p>
 <p>CubicPadSynth is a wavetable synthesizer which uses PADsynth algorithm to generate oscillator tables. Cubic interpolation is used to get smooth sound even at inaudible low frequency range. LFO waveform can be directly drawn.</p>
 <ul>
-<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LatticeReverb0.1.0/CubicPadSynth0.1.5.zip">Download CubicPadSynth 0.1.5 - VST® 3 (github.com)</a> <img
+<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/ColorConfig/CubicPadSynth0.1.6.zip">Download CubicPadSynth 0.1.6 - VST® 3 (github.com)</a> <img
 src="img/VST_Compatible_Logo_Steinberg_negative.svg"
 alt="VST compatible logo."
 width="60px"
@@ -353,6 +353,52 @@ <h3 id="linux-specific">Linux Specific</h3>
 <li><a href="https://steinbergmedia.github.io/vst3_doc/vstinterfaces/linuxSetup.html">VST 3 Interfaces: Setup Linux for building VST 3 Plug-ins</a></li>
 </ul>
 <p>REAPER on Linux may not recognize the plugin. A workaround is to delete a file <code>~/.config/REAPER/reaper-vstplugins64.ini</code> and restart REAPER.</p>
+<h2 id="color-configuration">Color Configuration</h2>
+<p>At first time, create color config file to:</p>
+<ul>
+<li><code>/Users/USERNAME/AppData/Roaming/UhhyouPlugins/style/style.json</code> on Windows.</li>
+<li><code>$XDG_CONFIG_HOME/UhhyouPlugins/style/style.json</code> on Linux.
+<ul>
+<li>If <code>$XDG_CONFIG_HOME</code> is empty, make <code>$HOME/.config/UhhyouPlugins/style/style.json</code>.</li>
+</ul></li>
+<li><code>/Users/$USERNAME/Library/Preferences/UhhyouPlugins/style/style.json</code> on macOS.</li>
+</ul>
+<p>Below is a example of <code>style.json</code>.</p>
+<div class="sourceCode" id="cb2"><pre class="sourceCode json"><code class="sourceCode json"><span id="cb2-1"><a href="#cb2-1"></a><span class="fu">{</span></span>
+<span id="cb2-2"><a href="#cb2-2"></a>  <span class="dt">&quot;foreground&quot;</span><span class="fu">:</span> <span class="st">&quot;#ffffff&quot;</span><span class="fu">,</span></span>
+<span id="cb2-3"><a href="#cb2-3"></a>  <span class="dt">&quot;foregroundButtonOn&quot;</span><span class="fu">:</span> <span class="st">&quot;#000000&quot;</span><span class="fu">,</span></span>
+<span id="cb2-4"><a href="#cb2-4"></a>  <span class="dt">&quot;background&quot;</span><span class="fu">:</span> <span class="st">&quot;#353d3e&quot;</span><span class="fu">,</span></span>
+<span id="cb2-5"><a href="#cb2-5"></a>  <span class="dt">&quot;boxBackground&quot;</span><span class="fu">:</span> <span class="st">&quot;#000000&quot;</span><span class="fu">,</span></span>
+<span id="cb2-6"><a href="#cb2-6"></a>  <span class="dt">&quot;border&quot;</span><span class="fu">:</span> <span class="st">&quot;#808080&quot;</span><span class="fu">,</span></span>
+<span id="cb2-7"><a href="#cb2-7"></a>  <span class="dt">&quot;unfocused&quot;</span><span class="fu">:</span> <span class="st">&quot;#b8a65c&quot;</span><span class="fu">,</span></span>
+<span id="cb2-8"><a href="#cb2-8"></a>  <span class="dt">&quot;highlightMain&quot;</span><span class="fu">:</span> <span class="st">&quot;#368a94&quot;</span><span class="fu">,</span></span>
+<span id="cb2-9"><a href="#cb2-9"></a>  <span class="dt">&quot;highlightAccent&quot;</span><span class="fu">:</span> <span class="st">&quot;#2c8a58&quot;</span><span class="fu">,</span></span>
+<span id="cb2-10"><a href="#cb2-10"></a>  <span class="dt">&quot;highlightButton&quot;</span><span class="fu">:</span> <span class="st">&quot;#a77842&quot;</span><span class="fu">,</span></span>
+<span id="cb2-11"><a href="#cb2-11"></a>  <span class="dt">&quot;highlightWarning&quot;</span><span class="fu">:</span> <span class="st">&quot;#8742a7&quot;</span><span class="fu">,</span></span>
+<span id="cb2-12"><a href="#cb2-12"></a>  <span class="dt">&quot;overlay&quot;</span><span class="fu">:</span> <span class="st">&quot;#ffffff88&quot;</span><span class="fu">,</span></span>
+<span id="cb2-13"><a href="#cb2-13"></a>  <span class="dt">&quot;overlayHighlight&quot;</span><span class="fu">:</span> <span class="st">&quot;#00ff0033&quot;</span></span>
+<span id="cb2-14"><a href="#cb2-14"></a><span class="fu">}</span></span></code></pre></div>
+<p>Hex color codes are used.</p>
+<ul>
+<li>6 digit color is RGB.</li>
+<li>8 digit color is RGBA.</li>
+</ul>
+<p>First letter <code>#</code> is conventional. Plugins ignore the first letter of color code, thus <code>?102938</code>, <code>11335577</code> are valid.</p>
+<p>Do not use characters outside of <code>0-9a-f</code> for color value.</p>
+<ul>
+<li><code>foreground</code>: Text color.</li>
+<li><code>foregroundButtonOn</code>: Text color of active toggle button. Recommend to use the same value of <code>foreground</code> or <code>boxBackground</code>.</li>
+<li><code>background</code>: Background color.</li>
+<li><code>boxBackground</code>: Background color of inside of box shaped components (Barbox, Button, Checkbox, OptionMenu, TextKnob, VSlider).</li>
+<li><code>border</code>: Border color of box shaped components.</li>
+<li><code>unfocused</code>: Color to fill unfocused components. Currently, only used for knobs.</li>
+<li><code>highlightMain</code>: Color to indicate focus is on a component. Highlight colors are also used for value of slider components (BarBox and VSlider).- {new_version}{change_log}</li>
+<li><code>highlightAccent</code>: Same as <code>highlightMain</code>. Used for cosmetics.</li>
+<li><code>highlightButton</code>: Color to indicate focus is on a button.</li>
+<li><code>highlightWarning</code>: Same as <code>highlightMain</code>, but only used for parameters which requires extra caution.</li>
+<li><code>overlay</code>: Overlay color. Used to overlay texts and indicators.</li>
+<li><code>overlayHighlight</code>: Overlay color to highlight current focus.</li>
+</ul>
 <h2 id="controls">Controls</h2>
 <p>Knob and slider can do:</p>
 <ul>
@@ -763,6 +809,10 @@ <h4 id="refresh-table">Refresh Table</h4>
 <p>Note that refreshing wavetable stops sound. It also interrupts MIDI notes.</p>
 <h2 id="change-log">Change Log</h2>
 <ul>
+<li>0.1.6
+<ul>
+<li>Added color configuration.</li>
+</ul></li>
 <li>0.1.5
 <ul>
 <li>Reverted parameter smoother to the old one which works with variable size audio buffer.</li>
@@ -792,6 +842,7 @@ <h2 id="change-log">Change Log</h2>
 </ul>
 <h3 id="old-versions">Old Versions</h3>
 <ul>
+<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LatticeReverb0.1.0/CubicPadSynth0.1.5.zip">CubicPadSynth 0.1.5 - VST 3 (github.com)</a></li>
 <li><a href="https://github.com/ryukau/VSTPlugins/releases/download/WavetableInitializationBugFix/CubicPadSynth0.1.4.zip">CubicPadSynth 0.1.4 - VST 3 (github.com)</a></li>
 <li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LightPadSynth0.1.0/CubicPadSynth0.1.3.zip">CubicPadSynth 0.1.3 - VST 3 (github.com)</a></li>
 <li><a href="https://github.com/ryukau/VSTPlugins/releases/download/BarBoxFocusFix/CubicPadSynth0.1.2.zip">CubicPadSynth 0.1.2 - VST 3 (github.com)</a></li>
@@ -807,7 +858,7 @@ <h3 id="about-vst">About VST</h3>
 <p>VST is a trademark of Steinberg Media Technologies GmbH, registered in Europe and other countries.</p>
 
 <footer>
-    <p><a href="..\..\index.html">Back to Index</a></p>
+    <p><a href="../../index.html">Back to Index</a></p>
   </footer>
 </body>
 
diff --git a/docs/manual/CubicPadSynth/CubicPadSynth_ja.html b/docs/manual/CubicPadSynth/CubicPadSynth_ja.html
index ce3c0b96..2988bc8f 100644
--- a/docs/manual/CubicPadSynth/CubicPadSynth_ja.html
+++ b/docs/manual/CubicPadSynth/CubicPadSynth_ja.html
@@ -14,19 +14,18 @@
 div.column { display: inline-block; vertical-align: top; width: 50%; }
 </style>
 <style>
-code.sourceCode > span { display: inline-block; line-height: 1.25; }
+pre > code.sourceCode { white-space: pre; position: relative; }
+pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
+pre > code.sourceCode > span:empty { height: 1.2em; }
 code.sourceCode > span { color: inherit; text-decoration: inherit; }
-code.sourceCode > span:empty { height: 1.2em; }
-.sourceCode { overflow: visible; }
-code.sourceCode { white-space: pre; position: relative; }
 div.sourceCode { margin: 1em 0; }
 pre.sourceCode { margin: 0; }
 @media screen {
 div.sourceCode { overflow: auto; }
 }
 @media print {
-code.sourceCode { white-space: pre-wrap; }
-code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
+pre > code.sourceCode { white-space: pre-wrap; }
+pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
 }
 pre.numberSource code
   { counter-reset: source-line 0; }
@@ -46,7 +45,7 @@
 div.sourceCode
   {   }
 @media screen {
-code.sourceCode > span > a:first-child::before { text-decoration: underline; }
+pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
 }
 code span.al { color: #ff0000; font-weight: bold; } /* Alert */
 code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
@@ -251,7 +250,7 @@
 
 <body>
 <header>
-    <p><a href="..\..\index.html">Back to Index</a></p>
+    <p><a href="../../index.html">Back to Index</a></p>
       <p>
   Update: 2020-05-14
   </p>
@@ -266,6 +265,7 @@
   <li><a href="#windows">Windows</a></li>
   <li><a href="#linux">Linux</a></li>
   </ul></li>
+  <li><a href="#色の設定">色の設定</a></li>
   <li><a href="#操作">操作</a></li>
   <li><a href="#注意">注意</a></li>
   <li><a href="#ウェーブテーブルの仕様">ウェーブテーブルの仕様</a></li>
@@ -307,7 +307,7 @@ <h1 id="cubicpadsynth">CubicPadSynth</h1>
 <p><img src="img/cubicpadsynth.png" /></p>
 <p><ruby>CubicPadSynth<rt>キュービック パッドシンセ</rt></ruby> は PADsynth アルゴリズムを使ってオシレータのウェーブテーブルを生成するシンセサイザです。キュービック補間を使っているので、可聴域以下の低い周波数でもわりと滑らかな音が出ます。波形を直接描画できる LFO もついています</p>
 <ul>
-<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LatticeReverb0.1.0/CubicPadSynth0.1.5.zip">CubicPadSynth 0.1.5 をダウンロード - VST® 3 (github.com)</a> <img
+<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/ColorConfig/CubicPadSynth0.1.6.zip">CubicPadSynth 0.1.6 をダウンロード - VST® 3 (github.com)</a> <img
 src="img/VST_Compatible_Logo_Steinberg_negative.svg"
 alt="VST compatible logo."
 width="60px"
@@ -353,6 +353,57 @@ <h3 id="linux">Linux</h3>
 <li><a href="https://steinbergmedia.github.io/vst3_doc/vstinterfaces/linuxSetup.html">VST 3 Interfaces: Setup Linux for building VST 3 Plug-ins</a></li>
 </ul>
 <p>REAPER の Linux 版がプラグインを認識しないときは <code>~/.config/REAPER/reaper-vstplugins64.ini</code> を削除して REAPER を再起動してみてください。</p>
+<h2 id="色の設定">色の設定</h2>
+<p>初回設定時は手動で次のファイルを作成してください。</p>
+<ul>
+<li>Windows では <code>/Users/ユーザ名/AppData/Roaming/UhhyouPlugins/style/style.json</code> 。</li>
+<li>Linux では <code>$XDG_CONFIG_HOME/UhhyouPlugins/style/style.json</code> 。
+<ul>
+<li><code>$XDG_CONFIG_HOME</code> が空のときは <code>$HOME/.config/UhhyouPlugins/style/style.json</code> 。</li>
+</ul></li>
+<li>macOS では <code>/Users/$USERNAME/Library/Preferences/UhhyouPlugins/style/style.json</code> 。</li>
+</ul>
+<p>既存の色のテーマを次のリンクに掲載しています。 <code>style.json</code> にコピペして使ってください。</p>
+<ul>
+<li><a href="https://github.com/ryukau/LV2Plugins/tree/master/style/themes">LV2Plugins/style/themes at master · ryukau/LV2Plugins · GitHub</a></li>
+</ul>
+<p><code>style.json</code> の設定例です。</p>
+<div class="sourceCode" id="cb2"><pre class="sourceCode json"><code class="sourceCode json"><span id="cb2-1"><a href="#cb2-1"></a><span class="fu">{</span></span>
+<span id="cb2-2"><a href="#cb2-2"></a>  <span class="dt">&quot;foreground&quot;</span><span class="fu">:</span> <span class="st">&quot;#ffffff&quot;</span><span class="fu">,</span></span>
+<span id="cb2-3"><a href="#cb2-3"></a>  <span class="dt">&quot;foregroundButtonOn&quot;</span><span class="fu">:</span> <span class="st">&quot;#000000&quot;</span><span class="fu">,</span></span>
+<span id="cb2-4"><a href="#cb2-4"></a>  <span class="dt">&quot;background&quot;</span><span class="fu">:</span> <span class="st">&quot;#353d3e&quot;</span><span class="fu">,</span></span>
+<span id="cb2-5"><a href="#cb2-5"></a>  <span class="dt">&quot;boxBackground&quot;</span><span class="fu">:</span> <span class="st">&quot;#000000&quot;</span><span class="fu">,</span></span>
+<span id="cb2-6"><a href="#cb2-6"></a>  <span class="dt">&quot;border&quot;</span><span class="fu">:</span> <span class="st">&quot;#808080&quot;</span><span class="fu">,</span></span>
+<span id="cb2-7"><a href="#cb2-7"></a>  <span class="dt">&quot;unfocused&quot;</span><span class="fu">:</span> <span class="st">&quot;#b8a65c&quot;</span><span class="fu">,</span></span>
+<span id="cb2-8"><a href="#cb2-8"></a>  <span class="dt">&quot;highlightMain&quot;</span><span class="fu">:</span> <span class="st">&quot;#368a94&quot;</span><span class="fu">,</span></span>
+<span id="cb2-9"><a href="#cb2-9"></a>  <span class="dt">&quot;highlightAccent&quot;</span><span class="fu">:</span> <span class="st">&quot;#2c8a58&quot;</span><span class="fu">,</span></span>
+<span id="cb2-10"><a href="#cb2-10"></a>  <span class="dt">&quot;highlightButton&quot;</span><span class="fu">:</span> <span class="st">&quot;#a77842&quot;</span><span class="fu">,</span></span>
+<span id="cb2-11"><a href="#cb2-11"></a>  <span class="dt">&quot;highlightWarning&quot;</span><span class="fu">:</span> <span class="st">&quot;#8742a7&quot;</span><span class="fu">,</span></span>
+<span id="cb2-12"><a href="#cb2-12"></a>  <span class="dt">&quot;overlay&quot;</span><span class="fu">:</span> <span class="st">&quot;#ffffff88&quot;</span><span class="fu">,</span></span>
+<span id="cb2-13"><a href="#cb2-13"></a>  <span class="dt">&quot;overlayHighlight&quot;</span><span class="fu">:</span> <span class="st">&quot;#00ff0033&quot;</span></span>
+<span id="cb2-14"><a href="#cb2-14"></a><span class="fu">}</span></span></code></pre></div>
+<p>16 進数カラーコードを使っています。</p>
+<ul>
+<li>6 桁の色は RGB 。</li>
+<li>8 桁の色は RGBA 。</li>
+</ul>
+<p>プラグインはカラーコードの 1 つめのの文字を無視します。よって <code>?102938</code> や <code>11335577</code> も有効なカラーコードです。</p>
+<p>2 文字目以降のカラーコードの値に <code>0-9a-f</code> 以外の文字を使わないでください。</p>
+<p>以下は設定できる色の一覧です。設定に抜けがあるとデフォルトの色が使われます。</p>
+<ul>
+<li><code>foreground</code>: 文字の色。</li>
+<li><code>foregroundButtonOn</code>: オンになっているボタンの文字の色。 <code>foreground</code> か <code>boxBackground</code> のいずれかと同じ値にすることを推奨します。</li>
+<li><code>background</code>: 背景色。</li>
+<li><code>boxBackground</code>: 矩形の UI 部品の内側の背景色。</li>
+<li><code>border</code>: <ruby>縁<rt>ふち</rt></ruby>の色。</li>
+<li><code>unfocused</code>: つまみがフォーカスされていないときの色。</li>
+<li><code>highlightMain</code>: フォーカスされたときの色。スライダの値の表示にも使用されます。</li>
+<li><code>highlightAccent</code>: フォーカスされたときの色。一部のプラグインをカラフルにするために使用されます。</li>
+<li><code>highlightButton</code>: ボタンがフォーカスされたときの色。</li>
+<li><code>highlightWarning</code>: 変更に注意を要する UI がフォーカスされたときの色。</li>
+<li><code>overlay</code>: オーバーレイの色。</li>
+<li><code>overlayHighlight</code>: フォーカスを示すオーバーレイの色。</li>
+</ul>
 <h2 id="操作">操作</h2>
 <p>操作できる箇所を右クリックすると DAW によって提供されているコンテキストメニューを開くことができます。</p>
 <p>つまみとスライダーでは次の操作ができます。</p>
@@ -768,6 +819,10 @@ <h4 id="refresh-table">Refresh Table</h4>
 <p>ウェーブテーブルの更新中は音が止まるので注意してください。発音中のノートも全て停止します。</p>
 <h2 id="チェンジログ">チェンジログ</h2>
 <ul>
+<li>0.1.6
+<ul>
+<li>カラーコンフィグを追加。</li>
+</ul></li>
 <li>0.1.5
 <ul>
 <li>パラメータの補間を可変サイズのオーディオバッファでも機能する以前の手法に巻き戻した。</li>
@@ -797,6 +852,7 @@ <h2 id="チェンジログ">チェンジログ</h2>
 </ul>
 <h3 id="旧バージョン">旧バージョン</h3>
 <ul>
+<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LatticeReverb0.1.0/CubicPadSynth0.1.5.zip">CubicPadSynth 0.1.5 - VST 3 (github.com)</a></li>
 <li><a href="https://github.com/ryukau/VSTPlugins/releases/download/WavetableInitializationBugFix/CubicPadSynth0.1.4.zip">CubicPadSynth 0.1.4 - VST 3 (github.com)</a></li>
 <li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LightPadSynth0.1.0/CubicPadSynth0.1.3.zip">CubicPadSynth 0.1.3 - VST 3 (github.com)</a></li>
 <li><a href="https://github.com/ryukau/VSTPlugins/releases/download/BarBoxFocusFix/CubicPadSynth0.1.2.zip">CubicPadSynth 0.1.2 - VST 3 (github.com)</a></li>
@@ -811,7 +867,7 @@ <h3 id="vst-について">VST® について</h3>
 <p>VST is a trademark of Steinberg Media Technologies GmbH, registered in Europe and other countries.</p>
 
 <footer>
-    <p><a href="..\..\index.html">Back to Index</a></p>
+    <p><a href="../../index.html">Back to Index</a></p>
   </footer>
 </body>
 
diff --git a/docs/manual/EnvelopedSine/EnvelopedSine_en.html b/docs/manual/EnvelopedSine/EnvelopedSine_en.html
index e05c8f5b..b56407ca 100644
--- a/docs/manual/EnvelopedSine/EnvelopedSine_en.html
+++ b/docs/manual/EnvelopedSine/EnvelopedSine_en.html
@@ -14,19 +14,18 @@
 div.column { display: inline-block; vertical-align: top; width: 50%; }
 </style>
 <style>
-code.sourceCode > span { display: inline-block; line-height: 1.25; }
+pre > code.sourceCode { white-space: pre; position: relative; }
+pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
+pre > code.sourceCode > span:empty { height: 1.2em; }
 code.sourceCode > span { color: inherit; text-decoration: inherit; }
-code.sourceCode > span:empty { height: 1.2em; }
-.sourceCode { overflow: visible; }
-code.sourceCode { white-space: pre; position: relative; }
 div.sourceCode { margin: 1em 0; }
 pre.sourceCode { margin: 0; }
 @media screen {
 div.sourceCode { overflow: auto; }
 }
 @media print {
-code.sourceCode { white-space: pre-wrap; }
-code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
+pre > code.sourceCode { white-space: pre-wrap; }
+pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
 }
 pre.numberSource code
   { counter-reset: source-line 0; }
@@ -46,7 +45,7 @@
 div.sourceCode
   {   }
 @media screen {
-code.sourceCode > span > a:first-child::before { text-decoration: underline; }
+pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
 }
 code span.al { color: #ff0000; font-weight: bold; } /* Alert */
 code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
@@ -251,7 +250,7 @@
 
 <body>
 <header>
-    <p><a href="..\..\index.html">Back to Index</a></p>
+    <p><a href="../../index.html">Back to Index</a></p>
       <p>
   Update: 2020-05-14
   </p>
@@ -266,6 +265,7 @@
   <li><a href="#windows-specific">Windows Specific</a></li>
   <li><a href="#linux-specific">Linux Specific</a></li>
   </ul></li>
+  <li><a href="#color-configuration">Color Configuration</a></li>
   <li><a href="#controls">Controls</a></li>
   <li><a href="#block-diagram">Block Diagram</a></li>
   <li><a href="#parameters">Parameters</a><ul>
@@ -292,7 +292,7 @@ <h1 id="envelopedsine">EnvelopedSine</h1>
 <p><img src="img/envelopedsine.png" /></p>
 <p>EnvelopedSine is an additive synthesizer that computes 64 sine waves for each note. Difference to IterativeSinCluster is that this synth has AD envelope and saturator for each oscillator. EnvelopedSine is better suited for percussive sounds.</p>
 <ul>
-<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LatticeReverb0.1.0/EnvelopedSine0.1.6.zip">Download EnvelopedSine 0.1.6 - VST® 3 (github.com)</a> <img
+<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/ColorConfig/EnvelopedSine0.1.7.zip">Download EnvelopedSine 0.1.7 - VST® 3 (github.com)</a> <img
 src="img/VST_Compatible_Logo_Steinberg_negative.svg"
 alt="VST compatible logo."
 width="60px"
@@ -338,6 +338,52 @@ <h3 id="linux-specific">Linux Specific</h3>
 <li><a href="https://steinbergmedia.github.io/vst3_doc/vstinterfaces/linuxSetup.html">VST 3 Interfaces: Setup Linux for building VST 3 Plug-ins</a></li>
 </ul>
 <p>REAPER on Linux may not recognize the plugin. A workaround is to delete a file <code>~/.config/REAPER/reaper-vstplugins64.ini</code> and restart REAPER.</p>
+<h2 id="color-configuration">Color Configuration</h2>
+<p>At first time, create color config file to:</p>
+<ul>
+<li><code>/Users/USERNAME/AppData/Roaming/UhhyouPlugins/style/style.json</code> on Windows.</li>
+<li><code>$XDG_CONFIG_HOME/UhhyouPlugins/style/style.json</code> on Linux.
+<ul>
+<li>If <code>$XDG_CONFIG_HOME</code> is empty, make <code>$HOME/.config/UhhyouPlugins/style/style.json</code>.</li>
+</ul></li>
+<li><code>/Users/$USERNAME/Library/Preferences/UhhyouPlugins/style/style.json</code> on macOS.</li>
+</ul>
+<p>Below is a example of <code>style.json</code>.</p>
+<div class="sourceCode" id="cb2"><pre class="sourceCode json"><code class="sourceCode json"><span id="cb2-1"><a href="#cb2-1"></a><span class="fu">{</span></span>
+<span id="cb2-2"><a href="#cb2-2"></a>  <span class="dt">&quot;foreground&quot;</span><span class="fu">:</span> <span class="st">&quot;#ffffff&quot;</span><span class="fu">,</span></span>
+<span id="cb2-3"><a href="#cb2-3"></a>  <span class="dt">&quot;foregroundButtonOn&quot;</span><span class="fu">:</span> <span class="st">&quot;#000000&quot;</span><span class="fu">,</span></span>
+<span id="cb2-4"><a href="#cb2-4"></a>  <span class="dt">&quot;background&quot;</span><span class="fu">:</span> <span class="st">&quot;#353d3e&quot;</span><span class="fu">,</span></span>
+<span id="cb2-5"><a href="#cb2-5"></a>  <span class="dt">&quot;boxBackground&quot;</span><span class="fu">:</span> <span class="st">&quot;#000000&quot;</span><span class="fu">,</span></span>
+<span id="cb2-6"><a href="#cb2-6"></a>  <span class="dt">&quot;border&quot;</span><span class="fu">:</span> <span class="st">&quot;#808080&quot;</span><span class="fu">,</span></span>
+<span id="cb2-7"><a href="#cb2-7"></a>  <span class="dt">&quot;unfocused&quot;</span><span class="fu">:</span> <span class="st">&quot;#b8a65c&quot;</span><span class="fu">,</span></span>
+<span id="cb2-8"><a href="#cb2-8"></a>  <span class="dt">&quot;highlightMain&quot;</span><span class="fu">:</span> <span class="st">&quot;#368a94&quot;</span><span class="fu">,</span></span>
+<span id="cb2-9"><a href="#cb2-9"></a>  <span class="dt">&quot;highlightAccent&quot;</span><span class="fu">:</span> <span class="st">&quot;#2c8a58&quot;</span><span class="fu">,</span></span>
+<span id="cb2-10"><a href="#cb2-10"></a>  <span class="dt">&quot;highlightButton&quot;</span><span class="fu">:</span> <span class="st">&quot;#a77842&quot;</span><span class="fu">,</span></span>
+<span id="cb2-11"><a href="#cb2-11"></a>  <span class="dt">&quot;highlightWarning&quot;</span><span class="fu">:</span> <span class="st">&quot;#8742a7&quot;</span><span class="fu">,</span></span>
+<span id="cb2-12"><a href="#cb2-12"></a>  <span class="dt">&quot;overlay&quot;</span><span class="fu">:</span> <span class="st">&quot;#ffffff88&quot;</span><span class="fu">,</span></span>
+<span id="cb2-13"><a href="#cb2-13"></a>  <span class="dt">&quot;overlayHighlight&quot;</span><span class="fu">:</span> <span class="st">&quot;#00ff0033&quot;</span></span>
+<span id="cb2-14"><a href="#cb2-14"></a><span class="fu">}</span></span></code></pre></div>
+<p>Hex color codes are used.</p>
+<ul>
+<li>6 digit color is RGB.</li>
+<li>8 digit color is RGBA.</li>
+</ul>
+<p>First letter <code>#</code> is conventional. Plugins ignore the first letter of color code, thus <code>?102938</code>, <code>11335577</code> are valid.</p>
+<p>Do not use characters outside of <code>0-9a-f</code> for color value.</p>
+<ul>
+<li><code>foreground</code>: Text color.</li>
+<li><code>foregroundButtonOn</code>: Text color of active toggle button. Recommend to use the same value of <code>foreground</code> or <code>boxBackground</code>.</li>
+<li><code>background</code>: Background color.</li>
+<li><code>boxBackground</code>: Background color of inside of box shaped components (Barbox, Button, Checkbox, OptionMenu, TextKnob, VSlider).</li>
+<li><code>border</code>: Border color of box shaped components.</li>
+<li><code>unfocused</code>: Color to fill unfocused components. Currently, only used for knobs.</li>
+<li><code>highlightMain</code>: Color to indicate focus is on a component. Highlight colors are also used for value of slider components (BarBox and VSlider).- {new_version}{change_log}</li>
+<li><code>highlightAccent</code>: Same as <code>highlightMain</code>. Used for cosmetics.</li>
+<li><code>highlightButton</code>: Color to indicate focus is on a button.</li>
+<li><code>highlightWarning</code>: Same as <code>highlightMain</code>, but only used for parameters which requires extra caution.</li>
+<li><code>overlay</code>: Overlay color. Used to overlay texts and indicators.</li>
+<li><code>overlayHighlight</code>: Overlay color to highlight current focus.</li>
+</ul>
 <h2 id="controls">Controls</h2>
 <p>Knob and slider can do:</p>
 <ul>
@@ -576,6 +622,10 @@ <h3 id="phaser">Phaser</h3>
 </dl>
 <h2 id="change-log">Change Log</h2>
 <ul>
+<li>0.1.7
+<ul>
+<li>Added color configuration.</li>
+</ul></li>
 <li>0.1.6
 <ul>
 <li>Reverted parameter smoother to the old one which works with variable size audio buffer.</li>
@@ -608,6 +658,7 @@ <h2 id="change-log">Change Log</h2>
 </ul>
 <h3 id="old-versions">Old Versions</h3>
 <ul>
+<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LatticeReverb0.1.0/EnvelopedSine0.1.6.zip">EnvelopedSine 0.1.6 - VST 3 (github.com)</a></li>
 <li><a href="https://github.com/ryukau/VSTPlugins/releases/download/BarBoxFocusFix/EnvelopedSine0.1.5.zip">EnvelopedSine 0.1.5 - VST 3 (github.com)</a></li>
 <li><a href="https://github.com/ryukau/VSTPlugins/releases/download/DrawStringFix/EnvelopedSine0.1.4.zip">EnvelopedSine 0.1.4 - VST 3 (github.com)</a></li>
 <li><a href="https://github.com/ryukau/VSTPlugins/releases/download/EsPhaser0.1.0/EnvelopedSine0.1.2.zip">EnvelopedSine 0.1.2 - VST 3 (github.com)</a></li>
@@ -624,7 +675,7 @@ <h3 id="about-vst">About VST</h3>
 <p>VST is a trademark of Steinberg Media Technologies GmbH, registered in Europe and other countries.</p>
 
 <footer>
-    <p><a href="..\..\index.html">Back to Index</a></p>
+    <p><a href="../../index.html">Back to Index</a></p>
   </footer>
 </body>
 
diff --git a/docs/manual/EnvelopedSine/EnvelopedSine_ja.html b/docs/manual/EnvelopedSine/EnvelopedSine_ja.html
index 7ee7e96a..756e0d62 100644
--- a/docs/manual/EnvelopedSine/EnvelopedSine_ja.html
+++ b/docs/manual/EnvelopedSine/EnvelopedSine_ja.html
@@ -14,19 +14,18 @@
 div.column { display: inline-block; vertical-align: top; width: 50%; }
 </style>
 <style>
-code.sourceCode > span { display: inline-block; line-height: 1.25; }
+pre > code.sourceCode { white-space: pre; position: relative; }
+pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
+pre > code.sourceCode > span:empty { height: 1.2em; }
 code.sourceCode > span { color: inherit; text-decoration: inherit; }
-code.sourceCode > span:empty { height: 1.2em; }
-.sourceCode { overflow: visible; }
-code.sourceCode { white-space: pre; position: relative; }
 div.sourceCode { margin: 1em 0; }
 pre.sourceCode { margin: 0; }
 @media screen {
 div.sourceCode { overflow: auto; }
 }
 @media print {
-code.sourceCode { white-space: pre-wrap; }
-code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
+pre > code.sourceCode { white-space: pre-wrap; }
+pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
 }
 pre.numberSource code
   { counter-reset: source-line 0; }
@@ -46,7 +45,7 @@
 div.sourceCode
   {   }
 @media screen {
-code.sourceCode > span > a:first-child::before { text-decoration: underline; }
+pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
 }
 code span.al { color: #ff0000; font-weight: bold; } /* Alert */
 code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
@@ -251,7 +250,7 @@
 
 <body>
 <header>
-    <p><a href="..\..\index.html">Back to Index</a></p>
+    <p><a href="../../index.html">Back to Index</a></p>
       <p>
   Update: 2020-05-14
   </p>
@@ -266,6 +265,7 @@
   <li><a href="#windows">Windows</a></li>
   <li><a href="#linux">Linux</a></li>
   </ul></li>
+  <li><a href="#色の設定">色の設定</a></li>
   <li><a href="#操作">操作</a></li>
   <li><a href="#ブロック線図">ブロック線図</a></li>
   <li><a href="#パラメータ">パラメータ</a><ul>
@@ -292,7 +292,7 @@ <h1 id="envelopedsine">EnvelopedSine</h1>
 <p><img src="img/envelopedsine.png" /></p>
 <p><ruby>EnvelopedSine<rt>エンベロープド サイン</rt></ruby>はノート 1 つあたり 64 のサイン波を計算する加算合成シンセサイザです。各サイン波に AD エンベロープとサチュレータがついているので IterativeSinCluster よりもパーカッシブな音が得意です。</p>
 <ul>
-<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LatticeReverb0.1.0/EnvelopedSine0.1.6.zip">EnvelopedSine 0.1.6 をダウンロード - VST® 3 (github.com)</a> <img
+<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/ColorConfig/EnvelopedSine0.1.7.zip">EnvelopedSine 0.1.7 をダウンロード - VST® 3 (github.com)</a> <img
 src="img/VST_Compatible_Logo_Steinberg_negative.svg"
 alt="VST compatible logo."
 width="60px"
@@ -338,6 +338,57 @@ <h3 id="linux">Linux</h3>
 <li><a href="https://steinbergmedia.github.io/vst3_doc/vstinterfaces/linuxSetup.html">VST 3 Interfaces: Setup Linux for building VST 3 Plug-ins</a></li>
 </ul>
 <p>REAPER の Linux 版がプラグインを認識しないときは <code>~/.config/REAPER/reaper-vstplugins64.ini</code> を削除して REAPER を再起動してみてください。</p>
+<h2 id="色の設定">色の設定</h2>
+<p>初回設定時は手動で次のファイルを作成してください。</p>
+<ul>
+<li>Windows では <code>/Users/ユーザ名/AppData/Roaming/UhhyouPlugins/style/style.json</code> 。</li>
+<li>Linux では <code>$XDG_CONFIG_HOME/UhhyouPlugins/style/style.json</code> 。
+<ul>
+<li><code>$XDG_CONFIG_HOME</code> が空のときは <code>$HOME/.config/UhhyouPlugins/style/style.json</code> 。</li>
+</ul></li>
+<li>macOS では <code>/Users/$USERNAME/Library/Preferences/UhhyouPlugins/style/style.json</code> 。</li>
+</ul>
+<p>既存の色のテーマを次のリンクに掲載しています。 <code>style.json</code> にコピペして使ってください。</p>
+<ul>
+<li><a href="https://github.com/ryukau/LV2Plugins/tree/master/style/themes">LV2Plugins/style/themes at master · ryukau/LV2Plugins · GitHub</a></li>
+</ul>
+<p><code>style.json</code> の設定例です。</p>
+<div class="sourceCode" id="cb2"><pre class="sourceCode json"><code class="sourceCode json"><span id="cb2-1"><a href="#cb2-1"></a><span class="fu">{</span></span>
+<span id="cb2-2"><a href="#cb2-2"></a>  <span class="dt">&quot;foreground&quot;</span><span class="fu">:</span> <span class="st">&quot;#ffffff&quot;</span><span class="fu">,</span></span>
+<span id="cb2-3"><a href="#cb2-3"></a>  <span class="dt">&quot;foregroundButtonOn&quot;</span><span class="fu">:</span> <span class="st">&quot;#000000&quot;</span><span class="fu">,</span></span>
+<span id="cb2-4"><a href="#cb2-4"></a>  <span class="dt">&quot;background&quot;</span><span class="fu">:</span> <span class="st">&quot;#353d3e&quot;</span><span class="fu">,</span></span>
+<span id="cb2-5"><a href="#cb2-5"></a>  <span class="dt">&quot;boxBackground&quot;</span><span class="fu">:</span> <span class="st">&quot;#000000&quot;</span><span class="fu">,</span></span>
+<span id="cb2-6"><a href="#cb2-6"></a>  <span class="dt">&quot;border&quot;</span><span class="fu">:</span> <span class="st">&quot;#808080&quot;</span><span class="fu">,</span></span>
+<span id="cb2-7"><a href="#cb2-7"></a>  <span class="dt">&quot;unfocused&quot;</span><span class="fu">:</span> <span class="st">&quot;#b8a65c&quot;</span><span class="fu">,</span></span>
+<span id="cb2-8"><a href="#cb2-8"></a>  <span class="dt">&quot;highlightMain&quot;</span><span class="fu">:</span> <span class="st">&quot;#368a94&quot;</span><span class="fu">,</span></span>
+<span id="cb2-9"><a href="#cb2-9"></a>  <span class="dt">&quot;highlightAccent&quot;</span><span class="fu">:</span> <span class="st">&quot;#2c8a58&quot;</span><span class="fu">,</span></span>
+<span id="cb2-10"><a href="#cb2-10"></a>  <span class="dt">&quot;highlightButton&quot;</span><span class="fu">:</span> <span class="st">&quot;#a77842&quot;</span><span class="fu">,</span></span>
+<span id="cb2-11"><a href="#cb2-11"></a>  <span class="dt">&quot;highlightWarning&quot;</span><span class="fu">:</span> <span class="st">&quot;#8742a7&quot;</span><span class="fu">,</span></span>
+<span id="cb2-12"><a href="#cb2-12"></a>  <span class="dt">&quot;overlay&quot;</span><span class="fu">:</span> <span class="st">&quot;#ffffff88&quot;</span><span class="fu">,</span></span>
+<span id="cb2-13"><a href="#cb2-13"></a>  <span class="dt">&quot;overlayHighlight&quot;</span><span class="fu">:</span> <span class="st">&quot;#00ff0033&quot;</span></span>
+<span id="cb2-14"><a href="#cb2-14"></a><span class="fu">}</span></span></code></pre></div>
+<p>16 進数カラーコードを使っています。</p>
+<ul>
+<li>6 桁の色は RGB 。</li>
+<li>8 桁の色は RGBA 。</li>
+</ul>
+<p>プラグインはカラーコードの 1 つめのの文字を無視します。よって <code>?102938</code> や <code>11335577</code> も有効なカラーコードです。</p>
+<p>2 文字目以降のカラーコードの値に <code>0-9a-f</code> 以外の文字を使わないでください。</p>
+<p>以下は設定できる色の一覧です。設定に抜けがあるとデフォルトの色が使われます。</p>
+<ul>
+<li><code>foreground</code>: 文字の色。</li>
+<li><code>foregroundButtonOn</code>: オンになっているボタンの文字の色。 <code>foreground</code> か <code>boxBackground</code> のいずれかと同じ値にすることを推奨します。</li>
+<li><code>background</code>: 背景色。</li>
+<li><code>boxBackground</code>: 矩形の UI 部品の内側の背景色。</li>
+<li><code>border</code>: <ruby>縁<rt>ふち</rt></ruby>の色。</li>
+<li><code>unfocused</code>: つまみがフォーカスされていないときの色。</li>
+<li><code>highlightMain</code>: フォーカスされたときの色。スライダの値の表示にも使用されます。</li>
+<li><code>highlightAccent</code>: フォーカスされたときの色。一部のプラグインをカラフルにするために使用されます。</li>
+<li><code>highlightButton</code>: ボタンがフォーカスされたときの色。</li>
+<li><code>highlightWarning</code>: 変更に注意を要する UI がフォーカスされたときの色。</li>
+<li><code>overlay</code>: オーバーレイの色。</li>
+<li><code>overlayHighlight</code>: フォーカスを示すオーバーレイの色。</li>
+</ul>
 <h2 id="操作">操作</h2>
 <p>操作できる箇所を右クリックすると DAW によって提供されているコンテキストメニューを開くことができます。</p>
 <p>つまみとスライダーでは次の操作ができます。</p>
@@ -577,6 +628,10 @@ <h3 id="phaser">Phaser</h3>
 </dl>
 <h2 id="チェンジログ">チェンジログ</h2>
 <ul>
+<li>0.1.7
+<ul>
+<li>カラーコンフィグを追加。</li>
+</ul></li>
 <li>0.1.6
 <ul>
 <li>パラメータの補間を可変サイズのオーディオバッファでも機能する以前の手法に巻き戻した。</li>
@@ -609,6 +664,7 @@ <h2 id="チェンジログ">チェンジログ</h2>
 </ul>
 <h3 id="旧バージョン">旧バージョン</h3>
 <ul>
+<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LatticeReverb0.1.0/EnvelopedSine0.1.6.zip">EnvelopedSine 0.1.6 - VST 3 (github.com)</a></li>
 <li><a href="https://github.com/ryukau/VSTPlugins/releases/download/BarBoxFocusFix/EnvelopedSine0.1.5.zip">EnvelopedSine 0.1.5 - VST 3 (github.com)</a></li>
 <li><a href="https://github.com/ryukau/VSTPlugins/releases/download/DrawStringFix/EnvelopedSine0.1.4.zip">EnvelopedSine 0.1.4 - VST 3 (github.com)</a></li>
 <li><a href="https://github.com/ryukau/VSTPlugins/releases/download/EsPhaser0.1.0/EnvelopedSine0.1.2.zip">EnvelopedSine 0.1.2 - VST 3 (github.com)</a></li>
@@ -624,7 +680,7 @@ <h3 id="vst-について">VST® について</h3>
 <p>VST is a trademark of Steinberg Media Technologies GmbH, registered in Europe and other countries.</p>
 
 <footer>
-    <p><a href="..\..\index.html">Back to Index</a></p>
+    <p><a href="../../index.html">Back to Index</a></p>
   </footer>
 </body>
 
diff --git a/docs/manual/EsPhaser/EsPhaser_en.html b/docs/manual/EsPhaser/EsPhaser_en.html
index 778467ab..5f58c882 100644
--- a/docs/manual/EsPhaser/EsPhaser_en.html
+++ b/docs/manual/EsPhaser/EsPhaser_en.html
@@ -14,19 +14,18 @@
 div.column { display: inline-block; vertical-align: top; width: 50%; }
 </style>
 <style>
-code.sourceCode > span { display: inline-block; line-height: 1.25; }
+pre > code.sourceCode { white-space: pre; position: relative; }
+pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
+pre > code.sourceCode > span:empty { height: 1.2em; }
 code.sourceCode > span { color: inherit; text-decoration: inherit; }
-code.sourceCode > span:empty { height: 1.2em; }
-.sourceCode { overflow: visible; }
-code.sourceCode { white-space: pre; position: relative; }
 div.sourceCode { margin: 1em 0; }
 pre.sourceCode { margin: 0; }
 @media screen {
 div.sourceCode { overflow: auto; }
 }
 @media print {
-code.sourceCode { white-space: pre-wrap; }
-code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
+pre > code.sourceCode { white-space: pre-wrap; }
+pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
 }
 pre.numberSource code
   { counter-reset: source-line 0; }
@@ -46,7 +45,7 @@
 div.sourceCode
   {   }
 @media screen {
-code.sourceCode > span > a:first-child::before { text-decoration: underline; }
+pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
 }
 code span.al { color: #ff0000; font-weight: bold; } /* Alert */
 code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
@@ -251,7 +250,7 @@
 
 <body>
 <header>
-    <p><a href="..\..\index.html">Back to Index</a></p>
+    <p><a href="../../index.html">Back to Index</a></p>
       <p>
   Update: 2020-05-14
   </p>
@@ -266,6 +265,7 @@
   <li><a href="#windows-specific">Windows Specific</a></li>
   <li><a href="#linux-specific">Linux Specific</a></li>
   </ul></li>
+  <li><a href="#color-configuration">Color Configuration</a></li>
   <li><a href="#controls">Controls</a></li>
   <li><a href="#caution">Caution</a></li>
   <li><a href="#block-diagram">Block Diagram</a></li>
@@ -285,7 +285,7 @@ <h1 id="esphaser">EsPhaser</h1>
 <p><img src="img/esphaser.png" /></p>
 <p>EsPhaser is a phaser with up to 4096 stages of order 2 Thiran all-pass filters. This is the same phaser used in EnvelopedSine.</p>
 <ul>
-<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LatticeReverb0.1.0/EsPhaser0.1.3.zip">Download EsPhaser 0.1.3 - VST® 3 (github.com)</a> <img
+<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/ColorConfig/EsPhaser0.1.4.zip">Download EsPhaser 0.1.4 - VST® 3 (github.com)</a> <img
 src="img/VST_Compatible_Logo_Steinberg_negative.svg"
 alt="VST compatible logo."
 width="60px"
@@ -331,6 +331,52 @@ <h3 id="linux-specific">Linux Specific</h3>
 <li><a href="https://steinbergmedia.github.io/vst3_doc/vstinterfaces/linuxSetup.html">VST 3 Interfaces: Setup Linux for building VST 3 Plug-ins</a></li>
 </ul>
 <p>REAPER on Linux may not recognize the plugin. A workaround is to delete a file <code>~/.config/REAPER/reaper-vstplugins64.ini</code> and restart REAPER.</p>
+<h2 id="color-configuration">Color Configuration</h2>
+<p>At first time, create color config file to:</p>
+<ul>
+<li><code>/Users/USERNAME/AppData/Roaming/UhhyouPlugins/style/style.json</code> on Windows.</li>
+<li><code>$XDG_CONFIG_HOME/UhhyouPlugins/style/style.json</code> on Linux.
+<ul>
+<li>If <code>$XDG_CONFIG_HOME</code> is empty, make <code>$HOME/.config/UhhyouPlugins/style/style.json</code>.</li>
+</ul></li>
+<li><code>/Users/$USERNAME/Library/Preferences/UhhyouPlugins/style/style.json</code> on macOS.</li>
+</ul>
+<p>Below is a example of <code>style.json</code>.</p>
+<div class="sourceCode" id="cb2"><pre class="sourceCode json"><code class="sourceCode json"><span id="cb2-1"><a href="#cb2-1"></a><span class="fu">{</span></span>
+<span id="cb2-2"><a href="#cb2-2"></a>  <span class="dt">&quot;foreground&quot;</span><span class="fu">:</span> <span class="st">&quot;#ffffff&quot;</span><span class="fu">,</span></span>
+<span id="cb2-3"><a href="#cb2-3"></a>  <span class="dt">&quot;foregroundButtonOn&quot;</span><span class="fu">:</span> <span class="st">&quot;#000000&quot;</span><span class="fu">,</span></span>
+<span id="cb2-4"><a href="#cb2-4"></a>  <span class="dt">&quot;background&quot;</span><span class="fu">:</span> <span class="st">&quot;#353d3e&quot;</span><span class="fu">,</span></span>
+<span id="cb2-5"><a href="#cb2-5"></a>  <span class="dt">&quot;boxBackground&quot;</span><span class="fu">:</span> <span class="st">&quot;#000000&quot;</span><span class="fu">,</span></span>
+<span id="cb2-6"><a href="#cb2-6"></a>  <span class="dt">&quot;border&quot;</span><span class="fu">:</span> <span class="st">&quot;#808080&quot;</span><span class="fu">,</span></span>
+<span id="cb2-7"><a href="#cb2-7"></a>  <span class="dt">&quot;unfocused&quot;</span><span class="fu">:</span> <span class="st">&quot;#b8a65c&quot;</span><span class="fu">,</span></span>
+<span id="cb2-8"><a href="#cb2-8"></a>  <span class="dt">&quot;highlightMain&quot;</span><span class="fu">:</span> <span class="st">&quot;#368a94&quot;</span><span class="fu">,</span></span>
+<span id="cb2-9"><a href="#cb2-9"></a>  <span class="dt">&quot;highlightAccent&quot;</span><span class="fu">:</span> <span class="st">&quot;#2c8a58&quot;</span><span class="fu">,</span></span>
+<span id="cb2-10"><a href="#cb2-10"></a>  <span class="dt">&quot;highlightButton&quot;</span><span class="fu">:</span> <span class="st">&quot;#a77842&quot;</span><span class="fu">,</span></span>
+<span id="cb2-11"><a href="#cb2-11"></a>  <span class="dt">&quot;highlightWarning&quot;</span><span class="fu">:</span> <span class="st">&quot;#8742a7&quot;</span><span class="fu">,</span></span>
+<span id="cb2-12"><a href="#cb2-12"></a>  <span class="dt">&quot;overlay&quot;</span><span class="fu">:</span> <span class="st">&quot;#ffffff88&quot;</span><span class="fu">,</span></span>
+<span id="cb2-13"><a href="#cb2-13"></a>  <span class="dt">&quot;overlayHighlight&quot;</span><span class="fu">:</span> <span class="st">&quot;#00ff0033&quot;</span></span>
+<span id="cb2-14"><a href="#cb2-14"></a><span class="fu">}</span></span></code></pre></div>
+<p>Hex color codes are used.</p>
+<ul>
+<li>6 digit color is RGB.</li>
+<li>8 digit color is RGBA.</li>
+</ul>
+<p>First letter <code>#</code> is conventional. Plugins ignore the first letter of color code, thus <code>?102938</code>, <code>11335577</code> are valid.</p>
+<p>Do not use characters outside of <code>0-9a-f</code> for color value.</p>
+<ul>
+<li><code>foreground</code>: Text color.</li>
+<li><code>foregroundButtonOn</code>: Text color of active toggle button. Recommend to use the same value of <code>foreground</code> or <code>boxBackground</code>.</li>
+<li><code>background</code>: Background color.</li>
+<li><code>boxBackground</code>: Background color of inside of box shaped components (Barbox, Button, Checkbox, OptionMenu, TextKnob, VSlider).</li>
+<li><code>border</code>: Border color of box shaped components.</li>
+<li><code>unfocused</code>: Color to fill unfocused components. Currently, only used for knobs.</li>
+<li><code>highlightMain</code>: Color to indicate focus is on a component. Highlight colors are also used for value of slider components (BarBox and VSlider).- {new_version}{change_log}</li>
+<li><code>highlightAccent</code>: Same as <code>highlightMain</code>. Used for cosmetics.</li>
+<li><code>highlightButton</code>: Color to indicate focus is on a button.</li>
+<li><code>highlightWarning</code>: Same as <code>highlightMain</code>, but only used for parameters which requires extra caution.</li>
+<li><code>overlay</code>: Overlay color. Used to overlay texts and indicators.</li>
+<li><code>overlayHighlight</code>: Overlay color to highlight current focus.</li>
+</ul>
 <h2 id="controls">Controls</h2>
 <p>Knob and number slider can do:</p>
 <ul>
@@ -384,6 +430,10 @@ <h2 id="parameters">Parameters</h2>
 </dl>
 <h2 id="change-log">Change Log</h2>
 <ul>
+<li>0.1.4
+<ul>
+<li>Added color configuration.</li>
+</ul></li>
 <li>0.1.3
 <ul>
 <li>Reverted parameter smoother to the old one which works with variable size audio buffer.</li>
@@ -403,6 +453,7 @@ <h2 id="change-log">Change Log</h2>
 </ul>
 <h3 id="old-versions">Old Versions</h3>
 <ul>
+<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LatticeReverb0.1.0/EsPhaser0.1.3.zip">EsPhaser 0.1.3 - VST 3 (github.com)</a></li>
 <li><a href="https://github.com/ryukau/VSTPlugins/releases/download/DrawStringFix/EsPhaser0.1.2.zip">EsPhaser 0.1.2 - VST 3 (github.com)</a></li>
 <li><a href="https://github.com/ryukau/VSTPlugins/releases/download/EsPhaser0.1.0/EsPhaser0.1.0.zip">EsPhaser 0.1.0 - VST 3 (github.com)</a></li>
 </ul>
@@ -416,7 +467,7 @@ <h3 id="about-vst">About VST</h3>
 <p>VST is a trademark of Steinberg Media Technologies GmbH, registered in Europe and other countries.</p>
 
 <footer>
-    <p><a href="..\..\index.html">Back to Index</a></p>
+    <p><a href="../../index.html">Back to Index</a></p>
   </footer>
 </body>
 
diff --git a/docs/manual/EsPhaser/EsPhaser_ja.html b/docs/manual/EsPhaser/EsPhaser_ja.html
index dfece0b9..5c8bc620 100644
--- a/docs/manual/EsPhaser/EsPhaser_ja.html
+++ b/docs/manual/EsPhaser/EsPhaser_ja.html
@@ -14,19 +14,18 @@
 div.column { display: inline-block; vertical-align: top; width: 50%; }
 </style>
 <style>
-code.sourceCode > span { display: inline-block; line-height: 1.25; }
+pre > code.sourceCode { white-space: pre; position: relative; }
+pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
+pre > code.sourceCode > span:empty { height: 1.2em; }
 code.sourceCode > span { color: inherit; text-decoration: inherit; }
-code.sourceCode > span:empty { height: 1.2em; }
-.sourceCode { overflow: visible; }
-code.sourceCode { white-space: pre; position: relative; }
 div.sourceCode { margin: 1em 0; }
 pre.sourceCode { margin: 0; }
 @media screen {
 div.sourceCode { overflow: auto; }
 }
 @media print {
-code.sourceCode { white-space: pre-wrap; }
-code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
+pre > code.sourceCode { white-space: pre-wrap; }
+pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
 }
 pre.numberSource code
   { counter-reset: source-line 0; }
@@ -46,7 +45,7 @@
 div.sourceCode
   {   }
 @media screen {
-code.sourceCode > span > a:first-child::before { text-decoration: underline; }
+pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
 }
 code span.al { color: #ff0000; font-weight: bold; } /* Alert */
 code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
@@ -251,7 +250,7 @@
 
 <body>
 <header>
-    <p><a href="..\..\index.html">Back to Index</a></p>
+    <p><a href="../../index.html">Back to Index</a></p>
       <p>
   Update: 2020-05-14
   </p>
@@ -266,6 +265,7 @@
   <li><a href="#windows">Windows</a></li>
   <li><a href="#linux">Linux</a></li>
   </ul></li>
+  <li><a href="#色の設定">色の設定</a></li>
   <li><a href="#操作">操作</a></li>
   <li><a href="#注意">注意</a></li>
   <li><a href="#ブロック線図">ブロック線図</a></li>
@@ -285,7 +285,7 @@ <h1 id="esphaser">EsPhaser</h1>
 <p><img src="img/esphaser.png" /></p>
 <p><ruby>EsPhaser<rt>エス フェイザ</rt></ruby> は最大 4096 の 2 次 Thiran オールパスフィルタを直列につなぐことができるフェイザです。 EnvelopedSine のフェイザと同じアルゴリズムを使っています。</p>
 <ul>
-<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LatticeReverb0.1.0/EsPhaser0.1.3.zip">EsPhaser 0.1.3 をダウンロード - VST® 3 (github.com)</a> <img
+<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/ColorConfig/EsPhaser0.1.4.zip">EsPhaser 0.1.4 をダウンロード - VST® 3 (github.com)</a> <img
 src="img/VST_Compatible_Logo_Steinberg_negative.svg"
 alt="VST compatible logo."
 width="60px"
@@ -331,6 +331,57 @@ <h3 id="linux">Linux</h3>
 <li><a href="https://steinbergmedia.github.io/vst3_doc/vstinterfaces/linuxSetup.html">VST 3 Interfaces: Setup Linux for building VST 3 Plug-ins</a></li>
 </ul>
 <p>REAPER の Linux 版がプラグインを認識しないときは <code>~/.config/REAPER/reaper-vstplugins64.ini</code> を削除して REAPER を再起動してみてください。</p>
+<h2 id="色の設定">色の設定</h2>
+<p>初回設定時は手動で次のファイルを作成してください。</p>
+<ul>
+<li>Windows では <code>/Users/ユーザ名/AppData/Roaming/UhhyouPlugins/style/style.json</code> 。</li>
+<li>Linux では <code>$XDG_CONFIG_HOME/UhhyouPlugins/style/style.json</code> 。
+<ul>
+<li><code>$XDG_CONFIG_HOME</code> が空のときは <code>$HOME/.config/UhhyouPlugins/style/style.json</code> 。</li>
+</ul></li>
+<li>macOS では <code>/Users/$USERNAME/Library/Preferences/UhhyouPlugins/style/style.json</code> 。</li>
+</ul>
+<p>既存の色のテーマを次のリンクに掲載しています。 <code>style.json</code> にコピペして使ってください。</p>
+<ul>
+<li><a href="https://github.com/ryukau/LV2Plugins/tree/master/style/themes">LV2Plugins/style/themes at master · ryukau/LV2Plugins · GitHub</a></li>
+</ul>
+<p><code>style.json</code> の設定例です。</p>
+<div class="sourceCode" id="cb2"><pre class="sourceCode json"><code class="sourceCode json"><span id="cb2-1"><a href="#cb2-1"></a><span class="fu">{</span></span>
+<span id="cb2-2"><a href="#cb2-2"></a>  <span class="dt">&quot;foreground&quot;</span><span class="fu">:</span> <span class="st">&quot;#ffffff&quot;</span><span class="fu">,</span></span>
+<span id="cb2-3"><a href="#cb2-3"></a>  <span class="dt">&quot;foregroundButtonOn&quot;</span><span class="fu">:</span> <span class="st">&quot;#000000&quot;</span><span class="fu">,</span></span>
+<span id="cb2-4"><a href="#cb2-4"></a>  <span class="dt">&quot;background&quot;</span><span class="fu">:</span> <span class="st">&quot;#353d3e&quot;</span><span class="fu">,</span></span>
+<span id="cb2-5"><a href="#cb2-5"></a>  <span class="dt">&quot;boxBackground&quot;</span><span class="fu">:</span> <span class="st">&quot;#000000&quot;</span><span class="fu">,</span></span>
+<span id="cb2-6"><a href="#cb2-6"></a>  <span class="dt">&quot;border&quot;</span><span class="fu">:</span> <span class="st">&quot;#808080&quot;</span><span class="fu">,</span></span>
+<span id="cb2-7"><a href="#cb2-7"></a>  <span class="dt">&quot;unfocused&quot;</span><span class="fu">:</span> <span class="st">&quot;#b8a65c&quot;</span><span class="fu">,</span></span>
+<span id="cb2-8"><a href="#cb2-8"></a>  <span class="dt">&quot;highlightMain&quot;</span><span class="fu">:</span> <span class="st">&quot;#368a94&quot;</span><span class="fu">,</span></span>
+<span id="cb2-9"><a href="#cb2-9"></a>  <span class="dt">&quot;highlightAccent&quot;</span><span class="fu">:</span> <span class="st">&quot;#2c8a58&quot;</span><span class="fu">,</span></span>
+<span id="cb2-10"><a href="#cb2-10"></a>  <span class="dt">&quot;highlightButton&quot;</span><span class="fu">:</span> <span class="st">&quot;#a77842&quot;</span><span class="fu">,</span></span>
+<span id="cb2-11"><a href="#cb2-11"></a>  <span class="dt">&quot;highlightWarning&quot;</span><span class="fu">:</span> <span class="st">&quot;#8742a7&quot;</span><span class="fu">,</span></span>
+<span id="cb2-12"><a href="#cb2-12"></a>  <span class="dt">&quot;overlay&quot;</span><span class="fu">:</span> <span class="st">&quot;#ffffff88&quot;</span><span class="fu">,</span></span>
+<span id="cb2-13"><a href="#cb2-13"></a>  <span class="dt">&quot;overlayHighlight&quot;</span><span class="fu">:</span> <span class="st">&quot;#00ff0033&quot;</span></span>
+<span id="cb2-14"><a href="#cb2-14"></a><span class="fu">}</span></span></code></pre></div>
+<p>16 進数カラーコードを使っています。</p>
+<ul>
+<li>6 桁の色は RGB 。</li>
+<li>8 桁の色は RGBA 。</li>
+</ul>
+<p>プラグインはカラーコードの 1 つめのの文字を無視します。よって <code>?102938</code> や <code>11335577</code> も有効なカラーコードです。</p>
+<p>2 文字目以降のカラーコードの値に <code>0-9a-f</code> 以外の文字を使わないでください。</p>
+<p>以下は設定できる色の一覧です。設定に抜けがあるとデフォルトの色が使われます。</p>
+<ul>
+<li><code>foreground</code>: 文字の色。</li>
+<li><code>foregroundButtonOn</code>: オンになっているボタンの文字の色。 <code>foreground</code> か <code>boxBackground</code> のいずれかと同じ値にすることを推奨します。</li>
+<li><code>background</code>: 背景色。</li>
+<li><code>boxBackground</code>: 矩形の UI 部品の内側の背景色。</li>
+<li><code>border</code>: <ruby>縁<rt>ふち</rt></ruby>の色。</li>
+<li><code>unfocused</code>: つまみがフォーカスされていないときの色。</li>
+<li><code>highlightMain</code>: フォーカスされたときの色。スライダの値の表示にも使用されます。</li>
+<li><code>highlightAccent</code>: フォーカスされたときの色。一部のプラグインをカラフルにするために使用されます。</li>
+<li><code>highlightButton</code>: ボタンがフォーカスされたときの色。</li>
+<li><code>highlightWarning</code>: 変更に注意を要する UI がフォーカスされたときの色。</li>
+<li><code>overlay</code>: オーバーレイの色。</li>
+<li><code>overlayHighlight</code>: フォーカスを示すオーバーレイの色。</li>
+</ul>
 <h2 id="操作">操作</h2>
 <p>つまみと数値スライダでは次の操作ができます。</p>
 <ul>
@@ -387,6 +438,10 @@ <h2 id="パラメータ">パラメータ</h2>
 </dl>
 <h2 id="チェンジログ">チェンジログ</h2>
 <ul>
+<li>0.1.4
+<ul>
+<li>カラーコンフィグを追加。</li>
+</ul></li>
 <li>0.1.3
 <ul>
 <li>パラメータの補間を可変サイズのオーディオバッファでも機能する以前の手法に巻き戻した。</li>
@@ -406,6 +461,7 @@ <h2 id="チェンジログ">チェンジログ</h2>
 </ul>
 <h3 id="旧バージョン">旧バージョン</h3>
 <ul>
+<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LatticeReverb0.1.0/EsPhaser0.1.3.zip">EsPhaser 0.1.3 - VST 3 (github.com)</a></li>
 <li><a href="https://github.com/ryukau/VSTPlugins/releases/download/DrawStringFix/EsPhaser0.1.2.zip">EsPhaser 0.1.2 - VST 3 (github.com)</a></li>
 <li><a href="https://github.com/ryukau/VSTPlugins/releases/download/EsPhaser0.1.0/EsPhaser0.1.0.zip">EsPhaser 0.1.0 - VST 3 (github.com)</a></li>
 </ul>
@@ -419,7 +475,7 @@ <h3 id="vst-について">VST® について</h3>
 <p>VST is a trademark of Steinberg Media Technologies GmbH, registered in Europe and other countries.</p>
 
 <footer>
-    <p><a href="..\..\index.html">Back to Index</a></p>
+    <p><a href="../../index.html">Back to Index</a></p>
   </footer>
 </body>
 
diff --git a/docs/manual/FDNCymbal/FDNCymbal_en.html b/docs/manual/FDNCymbal/FDNCymbal_en.html
index a7b467a2..e6c3e462 100644
--- a/docs/manual/FDNCymbal/FDNCymbal_en.html
+++ b/docs/manual/FDNCymbal/FDNCymbal_en.html
@@ -14,19 +14,18 @@
 div.column { display: inline-block; vertical-align: top; width: 50%; }
 </style>
 <style>
-code.sourceCode > span { display: inline-block; line-height: 1.25; }
+pre > code.sourceCode { white-space: pre; position: relative; }
+pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
+pre > code.sourceCode > span:empty { height: 1.2em; }
 code.sourceCode > span { color: inherit; text-decoration: inherit; }
-code.sourceCode > span:empty { height: 1.2em; }
-.sourceCode { overflow: visible; }
-code.sourceCode { white-space: pre; position: relative; }
 div.sourceCode { margin: 1em 0; }
 pre.sourceCode { margin: 0; }
 @media screen {
 div.sourceCode { overflow: auto; }
 }
 @media print {
-code.sourceCode { white-space: pre-wrap; }
-code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
+pre > code.sourceCode { white-space: pre-wrap; }
+pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
 }
 pre.numberSource code
   { counter-reset: source-line 0; }
@@ -46,7 +45,7 @@
 div.sourceCode
   {   }
 @media screen {
-code.sourceCode > span > a:first-child::before { text-decoration: underline; }
+pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
 }
 code span.al { color: #ff0000; font-weight: bold; } /* Alert */
 code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
@@ -251,7 +250,7 @@
 
 <body>
 <header>
-    <p><a href="..\..\index.html">Back to Index</a></p>
+    <p><a href="../../index.html">Back to Index</a></p>
       <p>
   Update: 2020-05-14
   </p>
@@ -266,6 +265,7 @@
   <li><a href="#windows-specific">Windows Specific</a></li>
   <li><a href="#linux-specific">Linux Specific</a></li>
   </ul></li>
+  <li><a href="#color-configuration">Color Configuration</a></li>
   <li><a href="#controls">Controls</a></li>
   <li><a href="#caution">Caution</a></li>
   <li><a href="#use-as-effect">Use as Effect</a></li>
@@ -296,7 +296,7 @@ <h1 id="fdncymbal">FDNCymbal</h1>
 <p><img src="img/fdncymbal.png" /></p>
 <p>FDNCymbal is a cymbal sound synthesizer. It can also be used as an effect. Unlike the name, most of metallic texture comes from Schroeder allpass section rather than FDN (feedback delay network). FDN section makes nice impact sound when <code>FDN.Time</code> is short. Tremolo is added to simulate wobbling of cymbal.</p>
 <ul>
-<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LatticeReverb0.1.0/FDNCymbal0.2.2.zip">Download FDNCymbal 0.2.2 - VST® 3 (github.com)</a> <img
+<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/ColorConfig/FDNCymbal0.2.3.zip">Download FDNCymbal 0.2.3 - VST® 3 (github.com)</a> <img
 src="img/VST_Compatible_Logo_Steinberg_negative.svg"
 alt="VST compatible logo."
 width="60px"
@@ -341,6 +341,52 @@ <h3 id="linux-specific">Linux Specific</h3>
 <li><a href="https://steinbergmedia.github.io/vst3_doc/vstinterfaces/linuxSetup.html">VST 3 Interfaces: Setup Linux for building VST 3 Plug-ins</a></li>
 </ul>
 <p>REAPER on Linux may not recognize the plugin. A workaround is to delete a file <code>~/.config/REAPER/reaper-vstplugins64.ini</code> and restart REAPER.</p>
+<h2 id="color-configuration">Color Configuration</h2>
+<p>At first time, create color config file to:</p>
+<ul>
+<li><code>/Users/USERNAME/AppData/Roaming/UhhyouPlugins/style/style.json</code> on Windows.</li>
+<li><code>$XDG_CONFIG_HOME/UhhyouPlugins/style/style.json</code> on Linux.
+<ul>
+<li>If <code>$XDG_CONFIG_HOME</code> is empty, make <code>$HOME/.config/UhhyouPlugins/style/style.json</code>.</li>
+</ul></li>
+<li><code>/Users/$USERNAME/Library/Preferences/UhhyouPlugins/style/style.json</code> on macOS.</li>
+</ul>
+<p>Below is a example of <code>style.json</code>.</p>
+<div class="sourceCode" id="cb2"><pre class="sourceCode json"><code class="sourceCode json"><span id="cb2-1"><a href="#cb2-1"></a><span class="fu">{</span></span>
+<span id="cb2-2"><a href="#cb2-2"></a>  <span class="dt">&quot;foreground&quot;</span><span class="fu">:</span> <span class="st">&quot;#ffffff&quot;</span><span class="fu">,</span></span>
+<span id="cb2-3"><a href="#cb2-3"></a>  <span class="dt">&quot;foregroundButtonOn&quot;</span><span class="fu">:</span> <span class="st">&quot;#000000&quot;</span><span class="fu">,</span></span>
+<span id="cb2-4"><a href="#cb2-4"></a>  <span class="dt">&quot;background&quot;</span><span class="fu">:</span> <span class="st">&quot;#353d3e&quot;</span><span class="fu">,</span></span>
+<span id="cb2-5"><a href="#cb2-5"></a>  <span class="dt">&quot;boxBackground&quot;</span><span class="fu">:</span> <span class="st">&quot;#000000&quot;</span><span class="fu">,</span></span>
+<span id="cb2-6"><a href="#cb2-6"></a>  <span class="dt">&quot;border&quot;</span><span class="fu">:</span> <span class="st">&quot;#808080&quot;</span><span class="fu">,</span></span>
+<span id="cb2-7"><a href="#cb2-7"></a>  <span class="dt">&quot;unfocused&quot;</span><span class="fu">:</span> <span class="st">&quot;#b8a65c&quot;</span><span class="fu">,</span></span>
+<span id="cb2-8"><a href="#cb2-8"></a>  <span class="dt">&quot;highlightMain&quot;</span><span class="fu">:</span> <span class="st">&quot;#368a94&quot;</span><span class="fu">,</span></span>
+<span id="cb2-9"><a href="#cb2-9"></a>  <span class="dt">&quot;highlightAccent&quot;</span><span class="fu">:</span> <span class="st">&quot;#2c8a58&quot;</span><span class="fu">,</span></span>
+<span id="cb2-10"><a href="#cb2-10"></a>  <span class="dt">&quot;highlightButton&quot;</span><span class="fu">:</span> <span class="st">&quot;#a77842&quot;</span><span class="fu">,</span></span>
+<span id="cb2-11"><a href="#cb2-11"></a>  <span class="dt">&quot;highlightWarning&quot;</span><span class="fu">:</span> <span class="st">&quot;#8742a7&quot;</span><span class="fu">,</span></span>
+<span id="cb2-12"><a href="#cb2-12"></a>  <span class="dt">&quot;overlay&quot;</span><span class="fu">:</span> <span class="st">&quot;#ffffff88&quot;</span><span class="fu">,</span></span>
+<span id="cb2-13"><a href="#cb2-13"></a>  <span class="dt">&quot;overlayHighlight&quot;</span><span class="fu">:</span> <span class="st">&quot;#00ff0033&quot;</span></span>
+<span id="cb2-14"><a href="#cb2-14"></a><span class="fu">}</span></span></code></pre></div>
+<p>Hex color codes are used.</p>
+<ul>
+<li>6 digit color is RGB.</li>
+<li>8 digit color is RGBA.</li>
+</ul>
+<p>First letter <code>#</code> is conventional. Plugins ignore the first letter of color code, thus <code>?102938</code>, <code>11335577</code> are valid.</p>
+<p>Do not use characters outside of <code>0-9a-f</code> for color value.</p>
+<ul>
+<li><code>foreground</code>: Text color.</li>
+<li><code>foregroundButtonOn</code>: Text color of active toggle button. Recommend to use the same value of <code>foreground</code> or <code>boxBackground</code>.</li>
+<li><code>background</code>: Background color.</li>
+<li><code>boxBackground</code>: Background color of inside of box shaped components (Barbox, Button, Checkbox, OptionMenu, TextKnob, VSlider).</li>
+<li><code>border</code>: Border color of box shaped components.</li>
+<li><code>unfocused</code>: Color to fill unfocused components. Currently, only used for knobs.</li>
+<li><code>highlightMain</code>: Color to indicate focus is on a component. Highlight colors are also used for value of slider components (BarBox and VSlider).- {new_version}{change_log}</li>
+<li><code>highlightAccent</code>: Same as <code>highlightMain</code>. Used for cosmetics.</li>
+<li><code>highlightButton</code>: Color to indicate focus is on a button.</li>
+<li><code>highlightWarning</code>: Same as <code>highlightMain</code>, but only used for parameters which requires extra caution.</li>
+<li><code>overlay</code>: Overlay color. Used to overlay texts and indicators.</li>
+<li><code>overlayHighlight</code>: Overlay color to highlight current focus.</li>
+</ul>
 <h2 id="controls">Controls</h2>
 <p>Knob and slider can do:</p>
 <ul>
@@ -479,6 +525,10 @@ <h3 id="random-tremolo">Random (Tremolo)</h3>
 </dl>
 <h2 id="change-log">Change Log</h2>
 <ul>
+<li>0.2.3
+<ul>
+<li>Added color configuration.</li>
+</ul></li>
 <li>0.2.2
 <ul>
 <li>Reverted parameter smoother to the old one which works with variable size audio buffer.</li>
@@ -528,6 +578,7 @@ <h2 id="change-log">Change Log</h2>
 </ul>
 <h3 id="old-versions">Old Versions</h3>
 <ul>
+<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LatticeReverb0.1.0/FDNCymbal0.2.2.zip">FDNCymbal 0.2.2 - VST 3 (github.com)</a></li>
 <li><a href="https://github.com/ryukau/VSTPlugins/releases/download/DrawStringFix/FDNCymbal0.2.1.zip">FDNCymbal 0.2.1 - VST 3 (github.com)</a></li>
 <li><a href="https://github.com/ryukau/VSTPlugins/releases/download/EsPhaser0.1.0/FDNCymbal0.1.5.zip">FDNCymbal 0.1.5 - VST 3 (github.com)</a></li>
 <li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LinuxGUIFix/FDNCymbal0.1.4.zip">FDNCymbal 0.1.4 - VST 3 (github.com)</a></li>
@@ -548,7 +599,7 @@ <h3 id="about-vst">About VST</h3>
 <p>VST is a trademark of Steinberg Media Technologies GmbH, registered in Europe and other countries.</p>
 
 <footer>
-    <p><a href="..\..\index.html">Back to Index</a></p>
+    <p><a href="../../index.html">Back to Index</a></p>
   </footer>
 </body>
 
diff --git a/docs/manual/FDNCymbal/FDNCymbal_ja.html b/docs/manual/FDNCymbal/FDNCymbal_ja.html
index e35cc0c0..9fc87e98 100644
--- a/docs/manual/FDNCymbal/FDNCymbal_ja.html
+++ b/docs/manual/FDNCymbal/FDNCymbal_ja.html
@@ -14,19 +14,18 @@
 div.column { display: inline-block; vertical-align: top; width: 50%; }
 </style>
 <style>
-code.sourceCode > span { display: inline-block; line-height: 1.25; }
+pre > code.sourceCode { white-space: pre; position: relative; }
+pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
+pre > code.sourceCode > span:empty { height: 1.2em; }
 code.sourceCode > span { color: inherit; text-decoration: inherit; }
-code.sourceCode > span:empty { height: 1.2em; }
-.sourceCode { overflow: visible; }
-code.sourceCode { white-space: pre; position: relative; }
 div.sourceCode { margin: 1em 0; }
 pre.sourceCode { margin: 0; }
 @media screen {
 div.sourceCode { overflow: auto; }
 }
 @media print {
-code.sourceCode { white-space: pre-wrap; }
-code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
+pre > code.sourceCode { white-space: pre-wrap; }
+pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
 }
 pre.numberSource code
   { counter-reset: source-line 0; }
@@ -46,7 +45,7 @@
 div.sourceCode
   {   }
 @media screen {
-code.sourceCode > span > a:first-child::before { text-decoration: underline; }
+pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
 }
 code span.al { color: #ff0000; font-weight: bold; } /* Alert */
 code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
@@ -251,7 +250,7 @@
 
 <body>
 <header>
-    <p><a href="..\..\index.html">Back to Index</a></p>
+    <p><a href="../../index.html">Back to Index</a></p>
       <p>
   Update: 2020-05-14
   </p>
@@ -266,6 +265,7 @@
   <li><a href="#windows">Windows</a></li>
   <li><a href="#linux">Linux</a></li>
   </ul></li>
+  <li><a href="#色の設定">色の設定</a></li>
   <li><a href="#操作">操作</a></li>
   <li><a href="#注意">注意</a></li>
   <li><a href="#エフェクトとしての利用">エフェクトとしての利用</a></li>
@@ -296,7 +296,7 @@ <h1 id="fdncymbal">FDNCymbal</h1>
 <p><img src="img/fdncymbal.png" /></p>
 <p><ruby>FDNCymbal<rt>エフディーエヌシンバル</rt></ruby> はシンバルのような音を合成するシンセサイザです。エフェクトとして使うこともできます。名前とは裏腹に金属的な質感は FDN (feedback delay network) ではなく Schroeder allpass section によって得られています。 <code>FDN.Time</code> の値を小さくすることで、わりとナイスなばちの衝突音が合成できます。シンバルの揺れをシミュレートするためにトレモロもついています。</p>
 <ul>
-<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LatticeReverb0.1.0/FDNCymbal0.2.2.zip">FDNCymbal 0.2.2 をダウンロード - VST® 3 (github.com)</a> <img
+<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/ColorConfig/FDNCymbal0.2.3.zip">FDNCymbal 0.2.3 をダウンロード - VST® 3 (github.com)</a> <img
 src="img/VST_Compatible_Logo_Steinberg_negative.svg"
 alt="VST compatible logo."
 width="60px"
@@ -341,6 +341,57 @@ <h3 id="linux">Linux</h3>
 <li><a href="https://steinbergmedia.github.io/vst3_doc/vstinterfaces/linuxSetup.html">VST 3 Interfaces: Setup Linux for building VST 3 Plug-ins</a></li>
 </ul>
 <p>REAPER の Linux 版がプラグインを認識しないときは <code>~/.config/REAPER/reaper-vstplugins64.ini</code> を削除して REAPER を再起動してみてください。</p>
+<h2 id="色の設定">色の設定</h2>
+<p>初回設定時は手動で次のファイルを作成してください。</p>
+<ul>
+<li>Windows では <code>/Users/ユーザ名/AppData/Roaming/UhhyouPlugins/style/style.json</code> 。</li>
+<li>Linux では <code>$XDG_CONFIG_HOME/UhhyouPlugins/style/style.json</code> 。
+<ul>
+<li><code>$XDG_CONFIG_HOME</code> が空のときは <code>$HOME/.config/UhhyouPlugins/style/style.json</code> 。</li>
+</ul></li>
+<li>macOS では <code>/Users/$USERNAME/Library/Preferences/UhhyouPlugins/style/style.json</code> 。</li>
+</ul>
+<p>既存の色のテーマを次のリンクに掲載しています。 <code>style.json</code> にコピペして使ってください。</p>
+<ul>
+<li><a href="https://github.com/ryukau/LV2Plugins/tree/master/style/themes">LV2Plugins/style/themes at master · ryukau/LV2Plugins · GitHub</a></li>
+</ul>
+<p><code>style.json</code> の設定例です。</p>
+<div class="sourceCode" id="cb2"><pre class="sourceCode json"><code class="sourceCode json"><span id="cb2-1"><a href="#cb2-1"></a><span class="fu">{</span></span>
+<span id="cb2-2"><a href="#cb2-2"></a>  <span class="dt">&quot;foreground&quot;</span><span class="fu">:</span> <span class="st">&quot;#ffffff&quot;</span><span class="fu">,</span></span>
+<span id="cb2-3"><a href="#cb2-3"></a>  <span class="dt">&quot;foregroundButtonOn&quot;</span><span class="fu">:</span> <span class="st">&quot;#000000&quot;</span><span class="fu">,</span></span>
+<span id="cb2-4"><a href="#cb2-4"></a>  <span class="dt">&quot;background&quot;</span><span class="fu">:</span> <span class="st">&quot;#353d3e&quot;</span><span class="fu">,</span></span>
+<span id="cb2-5"><a href="#cb2-5"></a>  <span class="dt">&quot;boxBackground&quot;</span><span class="fu">:</span> <span class="st">&quot;#000000&quot;</span><span class="fu">,</span></span>
+<span id="cb2-6"><a href="#cb2-6"></a>  <span class="dt">&quot;border&quot;</span><span class="fu">:</span> <span class="st">&quot;#808080&quot;</span><span class="fu">,</span></span>
+<span id="cb2-7"><a href="#cb2-7"></a>  <span class="dt">&quot;unfocused&quot;</span><span class="fu">:</span> <span class="st">&quot;#b8a65c&quot;</span><span class="fu">,</span></span>
+<span id="cb2-8"><a href="#cb2-8"></a>  <span class="dt">&quot;highlightMain&quot;</span><span class="fu">:</span> <span class="st">&quot;#368a94&quot;</span><span class="fu">,</span></span>
+<span id="cb2-9"><a href="#cb2-9"></a>  <span class="dt">&quot;highlightAccent&quot;</span><span class="fu">:</span> <span class="st">&quot;#2c8a58&quot;</span><span class="fu">,</span></span>
+<span id="cb2-10"><a href="#cb2-10"></a>  <span class="dt">&quot;highlightButton&quot;</span><span class="fu">:</span> <span class="st">&quot;#a77842&quot;</span><span class="fu">,</span></span>
+<span id="cb2-11"><a href="#cb2-11"></a>  <span class="dt">&quot;highlightWarning&quot;</span><span class="fu">:</span> <span class="st">&quot;#8742a7&quot;</span><span class="fu">,</span></span>
+<span id="cb2-12"><a href="#cb2-12"></a>  <span class="dt">&quot;overlay&quot;</span><span class="fu">:</span> <span class="st">&quot;#ffffff88&quot;</span><span class="fu">,</span></span>
+<span id="cb2-13"><a href="#cb2-13"></a>  <span class="dt">&quot;overlayHighlight&quot;</span><span class="fu">:</span> <span class="st">&quot;#00ff0033&quot;</span></span>
+<span id="cb2-14"><a href="#cb2-14"></a><span class="fu">}</span></span></code></pre></div>
+<p>16 進数カラーコードを使っています。</p>
+<ul>
+<li>6 桁の色は RGB 。</li>
+<li>8 桁の色は RGBA 。</li>
+</ul>
+<p>プラグインはカラーコードの 1 つめのの文字を無視します。よって <code>?102938</code> や <code>11335577</code> も有効なカラーコードです。</p>
+<p>2 文字目以降のカラーコードの値に <code>0-9a-f</code> 以外の文字を使わないでください。</p>
+<p>以下は設定できる色の一覧です。設定に抜けがあるとデフォルトの色が使われます。</p>
+<ul>
+<li><code>foreground</code>: 文字の色。</li>
+<li><code>foregroundButtonOn</code>: オンになっているボタンの文字の色。 <code>foreground</code> か <code>boxBackground</code> のいずれかと同じ値にすることを推奨します。</li>
+<li><code>background</code>: 背景色。</li>
+<li><code>boxBackground</code>: 矩形の UI 部品の内側の背景色。</li>
+<li><code>border</code>: <ruby>縁<rt>ふち</rt></ruby>の色。</li>
+<li><code>unfocused</code>: つまみがフォーカスされていないときの色。</li>
+<li><code>highlightMain</code>: フォーカスされたときの色。スライダの値の表示にも使用されます。</li>
+<li><code>highlightAccent</code>: フォーカスされたときの色。一部のプラグインをカラフルにするために使用されます。</li>
+<li><code>highlightButton</code>: ボタンがフォーカスされたときの色。</li>
+<li><code>highlightWarning</code>: 変更に注意を要する UI がフォーカスされたときの色。</li>
+<li><code>overlay</code>: オーバーレイの色。</li>
+<li><code>overlayHighlight</code>: フォーカスを示すオーバーレイの色。</li>
+</ul>
 <h2 id="操作">操作</h2>
 <p>つまみとスライダーでは次の操作ができます。</p>
 <ul>
@@ -479,6 +530,10 @@ <h3 id="random-tremolo">Random (Tremolo)</h3>
 </dl>
 <h2 id="チェンジログ">チェンジログ</h2>
 <ul>
+<li>0.2.3
+<ul>
+<li>カラーコンフィグを追加。</li>
+</ul></li>
 <li>0.2.2
 <ul>
 <li>パラメータの補間を可変サイズのオーディオバッファでも機能する以前の手法に巻き戻した。</li>
@@ -528,6 +583,7 @@ <h2 id="チェンジログ">チェンジログ</h2>
 </ul>
 <h3 id="旧バージョン">旧バージョン</h3>
 <ul>
+<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LatticeReverb0.1.0/FDNCymbal0.2.2.zip">FDNCymbal 0.2.2 - VST 3 (github.com)</a></li>
 <li><a href="https://github.com/ryukau/VSTPlugins/releases/download/DrawStringFix/FDNCymbal0.2.1.zip">FDNCymbal 0.2.1 - VST 3 (github.com)</a></li>
 <li><a href="https://github.com/ryukau/VSTPlugins/releases/download/EsPhaser0.1.0/FDNCymbal0.1.5.zip">FDNCymbal 0.1.5 - VST 3 (github.com)</a></li>
 <li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LinuxGUIFix/FDNCymbal0.1.4.zip">FDNCymbal 0.1.4 - VST 3 (github.com)</a></li>
@@ -548,7 +604,7 @@ <h3 id="vst-について">VST® について</h3>
 <p>VST is a trademark of Steinberg Media Technologies GmbH, registered in Europe and other countries.</p>
 
 <footer>
-    <p><a href="..\..\index.html">Back to Index</a></p>
+    <p><a href="../../index.html">Back to Index</a></p>
   </footer>
 </body>
 
diff --git a/docs/manual/IterativeSinCluster/IterativeSinCluster_en.html b/docs/manual/IterativeSinCluster/IterativeSinCluster_en.html
index 637f90ad..8fe7a8ea 100644
--- a/docs/manual/IterativeSinCluster/IterativeSinCluster_en.html
+++ b/docs/manual/IterativeSinCluster/IterativeSinCluster_en.html
@@ -5,7 +5,7 @@
 <meta charset="utf-8" />
 <meta name="generator" content="pandoc" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
-<meta name="dcterms.date" content="2020-05-14" />
+<meta name="dcterms.date" content="2020-05-16" />
 <title>IterativeSinCluster_en</title>
 <style>
 code { white-space: pre-wrap; }
@@ -14,19 +14,18 @@
 div.column { display: inline-block; vertical-align: top; width: 50%; }
 </style>
 <style>
-code.sourceCode > span { display: inline-block; line-height: 1.25; }
+pre > code.sourceCode { white-space: pre; position: relative; }
+pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
+pre > code.sourceCode > span:empty { height: 1.2em; }
 code.sourceCode > span { color: inherit; text-decoration: inherit; }
-code.sourceCode > span:empty { height: 1.2em; }
-.sourceCode { overflow: visible; }
-code.sourceCode { white-space: pre; position: relative; }
 div.sourceCode { margin: 1em 0; }
 pre.sourceCode { margin: 0; }
 @media screen {
 div.sourceCode { overflow: auto; }
 }
 @media print {
-code.sourceCode { white-space: pre-wrap; }
-code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
+pre > code.sourceCode { white-space: pre-wrap; }
+pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
 }
 pre.numberSource code
   { counter-reset: source-line 0; }
@@ -46,7 +45,7 @@
 div.sourceCode
   {   }
 @media screen {
-code.sourceCode > span > a:first-child::before { text-decoration: underline; }
+pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
 }
 code span.al { color: #ff0000; font-weight: bold; } /* Alert */
 code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
@@ -251,9 +250,9 @@
 
 <body>
 <header>
-    <p><a href="..\..\index.html">Back to Index</a></p>
+    <p><a href="../../index.html">Back to Index</a></p>
       <p>
-  Update: 2020-05-14
+  Update: 2020-05-16
   </p>
       <details>
   <summary translate="yes">Table of Contents</summary>
@@ -266,6 +265,7 @@
   <li><a href="#windows-specific">Windows Specific</a></li>
   <li><a href="#linux-specific">Linux Specific</a></li>
   </ul></li>
+  <li><a href="#color-configuration">Color Configuration</a></li>
   <li><a href="#controls">Controls</a></li>
   <li><a href="#block-diagram">Block Diagram</a></li>
   <li><a href="#parameters">Parameters</a><ul>
@@ -293,7 +293,7 @@ <h1 id="iterativesincluster">IterativeSinCluster</h1>
 <p><img src="img/iterativesincluster.png" /></p>
 <p>IterativeSinCluster is an additive synthesizer. This synth computes 512 sine waves for each note to make tone cluster. I somehow thought “iterative sin” is a valid term. Correct term is “recursive sine”.</p>
 <ul>
-<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LatticeReverb0.1.0/IterativeSinCluster0.1.7.zip">Download IterativeSinCluster 0.1.7 - VST® 3 (github.com)</a> <img
+<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/ColorConfig/IterativeSinCluster0.1.8.zip">Download IterativeSinCluster 0.1.8 - VST® 3 (github.com)</a> <img
 src="img/VST_Compatible_Logo_Steinberg_negative.svg"
 alt="VST compatible logo."
 width="60px"
@@ -339,6 +339,52 @@ <h3 id="linux-specific">Linux Specific</h3>
 <li><a href="https://steinbergmedia.github.io/vst3_doc/vstinterfaces/linuxSetup.html">VST 3 Interfaces: Setup Linux for building VST 3 Plug-ins</a></li>
 </ul>
 <p>REAPER on Linux may not recognize the plugin. A workaround is to delete a file <code>~/.config/REAPER/reaper-vstplugins64.ini</code> and restart REAPER.</p>
+<h2 id="color-configuration">Color Configuration</h2>
+<p>At first time, create color config file to:</p>
+<ul>
+<li><code>/Users/USERNAME/AppData/Roaming/UhhyouPlugins/style/style.json</code> on Windows.</li>
+<li><code>$XDG_CONFIG_HOME/UhhyouPlugins/style/style.json</code> on Linux.
+<ul>
+<li>If <code>$XDG_CONFIG_HOME</code> is empty, make <code>$HOME/.config/UhhyouPlugins/style/style.json</code>.</li>
+</ul></li>
+<li><code>/Users/$USERNAME/Library/Preferences/UhhyouPlugins/style/style.json</code> on macOS.</li>
+</ul>
+<p>Below is a example of <code>style.json</code>.</p>
+<div class="sourceCode" id="cb2"><pre class="sourceCode json"><code class="sourceCode json"><span id="cb2-1"><a href="#cb2-1"></a><span class="fu">{</span></span>
+<span id="cb2-2"><a href="#cb2-2"></a>  <span class="dt">&quot;foreground&quot;</span><span class="fu">:</span> <span class="st">&quot;#ffffff&quot;</span><span class="fu">,</span></span>
+<span id="cb2-3"><a href="#cb2-3"></a>  <span class="dt">&quot;foregroundButtonOn&quot;</span><span class="fu">:</span> <span class="st">&quot;#000000&quot;</span><span class="fu">,</span></span>
+<span id="cb2-4"><a href="#cb2-4"></a>  <span class="dt">&quot;background&quot;</span><span class="fu">:</span> <span class="st">&quot;#353d3e&quot;</span><span class="fu">,</span></span>
+<span id="cb2-5"><a href="#cb2-5"></a>  <span class="dt">&quot;boxBackground&quot;</span><span class="fu">:</span> <span class="st">&quot;#000000&quot;</span><span class="fu">,</span></span>
+<span id="cb2-6"><a href="#cb2-6"></a>  <span class="dt">&quot;border&quot;</span><span class="fu">:</span> <span class="st">&quot;#808080&quot;</span><span class="fu">,</span></span>
+<span id="cb2-7"><a href="#cb2-7"></a>  <span class="dt">&quot;unfocused&quot;</span><span class="fu">:</span> <span class="st">&quot;#b8a65c&quot;</span><span class="fu">,</span></span>
+<span id="cb2-8"><a href="#cb2-8"></a>  <span class="dt">&quot;highlightMain&quot;</span><span class="fu">:</span> <span class="st">&quot;#368a94&quot;</span><span class="fu">,</span></span>
+<span id="cb2-9"><a href="#cb2-9"></a>  <span class="dt">&quot;highlightAccent&quot;</span><span class="fu">:</span> <span class="st">&quot;#2c8a58&quot;</span><span class="fu">,</span></span>
+<span id="cb2-10"><a href="#cb2-10"></a>  <span class="dt">&quot;highlightButton&quot;</span><span class="fu">:</span> <span class="st">&quot;#a77842&quot;</span><span class="fu">,</span></span>
+<span id="cb2-11"><a href="#cb2-11"></a>  <span class="dt">&quot;highlightWarning&quot;</span><span class="fu">:</span> <span class="st">&quot;#8742a7&quot;</span><span class="fu">,</span></span>
+<span id="cb2-12"><a href="#cb2-12"></a>  <span class="dt">&quot;overlay&quot;</span><span class="fu">:</span> <span class="st">&quot;#ffffff88&quot;</span><span class="fu">,</span></span>
+<span id="cb2-13"><a href="#cb2-13"></a>  <span class="dt">&quot;overlayHighlight&quot;</span><span class="fu">:</span> <span class="st">&quot;#00ff0033&quot;</span></span>
+<span id="cb2-14"><a href="#cb2-14"></a><span class="fu">}</span></span></code></pre></div>
+<p>Hex color codes are used.</p>
+<ul>
+<li>6 digit color is RGB.</li>
+<li>8 digit color is RGBA.</li>
+</ul>
+<p>First letter <code>#</code> is conventional. Plugins ignore the first letter of color code, thus <code>?102938</code>, <code>11335577</code> are valid.</p>
+<p>Do not use characters outside of <code>0-9a-f</code> for color value.</p>
+<ul>
+<li><code>foreground</code>: Text color.</li>
+<li><code>foregroundButtonOn</code>: Text color of active toggle button. Recommend to use the same value of <code>foreground</code> or <code>boxBackground</code>.</li>
+<li><code>background</code>: Background color.</li>
+<li><code>boxBackground</code>: Background color of inside of box shaped components (Barbox, Button, Checkbox, OptionMenu, TextKnob, VSlider).</li>
+<li><code>border</code>: Border color of box shaped components.</li>
+<li><code>unfocused</code>: Color to fill unfocused components. Currently, only used for knobs.</li>
+<li><code>highlightMain</code>: Color to indicate focus is on a component. Highlight colors are also used for value of slider components (BarBox and VSlider).- {new_version}{change_log}</li>
+<li><code>highlightAccent</code>: Same as <code>highlightMain</code>. Used for cosmetics.</li>
+<li><code>highlightButton</code>: Color to indicate focus is on a button.</li>
+<li><code>highlightWarning</code>: Same as <code>highlightMain</code>, but only used for parameters which requires extra caution.</li>
+<li><code>overlay</code>: Overlay color. Used to overlay texts and indicators.</li>
+<li><code>overlayHighlight</code>: Overlay color to highlight current focus.</li>
+</ul>
 <h2 id="controls">Controls</h2>
 <p>Knob and slider can do:</p>
 <ul>
@@ -484,6 +530,10 @@ <h3 id="chorus">Chorus</h3>
 </dl>
 <h2 id="change-log">Change Log</h2>
 <ul>
+<li>0.1.8
+<ul>
+<li>Added color configuration.</li>
+</ul></li>
 <li>0.1.7
 <ul>
 <li>Reverted parameter smoother to the old one which works with variable size audio buffer.</li>
@@ -522,6 +572,7 @@ <h2 id="change-log">Change Log</h2>
 </ul>
 <h3 id="old-versions">Old Versions</h3>
 <ul>
+<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LatticeReverb0.1.0/IterativeSinCluster0.1.7.zip">IterativeSinCluster 0.1.7 - VST 3 (github.com)</a></li>
 <li><a href="https://github.com/ryukau/VSTPlugins/releases/download/BarBoxFocusFix/IterativeSinCluster0.1.6.zip">IterativeSinCluster 0.1.6 - VST 3 (github.com)</a></li>
 <li><a href="https://github.com/ryukau/VSTPlugins/releases/download/DrawStringFix/IterativeSinCluster0.1.5.zip">IterativeSinCluster 0.1.5 - VST 3 (github.com)</a></li>
 <li>[IterativeSinCluster 0.1.3 - VST 3 (github.com)](https://github.com/ryukau/VSTPlugins/releases/download/EsPhaser0.1.0/IterativeSinCluster0.1.3.zip</li>
@@ -539,7 +590,7 @@ <h3 id="about-vst">About VST</h3>
 <p>VST is a trademark of Steinberg Media Technologies GmbH, registered in Europe and other countries.</p>
 
 <footer>
-    <p><a href="..\..\index.html">Back to Index</a></p>
+    <p><a href="../../index.html">Back to Index</a></p>
   </footer>
 </body>
 
diff --git a/docs/manual/IterativeSinCluster/IterativeSinCluster_ja.html b/docs/manual/IterativeSinCluster/IterativeSinCluster_ja.html
index 99f7867b..ca59080d 100644
--- a/docs/manual/IterativeSinCluster/IterativeSinCluster_ja.html
+++ b/docs/manual/IterativeSinCluster/IterativeSinCluster_ja.html
@@ -5,7 +5,7 @@
 <meta charset="utf-8" />
 <meta name="generator" content="pandoc" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
-<meta name="dcterms.date" content="2020-05-14" />
+<meta name="dcterms.date" content="2020-05-16" />
 <title>IterativeSinCluster_ja</title>
 <style>
 code { white-space: pre-wrap; }
@@ -14,19 +14,18 @@
 div.column { display: inline-block; vertical-align: top; width: 50%; }
 </style>
 <style>
-code.sourceCode > span { display: inline-block; line-height: 1.25; }
+pre > code.sourceCode { white-space: pre; position: relative; }
+pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
+pre > code.sourceCode > span:empty { height: 1.2em; }
 code.sourceCode > span { color: inherit; text-decoration: inherit; }
-code.sourceCode > span:empty { height: 1.2em; }
-.sourceCode { overflow: visible; }
-code.sourceCode { white-space: pre; position: relative; }
 div.sourceCode { margin: 1em 0; }
 pre.sourceCode { margin: 0; }
 @media screen {
 div.sourceCode { overflow: auto; }
 }
 @media print {
-code.sourceCode { white-space: pre-wrap; }
-code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
+pre > code.sourceCode { white-space: pre-wrap; }
+pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
 }
 pre.numberSource code
   { counter-reset: source-line 0; }
@@ -46,7 +45,7 @@
 div.sourceCode
   {   }
 @media screen {
-code.sourceCode > span > a:first-child::before { text-decoration: underline; }
+pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
 }
 code span.al { color: #ff0000; font-weight: bold; } /* Alert */
 code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
@@ -251,9 +250,9 @@
 
 <body>
 <header>
-    <p><a href="..\..\index.html">Back to Index</a></p>
+    <p><a href="../../index.html">Back to Index</a></p>
       <p>
-  Update: 2020-05-14
+  Update: 2020-05-16
   </p>
       <details>
   <summary translate="yes">Table of Contents</summary>
@@ -266,6 +265,7 @@
   <li><a href="#windows">Windows</a></li>
   <li><a href="#linux">Linux</a></li>
   </ul></li>
+  <li><a href="#色の設定">色の設定</a></li>
   <li><a href="#操作">操作</a></li>
   <li><a href="#ブロック線図">ブロック線図</a></li>
   <li><a href="#パラメータ">パラメータ</a><ul>
@@ -293,7 +293,7 @@ <h1 id="iterativesincluster">IterativeSinCluster</h1>
 <p><img src="img/iterativesincluster.png" /></p>
 <p><ruby>IterativeSinCluster<rt>イテレイティブ サイン クラスタ</rt></ruby>はノート 1 つあたり 512 のサイン波を計算する加算合成シンセサイザです。一体、何を考えていたのか iterative sin という言葉を名前に使っていますが、アルゴリズムの種類を表す正しい言葉は recursive sine です。</p>
 <ul>
-<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LatticeReverb0.1.0/IterativeSinCluster0.1.7.zip">IterativeSinCluster 0.1.7 をダウンロード - VST® 3 (github.com)</a> <img
+<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/ColorConfig/IterativeSinCluster0.1.8.zip">IterativeSinCluster 0.1.8 をダウンロード - VST® 3 (github.com)</a> <img
 src="img/VST_Compatible_Logo_Steinberg_negative.svg"
 alt="VST compatible logo."
 width="60px"
@@ -339,6 +339,57 @@ <h3 id="linux">Linux</h3>
 <li><a href="https://steinbergmedia.github.io/vst3_doc/vstinterfaces/linuxSetup.html">VST 3 Interfaces: Setup Linux for building VST 3 Plug-ins</a></li>
 </ul>
 <p>REAPER の Linux 版がプラグインを認識しないときは <code>~/.config/REAPER/reaper-vstplugins64.ini</code> を削除して REAPER を再起動してみてください。</p>
+<h2 id="色の設定">色の設定</h2>
+<p>初回設定時は手動で次のファイルを作成してください。</p>
+<ul>
+<li>Windows では <code>/Users/ユーザ名/AppData/Roaming/UhhyouPlugins/style/style.json</code> 。</li>
+<li>Linux では <code>$XDG_CONFIG_HOME/UhhyouPlugins/style/style.json</code> 。
+<ul>
+<li><code>$XDG_CONFIG_HOME</code> が空のときは <code>$HOME/.config/UhhyouPlugins/style/style.json</code> 。</li>
+</ul></li>
+<li>macOS では <code>/Users/$USERNAME/Library/Preferences/UhhyouPlugins/style/style.json</code> 。</li>
+</ul>
+<p>既存の色のテーマを次のリンクに掲載しています。 <code>style.json</code> にコピペして使ってください。</p>
+<ul>
+<li><a href="https://github.com/ryukau/LV2Plugins/tree/master/style/themes">LV2Plugins/style/themes at master · ryukau/LV2Plugins · GitHub</a></li>
+</ul>
+<p><code>style.json</code> の設定例です。</p>
+<div class="sourceCode" id="cb2"><pre class="sourceCode json"><code class="sourceCode json"><span id="cb2-1"><a href="#cb2-1"></a><span class="fu">{</span></span>
+<span id="cb2-2"><a href="#cb2-2"></a>  <span class="dt">&quot;foreground&quot;</span><span class="fu">:</span> <span class="st">&quot;#ffffff&quot;</span><span class="fu">,</span></span>
+<span id="cb2-3"><a href="#cb2-3"></a>  <span class="dt">&quot;foregroundButtonOn&quot;</span><span class="fu">:</span> <span class="st">&quot;#000000&quot;</span><span class="fu">,</span></span>
+<span id="cb2-4"><a href="#cb2-4"></a>  <span class="dt">&quot;background&quot;</span><span class="fu">:</span> <span class="st">&quot;#353d3e&quot;</span><span class="fu">,</span></span>
+<span id="cb2-5"><a href="#cb2-5"></a>  <span class="dt">&quot;boxBackground&quot;</span><span class="fu">:</span> <span class="st">&quot;#000000&quot;</span><span class="fu">,</span></span>
+<span id="cb2-6"><a href="#cb2-6"></a>  <span class="dt">&quot;border&quot;</span><span class="fu">:</span> <span class="st">&quot;#808080&quot;</span><span class="fu">,</span></span>
+<span id="cb2-7"><a href="#cb2-7"></a>  <span class="dt">&quot;unfocused&quot;</span><span class="fu">:</span> <span class="st">&quot;#b8a65c&quot;</span><span class="fu">,</span></span>
+<span id="cb2-8"><a href="#cb2-8"></a>  <span class="dt">&quot;highlightMain&quot;</span><span class="fu">:</span> <span class="st">&quot;#368a94&quot;</span><span class="fu">,</span></span>
+<span id="cb2-9"><a href="#cb2-9"></a>  <span class="dt">&quot;highlightAccent&quot;</span><span class="fu">:</span> <span class="st">&quot;#2c8a58&quot;</span><span class="fu">,</span></span>
+<span id="cb2-10"><a href="#cb2-10"></a>  <span class="dt">&quot;highlightButton&quot;</span><span class="fu">:</span> <span class="st">&quot;#a77842&quot;</span><span class="fu">,</span></span>
+<span id="cb2-11"><a href="#cb2-11"></a>  <span class="dt">&quot;highlightWarning&quot;</span><span class="fu">:</span> <span class="st">&quot;#8742a7&quot;</span><span class="fu">,</span></span>
+<span id="cb2-12"><a href="#cb2-12"></a>  <span class="dt">&quot;overlay&quot;</span><span class="fu">:</span> <span class="st">&quot;#ffffff88&quot;</span><span class="fu">,</span></span>
+<span id="cb2-13"><a href="#cb2-13"></a>  <span class="dt">&quot;overlayHighlight&quot;</span><span class="fu">:</span> <span class="st">&quot;#00ff0033&quot;</span></span>
+<span id="cb2-14"><a href="#cb2-14"></a><span class="fu">}</span></span></code></pre></div>
+<p>16 進数カラーコードを使っています。</p>
+<ul>
+<li>6 桁の色は RGB 。</li>
+<li>8 桁の色は RGBA 。</li>
+</ul>
+<p>プラグインはカラーコードの 1 つめのの文字を無視します。よって <code>?102938</code> や <code>11335577</code> も有効なカラーコードです。</p>
+<p>2 文字目以降のカラーコードの値に <code>0-9a-f</code> 以外の文字を使わないでください。</p>
+<p>以下は設定できる色の一覧です。設定に抜けがあるとデフォルトの色が使われます。</p>
+<ul>
+<li><code>foreground</code>: 文字の色。</li>
+<li><code>foregroundButtonOn</code>: オンになっているボタンの文字の色。 <code>foreground</code> か <code>boxBackground</code> のいずれかと同じ値にすることを推奨します。</li>
+<li><code>background</code>: 背景色。</li>
+<li><code>boxBackground</code>: 矩形の UI 部品の内側の背景色。</li>
+<li><code>border</code>: <ruby>縁<rt>ふち</rt></ruby>の色。</li>
+<li><code>unfocused</code>: つまみがフォーカスされていないときの色。</li>
+<li><code>highlightMain</code>: フォーカスされたときの色。スライダの値の表示にも使用されます。</li>
+<li><code>highlightAccent</code>: フォーカスされたときの色。一部のプラグインをカラフルにするために使用されます。</li>
+<li><code>highlightButton</code>: ボタンがフォーカスされたときの色。</li>
+<li><code>highlightWarning</code>: 変更に注意を要する UI がフォーカスされたときの色。</li>
+<li><code>overlay</code>: オーバーレイの色。</li>
+<li><code>overlayHighlight</code>: フォーカスを示すオーバーレイの色。</li>
+</ul>
 <h2 id="操作">操作</h2>
 <p>つまみとスライダーでは次の操作ができます。</p>
 <ul>
@@ -487,6 +538,10 @@ <h3 id="chorus">Chorus</h3>
 </dl>
 <h2 id="チェンジログ">チェンジログ</h2>
 <ul>
+<li>0.1.8
+<ul>
+<li>カラーコンフィグを追加。</li>
+</ul></li>
 <li>0.1.7
 <ul>
 <li>パラメータの補間を可変サイズのオーディオバッファでも機能する以前の手法に巻き戻した。</li>
@@ -525,6 +580,7 @@ <h2 id="チェンジログ">チェンジログ</h2>
 </ul>
 <h3 id="旧バージョン">旧バージョン</h3>
 <ul>
+<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LatticeReverb0.1.0/IterativeSinCluster0.1.7.zip">IterativeSinCluster 0.1.7 - VST 3 (github.com)</a></li>
 <li><a href="https://github.com/ryukau/VSTPlugins/releases/download/BarBoxFocusFix/IterativeSinCluster0.1.6.zip">IterativeSinCluster 0.1.6 - VST 3 (github.com)</a></li>
 <li><a href="https://github.com/ryukau/VSTPlugins/releases/download/DrawStringFix/IterativeSinCluster0.1.5.zip">IterativeSinCluster 0.1.5 - VST 3 (github.com)</a></li>
 <li><a href="https://github.com/ryukau/VSTPlugins/releases/download/EsPhaser0.1.0/IterativeSinCluster0.1.3.zip">IterativeSinCluster 0.1.3 - VST 3 (github.com)</a></li>
@@ -542,7 +598,7 @@ <h3 id="vst-について">VST® について</h3>
 <p>VST is a trademark of Steinberg Media Technologies GmbH, registered in Europe and other countries.</p>
 
 <footer>
-    <p><a href="..\..\index.html">Back to Index</a></p>
+    <p><a href="../../index.html">Back to Index</a></p>
   </footer>
 </body>
 
diff --git a/docs/manual/LatticeReverb/LatticeReverb_en.html b/docs/manual/LatticeReverb/LatticeReverb_en.html
index 865d63e2..0f31edc0 100644
--- a/docs/manual/LatticeReverb/LatticeReverb_en.html
+++ b/docs/manual/LatticeReverb/LatticeReverb_en.html
@@ -14,19 +14,18 @@
 div.column { display: inline-block; vertical-align: top; width: 50%; }
 </style>
 <style>
-code.sourceCode > span { display: inline-block; line-height: 1.25; }
+pre > code.sourceCode { white-space: pre; position: relative; }
+pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
+pre > code.sourceCode > span:empty { height: 1.2em; }
 code.sourceCode > span { color: inherit; text-decoration: inherit; }
-code.sourceCode > span:empty { height: 1.2em; }
-.sourceCode { overflow: visible; }
-code.sourceCode { white-space: pre; position: relative; }
 div.sourceCode { margin: 1em 0; }
 pre.sourceCode { margin: 0; }
 @media screen {
 div.sourceCode { overflow: auto; }
 }
 @media print {
-code.sourceCode { white-space: pre-wrap; }
-code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
+pre > code.sourceCode { white-space: pre-wrap; }
+pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
 }
 pre.numberSource code
   { counter-reset: source-line 0; }
@@ -46,7 +45,7 @@
 div.sourceCode
   {   }
 @media screen {
-code.sourceCode > span > a:first-child::before { text-decoration: underline; }
+pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
 }
 code span.al { color: #ff0000; font-weight: bold; } /* Alert */
 code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
@@ -251,7 +250,7 @@
 
 <body>
 <header>
-    <p><a href="..\..\index.html">Back to Index</a></p>
+    <p><a href="../../index.html">Back to Index</a></p>
       <p>
   Update: 2020-05-16
   </p>
@@ -266,6 +265,7 @@
   <li><a href="#windows-specific">Windows Specific</a></li>
   <li><a href="#linux-specific">Linux Specific</a></li>
   </ul></li>
+  <li><a href="#color-configuration">Color Configuration</a></li>
   <li><a href="#controls">Controls</a></li>
   <li><a href="#caution">Caution</a></li>
   <li><a href="#block-diagram">Block Diagram</a></li>
@@ -294,7 +294,7 @@ <h1 id="latticereverb">LatticeReverb</h1>
 <p><img src="img/latticereverb.png" /></p>
 <p>LatticeReverb is a reverb using lattice structure. Equipped with 16 delays per channel.</p>
 <ul>
-<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LatticeReverb0.1.0/LatticeReverb0.1.0.zip">Download LatticeReverb 0.1.0 - VST® 3 (github.com)</a> <img
+<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/ColorConfig/LatticeReverb0.1.1.zip">Download LatticeReverb 0.1.1 - VST® 3 (github.com)</a> <img
 src="img/VST_Compatible_Logo_Steinberg_negative.svg"
 alt="VST compatible logo."
 width="60px"
@@ -340,6 +340,52 @@ <h3 id="linux-specific">Linux Specific</h3>
 <li><a href="https://steinbergmedia.github.io/vst3_doc/vstinterfaces/linuxSetup.html">VST 3 Interfaces: Setup Linux for building VST 3 Plug-ins</a></li>
 </ul>
 <p>REAPER on Linux may not recognize the plugin. A workaround is to delete a file <code>~/.config/REAPER/reaper-vstplugins64.ini</code> and restart REAPER.</p>
+<h2 id="color-configuration">Color Configuration</h2>
+<p>At first time, create color config file to:</p>
+<ul>
+<li><code>/Users/USERNAME/AppData/Roaming/UhhyouPlugins/style/style.json</code> on Windows.</li>
+<li><code>$XDG_CONFIG_HOME/UhhyouPlugins/style/style.json</code> on Linux.
+<ul>
+<li>If <code>$XDG_CONFIG_HOME</code> is empty, make <code>$HOME/.config/UhhyouPlugins/style/style.json</code>.</li>
+</ul></li>
+<li><code>/Users/$USERNAME/Library/Preferences/UhhyouPlugins/style/style.json</code> on macOS.</li>
+</ul>
+<p>Below is a example of <code>style.json</code>.</p>
+<div class="sourceCode" id="cb2"><pre class="sourceCode json"><code class="sourceCode json"><span id="cb2-1"><a href="#cb2-1"></a><span class="fu">{</span></span>
+<span id="cb2-2"><a href="#cb2-2"></a>  <span class="dt">&quot;foreground&quot;</span><span class="fu">:</span> <span class="st">&quot;#ffffff&quot;</span><span class="fu">,</span></span>
+<span id="cb2-3"><a href="#cb2-3"></a>  <span class="dt">&quot;foregroundButtonOn&quot;</span><span class="fu">:</span> <span class="st">&quot;#000000&quot;</span><span class="fu">,</span></span>
+<span id="cb2-4"><a href="#cb2-4"></a>  <span class="dt">&quot;background&quot;</span><span class="fu">:</span> <span class="st">&quot;#353d3e&quot;</span><span class="fu">,</span></span>
+<span id="cb2-5"><a href="#cb2-5"></a>  <span class="dt">&quot;boxBackground&quot;</span><span class="fu">:</span> <span class="st">&quot;#000000&quot;</span><span class="fu">,</span></span>
+<span id="cb2-6"><a href="#cb2-6"></a>  <span class="dt">&quot;border&quot;</span><span class="fu">:</span> <span class="st">&quot;#808080&quot;</span><span class="fu">,</span></span>
+<span id="cb2-7"><a href="#cb2-7"></a>  <span class="dt">&quot;unfocused&quot;</span><span class="fu">:</span> <span class="st">&quot;#b8a65c&quot;</span><span class="fu">,</span></span>
+<span id="cb2-8"><a href="#cb2-8"></a>  <span class="dt">&quot;highlightMain&quot;</span><span class="fu">:</span> <span class="st">&quot;#368a94&quot;</span><span class="fu">,</span></span>
+<span id="cb2-9"><a href="#cb2-9"></a>  <span class="dt">&quot;highlightAccent&quot;</span><span class="fu">:</span> <span class="st">&quot;#2c8a58&quot;</span><span class="fu">,</span></span>
+<span id="cb2-10"><a href="#cb2-10"></a>  <span class="dt">&quot;highlightButton&quot;</span><span class="fu">:</span> <span class="st">&quot;#a77842&quot;</span><span class="fu">,</span></span>
+<span id="cb2-11"><a href="#cb2-11"></a>  <span class="dt">&quot;highlightWarning&quot;</span><span class="fu">:</span> <span class="st">&quot;#8742a7&quot;</span><span class="fu">,</span></span>
+<span id="cb2-12"><a href="#cb2-12"></a>  <span class="dt">&quot;overlay&quot;</span><span class="fu">:</span> <span class="st">&quot;#ffffff88&quot;</span><span class="fu">,</span></span>
+<span id="cb2-13"><a href="#cb2-13"></a>  <span class="dt">&quot;overlayHighlight&quot;</span><span class="fu">:</span> <span class="st">&quot;#00ff0033&quot;</span></span>
+<span id="cb2-14"><a href="#cb2-14"></a><span class="fu">}</span></span></code></pre></div>
+<p>Hex color codes are used.</p>
+<ul>
+<li>6 digit color is RGB.</li>
+<li>8 digit color is RGBA.</li>
+</ul>
+<p>First letter <code>#</code> is conventional. Plugins ignore the first letter of color code, thus <code>?102938</code>, <code>11335577</code> are valid.</p>
+<p>Do not use characters outside of <code>0-9a-f</code> for color value.</p>
+<ul>
+<li><code>foreground</code>: Text color.</li>
+<li><code>foregroundButtonOn</code>: Text color of active toggle button. Recommend to use the same value of <code>foreground</code> or <code>boxBackground</code>.</li>
+<li><code>background</code>: Background color.</li>
+<li><code>boxBackground</code>: Background color of inside of box shaped components (Barbox, Button, Checkbox, OptionMenu, TextKnob, VSlider).</li>
+<li><code>border</code>: Border color of box shaped components.</li>
+<li><code>unfocused</code>: Color to fill unfocused components. Currently, only used for knobs.</li>
+<li><code>highlightMain</code>: Color to indicate focus is on a component. Highlight colors are also used for value of slider components (BarBox and VSlider).- {new_version}{change_log}</li>
+<li><code>highlightAccent</code>: Same as <code>highlightMain</code>. Used for cosmetics.</li>
+<li><code>highlightButton</code>: Color to indicate focus is on a button.</li>
+<li><code>highlightWarning</code>: Same as <code>highlightMain</code>, but only used for parameters which requires extra caution.</li>
+<li><code>overlay</code>: Overlay color. Used to overlay texts and indicators.</li>
+<li><code>overlayHighlight</code>: Overlay color to highlight current focus.</li>
+</ul>
 <h2 id="controls">Controls</h2>
 <p>Knob and slider can do:</p>
 <ul>
@@ -545,13 +591,19 @@ <h3 id="modulation">Modulation</h3>
 </dl>
 <h2 id="change-log">Change Log</h2>
 <ul>
+<li>0.1.1
+<ul>
+<li>Added color configuration.</li>
+</ul></li>
 <li>0.1.0
 <ul>
 <li>Initial release.</li>
 </ul></li>
 </ul>
 <h3 id="old-versions">Old Versions</h3>
-<p>N/A</p>
+<ul>
+<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LatticeReverb0.1.0/LatticeReverb0.1.0.zip">LatticeReverb 0.1.0 - VST 3 (github.com)</a> N/A</li>
+</ul>
 <h2 id="license">License</h2>
 <p>LatticeReverb is licensed under GPLv3. Complete licenses are linked below.</p>
 <ul>
@@ -562,7 +614,7 @@ <h3 id="about-vst">About VST</h3>
 <p>VST is a trademark of Steinberg Media Technologies GmbH, registered in Europe and other countries.</p>
 
 <footer>
-    <p><a href="..\..\index.html">Back to Index</a></p>
+    <p><a href="../../index.html">Back to Index</a></p>
   </footer>
 </body>
 
diff --git a/docs/manual/LatticeReverb/LatticeReverb_ja.html b/docs/manual/LatticeReverb/LatticeReverb_ja.html
index 19bcca06..860de8ce 100644
--- a/docs/manual/LatticeReverb/LatticeReverb_ja.html
+++ b/docs/manual/LatticeReverb/LatticeReverb_ja.html
@@ -14,19 +14,18 @@
 div.column { display: inline-block; vertical-align: top; width: 50%; }
 </style>
 <style>
-code.sourceCode > span { display: inline-block; line-height: 1.25; }
+pre > code.sourceCode { white-space: pre; position: relative; }
+pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
+pre > code.sourceCode > span:empty { height: 1.2em; }
 code.sourceCode > span { color: inherit; text-decoration: inherit; }
-code.sourceCode > span:empty { height: 1.2em; }
-.sourceCode { overflow: visible; }
-code.sourceCode { white-space: pre; position: relative; }
 div.sourceCode { margin: 1em 0; }
 pre.sourceCode { margin: 0; }
 @media screen {
 div.sourceCode { overflow: auto; }
 }
 @media print {
-code.sourceCode { white-space: pre-wrap; }
-code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
+pre > code.sourceCode { white-space: pre-wrap; }
+pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
 }
 pre.numberSource code
   { counter-reset: source-line 0; }
@@ -46,7 +45,7 @@
 div.sourceCode
   {   }
 @media screen {
-code.sourceCode > span > a:first-child::before { text-decoration: underline; }
+pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
 }
 code span.al { color: #ff0000; font-weight: bold; } /* Alert */
 code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
@@ -251,7 +250,7 @@
 
 <body>
 <header>
-    <p><a href="..\..\index.html">Back to Index</a></p>
+    <p><a href="../../index.html">Back to Index</a></p>
       <p>
   Update: 2020-05-16
   </p>
@@ -266,6 +265,7 @@
   <li><a href="#windows">Windows</a></li>
   <li><a href="#linux">Linux</a></li>
   </ul></li>
+  <li><a href="#色の設定">色の設定</a></li>
   <li><a href="#操作">操作</a></li>
   <li><a href="#注意">注意</a></li>
   <li><a href="#ブロック線図">ブロック線図</a></li>
@@ -294,7 +294,7 @@ <h1 id="latticereverb">LatticeReverb</h1>
 <p><img src="img/latticereverb.png" /></p>
 <p><ruby>LatticeReverb<rt>ラティス リバーブ</rt></ruby> はディレイを使った高次のオールパスフィルタを格子状につないで入れ子にしたリバーブです。 1 チャンネルあたり 16 のオールパスフィルタを備えています。</p>
 <ul>
-<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LatticeReverb0.1.0/LatticeReverb0.1.0.zip">LatticeReverb 0.1.0 をダウンロード - VST® 3 (github.com)</a> <img
+<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/ColorConfig/LatticeReverb0.1.1.zip">LatticeReverb 0.1.1 をダウンロード - VST® 3 (github.com)</a> <img
 src="img/VST_Compatible_Logo_Steinberg_negative.svg"
 alt="VST compatible logo."
 width="60px"
@@ -340,6 +340,57 @@ <h3 id="linux">Linux</h3>
 <li><a href="https://steinbergmedia.github.io/vst3_doc/vstinterfaces/linuxSetup.html">VST 3 Interfaces: Setup Linux for building VST 3 Plug-ins</a></li>
 </ul>
 <p>REAPER の Linux 版がプラグインを認識しないときは <code>~/.config/REAPER/reaper-vstplugins64.ini</code> を削除して REAPER を再起動してみてください。</p>
+<h2 id="色の設定">色の設定</h2>
+<p>初回設定時は手動で次のファイルを作成してください。</p>
+<ul>
+<li>Windows では <code>/Users/ユーザ名/AppData/Roaming/UhhyouPlugins/style/style.json</code> 。</li>
+<li>Linux では <code>$XDG_CONFIG_HOME/UhhyouPlugins/style/style.json</code> 。
+<ul>
+<li><code>$XDG_CONFIG_HOME</code> が空のときは <code>$HOME/.config/UhhyouPlugins/style/style.json</code> 。</li>
+</ul></li>
+<li>macOS では <code>/Users/$USERNAME/Library/Preferences/UhhyouPlugins/style/style.json</code> 。</li>
+</ul>
+<p>既存の色のテーマを次のリンクに掲載しています。 <code>style.json</code> にコピペして使ってください。</p>
+<ul>
+<li><a href="https://github.com/ryukau/LV2Plugins/tree/master/style/themes">LV2Plugins/style/themes at master · ryukau/LV2Plugins · GitHub</a></li>
+</ul>
+<p><code>style.json</code> の設定例です。</p>
+<div class="sourceCode" id="cb2"><pre class="sourceCode json"><code class="sourceCode json"><span id="cb2-1"><a href="#cb2-1"></a><span class="fu">{</span></span>
+<span id="cb2-2"><a href="#cb2-2"></a>  <span class="dt">&quot;foreground&quot;</span><span class="fu">:</span> <span class="st">&quot;#ffffff&quot;</span><span class="fu">,</span></span>
+<span id="cb2-3"><a href="#cb2-3"></a>  <span class="dt">&quot;foregroundButtonOn&quot;</span><span class="fu">:</span> <span class="st">&quot;#000000&quot;</span><span class="fu">,</span></span>
+<span id="cb2-4"><a href="#cb2-4"></a>  <span class="dt">&quot;background&quot;</span><span class="fu">:</span> <span class="st">&quot;#353d3e&quot;</span><span class="fu">,</span></span>
+<span id="cb2-5"><a href="#cb2-5"></a>  <span class="dt">&quot;boxBackground&quot;</span><span class="fu">:</span> <span class="st">&quot;#000000&quot;</span><span class="fu">,</span></span>
+<span id="cb2-6"><a href="#cb2-6"></a>  <span class="dt">&quot;border&quot;</span><span class="fu">:</span> <span class="st">&quot;#808080&quot;</span><span class="fu">,</span></span>
+<span id="cb2-7"><a href="#cb2-7"></a>  <span class="dt">&quot;unfocused&quot;</span><span class="fu">:</span> <span class="st">&quot;#b8a65c&quot;</span><span class="fu">,</span></span>
+<span id="cb2-8"><a href="#cb2-8"></a>  <span class="dt">&quot;highlightMain&quot;</span><span class="fu">:</span> <span class="st">&quot;#368a94&quot;</span><span class="fu">,</span></span>
+<span id="cb2-9"><a href="#cb2-9"></a>  <span class="dt">&quot;highlightAccent&quot;</span><span class="fu">:</span> <span class="st">&quot;#2c8a58&quot;</span><span class="fu">,</span></span>
+<span id="cb2-10"><a href="#cb2-10"></a>  <span class="dt">&quot;highlightButton&quot;</span><span class="fu">:</span> <span class="st">&quot;#a77842&quot;</span><span class="fu">,</span></span>
+<span id="cb2-11"><a href="#cb2-11"></a>  <span class="dt">&quot;highlightWarning&quot;</span><span class="fu">:</span> <span class="st">&quot;#8742a7&quot;</span><span class="fu">,</span></span>
+<span id="cb2-12"><a href="#cb2-12"></a>  <span class="dt">&quot;overlay&quot;</span><span class="fu">:</span> <span class="st">&quot;#ffffff88&quot;</span><span class="fu">,</span></span>
+<span id="cb2-13"><a href="#cb2-13"></a>  <span class="dt">&quot;overlayHighlight&quot;</span><span class="fu">:</span> <span class="st">&quot;#00ff0033&quot;</span></span>
+<span id="cb2-14"><a href="#cb2-14"></a><span class="fu">}</span></span></code></pre></div>
+<p>16 進数カラーコードを使っています。</p>
+<ul>
+<li>6 桁の色は RGB 。</li>
+<li>8 桁の色は RGBA 。</li>
+</ul>
+<p>プラグインはカラーコードの 1 つめのの文字を無視します。よって <code>?102938</code> や <code>11335577</code> も有効なカラーコードです。</p>
+<p>2 文字目以降のカラーコードの値に <code>0-9a-f</code> 以外の文字を使わないでください。</p>
+<p>以下は設定できる色の一覧です。設定に抜けがあるとデフォルトの色が使われます。</p>
+<ul>
+<li><code>foreground</code>: 文字の色。</li>
+<li><code>foregroundButtonOn</code>: オンになっているボタンの文字の色。 <code>foreground</code> か <code>boxBackground</code> のいずれかと同じ値にすることを推奨します。</li>
+<li><code>background</code>: 背景色。</li>
+<li><code>boxBackground</code>: 矩形の UI 部品の内側の背景色。</li>
+<li><code>border</code>: <ruby>縁<rt>ふち</rt></ruby>の色。</li>
+<li><code>unfocused</code>: つまみがフォーカスされていないときの色。</li>
+<li><code>highlightMain</code>: フォーカスされたときの色。スライダの値の表示にも使用されます。</li>
+<li><code>highlightAccent</code>: フォーカスされたときの色。一部のプラグインをカラフルにするために使用されます。</li>
+<li><code>highlightButton</code>: ボタンがフォーカスされたときの色。</li>
+<li><code>highlightWarning</code>: 変更に注意を要する UI がフォーカスされたときの色。</li>
+<li><code>overlay</code>: オーバーレイの色。</li>
+<li><code>overlayHighlight</code>: フォーカスを示すオーバーレイの色。</li>
+</ul>
 <h2 id="操作">操作</h2>
 <p>つまみとスライダーでは次の操作ができます。</p>
 <ul>
@@ -546,13 +597,19 @@ <h3 id="modulation">Modulation</h3>
 </dl>
 <h2 id="チェンジログ">チェンジログ</h2>
 <ul>
+<li>0.1.1
+<ul>
+<li>カラーコンフィグを追加。</li>
+</ul></li>
 <li>0.1.0
 <ul>
 <li>初期リリース。</li>
 </ul></li>
 </ul>
 <h3 id="旧バージョン">旧バージョン</h3>
-<p>現在、旧バージョンはありません。</p>
+<ul>
+<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LatticeReverb0.1.0/LatticeReverb0.1.0.zip">LatticeReverb 0.1.0 - VST 3 (github.com)</a> 現在、旧バージョンはありません。</li>
+</ul>
 <h2 id="ライセンス">ライセンス</h2>
 <p>LatticeReverb のライセンスは GPLv3 です。 GPLv3 の詳細と、利用したライブラリのライセンスは次のリンクにまとめています。</p>
 <ul>
@@ -563,7 +620,7 @@ <h3 id="vst-について">VST® について</h3>
 <p>VST is a trademark of Steinberg Media Technologies GmbH, registered in Europe and other countries.</p>
 
 <footer>
-    <p><a href="..\..\index.html">Back to Index</a></p>
+    <p><a href="../../index.html">Back to Index</a></p>
   </footer>
 </body>
 
diff --git a/docs/manual/LightPadSynth/LightPadSynth_en.html b/docs/manual/LightPadSynth/LightPadSynth_en.html
index a159c689..3308066f 100644
--- a/docs/manual/LightPadSynth/LightPadSynth_en.html
+++ b/docs/manual/LightPadSynth/LightPadSynth_en.html
@@ -14,19 +14,18 @@
 div.column { display: inline-block; vertical-align: top; width: 50%; }
 </style>
 <style>
-code.sourceCode > span { display: inline-block; line-height: 1.25; }
+pre > code.sourceCode { white-space: pre; position: relative; }
+pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
+pre > code.sourceCode > span:empty { height: 1.2em; }
 code.sourceCode > span { color: inherit; text-decoration: inherit; }
-code.sourceCode > span:empty { height: 1.2em; }
-.sourceCode { overflow: visible; }
-code.sourceCode { white-space: pre; position: relative; }
 div.sourceCode { margin: 1em 0; }
 pre.sourceCode { margin: 0; }
 @media screen {
 div.sourceCode { overflow: auto; }
 }
 @media print {
-code.sourceCode { white-space: pre-wrap; }
-code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
+pre > code.sourceCode { white-space: pre-wrap; }
+pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
 }
 pre.numberSource code
   { counter-reset: source-line 0; }
@@ -46,7 +45,7 @@
 div.sourceCode
   {   }
 @media screen {
-code.sourceCode > span > a:first-child::before { text-decoration: underline; }
+pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
 }
 code span.al { color: #ff0000; font-weight: bold; } /* Alert */
 code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
@@ -251,7 +250,7 @@
 
 <body>
 <header>
-    <p><a href="..\..\index.html">Back to Index</a></p>
+    <p><a href="../../index.html">Back to Index</a></p>
       <p>
   Update: 2020-05-14
   </p>
@@ -266,6 +265,7 @@
   <li><a href="#windows-specific">Windows Specific</a></li>
   <li><a href="#linux-specific">Linux Specific</a></li>
   </ul></li>
+  <li><a href="#color-configuration">Color Configuration</a></li>
   <li><a href="#controls">Controls</a></li>
   <li><a href="#caution">Caution</a></li>
   <li><a href="#wavetable-specification">Wavetable Specification</a></li>
@@ -307,7 +307,7 @@ <h1 id="lightpadsynth">LightPadSynth</h1>
 <p><img src="img/lightpadsynth.png" /></p>
 <p>LightPadSynth is a lightweight version of CubicPadSynth. For efficiency, interpolation is changed to linear. Also pitch modulation is omitted. Instead, a delay is added for each voice.</p>
 <ul>
-<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LatticeReverb0.1.0/LightPadSynth0.1.3.zip">Download LightPadSynth 0.1.3 - VST® 3 (github.com)</a> <img
+<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/ColorConfig/LightPadSynth0.1.4.zip">Download LightPadSynth 0.1.4 - VST® 3 (github.com)</a> <img
 src="img/VST_Compatible_Logo_Steinberg_negative.svg"
 alt="VST compatible logo."
 width="60px"
@@ -353,6 +353,52 @@ <h3 id="linux-specific">Linux Specific</h3>
 <li><a href="https://steinbergmedia.github.io/vst3_doc/vstinterfaces/linuxSetup.html">VST 3 Interfaces: Setup Linux for building VST 3 Plug-ins</a></li>
 </ul>
 <p>REAPER on Linux may not recognize the plugin. A workaround is to delete a file <code>~/.config/REAPER/reaper-vstplugins64.ini</code> and restart REAPER.</p>
+<h2 id="color-configuration">Color Configuration</h2>
+<p>At first time, create color config file to:</p>
+<ul>
+<li><code>/Users/USERNAME/AppData/Roaming/UhhyouPlugins/style/style.json</code> on Windows.</li>
+<li><code>$XDG_CONFIG_HOME/UhhyouPlugins/style/style.json</code> on Linux.
+<ul>
+<li>If <code>$XDG_CONFIG_HOME</code> is empty, make <code>$HOME/.config/UhhyouPlugins/style/style.json</code>.</li>
+</ul></li>
+<li><code>/Users/$USERNAME/Library/Preferences/UhhyouPlugins/style/style.json</code> on macOS.</li>
+</ul>
+<p>Below is a example of <code>style.json</code>.</p>
+<div class="sourceCode" id="cb2"><pre class="sourceCode json"><code class="sourceCode json"><span id="cb2-1"><a href="#cb2-1"></a><span class="fu">{</span></span>
+<span id="cb2-2"><a href="#cb2-2"></a>  <span class="dt">&quot;foreground&quot;</span><span class="fu">:</span> <span class="st">&quot;#ffffff&quot;</span><span class="fu">,</span></span>
+<span id="cb2-3"><a href="#cb2-3"></a>  <span class="dt">&quot;foregroundButtonOn&quot;</span><span class="fu">:</span> <span class="st">&quot;#000000&quot;</span><span class="fu">,</span></span>
+<span id="cb2-4"><a href="#cb2-4"></a>  <span class="dt">&quot;background&quot;</span><span class="fu">:</span> <span class="st">&quot;#353d3e&quot;</span><span class="fu">,</span></span>
+<span id="cb2-5"><a href="#cb2-5"></a>  <span class="dt">&quot;boxBackground&quot;</span><span class="fu">:</span> <span class="st">&quot;#000000&quot;</span><span class="fu">,</span></span>
+<span id="cb2-6"><a href="#cb2-6"></a>  <span class="dt">&quot;border&quot;</span><span class="fu">:</span> <span class="st">&quot;#808080&quot;</span><span class="fu">,</span></span>
+<span id="cb2-7"><a href="#cb2-7"></a>  <span class="dt">&quot;unfocused&quot;</span><span class="fu">:</span> <span class="st">&quot;#b8a65c&quot;</span><span class="fu">,</span></span>
+<span id="cb2-8"><a href="#cb2-8"></a>  <span class="dt">&quot;highlightMain&quot;</span><span class="fu">:</span> <span class="st">&quot;#368a94&quot;</span><span class="fu">,</span></span>
+<span id="cb2-9"><a href="#cb2-9"></a>  <span class="dt">&quot;highlightAccent&quot;</span><span class="fu">:</span> <span class="st">&quot;#2c8a58&quot;</span><span class="fu">,</span></span>
+<span id="cb2-10"><a href="#cb2-10"></a>  <span class="dt">&quot;highlightButton&quot;</span><span class="fu">:</span> <span class="st">&quot;#a77842&quot;</span><span class="fu">,</span></span>
+<span id="cb2-11"><a href="#cb2-11"></a>  <span class="dt">&quot;highlightWarning&quot;</span><span class="fu">:</span> <span class="st">&quot;#8742a7&quot;</span><span class="fu">,</span></span>
+<span id="cb2-12"><a href="#cb2-12"></a>  <span class="dt">&quot;overlay&quot;</span><span class="fu">:</span> <span class="st">&quot;#ffffff88&quot;</span><span class="fu">,</span></span>
+<span id="cb2-13"><a href="#cb2-13"></a>  <span class="dt">&quot;overlayHighlight&quot;</span><span class="fu">:</span> <span class="st">&quot;#00ff0033&quot;</span></span>
+<span id="cb2-14"><a href="#cb2-14"></a><span class="fu">}</span></span></code></pre></div>
+<p>Hex color codes are used.</p>
+<ul>
+<li>6 digit color is RGB.</li>
+<li>8 digit color is RGBA.</li>
+</ul>
+<p>First letter <code>#</code> is conventional. Plugins ignore the first letter of color code, thus <code>?102938</code>, <code>11335577</code> are valid.</p>
+<p>Do not use characters outside of <code>0-9a-f</code> for color value.</p>
+<ul>
+<li><code>foreground</code>: Text color.</li>
+<li><code>foregroundButtonOn</code>: Text color of active toggle button. Recommend to use the same value of <code>foreground</code> or <code>boxBackground</code>.</li>
+<li><code>background</code>: Background color.</li>
+<li><code>boxBackground</code>: Background color of inside of box shaped components (Barbox, Button, Checkbox, OptionMenu, TextKnob, VSlider).</li>
+<li><code>border</code>: Border color of box shaped components.</li>
+<li><code>unfocused</code>: Color to fill unfocused components. Currently, only used for knobs.</li>
+<li><code>highlightMain</code>: Color to indicate focus is on a component. Highlight colors are also used for value of slider components (BarBox and VSlider).- {new_version}{change_log}</li>
+<li><code>highlightAccent</code>: Same as <code>highlightMain</code>. Used for cosmetics.</li>
+<li><code>highlightButton</code>: Color to indicate focus is on a button.</li>
+<li><code>highlightWarning</code>: Same as <code>highlightMain</code>, but only used for parameters which requires extra caution.</li>
+<li><code>overlay</code>: Overlay color. Used to overlay texts and indicators.</li>
+<li><code>overlayHighlight</code>: Overlay color to highlight current focus.</li>
+</ul>
 <h2 id="controls">Controls</h2>
 <p>Knob and slider can do:</p>
 <ul>
@@ -737,6 +783,10 @@ <h4 id="refresh-table">Refresh Table</h4>
 <p>Note that refreshing wavetable stops sound. It also interrupts MIDI notes.</p>
 <h2 id="change-log">Change Log</h2>
 <ul>
+<li>0.1.4
+<ul>
+<li>Added color configuration.</li>
+</ul></li>
 <li>0.1.3
 <ul>
 <li>Reverted parameter smoother to the old one which works with variable size audio buffer.</li>
@@ -757,6 +807,7 @@ <h2 id="change-log">Change Log</h2>
 </ul>
 <h3 id="old-versions">Old Versions</h3>
 <ul>
+<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LatticeReverb0.1.0/LightPadSynth0.1.3.zip">LightPadSynth 0.1.3 - VST 3 (github.com)</a></li>
 <li><a href="https://github.com/ryukau/VSTPlugins/releases/download/WavetableInitializationBugFix/LightPadSynth0.1.2.zip">LightPadSynth 0.1.2 - VST 3 (github.com)</a></li>
 <li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LightPadSynth0.1.0/LightPadSynth0.1.0.zip">LightPadSynth 0.1.0 - VST 3 (github.com)</a></li>
 </ul>
@@ -770,7 +821,7 @@ <h3 id="about-vst">About VST</h3>
 <p>VST is a trademark of Steinberg Media Technologies GmbH, registered in Europe and other countries.</p>
 
 <footer>
-    <p><a href="..\..\index.html">Back to Index</a></p>
+    <p><a href="../../index.html">Back to Index</a></p>
   </footer>
 </body>
 
diff --git a/docs/manual/LightPadSynth/LightPadSynth_ja.html b/docs/manual/LightPadSynth/LightPadSynth_ja.html
index 85a70a6f..f7c337eb 100644
--- a/docs/manual/LightPadSynth/LightPadSynth_ja.html
+++ b/docs/manual/LightPadSynth/LightPadSynth_ja.html
@@ -14,19 +14,18 @@
 div.column { display: inline-block; vertical-align: top; width: 50%; }
 </style>
 <style>
-code.sourceCode > span { display: inline-block; line-height: 1.25; }
+pre > code.sourceCode { white-space: pre; position: relative; }
+pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
+pre > code.sourceCode > span:empty { height: 1.2em; }
 code.sourceCode > span { color: inherit; text-decoration: inherit; }
-code.sourceCode > span:empty { height: 1.2em; }
-.sourceCode { overflow: visible; }
-code.sourceCode { white-space: pre; position: relative; }
 div.sourceCode { margin: 1em 0; }
 pre.sourceCode { margin: 0; }
 @media screen {
 div.sourceCode { overflow: auto; }
 }
 @media print {
-code.sourceCode { white-space: pre-wrap; }
-code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
+pre > code.sourceCode { white-space: pre-wrap; }
+pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
 }
 pre.numberSource code
   { counter-reset: source-line 0; }
@@ -46,7 +45,7 @@
 div.sourceCode
   {   }
 @media screen {
-code.sourceCode > span > a:first-child::before { text-decoration: underline; }
+pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
 }
 code span.al { color: #ff0000; font-weight: bold; } /* Alert */
 code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
@@ -251,7 +250,7 @@
 
 <body>
 <header>
-    <p><a href="..\..\index.html">Back to Index</a></p>
+    <p><a href="../../index.html">Back to Index</a></p>
       <p>
   Update: 2020-05-14
   </p>
@@ -266,6 +265,7 @@
   <li><a href="#windows">Windows</a></li>
   <li><a href="#linux">Linux</a></li>
   </ul></li>
+  <li><a href="#色の設定">色の設定</a></li>
   <li><a href="#操作">操作</a></li>
   <li><a href="#注意">注意</a></li>
   <li><a href="#ウェーブテーブルの仕様">ウェーブテーブルの仕様</a></li>
@@ -307,7 +307,7 @@ <h1 id="lightpadsynth">LightPadSynth</h1>
 <p><img src="img/lightpadsynth.png" /></p>
 <p><ruby>LightPadSynth<rt>ライト パッド シンセ</rt></ruby> はピッチ変調を無くして補間を線形補完に変えた CubicPadSynth の軽量版です。ピッチ変調ができなくなった代わりに、各ボイスにディレイを追加しています。</p>
 <ul>
-<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LatticeReverb0.1.0/LightPadSynth0.1.3.zip">LightPadSynth 0.1.3 をダウンロード - VST® 3 (github.com)</a> <img
+<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/ColorConfig/LightPadSynth0.1.4.zip">LightPadSynth 0.1.4 をダウンロード - VST® 3 (github.com)</a> <img
 src="img/VST_Compatible_Logo_Steinberg_negative.svg"
 alt="VST compatible logo."
 width="60px"
@@ -353,6 +353,57 @@ <h3 id="linux">Linux</h3>
 <li><a href="https://steinbergmedia.github.io/vst3_doc/vstinterfaces/linuxSetup.html">VST 3 Interfaces: Setup Linux for building VST 3 Plug-ins</a></li>
 </ul>
 <p>REAPER の Linux 版がプラグインを認識しないときは <code>~/.config/REAPER/reaper-vstplugins64.ini</code> を削除して REAPER を再起動してみてください。</p>
+<h2 id="色の設定">色の設定</h2>
+<p>初回設定時は手動で次のファイルを作成してください。</p>
+<ul>
+<li>Windows では <code>/Users/ユーザ名/AppData/Roaming/UhhyouPlugins/style/style.json</code> 。</li>
+<li>Linux では <code>$XDG_CONFIG_HOME/UhhyouPlugins/style/style.json</code> 。
+<ul>
+<li><code>$XDG_CONFIG_HOME</code> が空のときは <code>$HOME/.config/UhhyouPlugins/style/style.json</code> 。</li>
+</ul></li>
+<li>macOS では <code>/Users/$USERNAME/Library/Preferences/UhhyouPlugins/style/style.json</code> 。</li>
+</ul>
+<p>既存の色のテーマを次のリンクに掲載しています。 <code>style.json</code> にコピペして使ってください。</p>
+<ul>
+<li><a href="https://github.com/ryukau/LV2Plugins/tree/master/style/themes">LV2Plugins/style/themes at master · ryukau/LV2Plugins · GitHub</a></li>
+</ul>
+<p><code>style.json</code> の設定例です。</p>
+<div class="sourceCode" id="cb2"><pre class="sourceCode json"><code class="sourceCode json"><span id="cb2-1"><a href="#cb2-1"></a><span class="fu">{</span></span>
+<span id="cb2-2"><a href="#cb2-2"></a>  <span class="dt">&quot;foreground&quot;</span><span class="fu">:</span> <span class="st">&quot;#ffffff&quot;</span><span class="fu">,</span></span>
+<span id="cb2-3"><a href="#cb2-3"></a>  <span class="dt">&quot;foregroundButtonOn&quot;</span><span class="fu">:</span> <span class="st">&quot;#000000&quot;</span><span class="fu">,</span></span>
+<span id="cb2-4"><a href="#cb2-4"></a>  <span class="dt">&quot;background&quot;</span><span class="fu">:</span> <span class="st">&quot;#353d3e&quot;</span><span class="fu">,</span></span>
+<span id="cb2-5"><a href="#cb2-5"></a>  <span class="dt">&quot;boxBackground&quot;</span><span class="fu">:</span> <span class="st">&quot;#000000&quot;</span><span class="fu">,</span></span>
+<span id="cb2-6"><a href="#cb2-6"></a>  <span class="dt">&quot;border&quot;</span><span class="fu">:</span> <span class="st">&quot;#808080&quot;</span><span class="fu">,</span></span>
+<span id="cb2-7"><a href="#cb2-7"></a>  <span class="dt">&quot;unfocused&quot;</span><span class="fu">:</span> <span class="st">&quot;#b8a65c&quot;</span><span class="fu">,</span></span>
+<span id="cb2-8"><a href="#cb2-8"></a>  <span class="dt">&quot;highlightMain&quot;</span><span class="fu">:</span> <span class="st">&quot;#368a94&quot;</span><span class="fu">,</span></span>
+<span id="cb2-9"><a href="#cb2-9"></a>  <span class="dt">&quot;highlightAccent&quot;</span><span class="fu">:</span> <span class="st">&quot;#2c8a58&quot;</span><span class="fu">,</span></span>
+<span id="cb2-10"><a href="#cb2-10"></a>  <span class="dt">&quot;highlightButton&quot;</span><span class="fu">:</span> <span class="st">&quot;#a77842&quot;</span><span class="fu">,</span></span>
+<span id="cb2-11"><a href="#cb2-11"></a>  <span class="dt">&quot;highlightWarning&quot;</span><span class="fu">:</span> <span class="st">&quot;#8742a7&quot;</span><span class="fu">,</span></span>
+<span id="cb2-12"><a href="#cb2-12"></a>  <span class="dt">&quot;overlay&quot;</span><span class="fu">:</span> <span class="st">&quot;#ffffff88&quot;</span><span class="fu">,</span></span>
+<span id="cb2-13"><a href="#cb2-13"></a>  <span class="dt">&quot;overlayHighlight&quot;</span><span class="fu">:</span> <span class="st">&quot;#00ff0033&quot;</span></span>
+<span id="cb2-14"><a href="#cb2-14"></a><span class="fu">}</span></span></code></pre></div>
+<p>16 進数カラーコードを使っています。</p>
+<ul>
+<li>6 桁の色は RGB 。</li>
+<li>8 桁の色は RGBA 。</li>
+</ul>
+<p>プラグインはカラーコードの 1 つめのの文字を無視します。よって <code>?102938</code> や <code>11335577</code> も有効なカラーコードです。</p>
+<p>2 文字目以降のカラーコードの値に <code>0-9a-f</code> 以外の文字を使わないでください。</p>
+<p>以下は設定できる色の一覧です。設定に抜けがあるとデフォルトの色が使われます。</p>
+<ul>
+<li><code>foreground</code>: 文字の色。</li>
+<li><code>foregroundButtonOn</code>: オンになっているボタンの文字の色。 <code>foreground</code> か <code>boxBackground</code> のいずれかと同じ値にすることを推奨します。</li>
+<li><code>background</code>: 背景色。</li>
+<li><code>boxBackground</code>: 矩形の UI 部品の内側の背景色。</li>
+<li><code>border</code>: <ruby>縁<rt>ふち</rt></ruby>の色。</li>
+<li><code>unfocused</code>: つまみがフォーカスされていないときの色。</li>
+<li><code>highlightMain</code>: フォーカスされたときの色。スライダの値の表示にも使用されます。</li>
+<li><code>highlightAccent</code>: フォーカスされたときの色。一部のプラグインをカラフルにするために使用されます。</li>
+<li><code>highlightButton</code>: ボタンがフォーカスされたときの色。</li>
+<li><code>highlightWarning</code>: 変更に注意を要する UI がフォーカスされたときの色。</li>
+<li><code>overlay</code>: オーバーレイの色。</li>
+<li><code>overlayHighlight</code>: フォーカスを示すオーバーレイの色。</li>
+</ul>
 <h2 id="操作">操作</h2>
 <p>操作できる箇所を右クリックすると DAW によって提供されているコンテキストメニューを開くことができます。</p>
 <p>つまみとスライダーでは次の操作ができます。</p>
@@ -743,6 +794,10 @@ <h4 id="refresh-table">Refresh Table</h4>
 <p>ウェーブテーブルの更新中は音が止まるので注意してください。発音中のノートも全て停止します。</p>
 <h2 id="チェンジログ">チェンジログ</h2>
 <ul>
+<li>0.1.4
+<ul>
+<li>カラーコンフィグを追加。</li>
+</ul></li>
 <li>0.1.3
 <ul>
 <li>パラメータの補間を可変サイズのオーディオバッファでも機能する以前の手法に巻き戻した。</li>
@@ -763,6 +818,7 @@ <h2 id="チェンジログ">チェンジログ</h2>
 </ul>
 <h3 id="旧バージョン">旧バージョン</h3>
 <ul>
+<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LatticeReverb0.1.0/LightPadSynth0.1.3.zip">LightPadSynth 0.1.3 - VST 3 (github.com)</a></li>
 <li><a href="https://github.com/ryukau/VSTPlugins/releases/download/WavetableInitializationBugFix/LightPadSynth0.1.2.zip">LightPadSynth 0.1.2 - VST 3 (github.com)</a></li>
 <li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LightPadSynth0.1.0/LightPadSynth0.1.0.zip">LightPadSynth 0.1.0 - VST 3 (github.com)</a></li>
 </ul>
@@ -775,7 +831,7 @@ <h3 id="vst-について">VST® について</h3>
 <p>VST is a trademark of Steinberg Media Technologies GmbH, registered in Europe and other countries.</p>
 
 <footer>
-    <p><a href="..\..\index.html">Back to Index</a></p>
+    <p><a href="../../index.html">Back to Index</a></p>
   </footer>
 </body>
 
diff --git a/docs/manual/SevenDelay/SevenDelay_en.html b/docs/manual/SevenDelay/SevenDelay_en.html
index 533e8216..edf031aa 100644
--- a/docs/manual/SevenDelay/SevenDelay_en.html
+++ b/docs/manual/SevenDelay/SevenDelay_en.html
@@ -14,19 +14,18 @@
 div.column { display: inline-block; vertical-align: top; width: 50%; }
 </style>
 <style>
-code.sourceCode > span { display: inline-block; line-height: 1.25; }
+pre > code.sourceCode { white-space: pre; position: relative; }
+pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
+pre > code.sourceCode > span:empty { height: 1.2em; }
 code.sourceCode > span { color: inherit; text-decoration: inherit; }
-code.sourceCode > span:empty { height: 1.2em; }
-.sourceCode { overflow: visible; }
-code.sourceCode { white-space: pre; position: relative; }
 div.sourceCode { margin: 1em 0; }
 pre.sourceCode { margin: 0; }
 @media screen {
 div.sourceCode { overflow: auto; }
 }
 @media print {
-code.sourceCode { white-space: pre-wrap; }
-code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
+pre > code.sourceCode { white-space: pre-wrap; }
+pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
 }
 pre.numberSource code
   { counter-reset: source-line 0; }
@@ -46,7 +45,7 @@
 div.sourceCode
   {   }
 @media screen {
-code.sourceCode > span > a:first-child::before { text-decoration: underline; }
+pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
 }
 code span.al { color: #ff0000; font-weight: bold; } /* Alert */
 code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
@@ -251,7 +250,7 @@
 
 <body>
 <header>
-    <p><a href="..\..\index.html">Back to Index</a></p>
+    <p><a href="../../index.html">Back to Index</a></p>
       <p>
   Update: 2020-05-14
   </p>
@@ -266,6 +265,7 @@
   <li><a href="#windows-specific">Windows Specific</a></li>
   <li><a href="#linux-specific">Linux Specific</a></li>
   </ul></li>
+  <li><a href="#color-configuration">Color Configuration</a></li>
   <li><a href="#controls">Controls</a></li>
   <li><a href="#caution">Caution</a></li>
   <li><a href="#block-diagram">Block Diagram</a></li>
@@ -288,7 +288,7 @@ <h1 id="sevendelay">SevenDelay</h1>
 <p><img src="img/sevendelay.png" /></p>
 <p>SevenDelay is a stereo delay with 7th order lagrange interpolated fractional delay and 7x oversampling.</p>
 <ul>
-<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LatticeReverb0.1.0/SevenDelay0.1.10.zip">Download SevenDelay 0.1.10 - VST® 3 (github.com)</a> <img
+<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/ColorConfig/SevenDelay0.1.11.zip">Download SevenDelay 0.1.11 - VST® 3 (github.com)</a> <img
 src="img/VST_Compatible_Logo_Steinberg_negative.svg"
 alt="VST compatible logo."
 width="60px"
@@ -333,6 +333,52 @@ <h3 id="linux-specific">Linux Specific</h3>
 <li><a href="https://steinbergmedia.github.io/vst3_doc/vstinterfaces/linuxSetup.html">VST 3 Interfaces: Setup Linux for building VST 3 Plug-ins</a></li>
 </ul>
 <p>REAPER on Linux may not recognize the plugin. A workaround is to delete a file <code>~/.config/REAPER/reaper-vstplugins64.ini</code> and restart REAPER.</p>
+<h2 id="color-configuration">Color Configuration</h2>
+<p>At first time, create color config file to:</p>
+<ul>
+<li><code>/Users/USERNAME/AppData/Roaming/UhhyouPlugins/style/style.json</code> on Windows.</li>
+<li><code>$XDG_CONFIG_HOME/UhhyouPlugins/style/style.json</code> on Linux.
+<ul>
+<li>If <code>$XDG_CONFIG_HOME</code> is empty, make <code>$HOME/.config/UhhyouPlugins/style/style.json</code>.</li>
+</ul></li>
+<li><code>/Users/$USERNAME/Library/Preferences/UhhyouPlugins/style/style.json</code> on macOS.</li>
+</ul>
+<p>Below is a example of <code>style.json</code>.</p>
+<div class="sourceCode" id="cb2"><pre class="sourceCode json"><code class="sourceCode json"><span id="cb2-1"><a href="#cb2-1"></a><span class="fu">{</span></span>
+<span id="cb2-2"><a href="#cb2-2"></a>  <span class="dt">&quot;foreground&quot;</span><span class="fu">:</span> <span class="st">&quot;#ffffff&quot;</span><span class="fu">,</span></span>
+<span id="cb2-3"><a href="#cb2-3"></a>  <span class="dt">&quot;foregroundButtonOn&quot;</span><span class="fu">:</span> <span class="st">&quot;#000000&quot;</span><span class="fu">,</span></span>
+<span id="cb2-4"><a href="#cb2-4"></a>  <span class="dt">&quot;background&quot;</span><span class="fu">:</span> <span class="st">&quot;#353d3e&quot;</span><span class="fu">,</span></span>
+<span id="cb2-5"><a href="#cb2-5"></a>  <span class="dt">&quot;boxBackground&quot;</span><span class="fu">:</span> <span class="st">&quot;#000000&quot;</span><span class="fu">,</span></span>
+<span id="cb2-6"><a href="#cb2-6"></a>  <span class="dt">&quot;border&quot;</span><span class="fu">:</span> <span class="st">&quot;#808080&quot;</span><span class="fu">,</span></span>
+<span id="cb2-7"><a href="#cb2-7"></a>  <span class="dt">&quot;unfocused&quot;</span><span class="fu">:</span> <span class="st">&quot;#b8a65c&quot;</span><span class="fu">,</span></span>
+<span id="cb2-8"><a href="#cb2-8"></a>  <span class="dt">&quot;highlightMain&quot;</span><span class="fu">:</span> <span class="st">&quot;#368a94&quot;</span><span class="fu">,</span></span>
+<span id="cb2-9"><a href="#cb2-9"></a>  <span class="dt">&quot;highlightAccent&quot;</span><span class="fu">:</span> <span class="st">&quot;#2c8a58&quot;</span><span class="fu">,</span></span>
+<span id="cb2-10"><a href="#cb2-10"></a>  <span class="dt">&quot;highlightButton&quot;</span><span class="fu">:</span> <span class="st">&quot;#a77842&quot;</span><span class="fu">,</span></span>
+<span id="cb2-11"><a href="#cb2-11"></a>  <span class="dt">&quot;highlightWarning&quot;</span><span class="fu">:</span> <span class="st">&quot;#8742a7&quot;</span><span class="fu">,</span></span>
+<span id="cb2-12"><a href="#cb2-12"></a>  <span class="dt">&quot;overlay&quot;</span><span class="fu">:</span> <span class="st">&quot;#ffffff88&quot;</span><span class="fu">,</span></span>
+<span id="cb2-13"><a href="#cb2-13"></a>  <span class="dt">&quot;overlayHighlight&quot;</span><span class="fu">:</span> <span class="st">&quot;#00ff0033&quot;</span></span>
+<span id="cb2-14"><a href="#cb2-14"></a><span class="fu">}</span></span></code></pre></div>
+<p>Hex color codes are used.</p>
+<ul>
+<li>6 digit color is RGB.</li>
+<li>8 digit color is RGBA.</li>
+</ul>
+<p>First letter <code>#</code> is conventional. Plugins ignore the first letter of color code, thus <code>?102938</code>, <code>11335577</code> are valid.</p>
+<p>Do not use characters outside of <code>0-9a-f</code> for color value.</p>
+<ul>
+<li><code>foreground</code>: Text color.</li>
+<li><code>foregroundButtonOn</code>: Text color of active toggle button. Recommend to use the same value of <code>foreground</code> or <code>boxBackground</code>.</li>
+<li><code>background</code>: Background color.</li>
+<li><code>boxBackground</code>: Background color of inside of box shaped components (Barbox, Button, Checkbox, OptionMenu, TextKnob, VSlider).</li>
+<li><code>border</code>: Border color of box shaped components.</li>
+<li><code>unfocused</code>: Color to fill unfocused components. Currently, only used for knobs.</li>
+<li><code>highlightMain</code>: Color to indicate focus is on a component. Highlight colors are also used for value of slider components (BarBox and VSlider).- {new_version}{change_log}</li>
+<li><code>highlightAccent</code>: Same as <code>highlightMain</code>. Used for cosmetics.</li>
+<li><code>highlightButton</code>: Color to indicate focus is on a button.</li>
+<li><code>highlightWarning</code>: Same as <code>highlightMain</code>, but only used for parameters which requires extra caution.</li>
+<li><code>overlay</code>: Overlay color. Used to overlay texts and indicators.</li>
+<li><code>overlayHighlight</code>: Overlay color to highlight current focus.</li>
+</ul>
 <h2 id="controls">Controls</h2>
 <p>Knob and slider can do:</p>
 <ul>
@@ -437,6 +483,10 @@ <h3 id="lfo">LFO</h3>
 </dl>
 <h2 id="change-log">Change Log</h2>
 <ul>
+<li>0.1.11
+<ul>
+<li>Added color configuration.</li>
+</ul></li>
 <li>0.1.10
 <ul>
 <li>Reverted parameter smoother to the old one which works with variable size audio buffer.</li>
@@ -492,6 +542,7 @@ <h2 id="change-log">Change Log</h2>
 </ul>
 <h3 id="old-versions">Old Versions</h3>
 <ul>
+<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LatticeReverb0.1.0/SevenDelay0.1.10.zip">SevenDelay 0.1.10 - VST 3 (github.com)</a></li>
 <li><a href="https://github.com/ryukau/VSTPlugins/releases/download/DrawStringFix/SevenDelay0.1.9.zip">SevenDelay 0.1.9 - VST 3 (github.com)</a></li>
 <li><a href="https://github.com/ryukau/VSTPlugins/releases/download/EsPhaser0.1.0/SevenDelay0.1.7.zip">SevenDelay 0.1.7 - VST 3 (github.com)</a></li>
 <li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LinuxGUIFix/SevenDelay0.1.6.zip">SevenDelay 0.1.6 - VST 3 (github.com)</a></li>
@@ -508,7 +559,7 @@ <h3 id="about-vst">About VST</h3>
 <p>VST is a trademark of Steinberg Media Technologies GmbH, registered in Europe and other countries.</p>
 
 <footer>
-    <p><a href="..\..\index.html">Back to Index</a></p>
+    <p><a href="../../index.html">Back to Index</a></p>
   </footer>
 </body>
 
diff --git a/docs/manual/SevenDelay/SevenDelay_ja.html b/docs/manual/SevenDelay/SevenDelay_ja.html
index a9a08d9a..d90883e9 100644
--- a/docs/manual/SevenDelay/SevenDelay_ja.html
+++ b/docs/manual/SevenDelay/SevenDelay_ja.html
@@ -14,19 +14,18 @@
 div.column { display: inline-block; vertical-align: top; width: 50%; }
 </style>
 <style>
-code.sourceCode > span { display: inline-block; line-height: 1.25; }
+pre > code.sourceCode { white-space: pre; position: relative; }
+pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
+pre > code.sourceCode > span:empty { height: 1.2em; }
 code.sourceCode > span { color: inherit; text-decoration: inherit; }
-code.sourceCode > span:empty { height: 1.2em; }
-.sourceCode { overflow: visible; }
-code.sourceCode { white-space: pre; position: relative; }
 div.sourceCode { margin: 1em 0; }
 pre.sourceCode { margin: 0; }
 @media screen {
 div.sourceCode { overflow: auto; }
 }
 @media print {
-code.sourceCode { white-space: pre-wrap; }
-code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
+pre > code.sourceCode { white-space: pre-wrap; }
+pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
 }
 pre.numberSource code
   { counter-reset: source-line 0; }
@@ -46,7 +45,7 @@
 div.sourceCode
   {   }
 @media screen {
-code.sourceCode > span > a:first-child::before { text-decoration: underline; }
+pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
 }
 code span.al { color: #ff0000; font-weight: bold; } /* Alert */
 code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
@@ -251,7 +250,7 @@
 
 <body>
 <header>
-    <p><a href="..\..\index.html">Back to Index</a></p>
+    <p><a href="../../index.html">Back to Index</a></p>
       <p>
   Update: 2020-05-14
   </p>
@@ -266,6 +265,7 @@
   <li><a href="#windows">Windows</a></li>
   <li><a href="#linux">Linux</a></li>
   </ul></li>
+  <li><a href="#色の設定">色の設定</a></li>
   <li><a href="#操作">操作</a></li>
   <li><a href="#注意">注意</a></li>
   <li><a href="#ブロック線図">ブロック線図</a></li>
@@ -288,7 +288,7 @@ <h1 id="sevendelay">SevenDelay</h1>
 <p><img src="img/sevendelay.png" /></p>
 <p><ruby>SevenDelay<rt>セブンディレイ</rt></ruby> は7次のラグランジュ補間による分数ディレイと7倍のオーバーサンプリングを使ったステレオディレイです。</p>
 <ul>
-<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LatticeReverb0.1.0/SevenDelay0.1.10.zip">SevenDelay 0.1.10 をダウンロード - VST® 3 (github.com)</a> <img
+<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/ColorConfig/SevenDelay0.1.11.zip">SevenDelay 0.1.11 をダウンロード - VST® 3 (github.com)</a> <img
 src="img/VST_Compatible_Logo_Steinberg_negative.svg"
 alt="VST compatible logo."
 width="60px"
@@ -333,6 +333,57 @@ <h3 id="linux">Linux</h3>
 <li><a href="https://steinbergmedia.github.io/vst3_doc/vstinterfaces/linuxSetup.html">VST 3 Interfaces: Setup Linux for building VST 3 Plug-ins</a></li>
 </ul>
 <p>REAPER の Linux 版がプラグインを認識しないときは <code>~/.config/REAPER/reaper-vstplugins64.ini</code> を削除して REAPER を再起動してみてください。</p>
+<h2 id="色の設定">色の設定</h2>
+<p>初回設定時は手動で次のファイルを作成してください。</p>
+<ul>
+<li>Windows では <code>/Users/ユーザ名/AppData/Roaming/UhhyouPlugins/style/style.json</code> 。</li>
+<li>Linux では <code>$XDG_CONFIG_HOME/UhhyouPlugins/style/style.json</code> 。
+<ul>
+<li><code>$XDG_CONFIG_HOME</code> が空のときは <code>$HOME/.config/UhhyouPlugins/style/style.json</code> 。</li>
+</ul></li>
+<li>macOS では <code>/Users/$USERNAME/Library/Preferences/UhhyouPlugins/style/style.json</code> 。</li>
+</ul>
+<p>既存の色のテーマを次のリンクに掲載しています。 <code>style.json</code> にコピペして使ってください。</p>
+<ul>
+<li><a href="https://github.com/ryukau/LV2Plugins/tree/master/style/themes">LV2Plugins/style/themes at master · ryukau/LV2Plugins · GitHub</a></li>
+</ul>
+<p><code>style.json</code> の設定例です。</p>
+<div class="sourceCode" id="cb2"><pre class="sourceCode json"><code class="sourceCode json"><span id="cb2-1"><a href="#cb2-1"></a><span class="fu">{</span></span>
+<span id="cb2-2"><a href="#cb2-2"></a>  <span class="dt">&quot;foreground&quot;</span><span class="fu">:</span> <span class="st">&quot;#ffffff&quot;</span><span class="fu">,</span></span>
+<span id="cb2-3"><a href="#cb2-3"></a>  <span class="dt">&quot;foregroundButtonOn&quot;</span><span class="fu">:</span> <span class="st">&quot;#000000&quot;</span><span class="fu">,</span></span>
+<span id="cb2-4"><a href="#cb2-4"></a>  <span class="dt">&quot;background&quot;</span><span class="fu">:</span> <span class="st">&quot;#353d3e&quot;</span><span class="fu">,</span></span>
+<span id="cb2-5"><a href="#cb2-5"></a>  <span class="dt">&quot;boxBackground&quot;</span><span class="fu">:</span> <span class="st">&quot;#000000&quot;</span><span class="fu">,</span></span>
+<span id="cb2-6"><a href="#cb2-6"></a>  <span class="dt">&quot;border&quot;</span><span class="fu">:</span> <span class="st">&quot;#808080&quot;</span><span class="fu">,</span></span>
+<span id="cb2-7"><a href="#cb2-7"></a>  <span class="dt">&quot;unfocused&quot;</span><span class="fu">:</span> <span class="st">&quot;#b8a65c&quot;</span><span class="fu">,</span></span>
+<span id="cb2-8"><a href="#cb2-8"></a>  <span class="dt">&quot;highlightMain&quot;</span><span class="fu">:</span> <span class="st">&quot;#368a94&quot;</span><span class="fu">,</span></span>
+<span id="cb2-9"><a href="#cb2-9"></a>  <span class="dt">&quot;highlightAccent&quot;</span><span class="fu">:</span> <span class="st">&quot;#2c8a58&quot;</span><span class="fu">,</span></span>
+<span id="cb2-10"><a href="#cb2-10"></a>  <span class="dt">&quot;highlightButton&quot;</span><span class="fu">:</span> <span class="st">&quot;#a77842&quot;</span><span class="fu">,</span></span>
+<span id="cb2-11"><a href="#cb2-11"></a>  <span class="dt">&quot;highlightWarning&quot;</span><span class="fu">:</span> <span class="st">&quot;#8742a7&quot;</span><span class="fu">,</span></span>
+<span id="cb2-12"><a href="#cb2-12"></a>  <span class="dt">&quot;overlay&quot;</span><span class="fu">:</span> <span class="st">&quot;#ffffff88&quot;</span><span class="fu">,</span></span>
+<span id="cb2-13"><a href="#cb2-13"></a>  <span class="dt">&quot;overlayHighlight&quot;</span><span class="fu">:</span> <span class="st">&quot;#00ff0033&quot;</span></span>
+<span id="cb2-14"><a href="#cb2-14"></a><span class="fu">}</span></span></code></pre></div>
+<p>16 進数カラーコードを使っています。</p>
+<ul>
+<li>6 桁の色は RGB 。</li>
+<li>8 桁の色は RGBA 。</li>
+</ul>
+<p>プラグインはカラーコードの 1 つめのの文字を無視します。よって <code>?102938</code> や <code>11335577</code> も有効なカラーコードです。</p>
+<p>2 文字目以降のカラーコードの値に <code>0-9a-f</code> 以外の文字を使わないでください。</p>
+<p>以下は設定できる色の一覧です。設定に抜けがあるとデフォルトの色が使われます。</p>
+<ul>
+<li><code>foreground</code>: 文字の色。</li>
+<li><code>foregroundButtonOn</code>: オンになっているボタンの文字の色。 <code>foreground</code> か <code>boxBackground</code> のいずれかと同じ値にすることを推奨します。</li>
+<li><code>background</code>: 背景色。</li>
+<li><code>boxBackground</code>: 矩形の UI 部品の内側の背景色。</li>
+<li><code>border</code>: <ruby>縁<rt>ふち</rt></ruby>の色。</li>
+<li><code>unfocused</code>: つまみがフォーカスされていないときの色。</li>
+<li><code>highlightMain</code>: フォーカスされたときの色。スライダの値の表示にも使用されます。</li>
+<li><code>highlightAccent</code>: フォーカスされたときの色。一部のプラグインをカラフルにするために使用されます。</li>
+<li><code>highlightButton</code>: ボタンがフォーカスされたときの色。</li>
+<li><code>highlightWarning</code>: 変更に注意を要する UI がフォーカスされたときの色。</li>
+<li><code>overlay</code>: オーバーレイの色。</li>
+<li><code>overlayHighlight</code>: フォーカスを示すオーバーレイの色。</li>
+</ul>
 <h2 id="操作">操作</h2>
 <p>つまみとスライダーでは次の操作ができます。</p>
 <ul>
@@ -438,6 +489,10 @@ <h3 id="lfo">LFO</h3>
 </dl>
 <h2 id="チェンジログ">チェンジログ</h2>
 <ul>
+<li>0.1.11
+<ul>
+<li>カラーコンフィグを追加。</li>
+</ul></li>
 <li>0.1.10
 <ul>
 <li>パラメータの補間を可変サイズのオーディオバッファでも機能する以前の手法に巻き戻した。</li>
@@ -493,6 +548,7 @@ <h2 id="チェンジログ">チェンジログ</h2>
 </ul>
 <h3 id="旧バージョン">旧バージョン</h3>
 <ul>
+<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LatticeReverb0.1.0/SevenDelay0.1.10.zip">SevenDelay 0.1.10 - VST 3 (github.com)</a></li>
 <li><a href="https://github.com/ryukau/VSTPlugins/releases/download/DrawStringFix/SevenDelay0.1.9.zip">SevenDelay 0.1.9 - VST 3 (github.com)</a></li>
 <li><a href="https://github.com/ryukau/VSTPlugins/releases/download/EsPhaser0.1.0/SevenDelay0.1.7.zip">SevenDelay 0.1.7 - VST 3 (github.com)</a></li>
 <li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LinuxGUIFix/SevenDelay0.1.6.zip">SevenDelay 0.1.6 - VST 3 (github.com)</a></li>
@@ -509,7 +565,7 @@ <h3 id="vst-について">VST® について</h3>
 <p>VST is a trademark of Steinberg Media Technologies GmbH, registered in Europe and other countries.</p>
 
 <footer>
-    <p><a href="..\..\index.html">Back to Index</a></p>
+    <p><a href="../../index.html">Back to Index</a></p>
   </footer>
 </body>
 
diff --git a/docs/manual/SyncSawSynth/SyncSawSynth_en.html b/docs/manual/SyncSawSynth/SyncSawSynth_en.html
index df803c5e..ebc99f62 100644
--- a/docs/manual/SyncSawSynth/SyncSawSynth_en.html
+++ b/docs/manual/SyncSawSynth/SyncSawSynth_en.html
@@ -14,19 +14,18 @@
 div.column { display: inline-block; vertical-align: top; width: 50%; }
 </style>
 <style>
-code.sourceCode > span { display: inline-block; line-height: 1.25; }
+pre > code.sourceCode { white-space: pre; position: relative; }
+pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
+pre > code.sourceCode > span:empty { height: 1.2em; }
 code.sourceCode > span { color: inherit; text-decoration: inherit; }
-code.sourceCode > span:empty { height: 1.2em; }
-.sourceCode { overflow: visible; }
-code.sourceCode { white-space: pre; position: relative; }
 div.sourceCode { margin: 1em 0; }
 pre.sourceCode { margin: 0; }
 @media screen {
 div.sourceCode { overflow: auto; }
 }
 @media print {
-code.sourceCode { white-space: pre-wrap; }
-code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
+pre > code.sourceCode { white-space: pre-wrap; }
+pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
 }
 pre.numberSource code
   { counter-reset: source-line 0; }
@@ -46,7 +45,7 @@
 div.sourceCode
   {   }
 @media screen {
-code.sourceCode > span > a:first-child::before { text-decoration: underline; }
+pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
 }
 code span.al { color: #ff0000; font-weight: bold; } /* Alert */
 code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
@@ -251,7 +250,7 @@
 
 <body>
 <header>
-    <p><a href="..\..\index.html">Back to Index</a></p>
+    <p><a href="../../index.html">Back to Index</a></p>
       <p>
   Update: 2020-05-14
   </p>
@@ -266,6 +265,7 @@
   <li><a href="#windows-specific">Windows Specific</a></li>
   <li><a href="#linux-specific">Linux Specific</a></li>
   </ul></li>
+  <li><a href="#color-configuration">Color Configuration</a></li>
   <li><a href="#controls">Controls</a></li>
   <li><a href="#caution">Caution</a></li>
   <li><a href="#terms">Terms</a></li>
@@ -291,7 +291,7 @@ <h1 id="syncsawsynth">SyncSawSynth</h1>
 <p><img src="img/syncsawsynth.png" /></p>
 <p>SyncSawSynth is a 32 voice polyphonic synthesizer using up to 10th order PTR sawtooth oscillator. Just a basic synthesizer but very easy to make a noise similar to low battery sound of some toys.</p>
 <ul>
-<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LatticeReverb0.1.0/SyncSawSynth0.1.12.zip">Download SyncSawSynth 0.1.12 - VST® 3 (github.com)</a> <img
+<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/ColorConfig/SyncSawSynth0.1.13.zip">Download SyncSawSynth 0.1.13 - VST® 3 (github.com)</a> <img
 src="img/VST_Compatible_Logo_Steinberg_negative.svg"
 alt="VST compatible logo."
 width="60px"
@@ -336,6 +336,52 @@ <h3 id="linux-specific">Linux Specific</h3>
 <li><a href="https://steinbergmedia.github.io/vst3_doc/vstinterfaces/linuxSetup.html">VST 3 Interfaces: Setup Linux for building VST 3 Plug-ins</a></li>
 </ul>
 <p>REAPER on Linux may not recognize the plugin. A workaround is to delete a file <code>~/.config/REAPER/reaper-vstplugins64.ini</code> and restart REAPER.</p>
+<h2 id="color-configuration">Color Configuration</h2>
+<p>At first time, create color config file to:</p>
+<ul>
+<li><code>/Users/USERNAME/AppData/Roaming/UhhyouPlugins/style/style.json</code> on Windows.</li>
+<li><code>$XDG_CONFIG_HOME/UhhyouPlugins/style/style.json</code> on Linux.
+<ul>
+<li>If <code>$XDG_CONFIG_HOME</code> is empty, make <code>$HOME/.config/UhhyouPlugins/style/style.json</code>.</li>
+</ul></li>
+<li><code>/Users/$USERNAME/Library/Preferences/UhhyouPlugins/style/style.json</code> on macOS.</li>
+</ul>
+<p>Below is a example of <code>style.json</code>.</p>
+<div class="sourceCode" id="cb2"><pre class="sourceCode json"><code class="sourceCode json"><span id="cb2-1"><a href="#cb2-1"></a><span class="fu">{</span></span>
+<span id="cb2-2"><a href="#cb2-2"></a>  <span class="dt">&quot;foreground&quot;</span><span class="fu">:</span> <span class="st">&quot;#ffffff&quot;</span><span class="fu">,</span></span>
+<span id="cb2-3"><a href="#cb2-3"></a>  <span class="dt">&quot;foregroundButtonOn&quot;</span><span class="fu">:</span> <span class="st">&quot;#000000&quot;</span><span class="fu">,</span></span>
+<span id="cb2-4"><a href="#cb2-4"></a>  <span class="dt">&quot;background&quot;</span><span class="fu">:</span> <span class="st">&quot;#353d3e&quot;</span><span class="fu">,</span></span>
+<span id="cb2-5"><a href="#cb2-5"></a>  <span class="dt">&quot;boxBackground&quot;</span><span class="fu">:</span> <span class="st">&quot;#000000&quot;</span><span class="fu">,</span></span>
+<span id="cb2-6"><a href="#cb2-6"></a>  <span class="dt">&quot;border&quot;</span><span class="fu">:</span> <span class="st">&quot;#808080&quot;</span><span class="fu">,</span></span>
+<span id="cb2-7"><a href="#cb2-7"></a>  <span class="dt">&quot;unfocused&quot;</span><span class="fu">:</span> <span class="st">&quot;#b8a65c&quot;</span><span class="fu">,</span></span>
+<span id="cb2-8"><a href="#cb2-8"></a>  <span class="dt">&quot;highlightMain&quot;</span><span class="fu">:</span> <span class="st">&quot;#368a94&quot;</span><span class="fu">,</span></span>
+<span id="cb2-9"><a href="#cb2-9"></a>  <span class="dt">&quot;highlightAccent&quot;</span><span class="fu">:</span> <span class="st">&quot;#2c8a58&quot;</span><span class="fu">,</span></span>
+<span id="cb2-10"><a href="#cb2-10"></a>  <span class="dt">&quot;highlightButton&quot;</span><span class="fu">:</span> <span class="st">&quot;#a77842&quot;</span><span class="fu">,</span></span>
+<span id="cb2-11"><a href="#cb2-11"></a>  <span class="dt">&quot;highlightWarning&quot;</span><span class="fu">:</span> <span class="st">&quot;#8742a7&quot;</span><span class="fu">,</span></span>
+<span id="cb2-12"><a href="#cb2-12"></a>  <span class="dt">&quot;overlay&quot;</span><span class="fu">:</span> <span class="st">&quot;#ffffff88&quot;</span><span class="fu">,</span></span>
+<span id="cb2-13"><a href="#cb2-13"></a>  <span class="dt">&quot;overlayHighlight&quot;</span><span class="fu">:</span> <span class="st">&quot;#00ff0033&quot;</span></span>
+<span id="cb2-14"><a href="#cb2-14"></a><span class="fu">}</span></span></code></pre></div>
+<p>Hex color codes are used.</p>
+<ul>
+<li>6 digit color is RGB.</li>
+<li>8 digit color is RGBA.</li>
+</ul>
+<p>First letter <code>#</code> is conventional. Plugins ignore the first letter of color code, thus <code>?102938</code>, <code>11335577</code> are valid.</p>
+<p>Do not use characters outside of <code>0-9a-f</code> for color value.</p>
+<ul>
+<li><code>foreground</code>: Text color.</li>
+<li><code>foregroundButtonOn</code>: Text color of active toggle button. Recommend to use the same value of <code>foreground</code> or <code>boxBackground</code>.</li>
+<li><code>background</code>: Background color.</li>
+<li><code>boxBackground</code>: Background color of inside of box shaped components (Barbox, Button, Checkbox, OptionMenu, TextKnob, VSlider).</li>
+<li><code>border</code>: Border color of box shaped components.</li>
+<li><code>unfocused</code>: Color to fill unfocused components. Currently, only used for knobs.</li>
+<li><code>highlightMain</code>: Color to indicate focus is on a component. Highlight colors are also used for value of slider components (BarBox and VSlider).- {new_version}{change_log}</li>
+<li><code>highlightAccent</code>: Same as <code>highlightMain</code>. Used for cosmetics.</li>
+<li><code>highlightButton</code>: Color to indicate focus is on a button.</li>
+<li><code>highlightWarning</code>: Same as <code>highlightMain</code>, but only used for parameters which requires extra caution.</li>
+<li><code>overlay</code>: Overlay color. Used to overlay texts and indicators.</li>
+<li><code>overlayHighlight</code>: Overlay color to highlight current focus.</li>
+</ul>
 <h2 id="controls">Controls</h2>
 <p>Knob and slider can do:</p>
 <ul>
@@ -543,6 +589,10 @@ <h3 id="filter">Filter</h3>
 </dl>
 <h2 id="change-log">Change Log</h2>
 <ul>
+<li>0.1.13
+<ul>
+<li>Added color configuration.</li>
+</ul></li>
 <li>0.1.12
 <ul>
 <li>Changed parameter smoother to the one which works with variable size audio buffer.</li>
@@ -602,6 +652,7 @@ <h2 id="change-log">Change Log</h2>
 </ul>
 <h3 id="old-versions">Old Versions</h3>
 <ul>
+<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LatticeReverb0.1.0/SyncSawSynth0.1.12.zip">SyncSawSynth 0.1.12 - VST 3 (github.com)</a></li>
 <li><a href="https://github.com/ryukau/VSTPlugins/releases/download/DrawStringFix/SyncSawSynth0.1.11.zip">SyncSawSynth 0.1.11 - VST 3 (github.com)</a></li>
 <li><a href="https://github.com/ryukau/VSTPlugins/releases/download/EsPhaser0.1.0/SyncSawSynth0.1.9.zip">SyncSawSynth 0.1.9 - VST 3 (github.com)</a></li>
 <li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LinuxGUIFix/SyncSawSynth0.1.8.zip">SyncSawSynth 0.1.8 - VST 3 (github.com)</a></li>
@@ -617,7 +668,7 @@ <h3 id="about-vst">About VST</h3>
 <p>VST is a trademark of Steinberg Media Technologies GmbH, registered in Europe and other countries.</p>
 
 <footer>
-    <p><a href="..\..\index.html">Back to Index</a></p>
+    <p><a href="../../index.html">Back to Index</a></p>
   </footer>
 </body>
 
diff --git a/docs/manual/SyncSawSynth/SyncSawSynth_ja.html b/docs/manual/SyncSawSynth/SyncSawSynth_ja.html
index 0dcbdc72..2550b8c7 100644
--- a/docs/manual/SyncSawSynth/SyncSawSynth_ja.html
+++ b/docs/manual/SyncSawSynth/SyncSawSynth_ja.html
@@ -14,19 +14,18 @@
 div.column { display: inline-block; vertical-align: top; width: 50%; }
 </style>
 <style>
-code.sourceCode > span { display: inline-block; line-height: 1.25; }
+pre > code.sourceCode { white-space: pre; position: relative; }
+pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
+pre > code.sourceCode > span:empty { height: 1.2em; }
 code.sourceCode > span { color: inherit; text-decoration: inherit; }
-code.sourceCode > span:empty { height: 1.2em; }
-.sourceCode { overflow: visible; }
-code.sourceCode { white-space: pre; position: relative; }
 div.sourceCode { margin: 1em 0; }
 pre.sourceCode { margin: 0; }
 @media screen {
 div.sourceCode { overflow: auto; }
 }
 @media print {
-code.sourceCode { white-space: pre-wrap; }
-code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
+pre > code.sourceCode { white-space: pre-wrap; }
+pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
 }
 pre.numberSource code
   { counter-reset: source-line 0; }
@@ -46,7 +45,7 @@
 div.sourceCode
   {   }
 @media screen {
-code.sourceCode > span > a:first-child::before { text-decoration: underline; }
+pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
 }
 code span.al { color: #ff0000; font-weight: bold; } /* Alert */
 code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
@@ -251,7 +250,7 @@
 
 <body>
 <header>
-    <p><a href="..\..\index.html">Back to Index</a></p>
+    <p><a href="../../index.html">Back to Index</a></p>
       <p>
   Update: 2020-05-14
   </p>
@@ -266,6 +265,7 @@
   <li><a href="#windows">Windows</a></li>
   <li><a href="#linux">Linux</a></li>
   </ul></li>
+  <li><a href="#色の設定">色の設定</a></li>
   <li><a href="#操作">操作</a></li>
   <li><a href="#注意">注意</a></li>
   <li><a href="#ブロック線図">ブロック線図</a></li>
@@ -291,7 +291,7 @@ <h1 id="syncsawsynth">SyncSawSynth</h1>
 <p><img src="img/syncsawsynth.png" /></p>
 <p><ruby>SyncSawSynth<rt>シンクソウシンセ</rt></ruby>は10次までのPTR鋸歯波オシレータが使える32ボイスのポリフォニックシンセサイザです。主にハードシンクと周波数変調で電池が切れかけのおもちゃのような音を作る用途に向いています。もちろん普通の音も出ます。</p>
 <ul>
-<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LatticeReverb0.1.0/SyncSawSynth0.1.12.zip">SyncSawSynth 0.1.12 をダウンロード - VST® 3 (github.com)</a> <img
+<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/ColorConfig/SyncSawSynth0.1.13.zip">SyncSawSynth 0.1.13 をダウンロード - VST® 3 (github.com)</a> <img
 src="img/VST_Compatible_Logo_Steinberg_negative.svg"
 alt="VST compatible logo."
 width="60px"
@@ -336,6 +336,57 @@ <h3 id="linux">Linux</h3>
 <li><a href="https://steinbergmedia.github.io/vst3_doc/vstinterfaces/linuxSetup.html">VST 3 Interfaces: Setup Linux for building VST 3 Plug-ins</a></li>
 </ul>
 <p>REAPER の Linux 版がプラグインを認識しないときは <code>~/.config/REAPER/reaper-vstplugins64.ini</code> を削除して REAPER を再起動してみてください。</p>
+<h2 id="色の設定">色の設定</h2>
+<p>初回設定時は手動で次のファイルを作成してください。</p>
+<ul>
+<li>Windows では <code>/Users/ユーザ名/AppData/Roaming/UhhyouPlugins/style/style.json</code> 。</li>
+<li>Linux では <code>$XDG_CONFIG_HOME/UhhyouPlugins/style/style.json</code> 。
+<ul>
+<li><code>$XDG_CONFIG_HOME</code> が空のときは <code>$HOME/.config/UhhyouPlugins/style/style.json</code> 。</li>
+</ul></li>
+<li>macOS では <code>/Users/$USERNAME/Library/Preferences/UhhyouPlugins/style/style.json</code> 。</li>
+</ul>
+<p>既存の色のテーマを次のリンクに掲載しています。 <code>style.json</code> にコピペして使ってください。</p>
+<ul>
+<li><a href="https://github.com/ryukau/LV2Plugins/tree/master/style/themes">LV2Plugins/style/themes at master · ryukau/LV2Plugins · GitHub</a></li>
+</ul>
+<p><code>style.json</code> の設定例です。</p>
+<div class="sourceCode" id="cb2"><pre class="sourceCode json"><code class="sourceCode json"><span id="cb2-1"><a href="#cb2-1"></a><span class="fu">{</span></span>
+<span id="cb2-2"><a href="#cb2-2"></a>  <span class="dt">&quot;foreground&quot;</span><span class="fu">:</span> <span class="st">&quot;#ffffff&quot;</span><span class="fu">,</span></span>
+<span id="cb2-3"><a href="#cb2-3"></a>  <span class="dt">&quot;foregroundButtonOn&quot;</span><span class="fu">:</span> <span class="st">&quot;#000000&quot;</span><span class="fu">,</span></span>
+<span id="cb2-4"><a href="#cb2-4"></a>  <span class="dt">&quot;background&quot;</span><span class="fu">:</span> <span class="st">&quot;#353d3e&quot;</span><span class="fu">,</span></span>
+<span id="cb2-5"><a href="#cb2-5"></a>  <span class="dt">&quot;boxBackground&quot;</span><span class="fu">:</span> <span class="st">&quot;#000000&quot;</span><span class="fu">,</span></span>
+<span id="cb2-6"><a href="#cb2-6"></a>  <span class="dt">&quot;border&quot;</span><span class="fu">:</span> <span class="st">&quot;#808080&quot;</span><span class="fu">,</span></span>
+<span id="cb2-7"><a href="#cb2-7"></a>  <span class="dt">&quot;unfocused&quot;</span><span class="fu">:</span> <span class="st">&quot;#b8a65c&quot;</span><span class="fu">,</span></span>
+<span id="cb2-8"><a href="#cb2-8"></a>  <span class="dt">&quot;highlightMain&quot;</span><span class="fu">:</span> <span class="st">&quot;#368a94&quot;</span><span class="fu">,</span></span>
+<span id="cb2-9"><a href="#cb2-9"></a>  <span class="dt">&quot;highlightAccent&quot;</span><span class="fu">:</span> <span class="st">&quot;#2c8a58&quot;</span><span class="fu">,</span></span>
+<span id="cb2-10"><a href="#cb2-10"></a>  <span class="dt">&quot;highlightButton&quot;</span><span class="fu">:</span> <span class="st">&quot;#a77842&quot;</span><span class="fu">,</span></span>
+<span id="cb2-11"><a href="#cb2-11"></a>  <span class="dt">&quot;highlightWarning&quot;</span><span class="fu">:</span> <span class="st">&quot;#8742a7&quot;</span><span class="fu">,</span></span>
+<span id="cb2-12"><a href="#cb2-12"></a>  <span class="dt">&quot;overlay&quot;</span><span class="fu">:</span> <span class="st">&quot;#ffffff88&quot;</span><span class="fu">,</span></span>
+<span id="cb2-13"><a href="#cb2-13"></a>  <span class="dt">&quot;overlayHighlight&quot;</span><span class="fu">:</span> <span class="st">&quot;#00ff0033&quot;</span></span>
+<span id="cb2-14"><a href="#cb2-14"></a><span class="fu">}</span></span></code></pre></div>
+<p>16 進数カラーコードを使っています。</p>
+<ul>
+<li>6 桁の色は RGB 。</li>
+<li>8 桁の色は RGBA 。</li>
+</ul>
+<p>プラグインはカラーコードの 1 つめのの文字を無視します。よって <code>?102938</code> や <code>11335577</code> も有効なカラーコードです。</p>
+<p>2 文字目以降のカラーコードの値に <code>0-9a-f</code> 以外の文字を使わないでください。</p>
+<p>以下は設定できる色の一覧です。設定に抜けがあるとデフォルトの色が使われます。</p>
+<ul>
+<li><code>foreground</code>: 文字の色。</li>
+<li><code>foregroundButtonOn</code>: オンになっているボタンの文字の色。 <code>foreground</code> か <code>boxBackground</code> のいずれかと同じ値にすることを推奨します。</li>
+<li><code>background</code>: 背景色。</li>
+<li><code>boxBackground</code>: 矩形の UI 部品の内側の背景色。</li>
+<li><code>border</code>: <ruby>縁<rt>ふち</rt></ruby>の色。</li>
+<li><code>unfocused</code>: つまみがフォーカスされていないときの色。</li>
+<li><code>highlightMain</code>: フォーカスされたときの色。スライダの値の表示にも使用されます。</li>
+<li><code>highlightAccent</code>: フォーカスされたときの色。一部のプラグインをカラフルにするために使用されます。</li>
+<li><code>highlightButton</code>: ボタンがフォーカスされたときの色。</li>
+<li><code>highlightWarning</code>: 変更に注意を要する UI がフォーカスされたときの色。</li>
+<li><code>overlay</code>: オーバーレイの色。</li>
+<li><code>overlayHighlight</code>: フォーカスを示すオーバーレイの色。</li>
+</ul>
 <h2 id="操作">操作</h2>
 <p>つまみとスライダーでは次の操作ができます。</p>
 <ul>
@@ -542,6 +593,10 @@ <h3 id="filter">Filter</h3>
 </dl>
 <h2 id="チェンジログ">チェンジログ</h2>
 <ul>
+<li>0.1.13
+<ul>
+<li>カラーコンフィグを追加。</li>
+</ul></li>
 <li>0.1.12
 <ul>
 <li>パラメータの補間を可変サイズのオーディオバッファでも機能する手法に変更。</li>
@@ -601,6 +656,7 @@ <h2 id="チェンジログ">チェンジログ</h2>
 </ul>
 <h3 id="旧バージョン">旧バージョン</h3>
 <ul>
+<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LatticeReverb0.1.0/SyncSawSynth0.1.12.zip">SyncSawSynth 0.1.12 - VST 3 (github.com)</a></li>
 <li><a href="https://github.com/ryukau/VSTPlugins/releases/download/DrawStringFix/SyncSawSynth0.1.11.zip">SyncSawSynth 0.1.11 - VST 3 (github.com)</a></li>
 <li><a href="https://github.com/ryukau/VSTPlugins/releases/download/EsPhaser0.1.0/SyncSawSynth0.1.9.zip">SyncSawSynth 0.1.9 - VST 3 (github.com)</a></li>
 <li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LinuxGUIFix/SyncSawSynth0.1.8.zip">SyncSawSynth 0.1.8 - VST 3 (github.com)</a></li>
@@ -616,7 +672,7 @@ <h3 id="vst-について">VST® について</h3>
 <p>VST is a trademark of Steinberg Media Technologies GmbH, registered in Europe and other countries.</p>
 
 <footer>
-    <p><a href="..\..\index.html">Back to Index</a></p>
+    <p><a href="../../index.html">Back to Index</a></p>
   </footer>
 </body>
 
diff --git a/docs/manual/TrapezoidSynth/TrapezoidSynth_en.html b/docs/manual/TrapezoidSynth/TrapezoidSynth_en.html
index e3adf137..53268bbe 100644
--- a/docs/manual/TrapezoidSynth/TrapezoidSynth_en.html
+++ b/docs/manual/TrapezoidSynth/TrapezoidSynth_en.html
@@ -14,19 +14,18 @@
 div.column { display: inline-block; vertical-align: top; width: 50%; }
 </style>
 <style>
-code.sourceCode > span { display: inline-block; line-height: 1.25; }
+pre > code.sourceCode { white-space: pre; position: relative; }
+pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
+pre > code.sourceCode > span:empty { height: 1.2em; }
 code.sourceCode > span { color: inherit; text-decoration: inherit; }
-code.sourceCode > span:empty { height: 1.2em; }
-.sourceCode { overflow: visible; }
-code.sourceCode { white-space: pre; position: relative; }
 div.sourceCode { margin: 1em 0; }
 pre.sourceCode { margin: 0; }
 @media screen {
 div.sourceCode { overflow: auto; }
 }
 @media print {
-code.sourceCode { white-space: pre-wrap; }
-code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
+pre > code.sourceCode { white-space: pre-wrap; }
+pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
 }
 pre.numberSource code
   { counter-reset: source-line 0; }
@@ -46,7 +45,7 @@
 div.sourceCode
   {   }
 @media screen {
-code.sourceCode > span > a:first-child::before { text-decoration: underline; }
+pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
 }
 code span.al { color: #ff0000; font-weight: bold; } /* Alert */
 code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
@@ -251,7 +250,7 @@
 
 <body>
 <header>
-    <p><a href="..\..\index.html">Back to Index</a></p>
+    <p><a href="../../index.html">Back to Index</a></p>
       <p>
   Update: 2020-05-14
   </p>
@@ -266,6 +265,7 @@
   <li><a href="#windows-specific">Windows Specific</a></li>
   <li><a href="#linux-specific">Linux Specific</a></li>
   </ul></li>
+  <li><a href="#color-configuration">Color Configuration</a></li>
   <li><a href="#controls">Controls</a></li>
   <li><a href="#caution">Caution</a></li>
   <li><a href="#block-diagram">Block Diagram</a></li>
@@ -300,7 +300,7 @@ <h1 id="trapezoidsynth">TrapezoidSynth</h1>
 <p><img src="img/trapezoidsynth.png" /></p>
 <p>TrapezoidSynth is a monophonic synthesizer equipped with 2 trapezoid oscillator. Trapezoid oscillator is based on PTR (Polynomial Transition Regions) and it has a drawback that increasing noise at high frequency. Therefore 8 times oversampled. 2 pitch shifters are added to make some chord.</p>
 <ul>
-<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LatticeReverb0.1.0/TrapezoidSynth0.1.8.zip">Download TrapezoidSynth 0.1.8 - VST® 3 (github.com)</a> <img
+<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/ColorConfig/TrapezoidSynth0.1.9.zip">Download TrapezoidSynth 0.1.9 - VST® 3 (github.com)</a> <img
 src="img/VST_Compatible_Logo_Steinberg_negative.svg"
 alt="VST compatible logo."
 width="60px"
@@ -345,6 +345,52 @@ <h3 id="linux-specific">Linux Specific</h3>
 <li><a href="https://steinbergmedia.github.io/vst3_doc/vstinterfaces/linuxSetup.html">VST 3 Interfaces: Setup Linux for building VST 3 Plug-ins</a></li>
 </ul>
 <p>REAPER on Linux may not recognize the plugin. A workaround is to delete a file <code>~/.config/REAPER/reaper-vstplugins64.ini</code> and restart REAPER.</p>
+<h2 id="color-configuration">Color Configuration</h2>
+<p>At first time, create color config file to:</p>
+<ul>
+<li><code>/Users/USERNAME/AppData/Roaming/UhhyouPlugins/style/style.json</code> on Windows.</li>
+<li><code>$XDG_CONFIG_HOME/UhhyouPlugins/style/style.json</code> on Linux.
+<ul>
+<li>If <code>$XDG_CONFIG_HOME</code> is empty, make <code>$HOME/.config/UhhyouPlugins/style/style.json</code>.</li>
+</ul></li>
+<li><code>/Users/$USERNAME/Library/Preferences/UhhyouPlugins/style/style.json</code> on macOS.</li>
+</ul>
+<p>Below is a example of <code>style.json</code>.</p>
+<div class="sourceCode" id="cb2"><pre class="sourceCode json"><code class="sourceCode json"><span id="cb2-1"><a href="#cb2-1"></a><span class="fu">{</span></span>
+<span id="cb2-2"><a href="#cb2-2"></a>  <span class="dt">&quot;foreground&quot;</span><span class="fu">:</span> <span class="st">&quot;#ffffff&quot;</span><span class="fu">,</span></span>
+<span id="cb2-3"><a href="#cb2-3"></a>  <span class="dt">&quot;foregroundButtonOn&quot;</span><span class="fu">:</span> <span class="st">&quot;#000000&quot;</span><span class="fu">,</span></span>
+<span id="cb2-4"><a href="#cb2-4"></a>  <span class="dt">&quot;background&quot;</span><span class="fu">:</span> <span class="st">&quot;#353d3e&quot;</span><span class="fu">,</span></span>
+<span id="cb2-5"><a href="#cb2-5"></a>  <span class="dt">&quot;boxBackground&quot;</span><span class="fu">:</span> <span class="st">&quot;#000000&quot;</span><span class="fu">,</span></span>
+<span id="cb2-6"><a href="#cb2-6"></a>  <span class="dt">&quot;border&quot;</span><span class="fu">:</span> <span class="st">&quot;#808080&quot;</span><span class="fu">,</span></span>
+<span id="cb2-7"><a href="#cb2-7"></a>  <span class="dt">&quot;unfocused&quot;</span><span class="fu">:</span> <span class="st">&quot;#b8a65c&quot;</span><span class="fu">,</span></span>
+<span id="cb2-8"><a href="#cb2-8"></a>  <span class="dt">&quot;highlightMain&quot;</span><span class="fu">:</span> <span class="st">&quot;#368a94&quot;</span><span class="fu">,</span></span>
+<span id="cb2-9"><a href="#cb2-9"></a>  <span class="dt">&quot;highlightAccent&quot;</span><span class="fu">:</span> <span class="st">&quot;#2c8a58&quot;</span><span class="fu">,</span></span>
+<span id="cb2-10"><a href="#cb2-10"></a>  <span class="dt">&quot;highlightButton&quot;</span><span class="fu">:</span> <span class="st">&quot;#a77842&quot;</span><span class="fu">,</span></span>
+<span id="cb2-11"><a href="#cb2-11"></a>  <span class="dt">&quot;highlightWarning&quot;</span><span class="fu">:</span> <span class="st">&quot;#8742a7&quot;</span><span class="fu">,</span></span>
+<span id="cb2-12"><a href="#cb2-12"></a>  <span class="dt">&quot;overlay&quot;</span><span class="fu">:</span> <span class="st">&quot;#ffffff88&quot;</span><span class="fu">,</span></span>
+<span id="cb2-13"><a href="#cb2-13"></a>  <span class="dt">&quot;overlayHighlight&quot;</span><span class="fu">:</span> <span class="st">&quot;#00ff0033&quot;</span></span>
+<span id="cb2-14"><a href="#cb2-14"></a><span class="fu">}</span></span></code></pre></div>
+<p>Hex color codes are used.</p>
+<ul>
+<li>6 digit color is RGB.</li>
+<li>8 digit color is RGBA.</li>
+</ul>
+<p>First letter <code>#</code> is conventional. Plugins ignore the first letter of color code, thus <code>?102938</code>, <code>11335577</code> are valid.</p>
+<p>Do not use characters outside of <code>0-9a-f</code> for color value.</p>
+<ul>
+<li><code>foreground</code>: Text color.</li>
+<li><code>foregroundButtonOn</code>: Text color of active toggle button. Recommend to use the same value of <code>foreground</code> or <code>boxBackground</code>.</li>
+<li><code>background</code>: Background color.</li>
+<li><code>boxBackground</code>: Background color of inside of box shaped components (Barbox, Button, Checkbox, OptionMenu, TextKnob, VSlider).</li>
+<li><code>border</code>: Border color of box shaped components.</li>
+<li><code>unfocused</code>: Color to fill unfocused components. Currently, only used for knobs.</li>
+<li><code>highlightMain</code>: Color to indicate focus is on a component. Highlight colors are also used for value of slider components (BarBox and VSlider).- {new_version}{change_log}</li>
+<li><code>highlightAccent</code>: Same as <code>highlightMain</code>. Used for cosmetics.</li>
+<li><code>highlightButton</code>: Color to indicate focus is on a button.</li>
+<li><code>highlightWarning</code>: Same as <code>highlightMain</code>, but only used for parameters which requires extra caution.</li>
+<li><code>overlay</code>: Overlay color. Used to overlay texts and indicators.</li>
+<li><code>overlayHighlight</code>: Overlay color to highlight current focus.</li>
+</ul>
 <h2 id="controls">Controls</h2>
 <p>Knob and slider can do:</p>
 <ul>
@@ -590,6 +636,10 @@ <h3 id="slide">Slide</h3>
 </dl>
 <h2 id="change-log">Change Log</h2>
 <ul>
+<li>0.1.9
+<ul>
+<li>Added color configuration.</li>
+</ul></li>
 <li>0.1.8
 <ul>
 <li>Reverted parameter smoother to the old one which works with variable size audio buffer.</li>
@@ -632,6 +682,7 @@ <h2 id="change-log">Change Log</h2>
 </ul>
 <h3 id="old-versions">Old Versions</h3>
 <ul>
+<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LatticeReverb0.1.0/TrapezoidSynth0.1.8.zip">TrapezoidSynth 0.1.8 - VST 3 (github.com)</a></li>
 <li><a href="https://github.com/ryukau/VSTPlugins/releases/download/DrawStringFix/TrapezoidSynth0.1.7.zip">TrapezoidSynth 0.1.7 - VST 3 (github.com)</a></li>
 <li><a href="https://github.com/ryukau/VSTPlugins/releases/download/EsPhaser0.1.0/TrapezoidSynth0.1.5.zip">TrapezoidSynth 0.1.5 - VST 3 (github.com)</a></li>
 <li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LinuxGUIFix/TrapezoidSynth0.1.4.zip">TrapezoidSynth 0.1.4 - VST 3 (github.com)</a></li>
@@ -648,7 +699,7 @@ <h3 id="about-vst">About VST</h3>
 <p>VST is a trademark of Steinberg Media Technologies GmbH, registered in Europe and other countries.</p>
 
 <footer>
-    <p><a href="..\..\index.html">Back to Index</a></p>
+    <p><a href="../../index.html">Back to Index</a></p>
   </footer>
 </body>
 
diff --git a/docs/manual/TrapezoidSynth/TrapezoidSynth_ja.html b/docs/manual/TrapezoidSynth/TrapezoidSynth_ja.html
index 3759643d..4f33cbc8 100644
--- a/docs/manual/TrapezoidSynth/TrapezoidSynth_ja.html
+++ b/docs/manual/TrapezoidSynth/TrapezoidSynth_ja.html
@@ -14,19 +14,18 @@
 div.column { display: inline-block; vertical-align: top; width: 50%; }
 </style>
 <style>
-code.sourceCode > span { display: inline-block; line-height: 1.25; }
+pre > code.sourceCode { white-space: pre; position: relative; }
+pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
+pre > code.sourceCode > span:empty { height: 1.2em; }
 code.sourceCode > span { color: inherit; text-decoration: inherit; }
-code.sourceCode > span:empty { height: 1.2em; }
-.sourceCode { overflow: visible; }
-code.sourceCode { white-space: pre; position: relative; }
 div.sourceCode { margin: 1em 0; }
 pre.sourceCode { margin: 0; }
 @media screen {
 div.sourceCode { overflow: auto; }
 }
 @media print {
-code.sourceCode { white-space: pre-wrap; }
-code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
+pre > code.sourceCode { white-space: pre-wrap; }
+pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
 }
 pre.numberSource code
   { counter-reset: source-line 0; }
@@ -46,7 +45,7 @@
 div.sourceCode
   {   }
 @media screen {
-code.sourceCode > span > a:first-child::before { text-decoration: underline; }
+pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
 }
 code span.al { color: #ff0000; font-weight: bold; } /* Alert */
 code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
@@ -251,7 +250,7 @@
 
 <body>
 <header>
-    <p><a href="..\..\index.html">Back to Index</a></p>
+    <p><a href="../../index.html">Back to Index</a></p>
       <p>
   Update: 2020-05-14
   </p>
@@ -266,6 +265,7 @@
   <li><a href="#windows">Windows</a></li>
   <li><a href="#linux">Linux</a></li>
   </ul></li>
+  <li><a href="#色の設定">色の設定</a></li>
   <li><a href="#操作">操作</a></li>
   <li><a href="#注意">注意</a></li>
   <li><a href="#ブロック線図">ブロック線図</a></li>
@@ -300,7 +300,7 @@ <h1 id="trapezoidsynth">TrapezoidSynth</h1>
 <p><img src="img/trapezoidsynth.png" /></p>
 <p><ruby>TrapezoidSynth<rt>トラピゾイドシンセ</rt></ruby>は台形オシレータを使ったモノフォニックシンセサイザです。台形オシレータは PTR (Polynomial Transition Regions) という手法に基づいて作ったのですが、ピッチが高くなると逆にノイズが増える欠点があるので 8 倍のオーバーサンプリングをしています。コードを作るために 2 つの AM ピッチシフタを搭載しています。</p>
 <ul>
-<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LatticeReverb0.1.0/TrapezoidSynth0.1.8.zip">TrapezoidSynth 0.1.8 をダウンロード - VST® 3 (github.com)</a> <img
+<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/ColorConfig/TrapezoidSynth0.1.9.zip">TrapezoidSynth 0.1.9 をダウンロード - VST® 3 (github.com)</a> <img
 src="img/VST_Compatible_Logo_Steinberg_negative.svg"
 alt="VST compatible logo."
 width="60px"
@@ -345,6 +345,57 @@ <h3 id="linux">Linux</h3>
 <li><a href="https://steinbergmedia.github.io/vst3_doc/vstinterfaces/linuxSetup.html">VST 3 Interfaces: Setup Linux for building VST 3 Plug-ins</a></li>
 </ul>
 <p>REAPER の Linux 版がプラグインを認識しないときは <code>~/.config/REAPER/reaper-vstplugins64.ini</code> を削除して REAPER を再起動してみてください。</p>
+<h2 id="色の設定">色の設定</h2>
+<p>初回設定時は手動で次のファイルを作成してください。</p>
+<ul>
+<li>Windows では <code>/Users/ユーザ名/AppData/Roaming/UhhyouPlugins/style/style.json</code> 。</li>
+<li>Linux では <code>$XDG_CONFIG_HOME/UhhyouPlugins/style/style.json</code> 。
+<ul>
+<li><code>$XDG_CONFIG_HOME</code> が空のときは <code>$HOME/.config/UhhyouPlugins/style/style.json</code> 。</li>
+</ul></li>
+<li>macOS では <code>/Users/$USERNAME/Library/Preferences/UhhyouPlugins/style/style.json</code> 。</li>
+</ul>
+<p>既存の色のテーマを次のリンクに掲載しています。 <code>style.json</code> にコピペして使ってください。</p>
+<ul>
+<li><a href="https://github.com/ryukau/LV2Plugins/tree/master/style/themes">LV2Plugins/style/themes at master · ryukau/LV2Plugins · GitHub</a></li>
+</ul>
+<p><code>style.json</code> の設定例です。</p>
+<div class="sourceCode" id="cb2"><pre class="sourceCode json"><code class="sourceCode json"><span id="cb2-1"><a href="#cb2-1"></a><span class="fu">{</span></span>
+<span id="cb2-2"><a href="#cb2-2"></a>  <span class="dt">&quot;foreground&quot;</span><span class="fu">:</span> <span class="st">&quot;#ffffff&quot;</span><span class="fu">,</span></span>
+<span id="cb2-3"><a href="#cb2-3"></a>  <span class="dt">&quot;foregroundButtonOn&quot;</span><span class="fu">:</span> <span class="st">&quot;#000000&quot;</span><span class="fu">,</span></span>
+<span id="cb2-4"><a href="#cb2-4"></a>  <span class="dt">&quot;background&quot;</span><span class="fu">:</span> <span class="st">&quot;#353d3e&quot;</span><span class="fu">,</span></span>
+<span id="cb2-5"><a href="#cb2-5"></a>  <span class="dt">&quot;boxBackground&quot;</span><span class="fu">:</span> <span class="st">&quot;#000000&quot;</span><span class="fu">,</span></span>
+<span id="cb2-6"><a href="#cb2-6"></a>  <span class="dt">&quot;border&quot;</span><span class="fu">:</span> <span class="st">&quot;#808080&quot;</span><span class="fu">,</span></span>
+<span id="cb2-7"><a href="#cb2-7"></a>  <span class="dt">&quot;unfocused&quot;</span><span class="fu">:</span> <span class="st">&quot;#b8a65c&quot;</span><span class="fu">,</span></span>
+<span id="cb2-8"><a href="#cb2-8"></a>  <span class="dt">&quot;highlightMain&quot;</span><span class="fu">:</span> <span class="st">&quot;#368a94&quot;</span><span class="fu">,</span></span>
+<span id="cb2-9"><a href="#cb2-9"></a>  <span class="dt">&quot;highlightAccent&quot;</span><span class="fu">:</span> <span class="st">&quot;#2c8a58&quot;</span><span class="fu">,</span></span>
+<span id="cb2-10"><a href="#cb2-10"></a>  <span class="dt">&quot;highlightButton&quot;</span><span class="fu">:</span> <span class="st">&quot;#a77842&quot;</span><span class="fu">,</span></span>
+<span id="cb2-11"><a href="#cb2-11"></a>  <span class="dt">&quot;highlightWarning&quot;</span><span class="fu">:</span> <span class="st">&quot;#8742a7&quot;</span><span class="fu">,</span></span>
+<span id="cb2-12"><a href="#cb2-12"></a>  <span class="dt">&quot;overlay&quot;</span><span class="fu">:</span> <span class="st">&quot;#ffffff88&quot;</span><span class="fu">,</span></span>
+<span id="cb2-13"><a href="#cb2-13"></a>  <span class="dt">&quot;overlayHighlight&quot;</span><span class="fu">:</span> <span class="st">&quot;#00ff0033&quot;</span></span>
+<span id="cb2-14"><a href="#cb2-14"></a><span class="fu">}</span></span></code></pre></div>
+<p>16 進数カラーコードを使っています。</p>
+<ul>
+<li>6 桁の色は RGB 。</li>
+<li>8 桁の色は RGBA 。</li>
+</ul>
+<p>プラグインはカラーコードの 1 つめのの文字を無視します。よって <code>?102938</code> や <code>11335577</code> も有効なカラーコードです。</p>
+<p>2 文字目以降のカラーコードの値に <code>0-9a-f</code> 以外の文字を使わないでください。</p>
+<p>以下は設定できる色の一覧です。設定に抜けがあるとデフォルトの色が使われます。</p>
+<ul>
+<li><code>foreground</code>: 文字の色。</li>
+<li><code>foregroundButtonOn</code>: オンになっているボタンの文字の色。 <code>foreground</code> か <code>boxBackground</code> のいずれかと同じ値にすることを推奨します。</li>
+<li><code>background</code>: 背景色。</li>
+<li><code>boxBackground</code>: 矩形の UI 部品の内側の背景色。</li>
+<li><code>border</code>: <ruby>縁<rt>ふち</rt></ruby>の色。</li>
+<li><code>unfocused</code>: つまみがフォーカスされていないときの色。</li>
+<li><code>highlightMain</code>: フォーカスされたときの色。スライダの値の表示にも使用されます。</li>
+<li><code>highlightAccent</code>: フォーカスされたときの色。一部のプラグインをカラフルにするために使用されます。</li>
+<li><code>highlightButton</code>: ボタンがフォーカスされたときの色。</li>
+<li><code>highlightWarning</code>: 変更に注意を要する UI がフォーカスされたときの色。</li>
+<li><code>overlay</code>: オーバーレイの色。</li>
+<li><code>overlayHighlight</code>: フォーカスを示すオーバーレイの色。</li>
+</ul>
 <h2 id="操作">操作</h2>
 <p>つまみとスライダーでは次の操作ができます。</p>
 <ul>
@@ -590,6 +641,10 @@ <h3 id="slide">Slide</h3>
 </dl>
 <h2 id="チェンジログ">チェンジログ</h2>
 <ul>
+<li>0.1.9
+<ul>
+<li>カラーコンフィグを追加。</li>
+</ul></li>
 <li>0.1.8
 <ul>
 <li>パラメータの補間を可変サイズのオーディオバッファでも機能する以前の手法に巻き戻した。</li>
@@ -632,6 +687,7 @@ <h2 id="チェンジログ">チェンジログ</h2>
 </ul>
 <h3 id="旧バージョン">旧バージョン</h3>
 <ul>
+<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LatticeReverb0.1.0/TrapezoidSynth0.1.8.zip">TrapezoidSynth 0.1.8 - VST 3 (github.com)</a></li>
 <li><a href="https://github.com/ryukau/VSTPlugins/releases/download/DrawStringFix/TrapezoidSynth0.1.7.zip">TrapezoidSynth 0.1.7 - VST 3 (github.com)</a></li>
 <li><a href="https://github.com/ryukau/VSTPlugins/releases/download/EsPhaser0.1.0/TrapezoidSynth0.1.5.zip">TrapezoidSynth 0.1.5 - VST 3 (github.com)</a></li>
 <li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LinuxGUIFix/TrapezoidSynth0.1.4.zip">TrapezoidSynth 0.1.4 - VST 3 (github.com)</a></li>
@@ -648,7 +704,7 @@ <h3 id="vst-について">VST® について</h3>
 <p>VST is a trademark of Steinberg Media Technologies GmbH, registered in Europe and other countries.</p>
 
 <footer>
-    <p><a href="..\..\index.html">Back to Index</a></p>
+    <p><a href="../../index.html">Back to Index</a></p>
   </footer>
 </body>
 
diff --git a/docs/manual/WaveCymbal/WaveCymbal_en.html b/docs/manual/WaveCymbal/WaveCymbal_en.html
index 82e28dc5..350580df 100644
--- a/docs/manual/WaveCymbal/WaveCymbal_en.html
+++ b/docs/manual/WaveCymbal/WaveCymbal_en.html
@@ -14,19 +14,18 @@
 div.column { display: inline-block; vertical-align: top; width: 50%; }
 </style>
 <style>
-code.sourceCode > span { display: inline-block; line-height: 1.25; }
+pre > code.sourceCode { white-space: pre; position: relative; }
+pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
+pre > code.sourceCode > span:empty { height: 1.2em; }
 code.sourceCode > span { color: inherit; text-decoration: inherit; }
-code.sourceCode > span:empty { height: 1.2em; }
-.sourceCode { overflow: visible; }
-code.sourceCode { white-space: pre; position: relative; }
 div.sourceCode { margin: 1em 0; }
 pre.sourceCode { margin: 0; }
 @media screen {
 div.sourceCode { overflow: auto; }
 }
 @media print {
-code.sourceCode { white-space: pre-wrap; }
-code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
+pre > code.sourceCode { white-space: pre-wrap; }
+pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
 }
 pre.numberSource code
   { counter-reset: source-line 0; }
@@ -46,7 +45,7 @@
 div.sourceCode
   {   }
 @media screen {
-code.sourceCode > span > a:first-child::before { text-decoration: underline; }
+pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
 }
 code span.al { color: #ff0000; font-weight: bold; } /* Alert */
 code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
@@ -251,7 +250,7 @@
 
 <body>
 <header>
-    <p><a href="..\..\index.html">Back to Index</a></p>
+    <p><a href="../../index.html">Back to Index</a></p>
       <p>
   Update: 2020-05-14
   </p>
@@ -266,6 +265,7 @@
   <li><a href="#windows-specific">Windows Specific</a></li>
   <li><a href="#linux-specific">Linux Specific</a></li>
   </ul></li>
+  <li><a href="#color-configuration">Color Configuration</a></li>
   <li><a href="#controls">Controls</a></li>
   <li><a href="#caution">Caution</a></li>
   <li><a href="#block-diagram">Block Diagram</a></li>
@@ -295,7 +295,7 @@ <h1 id="wavecymbal">WaveCymbal</h1>
 <p><img src="img/wavecymbal.png" /></p>
 <p>WaveCymbal is an attempt to make a cymbal synthesizer with banded wave-guide model. The result is more like dragging bunch of empty cans or thin metal plate on asphalt rather than cymbal.</p>
 <ul>
-<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LatticeReverb0.1.0/WaveCymbal0.1.9.zip">Download WaveCymbal 0.1.9 - VST® 3 (github.com)</a> <img
+<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/ColorConfig/WaveCymbal0.1.10.zip">Download WaveCymbal 0.1.10 - VST® 3 (github.com)</a> <img
 src="img/VST_Compatible_Logo_Steinberg_negative.svg"
 alt="VST compatible logo."
 width="60px"
@@ -340,6 +340,52 @@ <h3 id="linux-specific">Linux Specific</h3>
 <li><a href="https://steinbergmedia.github.io/vst3_doc/vstinterfaces/linuxSetup.html">VST 3 Interfaces: Setup Linux for building VST 3 Plug-ins</a></li>
 </ul>
 <p>REAPER on Linux may not recognize the plugin. A workaround is to delete a file <code>~/.config/REAPER/reaper-vstplugins64.ini</code> and restart REAPER.</p>
+<h2 id="color-configuration">Color Configuration</h2>
+<p>At first time, create color config file to:</p>
+<ul>
+<li><code>/Users/USERNAME/AppData/Roaming/UhhyouPlugins/style/style.json</code> on Windows.</li>
+<li><code>$XDG_CONFIG_HOME/UhhyouPlugins/style/style.json</code> on Linux.
+<ul>
+<li>If <code>$XDG_CONFIG_HOME</code> is empty, make <code>$HOME/.config/UhhyouPlugins/style/style.json</code>.</li>
+</ul></li>
+<li><code>/Users/$USERNAME/Library/Preferences/UhhyouPlugins/style/style.json</code> on macOS.</li>
+</ul>
+<p>Below is a example of <code>style.json</code>.</p>
+<div class="sourceCode" id="cb2"><pre class="sourceCode json"><code class="sourceCode json"><span id="cb2-1"><a href="#cb2-1"></a><span class="fu">{</span></span>
+<span id="cb2-2"><a href="#cb2-2"></a>  <span class="dt">&quot;foreground&quot;</span><span class="fu">:</span> <span class="st">&quot;#ffffff&quot;</span><span class="fu">,</span></span>
+<span id="cb2-3"><a href="#cb2-3"></a>  <span class="dt">&quot;foregroundButtonOn&quot;</span><span class="fu">:</span> <span class="st">&quot;#000000&quot;</span><span class="fu">,</span></span>
+<span id="cb2-4"><a href="#cb2-4"></a>  <span class="dt">&quot;background&quot;</span><span class="fu">:</span> <span class="st">&quot;#353d3e&quot;</span><span class="fu">,</span></span>
+<span id="cb2-5"><a href="#cb2-5"></a>  <span class="dt">&quot;boxBackground&quot;</span><span class="fu">:</span> <span class="st">&quot;#000000&quot;</span><span class="fu">,</span></span>
+<span id="cb2-6"><a href="#cb2-6"></a>  <span class="dt">&quot;border&quot;</span><span class="fu">:</span> <span class="st">&quot;#808080&quot;</span><span class="fu">,</span></span>
+<span id="cb2-7"><a href="#cb2-7"></a>  <span class="dt">&quot;unfocused&quot;</span><span class="fu">:</span> <span class="st">&quot;#b8a65c&quot;</span><span class="fu">,</span></span>
+<span id="cb2-8"><a href="#cb2-8"></a>  <span class="dt">&quot;highlightMain&quot;</span><span class="fu">:</span> <span class="st">&quot;#368a94&quot;</span><span class="fu">,</span></span>
+<span id="cb2-9"><a href="#cb2-9"></a>  <span class="dt">&quot;highlightAccent&quot;</span><span class="fu">:</span> <span class="st">&quot;#2c8a58&quot;</span><span class="fu">,</span></span>
+<span id="cb2-10"><a href="#cb2-10"></a>  <span class="dt">&quot;highlightButton&quot;</span><span class="fu">:</span> <span class="st">&quot;#a77842&quot;</span><span class="fu">,</span></span>
+<span id="cb2-11"><a href="#cb2-11"></a>  <span class="dt">&quot;highlightWarning&quot;</span><span class="fu">:</span> <span class="st">&quot;#8742a7&quot;</span><span class="fu">,</span></span>
+<span id="cb2-12"><a href="#cb2-12"></a>  <span class="dt">&quot;overlay&quot;</span><span class="fu">:</span> <span class="st">&quot;#ffffff88&quot;</span><span class="fu">,</span></span>
+<span id="cb2-13"><a href="#cb2-13"></a>  <span class="dt">&quot;overlayHighlight&quot;</span><span class="fu">:</span> <span class="st">&quot;#00ff0033&quot;</span></span>
+<span id="cb2-14"><a href="#cb2-14"></a><span class="fu">}</span></span></code></pre></div>
+<p>Hex color codes are used.</p>
+<ul>
+<li>6 digit color is RGB.</li>
+<li>8 digit color is RGBA.</li>
+</ul>
+<p>First letter <code>#</code> is conventional. Plugins ignore the first letter of color code, thus <code>?102938</code>, <code>11335577</code> are valid.</p>
+<p>Do not use characters outside of <code>0-9a-f</code> for color value.</p>
+<ul>
+<li><code>foreground</code>: Text color.</li>
+<li><code>foregroundButtonOn</code>: Text color of active toggle button. Recommend to use the same value of <code>foreground</code> or <code>boxBackground</code>.</li>
+<li><code>background</code>: Background color.</li>
+<li><code>boxBackground</code>: Background color of inside of box shaped components (Barbox, Button, Checkbox, OptionMenu, TextKnob, VSlider).</li>
+<li><code>border</code>: Border color of box shaped components.</li>
+<li><code>unfocused</code>: Color to fill unfocused components. Currently, only used for knobs.</li>
+<li><code>highlightMain</code>: Color to indicate focus is on a component. Highlight colors are also used for value of slider components (BarBox and VSlider).- {new_version}{change_log}</li>
+<li><code>highlightAccent</code>: Same as <code>highlightMain</code>. Used for cosmetics.</li>
+<li><code>highlightButton</code>: Color to indicate focus is on a button.</li>
+<li><code>highlightWarning</code>: Same as <code>highlightMain</code>, but only used for parameters which requires extra caution.</li>
+<li><code>overlay</code>: Overlay color. Used to overlay texts and indicators.</li>
+<li><code>overlayHighlight</code>: Overlay color to highlight current focus.</li>
+</ul>
 <h2 id="controls">Controls</h2>
 <p>Knob and slider can do:</p>
 <ul>
@@ -444,6 +490,10 @@ <h3 id="smoothness">Smoothness</h3>
 <p>Transition time from previous value to current value in seconds. <code>Gain</code>, <code>Excitation.Time</code>, <code>Random.Amount</code>, <code>Bandpass.MinCutoff</code>, <code>Bandpass.MaxCutoff</code> will be affected. Slide effect of <code>OscType.Sustain</code> can be tuned by <code>Smoothness</code>.</p>
 <h2 id="change-log">Change Log</h2>
 <ul>
+<li>0.1.10
+<ul>
+<li>Added color configuration.</li>
+</ul></li>
 <li>0.1.9
 <ul>
 <li>Reverted parameter smoother to the old one which works with variable size audio buffer.</li>
@@ -492,6 +542,7 @@ <h2 id="change-log">Change Log</h2>
 </ul>
 <h3 id="old-versions">Old Versions</h3>
 <ul>
+<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LatticeReverb0.1.0/WaveCymbal0.1.9.zip">WaveCymbal 0.1.9 - VST 3 (github.com)</a></li>
 <li><a href="https://github.com/ryukau/VSTPlugins/releases/download/DrawStringFix/WaveCymbal0.1.8.zip">WaveCymbal 0.1.8 - VST 3 (github.com)</a></li>
 <li><a href="https://github.com/ryukau/VSTPlugins/releases/download/EsPhaser0.1.0/WaveCymbal0.1.6.zip">WaveCymbal 0.1.6 - VST 3 (github.com)</a></li>
 <li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LinuxGUIFix/WaveCymbal0.1.5.zip">WaveCymbal 0.1.5 - VST 3 (github.com)</a></li>
@@ -508,7 +559,7 @@ <h3 id="about-vst">About VST</h3>
 <p>VST is a trademark of Steinberg Media Technologies GmbH, registered in Europe and other countries.</p>
 
 <footer>
-    <p><a href="..\..\index.html">Back to Index</a></p>
+    <p><a href="../../index.html">Back to Index</a></p>
   </footer>
 </body>
 
diff --git a/docs/manual/WaveCymbal/WaveCymbal_ja.html b/docs/manual/WaveCymbal/WaveCymbal_ja.html
index f31ed7fb..ff9dd310 100644
--- a/docs/manual/WaveCymbal/WaveCymbal_ja.html
+++ b/docs/manual/WaveCymbal/WaveCymbal_ja.html
@@ -14,19 +14,18 @@
 div.column { display: inline-block; vertical-align: top; width: 50%; }
 </style>
 <style>
-code.sourceCode > span { display: inline-block; line-height: 1.25; }
+pre > code.sourceCode { white-space: pre; position: relative; }
+pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
+pre > code.sourceCode > span:empty { height: 1.2em; }
 code.sourceCode > span { color: inherit; text-decoration: inherit; }
-code.sourceCode > span:empty { height: 1.2em; }
-.sourceCode { overflow: visible; }
-code.sourceCode { white-space: pre; position: relative; }
 div.sourceCode { margin: 1em 0; }
 pre.sourceCode { margin: 0; }
 @media screen {
 div.sourceCode { overflow: auto; }
 }
 @media print {
-code.sourceCode { white-space: pre-wrap; }
-code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
+pre > code.sourceCode { white-space: pre-wrap; }
+pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
 }
 pre.numberSource code
   { counter-reset: source-line 0; }
@@ -46,7 +45,7 @@
 div.sourceCode
   {   }
 @media screen {
-code.sourceCode > span > a:first-child::before { text-decoration: underline; }
+pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
 }
 code span.al { color: #ff0000; font-weight: bold; } /* Alert */
 code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
@@ -251,7 +250,7 @@
 
 <body>
 <header>
-    <p><a href="..\..\index.html">Back to Index</a></p>
+    <p><a href="../../index.html">Back to Index</a></p>
       <p>
   Update: 2020-05-14
   </p>
@@ -266,6 +265,7 @@
   <li><a href="#windows">Windows</a></li>
   <li><a href="#linux">Linux</a></li>
   </ul></li>
+  <li><a href="#色の設定">色の設定</a></li>
   <li><a href="#操作">操作</a></li>
   <li><a href="#注意">注意</a></li>
   <li><a href="#ブロック線図">ブロック線図</a></li>
@@ -295,7 +295,7 @@ <h1 id="wavecymbal">WaveCymbal</h1>
 <p><img src="img/wavecymbal.png" /></p>
 <p><ruby>WaveCymbal<rt>ウェイブシンバル</rt></ruby>は banded wave-guide という手法を用いてシンバルの音が鳴るはずだったシンセサイザです。実際のところはシンバルというよりも、アスファルトの上でトタン板や紐につないだ空き缶を引きずったときのような音が出ます。</p>
 <ul>
-<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LatticeReverb0.1.0/WaveCymbal0.1.9.zip">WaveCymbal 0.1.9 をダウンロード - VST® 3 (github.com)</a> <img
+<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/ColorConfig/WaveCymbal0.1.10.zip">WaveCymbal 0.1.10 をダウンロード - VST® 3 (github.com)</a> <img
 src="img/VST_Compatible_Logo_Steinberg_negative.svg"
 alt="VST compatible logo."
 width="60px"
@@ -340,6 +340,57 @@ <h3 id="linux">Linux</h3>
 <li><a href="https://steinbergmedia.github.io/vst3_doc/vstinterfaces/linuxSetup.html">VST 3 Interfaces: Setup Linux for building VST 3 Plug-ins</a></li>
 </ul>
 <p>REAPER の Linux 版がプラグインを認識しないときは <code>~/.config/REAPER/reaper-vstplugins64.ini</code> を削除して REAPER を再起動してみてください。</p>
+<h2 id="色の設定">色の設定</h2>
+<p>初回設定時は手動で次のファイルを作成してください。</p>
+<ul>
+<li>Windows では <code>/Users/ユーザ名/AppData/Roaming/UhhyouPlugins/style/style.json</code> 。</li>
+<li>Linux では <code>$XDG_CONFIG_HOME/UhhyouPlugins/style/style.json</code> 。
+<ul>
+<li><code>$XDG_CONFIG_HOME</code> が空のときは <code>$HOME/.config/UhhyouPlugins/style/style.json</code> 。</li>
+</ul></li>
+<li>macOS では <code>/Users/$USERNAME/Library/Preferences/UhhyouPlugins/style/style.json</code> 。</li>
+</ul>
+<p>既存の色のテーマを次のリンクに掲載しています。 <code>style.json</code> にコピペして使ってください。</p>
+<ul>
+<li><a href="https://github.com/ryukau/LV2Plugins/tree/master/style/themes">LV2Plugins/style/themes at master · ryukau/LV2Plugins · GitHub</a></li>
+</ul>
+<p><code>style.json</code> の設定例です。</p>
+<div class="sourceCode" id="cb2"><pre class="sourceCode json"><code class="sourceCode json"><span id="cb2-1"><a href="#cb2-1"></a><span class="fu">{</span></span>
+<span id="cb2-2"><a href="#cb2-2"></a>  <span class="dt">&quot;foreground&quot;</span><span class="fu">:</span> <span class="st">&quot;#ffffff&quot;</span><span class="fu">,</span></span>
+<span id="cb2-3"><a href="#cb2-3"></a>  <span class="dt">&quot;foregroundButtonOn&quot;</span><span class="fu">:</span> <span class="st">&quot;#000000&quot;</span><span class="fu">,</span></span>
+<span id="cb2-4"><a href="#cb2-4"></a>  <span class="dt">&quot;background&quot;</span><span class="fu">:</span> <span class="st">&quot;#353d3e&quot;</span><span class="fu">,</span></span>
+<span id="cb2-5"><a href="#cb2-5"></a>  <span class="dt">&quot;boxBackground&quot;</span><span class="fu">:</span> <span class="st">&quot;#000000&quot;</span><span class="fu">,</span></span>
+<span id="cb2-6"><a href="#cb2-6"></a>  <span class="dt">&quot;border&quot;</span><span class="fu">:</span> <span class="st">&quot;#808080&quot;</span><span class="fu">,</span></span>
+<span id="cb2-7"><a href="#cb2-7"></a>  <span class="dt">&quot;unfocused&quot;</span><span class="fu">:</span> <span class="st">&quot;#b8a65c&quot;</span><span class="fu">,</span></span>
+<span id="cb2-8"><a href="#cb2-8"></a>  <span class="dt">&quot;highlightMain&quot;</span><span class="fu">:</span> <span class="st">&quot;#368a94&quot;</span><span class="fu">,</span></span>
+<span id="cb2-9"><a href="#cb2-9"></a>  <span class="dt">&quot;highlightAccent&quot;</span><span class="fu">:</span> <span class="st">&quot;#2c8a58&quot;</span><span class="fu">,</span></span>
+<span id="cb2-10"><a href="#cb2-10"></a>  <span class="dt">&quot;highlightButton&quot;</span><span class="fu">:</span> <span class="st">&quot;#a77842&quot;</span><span class="fu">,</span></span>
+<span id="cb2-11"><a href="#cb2-11"></a>  <span class="dt">&quot;highlightWarning&quot;</span><span class="fu">:</span> <span class="st">&quot;#8742a7&quot;</span><span class="fu">,</span></span>
+<span id="cb2-12"><a href="#cb2-12"></a>  <span class="dt">&quot;overlay&quot;</span><span class="fu">:</span> <span class="st">&quot;#ffffff88&quot;</span><span class="fu">,</span></span>
+<span id="cb2-13"><a href="#cb2-13"></a>  <span class="dt">&quot;overlayHighlight&quot;</span><span class="fu">:</span> <span class="st">&quot;#00ff0033&quot;</span></span>
+<span id="cb2-14"><a href="#cb2-14"></a><span class="fu">}</span></span></code></pre></div>
+<p>16 進数カラーコードを使っています。</p>
+<ul>
+<li>6 桁の色は RGB 。</li>
+<li>8 桁の色は RGBA 。</li>
+</ul>
+<p>プラグインはカラーコードの 1 つめのの文字を無視します。よって <code>?102938</code> や <code>11335577</code> も有効なカラーコードです。</p>
+<p>2 文字目以降のカラーコードの値に <code>0-9a-f</code> 以外の文字を使わないでください。</p>
+<p>以下は設定できる色の一覧です。設定に抜けがあるとデフォルトの色が使われます。</p>
+<ul>
+<li><code>foreground</code>: 文字の色。</li>
+<li><code>foregroundButtonOn</code>: オンになっているボタンの文字の色。 <code>foreground</code> か <code>boxBackground</code> のいずれかと同じ値にすることを推奨します。</li>
+<li><code>background</code>: 背景色。</li>
+<li><code>boxBackground</code>: 矩形の UI 部品の内側の背景色。</li>
+<li><code>border</code>: <ruby>縁<rt>ふち</rt></ruby>の色。</li>
+<li><code>unfocused</code>: つまみがフォーカスされていないときの色。</li>
+<li><code>highlightMain</code>: フォーカスされたときの色。スライダの値の表示にも使用されます。</li>
+<li><code>highlightAccent</code>: フォーカスされたときの色。一部のプラグインをカラフルにするために使用されます。</li>
+<li><code>highlightButton</code>: ボタンがフォーカスされたときの色。</li>
+<li><code>highlightWarning</code>: 変更に注意を要する UI がフォーカスされたときの色。</li>
+<li><code>overlay</code>: オーバーレイの色。</li>
+<li><code>overlayHighlight</code>: フォーカスを示すオーバーレイの色。</li>
+</ul>
 <h2 id="操作">操作</h2>
 <p>つまみとスライダーでは次の操作ができます。</p>
 <ul>
@@ -446,6 +497,10 @@ <h3 id="smoothness">Smoothness</h3>
 <p><code>Gain</code>, <code>Excitation.Time</code>, <code>Random.Amount</code>, <code>Bandpass.MinCutoff</code>, <code>Bandpass.MaxCutoff</code> を変更したときに、変更前の値から変更後の値に移行する時間（秒）です。 <code>OscType.Sustain</code> のスライドの長さも <code>Smoothness</code> で調整できます。</p>
 <h2 id="チェンジログ">チェンジログ</h2>
 <ul>
+<li>0.1.10
+<ul>
+<li>カラーコンフィグを追加。</li>
+</ul></li>
 <li>0.1.9
 <ul>
 <li>パラメータの補間を可変サイズのオーディオバッファでも機能する以前の手法に巻き戻した。</li>
@@ -494,6 +549,7 @@ <h2 id="チェンジログ">チェンジログ</h2>
 </ul>
 <h3 id="旧バージョン">旧バージョン</h3>
 <ul>
+<li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LatticeReverb0.1.0/WaveCymbal0.1.9.zip">WaveCymbal 0.1.9 - VST 3 (github.com)</a></li>
 <li><a href="https://github.com/ryukau/VSTPlugins/releases/download/DrawStringFix/WaveCymbal0.1.8.zip">WaveCymbal 0.1.8 - VST 3 (github.com)</a></li>
 <li><a href="https://github.com/ryukau/VSTPlugins/releases/download/EsPhaser0.1.0/WaveCymbal0.1.6.zip">WaveCymbal 0.1.6 - VST 3 (github.com)</a></li>
 <li><a href="https://github.com/ryukau/VSTPlugins/releases/download/LinuxGUIFix/WaveCymbal0.1.5.zip">WaveCymbal 0.1.5 - VST 3 (github.com)</a></li>
@@ -510,7 +566,7 @@ <h3 id="vst-について">VST® について</h3>
 <p>VST is a trademark of Steinberg Media Technologies GmbH, registered in Europe and other countries.</p>
 
 <footer>
-    <p><a href="..\..\index.html">Back to Index</a></p>
+    <p><a href="../../index.html">Back to Index</a></p>
   </footer>
 </body>
 
