diff --git a/index.css b/index.css
index 2fe0dc75..169b38f4 100644
--- a/index.css
+++ b/index.css
@@ -147,54 +147,21 @@ fieldset.float>form.option>div.text>span.value { padding:7px; height:32px; max-w
 fieldset:not(.float)>form.option>div.text>span.value { display:none; }
 body.mobile:not(.landscape) fieldset.float>form.option>div.text>span.value { display:none; }
 /* svg */
+body { --svg-stroke-width:2; }
 svg text { font-size:24px; font-family:monospace; }
-svg rect { stroke-width:2; }
-svg line { stroke-width:2; }
-svg path { stroke-width:2; }
-svg g[font-size] text { font-size:unset; }
-svg g[stroke-width] rect { stroke-width:unset; }
-svg g[stroke-width] line { stroke-width:unset; }
-svg g[stroke-width] path { stroke-width:unset; }
-svg text { stroke:black; fill:black; }
-svg rect { stroke:black; fill:white; }
-svg line { stroke:black; }
-svg path { stroke:black; }
-svg g[fill] text { fill:unset; }
-svg g[fill] rect { fill:unset; }
+svg rect { stroke-width:var(--svg-stroke-width); }
+svg line { stroke-width:var(--svg-stroke-width); }
+svg path { stroke-width:var(--svg-stroke-width); }
+svg text { stroke:var(--body-fg-color); fill:var(--body-fg-color); }
+svg rect { stroke:var(--body-fg-color); fill:var(--output-bg-color); }
+svg line { stroke:var(--body-fg-color); }
+svg path { stroke:var(--body-fg-color);; }
 svg g[stroke] text { stroke:unset; }
 svg g[stroke] rect { stroke:unset; }
 svg g[stroke] line { stroke:unset; }
 svg g[stroke] path { stroke:unset; }
-body.dark svg text { stroke:silver; fill:silver; }
-body.dark svg rect { stroke:silver; fill:black; }
-body.dark svg line { stroke:silver; }
-body.dark svg path { stroke:silver; }
-body.dark svg g[fill] text { fill:unset; }
-body.dark svg g[fill] rect { fill:unset; }
-body.dark svg g[stroke] text { stroke:unset; }
-body.dark svg g[stroke] rect { stroke:unset; }
-body.dark svg g[stroke] line { stroke:unset; }
-body.dark svg g[stroke] path { stroke:unset; }
-body.black svg text { stroke:cyan; fill:cyan; }
-body.black svg rect { stroke:cyan; fill:transparent; }
-body.black svg line { stroke:cyan; }
-body.black svg path { stroke:cyan; }
-body.black svg g[fill] text { fill:unset; }
-body.black svg g[fill] rect { fill:unset; }
-body.black svg g[stroke] text { stroke:unset; }
-body.black svg g[stroke] rect { stroke:unset; }
-body.black svg g[stroke] line { stroke:unset; }
-body.black svg g[stroke] path { stroke:unset; }
-body.white svg text { stroke:black; fill:black; }
-body.white svg rect { stroke:black; fill:transparent; }
-body.white svg line { stroke:black; }
-body.white svg path { stroke:black; }
-body.white svg g[fill] text { fill:unset; }
-body.white svg g[fill] rect { fill:unset; }
-body.white svg g[stroke] text { stroke:unset; }
-body.white svg g[stroke] rect { stroke:unset; }
-body.white svg g[stroke] line { stroke:unset; }
-body.white svg g[stroke] path { stroke:unset; }
+svg g[fill] text { fill:unset; }
+svg g[fill] rect { fill:unset; }
 /* output */
 div.project div.list { margin-left:10px; clear:both; }
 div.project div.item { padding:2px 10px; }
@@ -241,6 +208,59 @@ fieldset.plug div.output table.content { width:100%; }
 div.carte.select.float>div.item { text-align:center; }
 legend, select, input[type=button], th, table.content td, h1, h2, h3, div.item, div.tabs { cursor:pointer; }
 div.story[data-type=spark] { cursor:copy; }
+/* theme */
+body { background-color:var(--body-bg-color); color:var(--body-fg-color); }
+body legend { background-color:var(--legend-bg-color); border-radius:var(--input-radius); }
+body legend:hover { color:var(--hover-fg-color) }
+body select { border-radius:var(--input-radius); }
+body input { background-color:var(--input-bg-color); color:var(--input-fg-color); border-radius:var(--input-radius); }
+body input:hover { color:var(--hover-fg-color) }
+body input:not([type=button]) { border-radius:0; }
+body input:not([type=button]):hover { border:var(--input-border); }
+body input:not([type=button]):focus { border:var(--input-border); outline:none; }
+body textarea { background-color:var(--input-bg-color); color:var(--input-fg-color); }
+body table.content tr:hover { background-color:var(--tr-hover-bg-color); color:var(--hover-fg-color); }
+body table.content th { background-color:var(--th-bg-color); color:var(--th-fg-color); }
+body table.content td:hover { background-color:var(--td-hover-bg-color); }
+body table.content td.select { background-color:var(--td-hover-bg-color); }
+body table.content.action td:last-child { background-color:var(--th-bg-color); }
+body h1:hover { background-color:var(--hover-bg-color); color:var(--hover-fg-color); }
+body h2:hover { background-color:var(--hover-bg-color); color:var(--hover-fg-color); }
+body h3:hover { background-color:var(--hover-bg-color); color:var(--hover-fg-color); }
+body div.item:hover { background-color:var(--hover-bg-color); color:var(--hover-fg-color); }
+body div.item.select { background-color:var(--hover-bg-color); color:var(--hover-fg-color); }
+body span.item:hover { background-color:var(--hover-bg-color); color:var(--hover-fg-color); }
+body span.item.select { background-color:var(--hover-bg-color); color:var(--hover-fg-color); }
+body div.action div.tabs:hover { background-color:var(--hover-bg-color); color:var(--hover-fg-color); }
+body div.action div.tabs.select { background-color:var(--hover-bg-color); color:var(--hover-fg-color); }
+body div.output { background-color:var(--output-bg-color); }
+body fieldset>div.status { border-top:var(--status-border); }
+body fieldset:not(.panel) { background-color:var(--plugin-bg-color); border-radius:var(--plugin-radius); }
+body fieldset.panel:not(.main) { background-color:var(--panel-bg-color); color:var(--panel-fg-color); }
+body fieldset.panel:not(.main)>div.output { background-color:var(--panel-output-bg-color); color:var(--panel-output-fg-color); }
+body fieldset.input div.output { background-color:var(--plugin-bg-color); }
+body fieldset.input tr:hover { background-color:var(--tr-hover-bg-color); }
+body fieldset.input td:hover { background-color:var(--td-hover-bg-color); }
+body div.float { background-color:var(--float-bg-color); }
+body div.carte div.item { background-color:var(--carte-bg-color); }
+body div.carte div.item:hover { background-color:var(--hover-bg-color); }
+body div.zone>div.item { background-color:var(--th-bg-color); }
+body div.zone>div.list>div.zone>div.item { background-color:var(--th-bg-color); }
+body div.tabs div { background-color:var(--plugin-bg-color); }
+body div.tabs div:hover { background-color:var(--hover-bg-color); color:var(--hover-fg-color); }
+body div.tabs div.select { background-color:var(--hover-bg-color); color:var(--hover-fg-color); }
+body div.plug legend { background-color:var(--output-bg-color); }
+body div.plug legend.select { background-color:var(--plugin-bg-color); }
+body div.complete>table { background-color:var(--plugin-bg-color); }
+
+body.light fieldset.panel:not(.main)>div.output div.state:hover { background-color:var(--panel-hover-bg-color); color:var(--panel-hover-fg-color); }
+body.light fieldset.panel:not(.main)>div.output div.title:hover { background-color:var(--panel-hover-bg-color); color:var(--panel-hover-fg-color); }
+body.light fieldset.panel:not(.main)>div.output div.menu:hover { background-color:var(--panel-hover-bg-color); color:var(--panel-hover-fg-color); }
+body.light fieldset.panel:not(.main):not(.auto) div.item:hover { background-color:var(--panel-hover-bg-color); color:var(--panel-hover-fg-color); }
+body.light fieldset.panel:not(.main):not(.auto) div.item.select { background-color:var(--panel-hover-bg-color); color:var(--panel-hover-fg-color); }
+body.light fieldset.panel:not(.main):not(.auto) input { background-color:var(--panel-input-bg-color); color:var(--panel-input-fg-color); border-radius:var(--input-radius); }
+body.light fieldset.panel:not(.main)>div.output>div.item>input::placeholder { background-color:var(--panel-input-bg-color); color:var(--panel-fg-color); }
+body.light fieldset.panel:not(.main) label { color:var(--panel-fg-color); }
 /* print */
 body.print { -webkit-filter: grayscale(100%); }
 body.print { background-color:white; color:black; }