diff --git a/package-lock.json b/package-lock.json
index f1b48f5c..bf31761e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "nightTab",
-  "version": "5.32.0",
+  "version": "5.33.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 3ef95103..d822389e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nightTab",
-  "version": "5.32.0",
+  "version": "5.33.0",
   "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
   "main": "index.js",
   "scripts": {
diff --git a/src/css/base.css b/src/css/base.css
index 09129dc2..60022dcf 100755
--- a/src/css/base.css
+++ b/src/css/base.css
@@ -4,11 +4,12 @@
 }
 
 html {
+  background-color: rgb(var(--background-color-theme));
   font-size: var(--theme-root-font-size);
 }
 
 body {
-  background-color: rgb(var(--theme-black));
+  background-color: rgb(var(--background-color-theme));
   color: rgb(var(--theme-style-text));
   font-size: 1rem;
   line-height: 1.6;
diff --git a/src/css/form.css b/src/css/form.css
index 1da6a272..eebc8036 100755
--- a/src/css/form.css
+++ b/src/css/form.css
@@ -437,6 +437,7 @@ input[type="radio"]+label {
   font-family: var(--theme-font-ui-name);
   font-weight: var(--theme-font-ui-weight);
   font-style: var(--theme-font-ui-style);
+  color: rgb(var(--form-label));
   cursor: pointer;
   display: flex;
   flex-direction: row;
@@ -634,6 +635,95 @@ input[type="checkbox"]:checked:disabled:active+label .label-icon:after {
   background-color: rgb(var(--form-icon-symbol-disabled));
 }
 
+.label-block {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+}
+
+input[type="checkbox"]+label .label-block-item,
+input[type="radio"]+label .label-block-item {
+  color: rgb(var(--form-label));
+  transition: color var(--layout-timing-extra-fast);
+}
+
+input[type="checkbox"]:hover+label .label-block-item,
+input[type="checkbox"]:focus+label .label-block-item,
+input[type="radio"]:hover+label .label-block-item,
+input[type="radio"]:focus+label .label-block-item {
+  color: rgb(var(--form-label-hover));
+}
+
+input[type="checkbox"]:active+label .label-block-item,
+input[type="radio"]:active+label .label-block-item {
+  color: rgb(var(--form-label-focus-active));
+}
+
+input[type="checkbox"]:checked+label .label-block-item,
+input[type="radio"]:checked+label .label-block-item {
+  color: rgb(var(--form-label-checked));
+}
+
+input[type="checkbox"]:disabled+label .label-block-item,
+input[type="checkbox"]:disabled:hover+label .label-block-item,
+input[type="checkbox"]:disabled:focus+label .label-block-item,
+input[type="radio"]:disabled+label .label-block-item,
+input[type="radio"]:disabled:hover+label .label-block-item,
+input[type="radio"]:disabled:focus+label .label-block-item {
+  color: rgb(var(--form-label-disabled));
+  cursor: default;
+}
+
+input[type="checkbox"]+label .label-block-item.muted,
+input[type="radio"]+label .label-block-item.muted {
+  color: rgb(var(--utilities-muted));
+  transition: color var(--layout-timing-extra-fast);
+}
+
+input[type="checkbox"]:hover+label .label-block-item.muted,
+input[type="checkbox"]:focus+label .label-block-item.muted,
+input[type="radio"]:hover+label .label-block-item.muted,
+input[type="radio"]:focus+label .label-block-item.muted {
+  color: rgb(var(--utilities-muted-hover));
+}
+
+input[type="checkbox"]:active+label .label-block-item.muted,
+input[type="radio"]:active+label .label-block-item.muted {
+  color: rgb(var(--utilities-muted-focus-active));
+}
+
+input[type="checkbox"]:checked+label .label-block-item.muted,
+input[type="radio"]:checked+label .label-block-item.muted {
+  color: rgb(var(--utilities-muted-checked));
+}
+
+input[type="checkbox"]:disabled+label .label-block-item.muted,
+input[type="checkbox"]:disabled:hover+label .label-block-item.muted,
+input[type="checkbox"]:disabled:focus+label .label-block-item.muted,
+input[type="radio"]:disabled+label .label-block-item.muted,
+input[type="radio"]:disabled:hover+label .label-block-item.muted,
+input[type="radio"]:disabled:focus+label .label-block-item.muted {
+  color: rgb(var(--utilities-muted-disabled));
+  cursor: default;
+}
+
+.label-block-item:not(:last-child):not(:only-child) {
+  margin-bottom: calc(var(--form-wrap-space) / 4);
+}
+
+input:disabled+label .label-block-item,
+input:disabled:hover+label .label-block-item,
+input:disabled:focus+label .label-block-item,
+input[type="checkbox"]:disabled+label .label-block-item,
+input[type="checkbox"]:disabled:hover+label .label-block-item,
+input[type="checkbox"]:disabled:focus+label .label-block-item,
+input[type="radio"]:disabled+label .label-block-item,
+input[type="radio"]:disabled:hover+label .label-block-item,
+input[type="radio"]:disabled:focus+label .label-block-item {
+  color: rgb(var(--form-label-disabled));
+  cursor: default;
+}
+
 /* color */
 input[type="color"] {
   background-color: transparent;
@@ -647,7 +737,8 @@ input[type="color"] {
   border-radius: var(--theme-radius);
   overflow: hidden;
   cursor: pointer;
-  transition: box-shadow var(--layout-timing-extra-fast);
+  opacity: 1;
+  transition: box-shadow var(--layout-timing-extra-fast), opacity var(--layout-timing-extra-fast);
 }
 
 input[type="color"]:hover {
diff --git a/src/css/link.css b/src/css/link.css
index 7d373f4b..741a3ee7 100755
--- a/src/css/link.css
+++ b/src/css/link.css
@@ -182,12 +182,23 @@
   transition: background-color var(--layout-timing-extra-fast), height var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast), border-radius var(--layout-timing-extra-fast);
 }
 
-.is-link-item-color-by-theme .link-panel-front {
-  background-color: rgba(var(--link-item-color-theme), var(--link-item-opacity));
+.link-image {
+  background-image: var(--link-image-url);
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  opacity: var(--link-item-opacity);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  pointer-events: none;
 }
 
-.is-link-item-color-by-custom .link-panel-front {
-  background-color: rgba(var(--link-item-color-custom), var(--link-item-opacity));
+.link-panel-front {
+  background-color: rgba(var(--link-item-color), var(--link-item-opacity));
 }
 
 .is-link-style-block .link-panel-front {
@@ -225,18 +236,11 @@
 .link-item:focus-within .link-panel-front,
 .link-item:focus .link-panel-front,
 .link-item:hover .link-panel-front {
+  background-color: rgba(var(--link-item-color-focus-hover), var(--link-item-opacity));
   outline: none;
   text-decoration: none;
 }
 
-.is-link-item-color-by-theme .link-panel-front:hover,
-.is-link-item-color-by-theme .link-panel-front:focus,
-.is-link-item-color-by-theme .link-item:focus-within .link-panel-front,
-.is-link-item-color-by-theme .link-item:focus .link-panel-front,
-.is-link-item-color-by-theme .link-item:hover .link-panel-front {
-  background-color: rgba(var(--theme-color-03), var(--link-item-opacity));
-}
-
 .is-link-item-shadow-show.is-link-orientation-bottom .link-item:focus .link-panel-front,
 .is-link-item-shadow-show.is-link-orientation-bottom .link-item:focus-within .link-panel-front,
 .is-link-item-shadow-show.is-link-orientation-bottom .link-item:hover .link-panel-front {
@@ -353,6 +357,7 @@
   top: var(--link-item-display-translate-y);
   left: var(--link-item-display-translate-x);
   font-size: 1em;
+  z-index: 2;
   transform: rotate(var(--link-item-display-rotate));
   transition: font-size var(--layout-timing-extra-fast), top var(--layout-timing-extra-fast), left var(--layout-timing-extra-fast);
 }
@@ -361,35 +366,35 @@
   font-size: 0.6em;
 }
 
-.is-link-item-display-direction-horizontal.is-link-item-display-order-letconname .link-display {
+.is-link-item-display-direction-horizontal.is-link-item-display-order-visualname .link-display {
   flex-direction: row;
 }
 
-.is-link-item-display-direction-horizontal.is-link-item-display-order-nameletcon .link-display {
+.is-link-item-display-direction-horizontal.is-link-item-display-order-namevisual .link-display {
   flex-direction: row-reverse;
 }
 
-.is-link-item-display-direction-vertical.is-link-item-display-order-letconname .link-display {
+.is-link-item-display-direction-vertical.is-link-item-display-order-visualname .link-display {
   flex-direction: column;
 }
 
-.is-link-item-display-direction-vertical.is-link-item-display-order-nameletcon .link-display {
+.is-link-item-display-direction-vertical.is-link-item-display-order-namevisual .link-display {
   flex-direction: column-reverse;
 }
 
-.is-link-item-display-name-show.is-link-item-display-letcon-show.is-link-item-display-direction-horizontal.is-link-item-display-order-letconname .link-display-letcon {
+.is-link-item-display-name-show.is-link-item-display-visual-show.is-link-item-display-direction-horizontal.is-link-item-display-order-visualname .link-display-visual:not(:only-child) {
   margin-right: calc(var(--link-item-display-space) * var(--link-item-display-gutter));
 }
 
-.is-link-item-display-name-show.is-link-item-display-letcon-show.is-link-item-display-direction-horizontal.is-link-item-display-order-nameletcon .link-display-letcon {
+.is-link-item-display-name-show.is-link-item-display-visual-show.is-link-item-display-direction-horizontal.is-link-item-display-order-namevisual .link-display-visual:not(:only-child) {
   margin-left: calc(var(--link-item-display-space) * var(--link-item-display-gutter));
 }
 
-.is-link-item-display-name-show.is-link-item-display-letcon-show.is-link-item-display-direction-vertical.is-link-item-display-order-letconname .link-display-letcon {
+.is-link-item-display-name-show.is-link-item-display-visual-show.is-link-item-display-direction-vertical.is-link-item-display-order-visualname .link-display-visual:not(:only-child) {
   margin-bottom: calc(var(--link-item-display-space) * var(--link-item-display-gutter));
 }
 
-.is-link-item-display-name-show.is-link-item-display-letcon-show.is-link-item-display-direction-vertical.is-link-item-display-order-nameletcon .link-display-letcon {
+.is-link-item-display-name-show.is-link-item-display-visual-show.is-link-item-display-direction-vertical.is-link-item-display-order-namevisual .link-display-visual:not(:only-child) {
   margin-top: calc(var(--link-item-display-space) * var(--link-item-display-gutter));
 }
 
@@ -429,186 +434,186 @@
   transform-origin: bottom right;
 }
 
-/* vertical letcon name */
-.is-link-item-display-direction-vertical.is-link-item-display-order-letconname.is-link-display-alignment-topleft .link-display {
+/* vertical visual name */
+.is-link-item-display-direction-vertical.is-link-item-display-order-visualname.is-link-display-alignment-topleft .link-display {
   justify-content: flex-start;
   align-items: flex-start;
 }
 
-.is-link-item-display-direction-vertical.is-link-item-display-order-letconname.is-link-display-alignment-topcenter .link-display {
+.is-link-item-display-direction-vertical.is-link-item-display-order-visualname.is-link-display-alignment-topcenter .link-display {
   justify-content: flex-start;
   align-items: center;
 }
 
-.is-link-item-display-direction-vertical.is-link-item-display-order-letconname.is-link-display-alignment-topright .link-display {
+.is-link-item-display-direction-vertical.is-link-item-display-order-visualname.is-link-display-alignment-topright .link-display {
   justify-content: flex-start;
   align-items: flex-end;
 }
 
-.is-link-item-display-direction-vertical.is-link-item-display-order-letconname.is-link-display-alignment-centerleft .link-display {
+.is-link-item-display-direction-vertical.is-link-item-display-order-visualname.is-link-display-alignment-centerleft .link-display {
   justify-content: center;
   align-items: flex-start;
 }
 
-.is-link-item-display-direction-vertical.is-link-item-display-order-letconname.is-link-display-alignment-centercenter .link-display {
+.is-link-item-display-direction-vertical.is-link-item-display-order-visualname.is-link-display-alignment-centercenter .link-display {
   justify-content: center;
   align-items: center;
 }
 
-.is-link-item-display-direction-vertical.is-link-item-display-order-letconname.is-link-display-alignment-centerright .link-display {
+.is-link-item-display-direction-vertical.is-link-item-display-order-visualname.is-link-display-alignment-centerright .link-display {
   justify-content: center;
   align-items: flex-end;
 }
 
-.is-link-item-display-direction-vertical.is-link-item-display-order-letconname.is-link-display-alignment-bottomleft .link-display {
+.is-link-item-display-direction-vertical.is-link-item-display-order-visualname.is-link-display-alignment-bottomleft .link-display {
   justify-content: flex-end;
   align-items: flex-start;
 }
 
-.is-link-item-display-direction-vertical.is-link-item-display-order-letconname.is-link-display-alignment-bottomcenter .link-display {
+.is-link-item-display-direction-vertical.is-link-item-display-order-visualname.is-link-display-alignment-bottomcenter .link-display {
   justify-content: flex-end;
   align-items: center;
 }
 
-.is-link-item-display-direction-vertical.is-link-item-display-order-letconname.is-link-display-alignment-bottomright .link-display {
+.is-link-item-display-direction-vertical.is-link-item-display-order-visualname.is-link-display-alignment-bottomright .link-display {
   justify-content: flex-end;
   align-items: flex-end;
 }
 
-/* vertical name letcon */
-.is-link-item-display-direction-vertical.is-link-item-display-order-nameletcon.is-link-display-alignment-topleft .link-display {
+/* vertical name visual */
+.is-link-item-display-direction-vertical.is-link-item-display-order-namevisual.is-link-display-alignment-topleft .link-display {
   justify-content: flex-end;
   align-items: flex-start;
 }
 
-.is-link-item-display-direction-vertical.is-link-item-display-order-nameletcon.is-link-display-alignment-topcenter .link-display {
+.is-link-item-display-direction-vertical.is-link-item-display-order-namevisual.is-link-display-alignment-topcenter .link-display {
   justify-content: flex-end;
   align-items: center;
 }
 
-.is-link-item-display-direction-vertical.is-link-item-display-order-nameletcon.is-link-display-alignment-topright .link-display {
+.is-link-item-display-direction-vertical.is-link-item-display-order-namevisual.is-link-display-alignment-topright .link-display {
   justify-content: flex-end;
   align-items: flex-end;
 }
 
-.is-link-item-display-direction-vertical.is-link-item-display-order-nameletcon.is-link-display-alignment-centerleft .link-display {
+.is-link-item-display-direction-vertical.is-link-item-display-order-namevisual.is-link-display-alignment-centerleft .link-display {
   justify-content: center;
   align-items: flex-start;
 }
 
-.is-link-item-display-direction-vertical.is-link-item-display-order-nameletcon.is-link-display-alignment-centercenter .link-display {
+.is-link-item-display-direction-vertical.is-link-item-display-order-namevisual.is-link-display-alignment-centercenter .link-display {
   justify-content: center;
   align-items: center;
 }
 
-.is-link-item-display-direction-vertical.is-link-item-display-order-nameletcon.is-link-display-alignment-centerright .link-display {
+.is-link-item-display-direction-vertical.is-link-item-display-order-namevisual.is-link-display-alignment-centerright .link-display {
   justify-content: center;
   align-items: flex-end;
 }
 
-.is-link-item-display-direction-vertical.is-link-item-display-order-nameletcon.is-link-display-alignment-bottomleft .link-display {
+.is-link-item-display-direction-vertical.is-link-item-display-order-namevisual.is-link-display-alignment-bottomleft .link-display {
   justify-content: flex-start;
   align-items: flex-start;
 }
 
-.is-link-item-display-direction-vertical.is-link-item-display-order-nameletcon.is-link-display-alignment-bottomcenter .link-display {
+.is-link-item-display-direction-vertical.is-link-item-display-order-namevisual.is-link-display-alignment-bottomcenter .link-display {
   justify-content: flex-start;
   align-items: center;
 }
 
-.is-link-item-display-direction-vertical.is-link-item-display-order-nameletcon.is-link-display-alignment-bottomright .link-display {
+.is-link-item-display-direction-vertical.is-link-item-display-order-namevisual.is-link-display-alignment-bottomright .link-display {
   justify-content: flex-start;
   align-items: flex-end;
 }
 
-/* horizontal letcon name */
-.is-link-item-display-direction-horizontal.is-link-item-display-order-letconname.is-link-display-alignment-topleft .link-display {
+/* horizontal visual name */
+.is-link-item-display-direction-horizontal.is-link-item-display-order-visualname.is-link-display-alignment-topleft .link-display {
   justify-content: flex-start;
   align-items: flex-start;
 }
 
-.is-link-item-display-direction-horizontal.is-link-item-display-order-letconname.is-link-display-alignment-topcenter .link-display {
+.is-link-item-display-direction-horizontal.is-link-item-display-order-visualname.is-link-display-alignment-topcenter .link-display {
   justify-content: center;
   align-items: flex-start;
 }
 
-.is-link-item-display-direction-horizontal.is-link-item-display-order-letconname.is-link-display-alignment-topright .link-display {
+.is-link-item-display-direction-horizontal.is-link-item-display-order-visualname.is-link-display-alignment-topright .link-display {
   justify-content: flex-end;
   align-items: flex-start;
 }
 
-.is-link-item-display-direction-horizontal.is-link-item-display-order-letconname.is-link-display-alignment-centerleft .link-display {
+.is-link-item-display-direction-horizontal.is-link-item-display-order-visualname.is-link-display-alignment-centerleft .link-display {
   justify-content: flex-start;
   align-items: center;
 }
 
-.is-link-item-display-direction-horizontal.is-link-item-display-order-letconname.is-link-display-alignment-centercenter .link-display {
+.is-link-item-display-direction-horizontal.is-link-item-display-order-visualname.is-link-display-alignment-centercenter .link-display {
   justify-content: center;
   align-items: center;
 }
 
-.is-link-item-display-direction-horizontal.is-link-item-display-order-letconname.is-link-display-alignment-centerright .link-display {
+.is-link-item-display-direction-horizontal.is-link-item-display-order-visualname.is-link-display-alignment-centerright .link-display {
   justify-content: flex-end;
   align-items: center;
 }
 
-.is-link-item-display-direction-horizontal.is-link-item-display-order-letconname.is-link-display-alignment-bottomleft .link-display {
+.is-link-item-display-direction-horizontal.is-link-item-display-order-visualname.is-link-display-alignment-bottomleft .link-display {
   justify-content: flex-start;
   align-items: flex-end;
 }
 
-.is-link-item-display-direction-horizontal.is-link-item-display-order-letconname.is-link-display-alignment-bottomcenter .link-display {
+.is-link-item-display-direction-horizontal.is-link-item-display-order-visualname.is-link-display-alignment-bottomcenter .link-display {
   justify-content: center;
   align-items: flex-end;
 }
 
-.is-link-item-display-direction-horizontal.is-link-item-display-order-letconname.is-link-display-alignment-bottomright .link-display {
+.is-link-item-display-direction-horizontal.is-link-item-display-order-visualname.is-link-display-alignment-bottomright .link-display {
   justify-content: flex-end;
   align-items: flex-end;
 }
 
-/* horizontal name letcon */
-.is-link-item-display-direction-horizontal.is-link-item-display-order-nameletcon.is-link-display-alignment-topleft .link-display {
+/* horizontal name visual */
+.is-link-item-display-direction-horizontal.is-link-item-display-order-namevisual.is-link-display-alignment-topleft .link-display {
   justify-content: flex-end;
   align-items: flex-start;
 }
 
-.is-link-item-display-direction-horizontal.is-link-item-display-order-nameletcon.is-link-display-alignment-topcenter .link-display {
+.is-link-item-display-direction-horizontal.is-link-item-display-order-namevisual.is-link-display-alignment-topcenter .link-display {
   justify-content: center;
   align-items: flex-start;
 }
 
-.is-link-item-display-direction-horizontal.is-link-item-display-order-nameletcon.is-link-display-alignment-topright .link-display {
+.is-link-item-display-direction-horizontal.is-link-item-display-order-namevisual.is-link-display-alignment-topright .link-display {
   justify-content: flex-start;
   align-items: flex-start;
 }
 
-.is-link-item-display-direction-horizontal.is-link-item-display-order-nameletcon.is-link-display-alignment-centerleft .link-display {
+.is-link-item-display-direction-horizontal.is-link-item-display-order-namevisual.is-link-display-alignment-centerleft .link-display {
   justify-content: flex-end;
   align-items: center;
 }
 
-.is-link-item-display-direction-horizontal.is-link-item-display-order-nameletcon.is-link-display-alignment-centercenter .link-display {
+.is-link-item-display-direction-horizontal.is-link-item-display-order-namevisual.is-link-display-alignment-centercenter .link-display {
   justify-content: center;
   align-items: center;
 }
 
-.is-link-item-display-direction-horizontal.is-link-item-display-order-nameletcon.is-link-display-alignment-centerright .link-display {
+.is-link-item-display-direction-horizontal.is-link-item-display-order-namevisual.is-link-display-alignment-centerright .link-display {
   justify-content: flex-start;
   align-items: center;
 }
 
-.is-link-item-display-direction-horizontal.is-link-item-display-order-nameletcon.is-link-display-alignment-bottomleft .link-display {
+.is-link-item-display-direction-horizontal.is-link-item-display-order-namevisual.is-link-display-alignment-bottomleft .link-display {
   justify-content: flex-end;
   align-items: flex-end;
 }
 
-.is-link-item-display-direction-horizontal.is-link-item-display-order-nameletcon.is-link-display-alignment-bottomcenter .link-display {
+.is-link-item-display-direction-horizontal.is-link-item-display-order-namevisual.is-link-display-alignment-bottomcenter .link-display {
   justify-content: center;
   align-items: flex-end;
 }
 
-.is-link-item-display-direction-horizontal.is-link-item-display-order-nameletcon.is-link-display-alignment-bottomright .link-display {
+.is-link-item-display-direction-horizontal.is-link-item-display-order-namevisual.is-link-display-alignment-bottomright .link-display {
   justify-content: flex-start;
   align-items: flex-end;
 }
@@ -619,11 +624,11 @@
   text-align: center;
 }
 
-.link-display-letcon {
+.link-display-visual {
   display: none;
 }
 
-.is-link-item-display-letcon-show .link-display-letcon {
+.is-link-item-display-visual-show .link-display-visual {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -644,6 +649,15 @@
   transition: color var(--layout-timing-extra-fast);
 }
 
+.link-display-image {
+  background-image: var(--link-display-image-url);
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  width: 1em;
+  height: 1em;
+}
+
 .is-theme-accent-cycle .link-display-letter,
 .is-theme-accent-cycle .link-display-icon {
   transition: none;
@@ -659,6 +673,11 @@
   font-size: var(--link-item-display-icon-size);
 }
 
+.is-link-style-block .link-display-image,
+.is-link-style-list .link-display-image {
+  font-size: var(--link-item-display-image-size);
+}
+
 .link-item:hover .link-display-letter,
 .link-item:focus .link-display-letter,
 .link-item:hover .link-display-icon,
@@ -1027,3 +1046,27 @@
 .link-form-icon {
   font-size: 1.5em;
 }
+
+.link-form-collapse {
+  margin-left: -1em;
+  margin-right: -1em;
+  margin-bottom: -1em;
+  padding-right: 1em;
+  padding-left: 1em;
+  padding-bottom: 1em;
+  height: 0;
+  overflow: hidden;
+  transition: height var(--layout-timing-extra-fast);
+}
+
+.link-form-collapse.active {
+  height: var(--link-form-collapse-height);
+}
+
+.link-form-collapse-button-icon {
+  transition: transform var(--layout-timing-extra-fast);
+}
+
+.link-form-collapse-button.active .link-form-collapse-button-icon {
+  transform: rotate(-180deg);
+}
diff --git a/src/css/utilities.css b/src/css/utilities.css
index ff740d65..632e36c6 100755
--- a/src/css/utilities.css
+++ b/src/css/utilities.css
@@ -20,7 +20,7 @@
 }
 
 .muted {
-  color: rgb(var(--theme-color-12));
+  color: rgb(var(--utilities-muted));
 }
 
 .scroll-disabled {
diff --git a/src/css/variables.css b/src/css/variables.css
index 2e933341..8bedb985 100644
--- a/src/css/variables.css
+++ b/src/css/variables.css
@@ -109,13 +109,14 @@
   --group-border:                                       0;
   /* link */
   --link-area-width:                                    100%;
-  --link-item-color-theme:                              var(--theme-color-02);
-  --link-item-color-custom:                             rgb(0, 0, 0);
+  --link-item-color:                                    var(--theme-color-02);
+  --link-item-color-focus-hover:                        var(--theme-color-03);
   --link-item-size:                                     1em;
   --link-item-display-space:                            0.25em;
   --link-item-display-gutter:                           2;
-  --link-item-display-letter-size:                      2em;
-  --link-item-display-icon-size:                        2.5em;
+  --link-item-display-letter-size:                      3em;
+  --link-item-display-icon-size:                        3em;
+  --link-item-display-image-size:                       3em;
   --link-item-display-rotate:                           0deg;
   --link-item-display-translate-x:                      0em;
   --link-item-display-translate-y:                      0em;
@@ -235,6 +236,12 @@
   --form-ring-accent:                                   0 0 0 var(--layout-line-width) rgb(var(--theme-accent)),
                                                         0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-accent), 0.25);
   --form-wrap-space:                                    1em;
+  /* utilities */
+  --utilities-muted:                                    var(--theme-color-12);
+  --utilities-muted-hover:                              var(--theme-color-13);
+  --utilities-muted-focus-active:                       var(--theme-color-14);
+  --utilities-muted-checked:                            var(--theme-color-14);
+  --utilities-muted-disabled:                           var(--theme-color-04);
   /* menu */
   --menu-space:                                         0.75em;
   --menu-edge-opacity:                                  0.75;
diff --git a/src/html/menu/content/background.html b/src/html/menu/content/background.html
index e60d2b6b..60311eea 100644
--- a/src/html/menu/content/background.html
+++ b/src/html/menu/content/background.html
@@ -1,4 +1,4 @@
-<div id="menu-content-background" class="menu-content menu-content-overscroll menu-content-background is-hidden">
+<div id="menu-content-background" class="menu-content menu-content-overscroll menu-content-background">
 
   @@include("./background/color.html")
 
diff --git a/src/html/menu/content/background/color.html b/src/html/menu/content/background/color.html
index 7dc051f2..e29d37c3 100644
--- a/src/html/menu/content/background/color.html
+++ b/src/html/menu/content/background/color.html
@@ -5,29 +5,81 @@
   <div class="menu-item-form">
     <div class="form-wrap">
       <input id="control-background-color-by-theme" class="control-background-color-by-theme" type="radio" name="control-background-color-by" value="theme" tabindex="-1">
-      <label for="control-background-color-by-theme"><span class="label-icon"></span> Theme colour</label>
-    </div>
-    <div class="form-helper">
-      <p class="control-background-color-by-theme-helper form-helper-item">Use the Background colour defined by the Theme.</p>
+      <label for="control-background-color-by-theme">
+        <span class="label-icon"></span>
+        <span class="label-block">
+          <span class="label-block-item">Theme colour</span>
+          <span class="label-block-item small muted">Use the Background colour defined by the Theme.</span>
+        </span>
+      </label>
     </div>
     <div class="form-wrap">
       <input id="control-background-color-by-custom" class="control-background-color-by-custom" type="radio" name="control-background-color-by" value="custom" tabindex="-1">
-      <label for="control-background-color-by-custom"><span class="label-icon"></span> Custom colour</label>
-    </div>
-    <div class="form-helper">
-      <p class="control-background-color-by-custom-helper form-helper-item">Use a custom Background colour.</p>
-    </div>
-    <div class="form-helper">
-      <p class="control-background-color-by-custom-helper form-helper-item">Take care as some colours may make the Clock, Date and other text unreadable.</p>
+      <label for="control-background-color-by-custom">
+        <span class="label-icon"></span>
+        <span class="label-block">
+          <span class="label-block-item">Custom colour</span>
+          <span class="label-block-item small muted">Override the Theme colour.</span>
+        </span>
+      </label>
     </div>
     <div class="form-wrap">
       <div class="form-indent">
         <div class="form-wrap">
           <div class="form-group form-group-block">
-            <input id="control-background-color-rgb-range" class="form-group-item-half control-background-color-rgb-range" type="color" value="#000000" tabindex="1">
+            <input id="control-background-color-rgb-color" class="form-group-item-half control-background-color-rgb-color" type="color" value="#000000" tabindex="1">
             <input id="control-background-color-rgb-text" class="form-group-item-half control-background-color-rgb-text" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
           </div>
         </div>
+        <div class="form-helper">
+          <p class="control-background-color-by-custom-helper form-helper-item">Take care as some colours may make the Clock, Date and other text unreadable.</p>
+        </div>
+        <div class="form-indent">
+          <hr>
+          <div class="form-wrap">
+            <div class="form-group form-group-block">
+              <label for="control-background-color-hsl-h-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Hue</label>
+              <input id="control-background-color-hsl-h-range" class="control-background-color-hsl-h-range mr-3" type="range" value="0" tabindex="-1">
+              <input class="control-background-color-hsl-h-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
+            </div>
+          </div>
+          <div class="form-wrap">
+            <div class="form-group form-group-block">
+              <label for="control-background-color-hsl-s-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Saturation</label>
+              <input id="control-background-color-hsl-s-range" class="control-background-color-hsl-s-range mr-3" type="range" value="0" tabindex="-1">
+              <input class="control-background-color-hsl-s-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
+            </div>
+          </div>
+          <div class="form-wrap">
+            <div class="form-group form-group-block">
+              <label for="control-background-color-hsl-l-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Lightness</label>
+              <input id="control-background-color-hsl-l-range" class="control-background-color-hsl-l-range mr-3" type="range" value="0" tabindex="-1">
+              <input class="control-background-color-hsl-l-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
+            </div>
+          </div>
+          <hr>
+          <div class="form-wrap">
+            <div class="form-group form-group-block">
+              <label for="control-background-color-rgb-r-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Red</label>
+              <input id="control-background-color-rgb-r-range" class="control-background-color-rgb-r-range mr-3" type="range" value="0" tabindex="-1">
+              <input class="control-background-color-rgb-r-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
+            </div>
+          </div>
+          <div class="form-wrap">
+            <div class="form-group form-group-block">
+              <label for="control-background-color-rgb-g-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Green</label>
+              <input id="control-background-color-rgb-g-range" class="control-background-color-rgb-g-range mr-3" type="range" value="0" tabindex="-1">
+              <input class="control-background-color-rgb-g-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
+            </div>
+          </div>
+          <div class="form-wrap">
+            <div class="form-group form-group-block">
+              <label for="control-background-color-rgb-b-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Blue</label>
+              <input id="control-background-color-rgb-b-range" class="control-background-color-rgb-b-range mr-3" type="range" value="0" tabindex="-1">
+              <input class="control-background-color-rgb-b-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/html/menu/content/bookmarks.html b/src/html/menu/content/bookmarks.html
index 92897683..e1ce067c 100644
--- a/src/html/menu/content/bookmarks.html
+++ b/src/html/menu/content/bookmarks.html
@@ -1,4 +1,4 @@
-<div id="menu-content-bookmarks" class="menu-content menu-content-overscroll menu-content-bookmarks is-hidden">
+<div id="menu-content-bookmarks" class="menu-content menu-content-overscroll menu-content-bookmarks">
 
   @@include("./bookmarks/area.html")
 
@@ -8,7 +8,7 @@
 
   @@include("./bookmarks/content.html")
 
-  @@include("./bookmarks/letcon.html")
+  @@include("./bookmarks/visual.html")
 
   @@include("./bookmarks/name.html")
 
@@ -16,12 +16,14 @@
 
   @@include("./bookmarks/color.html")
 
+  @@include("./bookmarks/accent.html")
+
+  @@include("./bookmarks/opacity.html")
+
   @@include("./bookmarks/border.html")
 
   @@include("./bookmarks/orientation.html")
 
   @@include("./bookmarks/sort.html")
 
-  @@include("./bookmarks/accent.html")
-
 </div>
diff --git a/src/html/menu/content/bookmarks/accent.html b/src/html/menu/content/bookmarks/accent.html
index c5470f13..ba7e7018 100644
--- a/src/html/menu/content/bookmarks/accent.html
+++ b/src/html/menu/content/bookmarks/accent.html
@@ -4,14 +4,75 @@
   </div>
   <div class="menu-item-form">
     <div class="form-wrap">
-      <button class="control-link-accent-clear button button-line" tabindex="-1">Remove all override colours</button>
+      <div class="form-group form-group-block">
+        <input id="control-link-item-accent-rgb-color" class="form-group-item-half control-link-item-accent-rgb-color" type="color" value="#000000" tabindex="1">
+        <input id="control-link-item-accent-rgb-text" class="form-group-item-half control-link-item-accent-rgb-text" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
+      </div>
+    </div>
+    <div class="form-helper">
+      <p class="control-link-item-color-helper form-helper-item">Apply an Accent override to all Bookmarks.</p>
+      <p class="control-link-item-color-helper form-helper-item">Accent overrides can also be changed by editing individual Bookmarks.</p>
+    </div>
+    <div class="form-wrap">
+      <div class="form-indent">
+        <hr>
+        <div class="form-wrap">
+          <div class="form-group form-group-block">
+            <label for="control-link-item-accent-hsl-h-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Hue</label>
+            <input id="control-link-item-accent-hsl-h-range" class="control-link-item-accent-hsl-h-range mr-3" type="range" value="0" tabindex="-1">
+            <input class="control-link-item-accent-hsl-h-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
+          </div>
+        </div>
+        <div class="form-wrap">
+          <div class="form-group form-group-block">
+            <label for="control-link-item-accent-hsl-s-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Saturation</label>
+            <input id="control-link-item-accent-hsl-s-range" class="control-link-item-accent-hsl-s-range mr-3" type="range" value="0" tabindex="-1">
+            <input class="control-link-item-accent-hsl-s-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
+          </div>
+        </div>
+        <div class="form-wrap">
+          <div class="form-group form-group-block">
+            <label for="control-link-item-accent-hsl-l-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Lightness</label>
+            <input id="control-link-item-accent-hsl-l-range" class="control-link-item-accent-hsl-l-range mr-3" type="range" value="0" tabindex="-1">
+            <input class="control-link-item-accent-hsl-l-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
+          </div>
+        </div>
+        <hr>
+        <div class="form-wrap">
+          <div class="form-group form-group-block">
+            <label for="control-link-item-accent-rgb-r-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Red</label>
+            <input id="control-link-item-accent-rgb-r-range" class="control-link-item-accent-rgb-r-range mr-3" type="range" value="0" tabindex="-1">
+            <input class="control-link-item-accent-rgb-r-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
+          </div>
+        </div>
+        <div class="form-wrap">
+          <div class="form-group form-group-block">
+            <label for="control-link-item-accent-rgb-g-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Green</label>
+            <input id="control-link-item-accent-rgb-g-range" class="control-link-item-accent-rgb-g-range mr-3" type="range" value="0" tabindex="-1">
+            <input class="control-link-item-accent-rgb-g-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
+          </div>
+        </div>
+        <div class="form-wrap">
+          <div class="form-group form-group-block">
+            <label for="control-link-item-accent-rgb-b-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Blue</label>
+            <input id="control-link-item-accent-rgb-b-range" class="control-link-item-accent-rgb-b-range mr-3" type="range" value="0" tabindex="-1">
+            <input class="control-link-item-accent-rgb-b-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
+          </div>
+        </div>
+      </div>
     </div>
     <hr>
     <div class="form-wrap">
-      <button class="control-link-accent-set button button-line" tabindex="-1">Add override colours</button>
+      <div class="form-inline">
+        <button class="control-link-item-accent-apply button button-line" tabindex="-1">Apply to all</button>
+        <button class="control-link-item-accent-clear button button-line" tabindex="-1">Clear all</button>
+      </div>
     </div>
-    <div class="form-helper">
-      <p class="control-link-accent-set-helper form-helper-item">Adds a unique override colour to each Bookmark.</p>
+    <hr>
+    <div class="form-wrap">
+      <div class="form-inline">
+        <button class="control-link-item-accent-rainbow button button-line" tabindex="-1">Apply unique accent to each</button>
+      </div>
     </div>
   </div>
 </div>
diff --git a/src/html/menu/content/bookmarks/color.html b/src/html/menu/content/bookmarks/color.html
index 1b24da97..ed23db40 100644
--- a/src/html/menu/content/bookmarks/color.html
+++ b/src/html/menu/content/bookmarks/color.html
@@ -1,42 +1,78 @@
 <div id="menu-content-bookmarks-color" class="menu-content-item">
   <div class="menu-item-header">
-    <h1 class="menu-item-header-text">Colour</h1>
+    <h1 class="menu-item-header-text">Colour override</h1>
   </div>
   <div class="menu-item-form">
     <div class="form-wrap">
-      <input id="control-link-item-color-by-theme" class="control-link-item-color-by-theme" type="radio" name="control-link-item-color-by" value="theme" tabindex="-1">
-      <label for="control-link-item-color-by-theme"><span class="label-icon"></span> Theme colour</label>
+      <div class="form-group form-group-block">
+        <input id="control-link-item-color-rgb-color" class="form-group-item-half control-link-item-color-rgb-color" type="color" value="#000000" tabindex="1">
+        <input id="control-link-item-color-rgb-text" class="form-group-item-half control-link-item-color-rgb-text" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
+      </div>
     </div>
     <div class="form-helper">
-      <p class="control-link-item-color-by-theme-helper form-helper-item">Use the colour defined by the Theme.</p>
-    </div>
-    <div class="form-wrap">
-      <input id="control-link-item-color-by-custom" class="control-link-item-color-by-custom" type="radio" name="control-link-item-color-by" value="custom" tabindex="-1">
-      <label for="control-link-item-color-by-custom"><span class="label-icon"></span> Custom colour</label>
-    </div>
-    <div class="form-helper">
-      <p class="control-link-item-color-by-custom-helper form-helper-item">Use a custom colour.</p>
-    </div>
-    <div class="form-helper">
-      <p class="control-link-item-color-by-custom-helper form-helper-item">Take care as some colours may make the Letter/Icon and Name unreadable.</p>
+      <p class="control-link-item-color-helper form-helper-item">Apply a colour override to all Bookmarks.</p>
+      <p class="control-link-item-color-helper form-helper-item">Take care as some colours may make the Letter/Icon and Name unreadable.</p>
+      <p class="control-link-item-color-helper form-helper-item">Colour overrides can also be changed by editing individual Bookmarks.</p>
     </div>
     <div class="form-wrap">
       <div class="form-indent">
+        <hr>
         <div class="form-wrap">
           <div class="form-group form-group-block">
-            <input id="control-link-item-color-rgb-range" class="form-group-item-half control-link-item-color-rgb-range" type="color" value="#000000" tabindex="1">
-            <input id="control-link-item-color-rgb-text" class="form-group-item-half control-link-item-color-rgb-text" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
+            <label for="control-link-item-color-hsl-h-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Hue</label>
+            <input id="control-link-item-color-hsl-h-range" class="control-link-item-color-hsl-h-range mr-3" type="range" value="0" tabindex="-1">
+            <input class="control-link-item-color-hsl-h-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
+          </div>
+        </div>
+        <div class="form-wrap">
+          <div class="form-group form-group-block">
+            <label for="control-link-item-color-hsl-s-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Saturation</label>
+            <input id="control-link-item-color-hsl-s-range" class="control-link-item-color-hsl-s-range mr-3" type="range" value="0" tabindex="-1">
+            <input class="control-link-item-color-hsl-s-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
+          </div>
+        </div>
+        <div class="form-wrap">
+          <div class="form-group form-group-block">
+            <label for="control-link-item-color-hsl-l-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Lightness</label>
+            <input id="control-link-item-color-hsl-l-range" class="control-link-item-color-hsl-l-range mr-3" type="range" value="0" tabindex="-1">
+            <input class="control-link-item-color-hsl-l-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
+          </div>
+        </div>
+        <hr>
+        <div class="form-wrap">
+          <div class="form-group form-group-block">
+            <label for="control-link-item-color-rgb-r-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Red</label>
+            <input id="control-link-item-color-rgb-r-range" class="control-link-item-color-rgb-r-range mr-3" type="range" value="0" tabindex="-1">
+            <input class="control-link-item-color-rgb-r-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
+          </div>
+        </div>
+        <div class="form-wrap">
+          <div class="form-group form-group-block">
+            <label for="control-link-item-color-rgb-g-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Green</label>
+            <input id="control-link-item-color-rgb-g-range" class="control-link-item-color-rgb-g-range mr-3" type="range" value="0" tabindex="-1">
+            <input class="control-link-item-color-rgb-g-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
+          </div>
+        </div>
+        <div class="form-wrap">
+          <div class="form-group form-group-block">
+            <label for="control-link-item-color-rgb-b-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Blue</label>
+            <input id="control-link-item-color-rgb-b-range" class="control-link-item-color-rgb-b-range mr-3" type="range" value="0" tabindex="-1">
+            <input class="control-link-item-color-rgb-b-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
           </div>
         </div>
       </div>
     </div>
     <hr>
     <div class="form-wrap">
-      <label for="control-link-item-opacity-range">Opacity</label>
-      <div class="form-group form-group-block">
-        <input id="control-link-item-opacity-range" class="control-link-item-opacity-range mr-3" type="range" value="0" tabindex="-1">
-        <input class="control-link-item-opacity-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
-        <button class="control-link-item-opacity-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
+      <div class="form-inline">
+        <button class="control-link-item-color-apply button button-line" tabindex="-1">Apply to all</button>
+        <button class="control-link-item-color-clear button button-line" tabindex="-1">Clear all</button>
+      </div>
+    </div>
+    <hr>
+    <div class="form-wrap">
+      <div class="form-inline">
+        <button class="control-link-item-color-rainbow button button-line" tabindex="-1">Apply unique colour to each</button>
       </div>
     </div>
   </div>
diff --git a/src/html/menu/content/bookmarks/content.html b/src/html/menu/content/bookmarks/content.html
index be027942..86455857 100644
--- a/src/html/menu/content/bookmarks/content.html
+++ b/src/html/menu/content/bookmarks/content.html
@@ -4,7 +4,7 @@
   </div>
   <div class="menu-item-form">
     <div class="form-wrap">
-      <label class="control-link-item-display-alignment-label">Letter/Icon and Name position</label>
+      <label class="control-link-item-display-alignment-label">Letter/Icon/Image and Name position</label>
     </div>
     <div class="form-wrap">
       <div class="form-grid form-grid-3x3 control-link-item-display-alignment-grid">
@@ -85,32 +85,50 @@
     <hr>
     <div class="form-wrap">
       <input id="control-link-item-display-direction-horizontal" class="control-link-item-display-direction-horizontal" type="radio" name="control-link-item-display-direction" value="horizontal" tabindex="-1">
-      <label for="control-link-item-display-direction-horizontal"><span class="label-icon"></span> Align horizontally</label>
+      <label for="control-link-item-display-direction-horizontal">
+        <span class="label-icon"></span>
+        <span class="label-block">
+          <span class="label-block-item">Align horizontally</span>
+          <span class="label-block-item small muted">Works well with Bookmark Block Style.</span>
+        </span>
+      </label>
     </div>
     <div class="form-wrap">
       <input id="control-link-item-display-direction-vertical" class="control-link-item-display-direction-vertical" type="radio" name="control-link-item-display-direction" value="vertical" tabindex="-1">
-      <label for="control-link-item-display-direction-vertical"><span class="label-icon"></span> Align vertically</label>
+      <label for="control-link-item-display-direction-vertical">
+        <span class="label-icon"></span>
+        <span class="label-block">
+          <span class="label-block-item">Align vertically</span>
+          <span class="label-block-item small muted">Works well with Bookmark List Style.</span>
+        </span>
+      </label>
     </div>
     <div class="form-helper">
-      <p class="control-link-item-display-direction-vertical-helper form-helper-item">Vertical alignment works well with Bookmark Block Style.</p>
-    </div>
-    <div class="form-helper">
-      <p class="control-link-item-display-direction-horizontal-helper form-helper-item">Horizontal alignment works well with Bookmark List Style.</p>
-    </div>
-    <div class="form-helper">
-      <p class="control-link-item-display-direction-helper form-helper-item">Only available when Letter/Icon and Name are shown.</p>
+      <p class="control-link-item-display-direction-helper form-helper-item">Only available when Letter/Icon/Image and Name are shown.</p>
     </div>
     <hr>
     <div class="form-wrap">
-      <input id="control-link-item-display-order-letconname" class="control-link-item-display-order-letconname" type="radio" name="control-link-item-display-order" value="letconname" tabindex="-1">
-      <label for="control-link-item-display-order-letconname"><span class="label-icon"></span> Order Letter/Icon then Name</label>
+      <input id="control-link-item-display-order-visualname" class="control-link-item-display-order-visualname" type="radio" name="control-link-item-display-order" value="visualname" tabindex="-1">
+      <label for="control-link-item-display-order-visualname">
+        <span class="label-icon"></span>
+        <span class="label-block">
+          <span class="label-block-item">Letter/Icon/Image then Name</span>
+          <span class="label-block-item small muted">Stack the Letter/Icon/Image before the Name.</span>
+        </span>
+      </label>
     </div>
     <div class="form-wrap">
-      <input id="control-link-item-display-order-nameletcon" class="control-link-item-display-order-nameletcon" type="radio" name="control-link-item-display-order" value="nameletcon" tabindex="-1">
-      <label for="control-link-item-display-order-nameletcon"><span class="label-icon"></span> Order Name then Letter/Icon</label>
+      <input id="control-link-item-display-order-namevisual" class="control-link-item-display-order-namevisual" type="radio" name="control-link-item-display-order" value="namevisual" tabindex="-1">
+      <label for="control-link-item-display-order-namevisual">
+        <span class="label-icon"></span>
+        <span class="label-block">
+          <span class="label-block-item">Name then Letter/Icon/Image</span>
+          <span class="label-block-item small muted">Stack the Name before the Letter/Icon/Image.</span>
+        </span>
+      </label>
     </div>
     <div class="form-helper">
-      <p class="control-link-item-display-order-helper form-helper-item">Only available when Letter/Icon and Name are shown.</p>
+      <p class="control-link-item-display-order-helper form-helper-item">Only available when Letter/Icon/Image and Name are shown.</p>
     </div>
   </div>
 </div>
diff --git a/src/html/menu/content/bookmarks/letcon.html b/src/html/menu/content/bookmarks/letcon.html
deleted file mode 100644
index 732411e4..00000000
--- a/src/html/menu/content/bookmarks/letcon.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<div id="menu-content-bookmarks-letcon" class="menu-content-item">
-  <div class="menu-item-header">
-    <h1 class="menu-item-header-text">Letter/Icon</h1>
-  </div>
-  <div class="menu-item-form">
-    <div class="form-wrap">
-      <input id="control-link-item-display-letcon-show" class="control-link-item-display-letcon-show" type="checkbox" tabindex="-1">
-      <label for="control-link-item-display-letcon-show"><span class="label-icon"></span> Show</label>
-    </div>
-    <div class="form-wrap">
-      <div class="form-indent">
-        <div class="form-wrap">
-          <label for="control-link-item-display-letcon-letter-size-range">Letter size</label>
-          <div class="form-group form-group-block">
-            <input id="control-link-item-display-letcon-letter-size-range" class="control-link-item-display-letcon-letter-size-range mr-3" type="range" value="0" tabindex="-1">
-            <input class="control-link-item-display-letcon-letter-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
-            <button class="control-link-item-display-letcon-letter-size-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
-          </div>
-        </div>
-        <hr>
-        <div class="form-wrap">
-          <label for="control-link-item-display-letcon-icon-size-range">Icon size</label>
-          <div class="form-group form-group-block">
-            <input id="control-link-item-display-letcon-icon-size-range" class="control-link-item-display-letcon-icon-size-range mr-3" type="range" value="0" tabindex="-1">
-            <input class="control-link-item-display-letcon-icon-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
-            <button class="control-link-item-display-letcon-icon-size-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/src/html/menu/content/bookmarks/opacity.html b/src/html/menu/content/bookmarks/opacity.html
new file mode 100644
index 00000000..9de9b437
--- /dev/null
+++ b/src/html/menu/content/bookmarks/opacity.html
@@ -0,0 +1,18 @@
+<div id="menu-content-bookmarks-opacity" class="menu-content-item">
+  <div class="menu-item-header">
+    <h1 class="menu-item-header-text">Opacity</h1>
+  </div>
+  <div class="menu-item-form">
+    <div class="form-wrap">
+      <label for="control-link-item-opacity-range">Color or background image</label>
+      <div class="form-group form-group-block">
+        <input id="control-link-item-opacity-range" class="control-link-item-opacity-range mr-3" type="range" value="0" tabindex="-1">
+        <input class="control-link-item-opacity-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
+        <button class="control-link-item-opacity-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
+      </div>
+    </div>
+    <div class="form-helper">
+      <p class="control-link-item-opacity-helper form-helper-item">Change the Colour or Background image Opacity of all Bookmark tiles.</p>
+    </div>
+  </div>
+</div>
diff --git a/src/html/menu/content/bookmarks/style.html b/src/html/menu/content/bookmarks/style.html
index a10d4cb1..7db6887a 100644
--- a/src/html/menu/content/bookmarks/style.html
+++ b/src/html/menu/content/bookmarks/style.html
@@ -5,17 +5,23 @@
   <div class="menu-item-form">
     <div class="form-wrap">
       <input id="control-link-style-block" class="control-link-style-block" type="radio" name="control-link-style" value="block" tabindex="-1">
-      <label for="control-link-style-block"><span class="label-icon"></span> Block</label>
-    </div>
-    <div class="form-helper">
-      <p class="control-link-style-block-helper form-helper-item">Bookmark tiles more square shaped.</p>
+      <label for="control-link-style-block">
+        <span class="label-icon"></span>
+        <span class="label-block">
+          <span class="label-block-item">Block</span>
+          <span class="label-block-item small muted">Bookmark tiles more square shaped.</span>
+        </span>
+      </label>
     </div>
     <div class="form-wrap">
       <input id="control-link-style-list" class="control-link-style-list" type="radio" name="control-link-style" value="list" tabindex="-1">
-      <label for="control-link-style-list"><span class="label-icon"></span> List</label>
-    </div>
-    <div class="form-helper">
-      <p class="control-link-style-list-helper form-helper-item">Bookmark tiles more short and wide.</p>
+      <label for="control-link-style-list">
+        <span class="label-icon"></span>
+        <span class="label-block">
+          <span class="label-block-item">List</span>
+          <span class="label-block-item small muted">Bookmark tiles more short and wide.</span>
+        </span>
+      </label>
     </div>
   </div>
 </div>
diff --git a/src/html/menu/content/bookmarks/visual.html b/src/html/menu/content/bookmarks/visual.html
new file mode 100644
index 00000000..698de4ac
--- /dev/null
+++ b/src/html/menu/content/bookmarks/visual.html
@@ -0,0 +1,41 @@
+<div id="menu-content-bookmarks-visual" class="menu-content-item">
+  <div class="menu-item-header">
+    <h1 class="menu-item-header-text">Letter/Icon/Image</h1>
+  </div>
+  <div class="menu-item-form">
+    <div class="form-wrap">
+      <input id="control-link-item-display-visual-show" class="control-link-item-display-visual-show" type="checkbox" tabindex="-1">
+      <label for="control-link-item-display-visual-show"><span class="label-icon"></span> Show</label>
+    </div>
+    <div class="form-wrap">
+      <div class="form-indent">
+        <div class="form-wrap">
+          <label for="control-link-item-display-visual-letter-size-range">Letter size</label>
+          <div class="form-group form-group-block">
+            <input id="control-link-item-display-visual-letter-size-range" class="control-link-item-display-visual-letter-size-range mr-3" type="range" value="0" tabindex="-1">
+            <input class="control-link-item-display-visual-letter-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
+            <button class="control-link-item-display-visual-letter-size-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
+          </div>
+        </div>
+        <hr>
+        <div class="form-wrap">
+          <label for="control-link-item-display-visual-icon-size-range">Icon size</label>
+          <div class="form-group form-group-block">
+            <input id="control-link-item-display-visual-icon-size-range" class="control-link-item-display-visual-icon-size-range mr-3" type="range" value="0" tabindex="-1">
+            <input class="control-link-item-display-visual-icon-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
+            <button class="control-link-item-display-visual-icon-size-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
+          </div>
+        </div>
+        <hr>
+        <div class="form-wrap">
+          <label for="control-link-item-display-visual-image-size-range">Image size</label>
+          <div class="form-group form-group-block">
+            <input id="control-link-item-display-visual-image-size-range" class="control-link-item-display-visual-image-size-range mr-3" type="range" value="0" tabindex="-1">
+            <input class="control-link-item-display-visual-image-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
+            <button class="control-link-item-display-visual-image-size-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/html/menu/content/coffee.html b/src/html/menu/content/coffee.html
index 886af8de..ffcc8f10 100644
--- a/src/html/menu/content/coffee.html
+++ b/src/html/menu/content/coffee.html
@@ -1,4 +1,4 @@
-<div id="menu-content-coffee" class="menu-content menu-content-coffee is-hidden">
+<div id="menu-content-coffee" class="menu-content menu-content-coffee">
 
   @@include("./coffee/coffee.html")
 
diff --git a/src/html/menu/content/data.html b/src/html/menu/content/data.html
index 97ac9772..9022aa3e 100644
--- a/src/html/menu/content/data.html
+++ b/src/html/menu/content/data.html
@@ -1,4 +1,4 @@
-<div id="menu-content-data" class="menu-content menu-content-overscroll menu-content-data is-hidden">
+<div id="menu-content-data" class="menu-content menu-content-overscroll menu-content-data">
 
   @@include("./data/restore.html")
 
diff --git a/src/html/menu/content/groups.html b/src/html/menu/content/groups.html
index 307ab302..5a1dc85c 100644
--- a/src/html/menu/content/groups.html
+++ b/src/html/menu/content/groups.html
@@ -1,7 +1,7 @@
-<div id="menu-content-groups" class="menu-content menu-content-overscroll menu-content-groups is-hidden">
+<div id="menu-content-groups" class="menu-content menu-content-overscroll menu-content-groups">
 
   @@include("./groups/area.html")
-  
+
   @@include("./groups/order.html")
 
   @@include("./groups/names.html")
diff --git a/src/html/menu/content/groups/names.html b/src/html/menu/content/groups/names.html
index beb0f8d9..69956419 100644
--- a/src/html/menu/content/groups/names.html
+++ b/src/html/menu/content/groups/names.html
@@ -10,7 +10,7 @@
       </div>
     </div>
     <div class="form-helper">
-      <p class="control-group-name-helper form-helper-item">Individual Group Names can be shown or hidden from their respective edit controls.</p>
+      <p class="control-group-name-helper form-helper-item">Group Names can also be changed by editing individual Groups.</p>
     </div>
     <hr>
     <div class="form-wrap">
diff --git a/src/html/menu/content/groups/openall.html b/src/html/menu/content/groups/openall.html
index c0041fa8..ceb2501a 100644
--- a/src/html/menu/content/groups/openall.html
+++ b/src/html/menu/content/groups/openall.html
@@ -10,7 +10,7 @@
       </div>
     </div>
     <div class="form-helper">
-      <p class="control-group-openall-helper form-helper-item">Individual Group Open all buttons can be shown or hidden from their respective edit controls.</p>
+      <p class="control-group-openall-helper form-helper-item">Group Open all buttons can also be changed by editing individual Groups.</p>
     </div>
     <hr>
     <div class="form-wrap">
diff --git a/src/html/menu/content/groups/order.html b/src/html/menu/content/groups/order.html
index fef15ead..40dea5ce 100644
--- a/src/html/menu/content/groups/order.html
+++ b/src/html/menu/content/groups/order.html
@@ -5,11 +5,23 @@
   <div class="menu-item-form">
     <div class="form-wrap">
       <input id="control-group-order-headerbody" class="control-group-order-headerbody" type="radio" name="control-group-order" value="headerbody" tabindex="1">
-      <label for="control-group-order-headerbody"><span class="label-icon"></span> Group Name then Bookmarks</label>
+      <label for="control-group-order-headerbody">
+        <span class="label-icon"></span>
+        <span class="label-block">
+          <span class="label-block-item">Group Name then Bookmarks</span>
+          <span class="label-block-item small muted">Stack the Group name and controls area before the Bookmarks area.</span>
+        </span>
+      </label>
     </div>
     <div class="form-wrap">
       <input id="control-group-order-bodyheader" class="control-group-order-bodyheader" type="radio" name="control-group-order" value="bodyheader" tabindex="1">
-      <label for="control-group-order-bodyheader"><span class="label-icon"></span> Bookmarks then Group Name</label>
+      <label for="control-group-order-bodyheader">
+        <span class="label-icon"></span>
+        <span class="label-block">
+          <span class="label-block-item">Bookmarks then Group Name</span>
+          <span class="label-block-item small muted">Stack the Bookmarks area before the Group name and controls area.</span>
+        </span>
+      </label>
     </div>
   </div>
 </div>
diff --git a/src/html/menu/content/header.html b/src/html/menu/content/header.html
index 0bb12a85..65b419f4 100644
--- a/src/html/menu/content/header.html
+++ b/src/html/menu/content/header.html
@@ -1,4 +1,4 @@
-<div id="menu-content-header" class="menu-content menu-content-overscroll menu-content-header is-hidden">
+<div id="menu-content-header" class="menu-content menu-content-overscroll menu-content-header">
 
   @@include("./header/area.html")
 
diff --git a/src/html/menu/content/header/alignment.html b/src/html/menu/content/header/alignment.html
index 23132cb7..b7370758 100644
--- a/src/html/menu/content/header/alignment.html
+++ b/src/html/menu/content/header/alignment.html
@@ -38,17 +38,21 @@
         </div>
         <div class="form-wrap">
           <input id="control-header-area-align-center" class="control-header-area-align-center" type="radio" name="control-header-area-align" value="center" tabindex="-1">
-          <label for="control-header-area-align-center"><span class="label-icon"></span> Center</label>
-        </div>
-        <div class="form-helper">
-          <p class="control-header-area-align-center-helper form-helper-item">Header items aligned to each others centres.</p>
+          <label for="control-header-area-align-center"><span class="label-icon"></span>
+            <span class="label-block">
+              <span class="label-block-item">Center</span>
+              <span class="label-block-item small muted">Header items aligned to each others centres.</span>
+            </span>
+          </label>
         </div>
         <div class="form-wrap">
           <input id="control-header-area-align-baseline" class="control-header-area-align-baseline" type="radio" name="control-header-area-align" value="baseline" tabindex="-1">
-          <label for="control-header-area-align-baseline"><span class="label-icon"></span> Baseline</label>
-        </div>
-        <div class="form-helper">
-          <p class="control-header-area-align-baseline-helper form-helper-item">Header items aligned to the text baseline. Useful for when the Clock, Date and other text is sized large and need to sit on a line.</p>
+          <label for="control-header-area-align-baseline"><span class="label-icon"></span>
+            <span class="label-block">
+              <span class="label-block-item">Baseline</span>
+              <span class="label-block-item small muted">Header items aligned to the text baseline. Useful for when the Clock, Date and other text is sized large and need to sit on a line.</span>
+            </span>
+          </label>
         </div>
       </div>
     </div>
diff --git a/src/html/menu/content/header/clock.html b/src/html/menu/content/header/clock.html
index 51e40b7b..36697e11 100644
--- a/src/html/menu/content/header/clock.html
+++ b/src/html/menu/content/header/clock.html
@@ -89,10 +89,13 @@
     <hr>
     <div class="form-wrap">
       <input id="control-header-clock-newline" class="control-header-clock-newline" type="checkbox" tabindex="-1">
-      <label for="control-header-clock-newline"><span class="label-icon"></span> New line</label>
-    </div>
-    <div class="form-helper">
-      <p class="control-header-clock-newline-helper form-helper-item">Force on to a new line and seperate from other Header items.</p>
+      <label for="control-header-clock-newline">
+        <span class="label-icon"></span>
+        <span class="label-block">
+          <span class="label-block-item">New line</span>
+          <span class="label-block-item small muted">Force on to a new line and seperate from other Header items.</span>
+        </span>
+      </label>
     </div>
   </div>
 </div>
diff --git a/src/html/menu/content/header/color.html b/src/html/menu/content/header/color.html
index 2f64940e..07d3d58e 100644
--- a/src/html/menu/content/header/color.html
+++ b/src/html/menu/content/header/color.html
@@ -11,44 +11,111 @@
       <div class="form-indent">
         <div class="form-wrap">
           <input id="control-header-color-style-always" class="control-header-color-style-always" type="radio" name="control-header-color-style" value="always" tabindex="-1">
-          <label for="control-header-color-style-always"><span class="label-icon"></span> Always visible</label>
-        </div>
-        <div class="form-helper">
-          <p class="control-header-color-style-always-helper form-helper-item">Useful for when a Background Image is shown.</p>
+          <label for="control-header-color-style-always">
+            <span class="label-icon"></span>
+            <span class="label-block">
+              <span class="label-block-item">Always visible</span>
+              <span class="label-block-item small muted">Useful for when a Background Image is shown.</span>
+            </span>
+          </label>
         </div>
         <div class="form-wrap">
           <input id="control-header-color-style-scroll" class="control-header-color-style-scroll" type="radio" name="control-header-color-style" value="scroll" tabindex="-1">
-          <label for="control-header-color-style-scroll"><span class="label-icon"></span> Visible on scroll</label>
+          <label for="control-header-color-style-scroll">
+            <span class="label-icon"></span>
+            <span class="label-block">
+              <span class="label-block-item">Visible on scroll</span>
+              <span class="label-block-item small muted">Useful for when Position is set to Sticky.</span>
+            </span>
+          </label>
         </div>
         <div class="form-helper">
-          <p class="control-header-color-style-scroll-helper form-helper-item">The page may not scroll if Bookmarks are not shown.</p>
+          <p class="control-header-color-style-helper form-helper-item">The page may not scroll if Bookmarks are not shown.</p>
         </div>
         <div class="form-helper">
-          <p class="control-header-color-style-scroll-helper form-helper-item">May not be visible if Layout Alignment is Horizontal as the Bookmarks won't pass under the header.</p>
+          <p class="control-header-color-style-helper form-helper-item">May not be visible if Layout Alignment is Horizontal as the Bookmarks won't pass under the header.</p>
         </div>
         <hr>
         <div class="form-wrap">
           <input id="control-header-color-by-theme" class="control-header-color-by-theme" type="radio" name="control-header-color-by" value="theme" tabindex="-1">
-          <label for="control-header-color-by-theme"><span class="label-icon"></span> Theme colour</label>
+          <label for="control-header-color-by-theme">
+            <span class="label-icon"></span>
+            <span class="label-block">
+              <span class="label-block-item">Theme colour</span>
+              <span class="label-block-item small muted">Use the Background colour defined by the Theme.</span>
+            </span>
+          </label>
         </div>
         <div class="form-helper">
-          <p class="control-header-color-by-theme-helper form-helper-item">Use the Background colour defined by the Theme.</p>
+          <p class="control-header-color-by-theme-helper form-helper-item"></p>
         </div>
         <div class="form-wrap">
           <input id="control-header-color-by-custom" class="control-header-color-by-custom" type="radio" name="control-header-color-by" value="custom" tabindex="-1">
-          <label for="control-header-color-by-custom"><span class="label-icon"></span> Custom colour</label>
+          <label for="control-header-color-by-custom">
+            <span class="label-icon"></span>
+            <span class="label-block">
+              <span class="label-block-item">Custom colour</span>
+              <span class="label-block-item small muted">Override the Theme colour.</span>
+            </span>
+          </label>
         </div>
         <div class="form-helper">
-          <p class="control-header-color-by-custom-helper form-helper-item">Use a custom Background colour.</p>
+          <p class="control-header-color-by-custom-helper form-helper-item"></p>
         </div>
         <div class="form-wrap">
           <div class="form-indent">
             <div class="form-wrap">
               <div class="form-group form-group-block">
-                <input id="control-header-color-rgb-range" class="form-group-item-half control-header-color-rgb-range" type="color" value="#000000" tabindex="1">
+                <input id="control-header-color-rgb-color" class="form-group-item-half control-header-color-rgb-color" type="color" value="#000000" tabindex="1">
                 <input id="control-header-color-rgb-text" class="form-group-item-half control-header-color-rgb-text" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
               </div>
             </div>
+            <div class="form-indent">
+              <hr>
+              <div class="form-wrap">
+                <div class="form-group form-group-block">
+                  <label for="control-header-color-hsl-h-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Hue</label>
+                  <input id="control-header-color-hsl-h-range" class="control-header-color-hsl-h-range mr-3" type="range" value="0" tabindex="-1">
+                  <input class="control-header-color-hsl-h-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
+                </div>
+              </div>
+              <div class="form-wrap">
+                <div class="form-group form-group-block">
+                  <label for="control-header-color-hsl-s-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Saturation</label>
+                  <input id="control-header-color-hsl-s-range" class="control-header-color-hsl-s-range mr-3" type="range" value="0" tabindex="-1">
+                  <input class="control-header-color-hsl-s-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
+                </div>
+              </div>
+              <div class="form-wrap">
+                <div class="form-group form-group-block">
+                  <label for="control-header-color-hsl-l-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Lightness</label>
+                  <input id="control-header-color-hsl-l-range" class="control-header-color-hsl-l-range mr-3" type="range" value="0" tabindex="-1">
+                  <input class="control-header-color-hsl-l-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
+                </div>
+              </div>
+              <hr>
+              <div class="form-wrap">
+                <div class="form-group form-group-block">
+                  <label for="control-header-color-rgb-r-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Red</label>
+                  <input id="control-header-color-rgb-r-range" class="control-header-color-rgb-r-range mr-3" type="range" value="0" tabindex="-1">
+                  <input class="control-header-color-rgb-r-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
+                </div>
+              </div>
+              <div class="form-wrap">
+                <div class="form-group form-group-block">
+                  <label for="control-header-color-rgb-g-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Green</label>
+                  <input id="control-header-color-rgb-g-range" class="control-header-color-rgb-g-range mr-3" type="range" value="0" tabindex="-1">
+                  <input class="control-header-color-rgb-g-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
+                </div>
+              </div>
+              <div class="form-wrap">
+                <div class="form-group form-group-block">
+                  <label for="control-header-color-rgb-b-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Blue</label>
+                  <input id="control-header-color-rgb-b-range" class="control-header-color-rgb-b-range mr-3" type="range" value="0" tabindex="-1">
+                  <input class="control-header-color-rgb-b-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
+                </div>
+              </div>
+            </div>
           </div>
         </div>
         <hr>
diff --git a/src/html/menu/content/header/coloraccent.html b/src/html/menu/content/header/coloraccent.html
index d67f0efe..12556906 100644
--- a/src/html/menu/content/header/coloraccent.html
+++ b/src/html/menu/content/header/coloraccent.html
@@ -8,7 +8,7 @@
       <label for="control-header-coloraccent-show"><span class="label-icon"></span> Show</label>
     </div>
     <div class="form-helper">
-      <p class="control-header-coloraccent-show-helper form-helper-item">Colour and Accent can also be found under Theme.</p>
+      <p class="control-header-coloraccent-show-helper form-helper-item">Colour and Accent controls can also be found under Theme.</p>
     </div>
     <div class="form-wrap">
       <div class="form-indent">
@@ -37,10 +37,13 @@
         <hr>
         <div class="form-wrap">
           <input id="control-header-coloraccent-newline" class="control-header-coloraccent-newline" type="checkbox" tabindex="-1">
-          <label for="control-header-coloraccent-newline"><span class="label-icon"></span> New line</label>
-        </div>
-        <div class="form-helper">
-          <p class="control-header-coloraccent-newline-helper form-helper-item">Force on to a new line and seperate from other Header items.</p>
+          <label for="control-header-coloraccent-newline">
+            <span class="label-icon"></span>
+            <span class="label-block">
+              <span class="label-block-item">New line</span>
+              <span class="label-block-item small muted">Force on to a new line and seperate from other Header items.</span>
+            </span>
+          </label>
         </div>
       </div>
     </div>
diff --git a/src/html/menu/content/header/date.html b/src/html/menu/content/header/date.html
index 92ac3e3f..2e243383 100644
--- a/src/html/menu/content/header/date.html
+++ b/src/html/menu/content/header/date.html
@@ -69,10 +69,13 @@
         </div>
         <div class="form-wrap">
           <input id="control-header-date-date-ordinal" class="control-header-date-date-ordinal" type="checkbox" tabindex="-1">
-          <label for="control-header-date-date-ordinal"><span class="label-icon"></span> Ordinal numbers</label>
-        </div>
-        <div class="form-helper">
-          <p class="control-header-date-date-ordinal-helper form-helper-item">Display Date as 1st, 2nd, 3rd, 4th etc.</p>
+          <label for="control-header-date-date-ordinal">
+            <span class="label-icon"></span>
+            <span class="label-block">
+              <span class="label-block-item">Ordinal numbers</span>
+              <span class="label-block-item small muted">Display Date as 1st, 2nd, 3rd, 4th etc.</span>
+            </span>
+          </label>
         </div>
       </div>
     </div>
@@ -91,10 +94,13 @@
           <div class="form-indent">
             <div class="form-wrap">
               <input id="control-header-date-month-ordinal" class="control-header-date-month-ordinal" type="checkbox" tabindex="-1">
-              <label for="control-header-date-month-ordinal"><span class="label-icon"></span> Ordinal numbers</label>
-            </div>
-            <div class="form-helper">
-              <p class="control-header-date-month-ordinal-helper form-helper-item">Display Month as 1st, 2nd, 3rd, 4th etc.</p>
+              <label for="control-header-date-month-ordinal">
+                <span class="label-icon"></span>
+                <span class="label-block">
+                  <span class="label-block-item">Ordinal numbers</span>
+                  <span class="label-block-item small muted">Display Month as 1st, 2nd, 3rd, 4th etc.</span>
+                </span>
+              </label>
             </div>
           </div>
         </div>
@@ -175,10 +181,13 @@
     <hr>
     <div class="form-wrap">
       <input id="control-header-date-newline" class="control-header-date-newline" type="checkbox" tabindex="-1">
-      <label for="control-header-date-newline"><span class="label-icon"></span> New line</label>
-    </div>
-    <div class="form-helper">
-      <p class="control-header-date-newline-helper form-helper-item">Force on to a new line and seperate from other Header items.</p>
+      <label for="control-header-date-newline">
+        <span class="label-icon"></span>
+        <span class="label-block">
+          <span class="label-block-item">New line</span>
+          <span class="label-block-item small muted">Force on to a new line and seperate from other Header items.</span>
+        </span>
+      </label>
     </div>
   </div>
 </div>
diff --git a/src/html/menu/content/header/editadd.html b/src/html/menu/content/header/editadd.html
index bbb28b4f..d4cdbd6f 100644
--- a/src/html/menu/content/header/editadd.html
+++ b/src/html/menu/content/header/editadd.html
@@ -29,10 +29,13 @@
         <hr>
         <div class="form-wrap">
           <input id="control-header-editadd-newline" class="control-header-editadd-newline" type="checkbox" tabindex="-1">
-          <label for="control-header-editadd-newline"><span class="label-icon"></span> New line</label>
-        </div>
-        <div class="form-helper">
-          <p class="control-header-editadd-newline-helper form-helper-item">Force on to a new line and seperate from other Header items.</p>
+          <label for="control-header-editadd-newline">
+            <span class="label-icon"></span>
+            <span class="label-block">
+              <span class="label-block-item">New line</span>
+              <span class="label-block-item small muted">Force on to a new line and seperate from other Header items.</span>
+            </span>
+          </label>
         </div>
       </div>
     </div>
diff --git a/src/html/menu/content/header/greeting.html b/src/html/menu/content/header/greeting.html
index 215a89ca..44b0d5c5 100644
--- a/src/html/menu/content/header/greeting.html
+++ b/src/html/menu/content/header/greeting.html
@@ -41,10 +41,13 @@
         <hr>
         <div class="form-wrap">
           <input id="control-header-greeting-newline" class="control-header-greeting-newline" type="checkbox" tabindex="-1">
-          <label for="control-header-greeting-newline"><span class="label-icon"></span> New line</label>
-        </div>
-        <div class="form-helper">
-          <p class="control-header-greeting-newline-helper form-helper-item">Force on to a new line and seperate from other Header items.</p>
+          <label for="control-header-greeting-newline">
+            <span class="label-icon"></span>
+            <span class="label-block">
+              <span class="label-block-item">New line</span>
+              <span class="label-block-item small muted">Force on to a new line and seperate from other Header items.</span>
+            </span>
+          </label>
         </div>
       </div>
     </div>
diff --git a/src/html/menu/content/header/menu.html b/src/html/menu/content/header/menu.html
index 36eac841..48a50764 100644
--- a/src/html/menu/content/header/menu.html
+++ b/src/html/menu/content/header/menu.html
@@ -23,10 +23,13 @@
     <hr>
     <div class="form-wrap">
       <input id="control-header-menu-newline" class="control-header-menu-newline" type="checkbox" tabindex="-1">
-      <label for="control-header-menu-newline"><span class="label-icon"></span> New line</label>
-    </div>
-    <div class="form-helper">
-      <p class="control-header-menu-newline-helper form-helper-item">Force on to a new line and seperate from other Header items.</p>
+      <label for="control-header-menu-newline">
+        <span class="label-icon"></span>
+        <span class="label-block">
+          <span class="label-block-item">New line</span>
+          <span class="label-block-item small muted">Force on to a new line and seperate from other Header items.</span>
+        </span>
+      </label>
     </div>
   </div>
 </div>
diff --git a/src/html/menu/content/header/position.html b/src/html/menu/content/header/position.html
index 00a4878d..d535ad3d 100644
--- a/src/html/menu/content/header/position.html
+++ b/src/html/menu/content/header/position.html
@@ -5,17 +5,23 @@
   <div class="menu-item-form">
     <div class="form-wrap">
       <input id="control-header-position-sticky" class="control-header-position-sticky" type="radio" name="control-header-position" value="sticky" tabindex="-1">
-      <label for="control-header-position-sticky"><span class="label-icon"></span> Sticky</label>
-    </div>
-    <div class="form-helper">
-      <p class="control-header-position-sticky-helper form-helper-item">Header sticks to the page when scrolling up or down.</p>
+      <label for="control-header-position-sticky">
+        <span class="label-icon"></span>
+        <span class="label-block">
+          <span class="label-block-item">Sticky</span>
+          <span class="label-block-item small muted">Header sticks to the page when scrolling up or down.</span>
+        </span>
+      </label>
     </div>
     <div class="form-wrap">
       <input id="control-header-position-inline" class="control-header-position-inline" type="radio" name="control-header-position" value="inline" tabindex="-1">
-      <label for="control-header-position-inline"><span class="label-icon"></span> Inline</label>
-    </div>
-    <div class="form-helper">
-      <p class="control-header-position-inline-helper form-helper-item">Header moves inline with the content when scrolling up or down.</p>
+      <label for="control-header-position-inline">
+        <span class="label-icon"></span>
+        <span class="label-block">
+          <span class="label-block-item">Inline</span>
+          <span class="label-block-item small muted">Header moves inline with the content when scrolling up or down.</span>
+        </span>
+      </label>
     </div>
     <div class="form-helper">
       <p class="control-header-position-helper form-helper-item">Only available when Layout Alignment is Vertical.</p>
diff --git a/src/html/menu/content/header/search.html b/src/html/menu/content/header/search.html
index fa73b56f..c1a775c4 100644
--- a/src/html/menu/content/header/search.html
+++ b/src/html/menu/content/header/search.html
@@ -14,17 +14,23 @@
         </div>
         <div class="form-wrap">
           <input id="control-header-search-width-by-auto" class="control-header-search-width-by-auto" type="radio" name="control-header-search-width" value="auto" tabindex="-1">
-          <label for="control-header-search-width-by-auto"><span class="label-icon"></span> Auto</label>
-        </div>
-        <div class="form-helper">
-          <p class="control-header-search-width-by-auto-helper form-helper-item">Search box will grow to best fit available space.</p>
+          <label for="control-header-search-width-by-auto">
+            <span class="label-icon"></span>
+            <span class="label-block">
+              <span class="label-block-item">Auto</span>
+              <span class="label-block-item small muted">Search box will grow to best fit available space.</span>
+            </span>
+          </label>
         </div>
         <div class="form-wrap">
           <input id="control-header-search-width-by-custom" class="control-header-search-width-by-custom" type="radio" name="control-header-search-width" value="custom" tabindex="-1">
-          <label for="control-header-search-width-by-custom"><span class="label-icon"></span> Custom</label>
-        </div>
-        <div class="form-helper">
-          <p class="control-header-search-width-by-custom-helper form-helper-item">Define how wide the Search box should be inside the Header Area.</p>
+          <label for="control-header-search-width-by-custom">
+            <span class="label-icon"></span>
+            <span class="label-block">
+              <span class="label-block-item">Custom</span>
+              <span class="label-block-item small muted">Define how wide the Search box should be inside the Header Area.</span>
+            </span>
+          </label>
         </div>
         <div class="form-wrap">
           <div class="form-indent">
@@ -138,10 +144,13 @@
         <hr>
         <div class="form-wrap">
           <input id="control-header-search-newline" class="control-header-search-newline" type="checkbox" tabindex="-1">
-          <label for="control-header-search-newline"><span class="label-icon"></span> New line</label>
-        </div>
-        <div class="form-helper">
-          <p class="control-header-search-newline-helper form-helper-item">Force on to a new line and seperate from other Header items.</p>
+          <label for="control-header-search-newline">
+            <span class="label-icon"></span>
+            <span class="label-block">
+              <span class="label-block-item">New line</span>
+              <span class="label-block-item small muted">Force on to a new line and seperate from other Header items.</span>
+            </span>
+          </label>
         </div>
       </div>
     </div>
diff --git a/src/html/menu/content/header/transitional.html b/src/html/menu/content/header/transitional.html
index 41733a43..72f9cc58 100644
--- a/src/html/menu/content/header/transitional.html
+++ b/src/html/menu/content/header/transitional.html
@@ -35,10 +35,13 @@
         <hr>
         <div class="form-wrap">
           <input id="control-header-transitional-newline" class="control-header-transitional-newline" type="checkbox" tabindex="-1">
-          <label for="control-header-transitional-newline"><span class="label-icon"></span> New line</label>
-        </div>
-        <div class="form-helper">
-          <p class="control-header-transitional-newline-helper form-helper-item">Force on to a new line and seperate from other Header items.</p>
+          <label for="control-header-transitional-newline">
+            <span class="label-icon"></span>
+            <span class="label-block">
+              <span class="label-block-item">New line</span>
+              <span class="label-block-item small muted">Force on to a new line and seperate from other Header items.</span>
+            </span>
+          </label>
         </div>
       </div>
     </div>
diff --git a/src/html/menu/content/layout/alignment.html b/src/html/menu/content/layout/alignment.html
index ebd9b4bd..d5b66c41 100644
--- a/src/html/menu/content/layout/alignment.html
+++ b/src/html/menu/content/layout/alignment.html
@@ -52,26 +52,44 @@
     <hr>
     <div class="form-wrap">
       <input id="control-layout-direction-horizontal" class="control-layout-direction-horizontal" type="radio" name="control-layout-direction" value="horizontal" tabindex="-1">
-      <label for="control-layout-direction-horizontal"><span class="label-icon"></span>Align horizontal</label>
+      <label for="control-layout-direction-horizontal">
+        <span class="label-icon"></span>
+        <span class="label-block">
+          <span class="label-block-item">Align horizontal</span>
+          <span class="label-block-item small muted">Stack the Header and Bookmarks in a row side by side.</span>
+        </span>
+      </label>
     </div>
     <div class="form-wrap">
       <input id="control-layout-direction-vertical" class="control-layout-direction-vertical" type="radio" name="control-layout-direction" value="vertical" tabindex="-1">
-      <label for="control-layout-direction-vertical"><span class="label-icon"></span>Align vertical</label>
-    </div>
-    <div class="form-helper">
-      <p class="control-layout-direction-vertical-helper form-helper-item">Horizontal alignment stack the Header and Bookmarks in a row side by side.</p>
-    </div>
-    <div class="form-helper">
-      <p class="control-layout-direction-horizontal-helper form-helper-item">Vertical alignment stacks the Header and Bookmarks in a column one above the other.</p>
+      <label for="control-layout-direction-vertical">
+        <span class="label-icon"></span>
+        <span class="label-block">
+          <span class="label-block-item">Align vertical</span>
+          <span class="label-block-item small muted">Stack the Header and Bookmarks in a column one above the other.</span>
+        </span>
+      </label>
     </div>
     <hr>
     <div class="form-wrap">
       <input id="control-layout-order-headerlink" class="control-layout-order-headerlink" type="radio" name="control-layout-order" value="headerlink" tabindex="-1">
-      <label for="control-layout-order-headerlink"><span class="label-icon"></span> Header then Bookmarks</label>
+      <label for="control-layout-order-headerlink">
+        <span class="label-icon"></span>
+        <span class="label-block">
+          <span class="label-block-item">Header then Bookmarks</span>
+          <span class="label-block-item small muted">Order the Header area to appear before the Bookmarks area.</span>
+        </span>
+      </label>
     </div>
     <div class="form-wrap">
       <input id="control-layout-order-linkheader" class="control-layout-order-linkheader" type="radio" name="control-layout-order" value="linkheader" tabindex="-1">
-      <label for="control-layout-order-linkheader"><span class="label-icon"></span> Bookmarks then Header</label>
+      <label for="control-layout-order-linkheader">
+        <span class="label-icon"></span>
+        <span class="label-block">
+          <span class="label-block-item">Bookmarks then Header</span>
+          <span class="label-block-item small muted">Order the Bookmarks area to appear before the Header area.</span>
+        </span>
+      </label>
     </div>
     <div class="form-helper">
       <p class="control-layout-order-helper form-helper-item">Only available when Bookmarks are shown.</p>
diff --git a/src/html/menu/content/nighttab.html b/src/html/menu/content/nighttab.html
index 6fd98252..b724e100 100644
--- a/src/html/menu/content/nighttab.html
+++ b/src/html/menu/content/nighttab.html
@@ -1,4 +1,4 @@
-<div id="menu-content-nighttab" class="menu-content menu-content-nighttab is-hidden">
+<div id="menu-content-nighttab" class="menu-content menu-content-nighttab">
 
   @@include("./nighttab/nighttab.html")
 
diff --git a/src/html/menu/content/theme.html b/src/html/menu/content/theme.html
index b15ac13c..639aab7c 100644
--- a/src/html/menu/content/theme.html
+++ b/src/html/menu/content/theme.html
@@ -1,4 +1,4 @@
-<div id="menu-content-theme" class="menu-content menu-content-overscroll menu-content-theme is-hidden">
+<div id="menu-content-theme" class="menu-content menu-content-overscroll menu-content-theme">
 
   @@include("./theme/preset.html")
 
diff --git a/src/html/menu/content/theme/accent.html b/src/html/menu/content/theme/accent.html
index 4a45b5c5..3caa6692 100644
--- a/src/html/menu/content/theme/accent.html
+++ b/src/html/menu/content/theme/accent.html
@@ -20,44 +20,44 @@
       <div class="form-indent">
         <hr>
         <div class="form-wrap">
-          <label for="control-theme-accent-hsl-h-range">Hue</label>
           <div class="form-group form-group-block">
+            <label for="control-theme-accent-hsl-h-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Hue</label>
             <input id="control-theme-accent-hsl-h-range" class="control-theme-accent-hsl-h-range mr-3" type="range" value="0" tabindex="-1">
             <input class="control-theme-accent-hsl-h-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
           </div>
         </div>
         <div class="form-wrap">
-          <label for="control-theme-accent-hsl-s-range">Saturation</label>
           <div class="form-group form-group-block">
+            <label for="control-theme-accent-hsl-s-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Saturation</label>
             <input id="control-theme-accent-hsl-s-range" class="control-theme-accent-hsl-s-range mr-3" type="range" value="0" tabindex="-1">
             <input class="control-theme-accent-hsl-s-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
           </div>
         </div>
         <div class="form-wrap">
-          <label for="control-theme-accent-hsl-l-range">Lightness</label>
           <div class="form-group form-group-block">
+            <label for="control-theme-accent-hsl-l-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Lightness</label>
             <input id="control-theme-accent-hsl-l-range" class="control-theme-accent-hsl-l-range mr-3" type="range" value="0" tabindex="-1">
             <input class="control-theme-accent-hsl-l-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
           </div>
         </div>
         <hr>
         <div class="form-wrap">
-          <label for="control-theme-accent-rgb-r-range">Red</label>
           <div class="form-group form-group-block">
+            <label for="control-theme-accent-rgb-r-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Red</label>
             <input id="control-theme-accent-rgb-r-range" class="control-theme-accent-rgb-r-range mr-3" type="range" value="0" tabindex="-1">
             <input class="control-theme-accent-rgb-r-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
           </div>
         </div>
         <div class="form-wrap">
-          <label for="control-theme-accent-rgb-g-range">Green</label>
           <div class="form-group form-group-block">
+            <label for="control-theme-accent-rgb-g-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Green</label>
             <input id="control-theme-accent-rgb-g-range" class="control-theme-accent-rgb-g-range mr-3" type="range" value="0" tabindex="-1">
             <input class="control-theme-accent-rgb-g-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
           </div>
         </div>
         <div class="form-wrap">
-          <label for="control-theme-accent-rgb-b-range">Blue</label>
           <div class="form-group form-group-block">
+            <label for="control-theme-accent-rgb-b-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Blue</label>
             <input id="control-theme-accent-rgb-b-range" class="control-theme-accent-rgb-b-range mr-3" type="range" value="0" tabindex="-1">
             <input class="control-theme-accent-rgb-b-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
           </div>
diff --git a/src/html/menu/content/theme/color.html b/src/html/menu/content/theme/color.html
index 07a20fda..2d0269da 100644
--- a/src/html/menu/content/theme/color.html
+++ b/src/html/menu/content/theme/color.html
@@ -91,55 +91,59 @@
         <button class="control-theme-color-rgb-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
       </div>
     </div>
-    <div class="form-helper">
+    <div class="form-helper mb-0">
       <p class="control-theme-color-helper form-helper-item">Light and dark shades from this colour are used across nightTabs.</p>
     </div>
     <div class="form-wrap">
       <div class="form-indent">
         <hr>
         <div class="form-wrap">
-          <label for="control-theme-color-hsl-h-range">Hue</label>
           <div class="form-group form-group-block">
+            <label for="control-theme-color-hsl-h-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Hue</label>
             <input id="control-theme-color-hsl-h-range" class="control-theme-color-hsl-h-range mr-3" type="range" value="0" tabindex="-1">
             <input class="control-theme-color-hsl-h-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
           </div>
         </div>
         <div class="form-wrap">
-          <label for="control-theme-color-hsl-s-range">Saturation</label>
           <div class="form-group form-group-block">
+            <label for="control-theme-color-hsl-s-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Saturation</label>
             <input id="control-theme-color-hsl-s-range" class="control-theme-color-hsl-s-range mr-3" type="range" value="0" tabindex="-1">
             <input class="control-theme-color-hsl-s-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
           </div>
         </div>
         <div class="form-wrap">
-          <label for="control-theme-color-hsl-l-range">Lightness</label>
           <div class="form-group form-group-block">
+            <label for="control-theme-color-hsl-l-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Lightness</label>
             <input id="control-theme-color-hsl-l-range" class="control-theme-color-hsl-l-range mr-3" type="range" value="0" tabindex="-1">
             <input class="control-theme-color-hsl-l-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
           </div>
         </div>
         <hr>
         <div class="form-wrap">
-          <label for="control-theme-color-rgb-r-range">Red</label>
           <div class="form-group form-group-block">
+            <label for="control-theme-color-rgb-r-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Red</label>
             <input id="control-theme-color-rgb-r-range" class="control-theme-color-rgb-r-range mr-3" type="range" value="0" tabindex="-1">
             <input class="control-theme-color-rgb-r-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
           </div>
         </div>
         <div class="form-wrap">
-          <label for="control-theme-color-rgb-g-range">Green</label>
           <div class="form-group form-group-block">
+            <label for="control-theme-color-rgb-g-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Green</label>
             <input id="control-theme-color-rgb-g-range" class="control-theme-color-rgb-g-range mr-3" type="range" value="0" tabindex="-1">
             <input class="control-theme-color-rgb-g-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
           </div>
         </div>
         <div class="form-wrap">
-          <label for="control-theme-color-rgb-b-range">Blue</label>
           <div class="form-group form-group-block">
+            <label for="control-theme-color-rgb-b-range" class="form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0">Blue</label>
             <input id="control-theme-color-rgb-b-range" class="control-theme-color-rgb-b-range mr-3" type="range" value="0" tabindex="-1">
             <input class="control-theme-color-rgb-b-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
           </div>
         </div>
+      </div>
+    </div>
+    <div class="form-wrap">
+      <div class="form-indent">
         <hr>
         <div class="form-wrap">
           <label for="control-theme-color-contrast-light-range">Light shade contrast</label>
diff --git a/src/html/menu/nav.html b/src/html/menu/nav.html
index b0f8b79d..e90458af 100644
--- a/src/html/menu/nav.html
+++ b/src/html/menu/nav.html
@@ -36,14 +36,15 @@
       <a href="#menu-content-bookmarks-alignment" class="menu-nav-sub button button-small" tabindex="-1">Alignment</a>
       <a href="#menu-content-bookmarks-bookmarks" class="menu-nav-sub button button-small" tabindex="-1">Bookmarks</a>
       <a href="#menu-content-bookmarks-content" class="menu-nav-sub button button-small" tabindex="-1">Content</a>
-      <a href="#menu-content-bookmarks-letcon" class="menu-nav-sub button button-small" tabindex="-1">Letter/Icon</a>
+      <a href="#menu-content-bookmarks-visual" class="menu-nav-sub button button-small" tabindex="-1">Letter/Icon/Image</a>
       <a href="#menu-content-bookmarks-name" class="menu-nav-sub button button-small" tabindex="-1">Name</a>
       <a href="#menu-content-bookmarks-style" class="menu-nav-sub button button-small" tabindex="-1">Style</a>
-      <a href="#menu-content-bookmarks-color" class="menu-nav-sub button button-small" tabindex="-1">Colour</a>
+      <a href="#menu-content-bookmarks-color" class="menu-nav-sub button button-small" tabindex="-1">Colour override</a>
+      <a href="#menu-content-bookmarks-accent" class="menu-nav-sub button button-small" tabindex="-1">Accent override</a>
+      <a href="#menu-content-bookmarks-opacity" class="menu-nav-sub button button-small" tabindex="-1">Opacity</a>
       <a href="#menu-content-bookmarks-border" class="menu-nav-sub button button-small" tabindex="-1">Border</a>
       <a href="#menu-content-bookmarks-orientation" class="menu-nav-sub button button-small" tabindex="-1">Orientation</a>
       <a href="#menu-content-bookmarks-sort" class="menu-nav-sub button button-small" tabindex="-1">Sort</a>
-      <a href="#menu-content-bookmarks-accent" class="menu-nav-sub button button-small" tabindex="-1">Accent override</a>
     </div>
   </div>
   <div class="menu-nav-item">
diff --git a/src/index.html b/src/index.html
index d6e9241f..be935f94 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" style="background-color: rgb(25, 25, 25)">
+<html lang="en" style="background-color: rgb(0, 0, 0)">
 
 <head>
   <meta charset="utf-8">
diff --git a/src/js/background.js b/src/js/background.js
index 4c21e9af..b0a3b2bb 100644
--- a/src/js/background.js
+++ b/src/js/background.js
@@ -42,6 +42,33 @@ var background = (function() {
     }
   };
 
+  mod.color = {
+    hsl: function() {
+      var hsl = helper.convertColor.rgb.hsl(state.get.current().background.color.rgb);
+      helper.setObject({
+        object: state.get.current(),
+        path: "background.color.hsl",
+        newValue: {
+          h: Math.round(hsl.h),
+          s: Math.round(hsl.s),
+          l: Math.round(hsl.l)
+        }
+      });
+    },
+    rgb: function() {
+      var rgb = helper.convertColor.hsl.rgb(state.get.current().background.color.hsl);
+      helper.setObject({
+        object: state.get.current(),
+        path: "background.color.rgb",
+        newValue: {
+          r: Math.round(rgb.r),
+          g: Math.round(rgb.g),
+          b: Math.round(rgb.b)
+        }
+      });
+    }
+  };
+
   var bind = {};
 
   bind.feedback = {
diff --git a/src/js/bookmarks.js b/src/js/bookmarks.js
index a7320d90..ac49346f 100644
--- a/src/js/bookmarks.js
+++ b/src/js/bookmarks.js
@@ -11,165 +11,255 @@ var bookmarks = (function() {
       show: true
     },
     items: [{
-      display: "icon",
-      letter: "AS",
-      icon: {
-        name: "dice-d20",
-        prefix: "fas",
-        label: "Dice D20"
+      visual:{
+        display: "icon",
+        letter: "AS",
+        image: null,
+        icon: {
+          name: "dice-d20",
+          prefix: "fas",
+          label: "Dice D20"
+        }
       },
       name: "awesomeSheet",
       url: "https://zombiefox.github.io/awesomeSheet/",
       accent: {
-        override: false,
-        color: {
-          hsl: {
-            h: 0,
-            s: 0,
-            l: 0
-          },
-          rgb: {
-            r: 0,
-            g: 0,
-            b: 0
-          }
+        by: "theme",
+        hsl: {
+          h: 0,
+          s: 0,
+          l: 0
+        },
+        rgb: {
+          r: 0,
+          g: 0,
+          b: 0
         }
       },
+      color: {
+        by: "theme",
+        hsl: {
+          h: 0,
+          s: 0,
+          l: 0
+        },
+        rgb: {
+          r: 0,
+          g: 0,
+          b: 0
+        }
+      },
+      image: "",
       searchMatch: false,
       timeStamp: 1546453104010
     }, {
-      display: "letter",
-      letter: "AZ",
-      icon: {
-        name: "amazon",
-        prefix: "fab",
-        label: "Amazon"
+      visual:{
+        display: "letter",
+        letter: "AZ",
+        image: null,
+        icon: {
+          name: "amazon",
+          prefix: "fab",
+          label: "Amazon"
+        }
       },
       name: "Amazon",
       url: "https://www.amazon.co.uk/",
       accent: {
-        override: false,
-        color: {
-          hsl: {
-            h: 0,
-            s: 0,
-            l: 0
-          },
-          rgb: {
-            r: 0,
-            g: 0,
-            b: 0
-          }
+        by: "theme",
+        hsl: {
+          h: 0,
+          s: 0,
+          l: 0
+        },
+        rgb: {
+          r: 0,
+          g: 0,
+          b: 0
         }
       },
+      color: {
+        by: "theme",
+        hsl: {
+          h: 0,
+          s: 0,
+          l: 0
+        },
+        rgb: {
+          r: 0,
+          g: 0,
+          b: 0
+        }
+      },
+      image: "",
       searchMatch: false,
       timeStamp: 1546453107633
     }, {
-      display: "letter",
-      letter: "GM",
-      icon: {
-        name: "envelope",
-        prefix: "fas",
-        label: "Envelope"
+      visual:{
+        display: "letter",
+        letter: "GM",
+        image: null,
+        icon: {
+          name: "envelope",
+          prefix: "fas",
+          label: "Envelope"
+        }
       },
       name: "Gmail",
       url: "https://mail.google.com/",
       accent: {
-        override: false,
-        color: {
-          hsl: {
-            h: 0,
-            s: 0,
-            l: 0
-          },
-          rgb: {
-            r: 0,
-            g: 0,
-            b: 0
-          }
+        by: "theme",
+        hsl: {
+          h: 0,
+          s: 0,
+          l: 0
+        },
+        rgb: {
+          r: 0,
+          g: 0,
+          b: 0
         }
       },
+      color: {
+        by: "theme",
+        hsl: {
+          h: 0,
+          s: 0,
+          l: 0
+        },
+        rgb: {
+          r: 0,
+          g: 0,
+          b: 0
+        }
+      },
+      image: "",
       searchMatch: false,
       timeStamp: 1546453110265
     }, {
-      display: "icon",
-      letter: "R",
-      icon: {
-        name: "reddit-alien",
-        prefix: "fab",
-        label: "reddit Alien"
+      visual:{
+        display: "icon",
+        letter: "R",
+        image: null,
+        icon: {
+          name: "reddit-alien",
+          prefix: "fab",
+          label: "reddit Alien"
+        }
       },
       name: "Reddit",
       url: "https://www.reddit.com/",
       accent: {
-        override: false,
-        color: {
-          hsl: {
-            h: 0,
-            s: 0,
-            l: 0
-          },
-          rgb: {
-            r: 0,
-            g: 0,
-            b: 0
-          }
+        by: "theme",
+        hsl: {
+          h: 0,
+          s: 0,
+          l: 0
+        },
+        rgb: {
+          r: 0,
+          g: 0,
+          b: 0
         }
       },
+      color: {
+        by: "theme",
+        hsl: {
+          h: 0,
+          s: 0,
+          l: 0
+        },
+        rgb: {
+          r: 0,
+          g: 0,
+          b: 0
+        }
+      },
+      image: "",
       searchMatch: false,
       timeStamp: 1546453111491
     }, {
-      display: "icon",
-      letter: "N",
-      icon: {
-        name: "film",
-        prefix: "fas",
-        label: "Film"
+      visual:{
+        display: "icon",
+        letter: "N",
+        image: null,
+        icon: {
+          name: "film",
+          prefix: "fas",
+          label: "Film"
+        }
       },
       name: "Netflix",
       url: "https://www.netflix.com/",
       accent: {
-        override: false,
-        color: {
-          hsl: {
-            h: 0,
-            s: 0,
-            l: 0
-          },
-          rgb: {
-            r: 0,
-            g: 0,
-            b: 0
-          }
+        by: "theme",
+        hsl: {
+          h: 0,
+          s: 0,
+          l: 0
+        },
+        rgb: {
+          r: 0,
+          g: 0,
+          b: 0
         }
       },
+      color: {
+        by: "theme",
+        hsl: {
+          h: 0,
+          s: 0,
+          l: 0
+        },
+        rgb: {
+          r: 0,
+          g: 0,
+          b: 0
+        }
+      },
+      image: "",
       searchMatch: false,
       timeStamp: 1546453104460
     }, {
-      display: "letter",
-      letter: "DR",
-      icon: {
-        name: null,
-        prefix: null,
-        label: null
+      visual:{
+        display: "letter",
+        letter: "DR",
+        image: null,
+        icon: {
+          name: null,
+          prefix: null,
+          label: null
+        }
       },
       name: "Drive",
       url: "https://drive.google.com/drive/",
       accent: {
-        override: false,
-        color: {
-          hsl: {
-            h: 0,
-            s: 0,
-            l: 0
-          },
-          rgb: {
-            r: 0,
-            g: 0,
-            b: 0
-          }
+        by: "theme",
+        hsl: {
+          h: 0,
+          s: 0,
+          l: 0
+        },
+        rgb: {
+          r: 0,
+          g: 0,
+          b: 0
         }
       },
+      color: {
+        by: "theme",
+        hsl: {
+          h: 0,
+          s: 0,
+          l: 0
+        },
+        rgb: {
+          r: 0,
+          g: 0,
+          b: 0
+        }
+      },
+      image: "",
       searchMatch: false,
       timeStamp: 1546453111953
     }]
@@ -182,57 +272,87 @@ var bookmarks = (function() {
       show: true
     },
     items: [{
-      display: "icon",
-      letter: "DEV",
-      icon: {
-        name: "code",
-        prefix: "fas",
-        label: "Code"
+      visual:{
+        display: "icon",
+        letter: "DEV",
+        image: null,
+        icon: {
+          name: "code",
+          prefix: "fas",
+          label: "Code"
+        }
       },
       name: "Devdocs",
       url: "http://devdocs.io/",
       accent: {
-        override: false,
-        color: {
-          hsl: {
-            h: 0,
-            s: 0,
-            l: 0
-          },
-          rgb: {
-            r: 0,
-            g: 0,
-            b: 0
-          }
+        by: "theme",
+        hsl: {
+          h: 0,
+          s: 0,
+          l: 0
+        },
+        rgb: {
+          r: 0,
+          g: 0,
+          b: 0
         }
       },
+      color: {
+        by: "theme",
+        hsl: {
+          h: 0,
+          s: 0,
+          l: 0
+        },
+        rgb: {
+          r: 0,
+          g: 0,
+          b: 0
+        }
+      },
+      image: "",
       searchMatch: false,
       timeStamp: 1546453101749
     }, {
-      display: "icon",
-      letter: "GIT",
-      icon: {
-        name: "github",
-        prefix: "fab",
-        label: "GitHub"
+      visual:{
+        display: "icon",
+        letter: "GIT",
+        image: null,
+        icon: {
+          name: "github",
+          prefix: "fab",
+          label: "GitHub"
+        }
       },
       name: "Github",
       url: "https://github.com/",
       accent: {
-        override: false,
-        color: {
-          hsl: {
-            h: 0,
-            s: 0,
-            l: 0
-          },
-          rgb: {
-            r: 0,
-            g: 0,
-            b: 0
-          }
+        by: "theme",
+        hsl: {
+          h: 0,
+          s: 0,
+          l: 0
+        },
+        rgb: {
+          r: 0,
+          g: 0,
+          b: 0
         }
       },
+      color: {
+        by: "theme",
+        hsl: {
+          h: 0,
+          s: 0,
+          l: 0
+        },
+        rgb: {
+          r: 0,
+          g: 0,
+          b: 0
+        }
+      },
+      image: "",
       searchMatch: false,
       timeStamp: 1546453108926
     }]
diff --git a/src/js/control.js b/src/js/control.js
index 662ba8cc..99c0d069 100644
--- a/src/js/control.js
+++ b/src/js/control.js
@@ -3039,7 +3039,7 @@ var control = (function() {
             render.dependents();
           }
         }, {
-          element: ".control-header-color-rgb-range",
+          element: ".control-header-color-rgb-color",
           path: "header.color.rgb",
           type: "color",
           mirrorElement: [{
@@ -3047,8 +3047,57 @@ var control = (function() {
             path: "header.color.rgb",
             type: "text",
             valueConvert: ["hexTextString"]
+          }, {
+            element: ".control-header-color-hsl-h-range",
+            path: "header.color.hsl.h",
+            type: "range"
+          }, {
+            element: ".control-header-color-hsl-h-number",
+            path: "header.color.hsl.h",
+            type: "number"
+          }, {
+            element: ".control-header-color-hsl-s-range",
+            path: "header.color.hsl.s",
+            type: "range"
+          }, {
+            element: ".control-header-color-hsl-s-number",
+            path: "header.color.hsl.s",
+            type: "number"
+          }, {
+            element: ".control-header-color-hsl-l-range",
+            path: "header.color.hsl.l",
+            type: "range"
+          }, {
+            element: ".control-header-color-hsl-l-number",
+            path: "header.color.hsl.l",
+            type: "number"
+          }, {
+            element: ".control-header-color-rgb-r-range",
+            path: "header.color.rgb.r",
+            type: "range"
+          }, {
+            element: ".control-header-color-rgb-r-number",
+            path: "header.color.rgb.r",
+            type: "number"
+          }, {
+            element: ".control-header-color-rgb-g-range",
+            path: "header.color.rgb.g",
+            type: "range"
+          }, {
+            element: ".control-header-color-rgb-g-number",
+            path: "header.color.rgb.g",
+            type: "number"
+          }, {
+            element: ".control-header-color-rgb-b-range",
+            path: "header.color.rgb.b",
+            type: "range"
+          }, {
+            element: ".control-header-color-rgb-b-number",
+            path: "header.color.rgb.b",
+            type: "number"
           }],
           func: function() {
+            header.mod.color.hsl();
             header.render.color.custom();
           }
         }, {
@@ -3057,11 +3106,660 @@ var control = (function() {
           type: "text",
           valueConvert: ["hexTextString"],
           mirrorElement: [{
-            element: ".control-header-color-rgb-range",
+            element: ".control-header-color-rgb-color",
             path: "header.color.rgb",
             type: "color"
+          }, {
+            element: ".control-header-color-hsl-h-range",
+            path: "header.color.hsl.h",
+            type: "range"
+          }, {
+            element: ".control-header-color-hsl-h-number",
+            path: "header.color.hsl.h",
+            type: "number"
+          }, {
+            element: ".control-header-color-hsl-s-range",
+            path: "header.color.hsl.s",
+            type: "range"
+          }, {
+            element: ".control-header-color-hsl-s-number",
+            path: "header.color.hsl.s",
+            type: "number"
+          }, {
+            element: ".control-header-color-hsl-l-range",
+            path: "header.color.hsl.l",
+            type: "range"
+          }, {
+            element: ".control-header-color-hsl-l-number",
+            path: "header.color.hsl.l",
+            type: "number"
+          }, {
+            element: ".control-header-color-rgb-r-range",
+            path: "header.color.rgb.r",
+            type: "range"
+          }, {
+            element: ".control-header-color-rgb-r-number",
+            path: "header.color.rgb.r",
+            type: "number"
+          }, {
+            element: ".control-header-color-rgb-g-range",
+            path: "header.color.rgb.g",
+            type: "range"
+          }, {
+            element: ".control-header-color-rgb-g-number",
+            path: "header.color.rgb.g",
+            type: "number"
+          }, {
+            element: ".control-header-color-rgb-b-range",
+            path: "header.color.rgb.b",
+            type: "range"
+          }, {
+            element: ".control-header-color-rgb-b-number",
+            path: "header.color.rgb.b",
+            type: "number"
           }],
           func: function() {
+            header.mod.color.hsl();
+            header.render.color.custom();
+          }
+        }, {
+          element: ".control-header-color-hsl-h-range",
+          path: "header.color.hsl.h",
+          type: "range",
+          valueModify: {
+            min: 0,
+            max: 359
+          },
+          mirrorElement: [{
+            element: ".control-header-color-rgb-color",
+            path: "header.color.rgb",
+            type: "color"
+          }, {
+            element: ".control-header-color-rgb-text",
+            path: "header.color.rgb",
+            type: "text",
+            valueConvert: ["hexTextString"]
+          }, {
+            element: ".control-header-color-hsl-h-number",
+            path: "header.color.hsl.h",
+            type: "number"
+          }, {
+            element: ".control-header-color-rgb-r-range",
+            path: "header.color.rgb.r",
+            type: "range"
+          }, {
+            element: ".control-header-color-rgb-r-number",
+            path: "header.color.rgb.r",
+            type: "number"
+          }, {
+            element: ".control-header-color-rgb-g-range",
+            path: "header.color.rgb.g",
+            type: "range"
+          }, {
+            element: ".control-header-color-rgb-g-number",
+            path: "header.color.rgb.g",
+            type: "number"
+          }, {
+            element: ".control-header-color-rgb-b-range",
+            path: "header.color.rgb.b",
+            type: "range"
+          }, {
+            element: ".control-header-color-rgb-b-number",
+            path: "header.color.rgb.b",
+            type: "number"
+          }],
+          func: function() {
+            header.mod.color.rgb();
+            header.render.color.custom();
+          }
+        }, {
+          element: ".control-header-color-hsl-h-number",
+          path: "header.color.hsl.h",
+          type: "number",
+          valueModify: {
+            min: 0,
+            max: 359
+          },
+          mirrorElement: [{
+            element: ".control-header-color-rgb-color",
+            path: "header.color.rgb",
+            type: "color"
+          }, {
+            element: ".control-header-color-rgb-text",
+            path: "header.color.rgb",
+            type: "text",
+            valueConvert: ["hexTextString"]
+          }, {
+            element: ".control-header-color-hsl-h-range",
+            path: "header.color.hsl.h",
+            type: "range"
+          }, {
+            element: ".control-header-color-rgb-r-range",
+            path: "header.color.rgb.r",
+            type: "range"
+          }, {
+            element: ".control-header-color-rgb-r-number",
+            path: "header.color.rgb.r",
+            type: "number"
+          }, {
+            element: ".control-header-color-rgb-g-range",
+            path: "header.color.rgb.g",
+            type: "range"
+          }, {
+            element: ".control-header-color-rgb-g-number",
+            path: "header.color.rgb.g",
+            type: "number"
+          }, {
+            element: ".control-header-color-rgb-b-range",
+            path: "header.color.rgb.b",
+            type: "range"
+          }, {
+            element: ".control-header-color-rgb-b-number",
+            path: "header.color.rgb.b",
+            type: "number"
+          }],
+          func: function() {
+            header.mod.color.rgb();
+            header.render.color.custom();
+          }
+        }, {
+          element: ".control-header-color-hsl-s-range",
+          path: "header.color.hsl.s",
+          type: "range",
+          valueModify: {
+            min: 0,
+            max: 100
+          },
+          mirrorElement: [{
+            element: ".control-header-color-rgb-color",
+            path: "header.color.rgb",
+            type: "color"
+          }, {
+            element: ".control-header-color-rgb-text",
+            path: "header.color.rgb",
+            type: "text",
+            valueConvert: ["hexTextString"]
+          }, {
+            element: ".control-header-color-hsl-s-number",
+            path: "header.color.hsl.s",
+            type: "number"
+          }, {
+            element: ".control-header-color-rgb-r-range",
+            path: "header.color.rgb.r",
+            type: "range"
+          }, {
+            element: ".control-header-color-rgb-r-number",
+            path: "header.color.rgb.r",
+            type: "number"
+          }, {
+            element: ".control-header-color-rgb-g-range",
+            path: "header.color.rgb.g",
+            type: "range"
+          }, {
+            element: ".control-header-color-rgb-g-number",
+            path: "header.color.rgb.g",
+            type: "number"
+          }, {
+            element: ".control-header-color-rgb-b-range",
+            path: "header.color.rgb.b",
+            type: "range"
+          }, {
+            element: ".control-header-color-rgb-b-number",
+            path: "header.color.rgb.b",
+            type: "number"
+          }],
+          func: function() {
+            header.mod.color.rgb();
+            header.render.color.custom();
+          }
+        }, {
+          element: ".control-header-color-hsl-s-number",
+          path: "header.color.hsl.s",
+          type: "number",
+          valueModify: {
+            min: 0,
+            max: 100
+          },
+          mirrorElement: [{
+            element: ".control-header-color-rgb-color",
+            path: "header.color.rgb",
+            type: "color"
+          }, {
+            element: ".control-header-color-rgb-text",
+            path: "header.color.rgb",
+            type: "text",
+            valueConvert: ["hexTextString"]
+          }, {
+            element: ".control-header-color-hsl-s-range",
+            path: "header.color.hsl.s",
+            type: "range"
+          }, {
+            element: ".control-header-color-rgb-r-range",
+            path: "header.color.rgb.r",
+            type: "range"
+          }, {
+            element: ".control-header-color-rgb-r-number",
+            path: "header.color.rgb.r",
+            type: "number"
+          }, {
+            element: ".control-header-color-rgb-g-range",
+            path: "header.color.rgb.g",
+            type: "range"
+          }, {
+            element: ".control-header-color-rgb-g-number",
+            path: "header.color.rgb.g",
+            type: "number"
+          }, {
+            element: ".control-header-color-rgb-b-range",
+            path: "header.color.rgb.b",
+            type: "range"
+          }, {
+            element: ".control-header-color-rgb-b-number",
+            path: "header.color.rgb.b",
+            type: "number"
+          }],
+          func: function() {
+            header.mod.color.rgb();
+            header.render.color.custom();
+          }
+        }, {
+          element: ".control-header-color-hsl-l-range",
+          path: "header.color.hsl.l",
+          type: "range",
+          valueModify: {
+            min: 0,
+            max: 100
+          },
+          mirrorElement: [{
+            element: ".control-header-color-rgb-color",
+            path: "header.color.rgb",
+            type: "color"
+          }, {
+            element: ".control-header-color-rgb-text",
+            path: "header.color.rgb",
+            type: "text",
+            valueConvert: ["hexTextString"]
+          }, {
+            element: ".control-header-color-hsl-l-number",
+            path: "header.color.hsl.l",
+            type: "number"
+          }, {
+            element: ".control-header-color-rgb-r-range",
+            path: "header.color.rgb.r",
+            type: "range"
+          }, {
+            element: ".control-header-color-rgb-r-number",
+            path: "header.color.rgb.r",
+            type: "number"
+          }, {
+            element: ".control-header-color-rgb-g-range",
+            path: "header.color.rgb.g",
+            type: "range"
+          }, {
+            element: ".control-header-color-rgb-g-number",
+            path: "header.color.rgb.g",
+            type: "number"
+          }, {
+            element: ".control-header-color-rgb-b-range",
+            path: "header.color.rgb.b",
+            type: "range"
+          }, {
+            element: ".control-header-color-rgb-b-number",
+            path: "header.color.rgb.b",
+            type: "number"
+          }],
+          func: function() {
+            header.mod.color.rgb();
+            header.render.color.custom();
+          }
+        }, {
+          element: ".control-header-color-hsl-l-number",
+          path: "header.color.hsl.l",
+          type: "number",
+          valueModify: {
+            min: 0,
+            max: 100
+          },
+          mirrorElement: [{
+            element: ".control-header-color-rgb-color",
+            path: "header.color.rgb",
+            type: "color"
+          }, {
+            element: ".control-header-color-rgb-text",
+            path: "header.color.rgb",
+            type: "text",
+            valueConvert: ["hexTextString"]
+          }, {
+            element: ".control-header-color-hsl-l-range",
+            path: "header.color.hsl.l",
+            type: "range"
+          }, {
+            element: ".control-header-color-rgb-r-range",
+            path: "header.color.rgb.r",
+            type: "range"
+          }, {
+            element: ".control-header-color-rgb-r-number",
+            path: "header.color.rgb.r",
+            type: "number"
+          }, {
+            element: ".control-header-color-rgb-g-range",
+            path: "header.color.rgb.g",
+            type: "range"
+          }, {
+            element: ".control-header-color-rgb-g-number",
+            path: "header.color.rgb.g",
+            type: "number"
+          }, {
+            element: ".control-header-color-rgb-b-range",
+            path: "header.color.rgb.b",
+            type: "range"
+          }, {
+            element: ".control-header-color-rgb-b-number",
+            path: "header.color.rgb.b",
+            type: "number"
+          }],
+          func: function() {
+            header.mod.color.rgb();
+            header.render.color.custom();
+          }
+        }, {
+          element: ".control-header-color-rgb-r-range",
+          path: "header.color.rgb.r",
+          type: "range",
+          valueModify: {
+            min: 0,
+            max: 255
+          },
+          mirrorElement: [{
+            element: ".control-header-color-rgb-color",
+            path: "header.color.rgb",
+            type: "color"
+          }, {
+            element: ".control-header-color-rgb-text",
+            path: "header.color.rgb",
+            type: "text",
+            valueConvert: ["hexTextString"]
+          }, {
+            element: ".control-header-color-rgb-r-number",
+            path: "header.color.rgb.r",
+            type: "number"
+          }, {
+            element: ".control-header-color-hsl-h-range",
+            path: "header.color.hsl.h",
+            type: "range"
+          }, {
+            element: ".control-header-color-hsl-h-number",
+            path: "header.color.hsl.h",
+            type: "number"
+          }, {
+            element: ".control-header-color-hsl-s-range",
+            path: "header.color.hsl.s",
+            type: "range"
+          }, {
+            element: ".control-header-color-hsl-s-number",
+            path: "header.color.hsl.s",
+            type: "number"
+          }, {
+            element: ".control-header-color-hsl-l-range",
+            path: "header.color.hsl.l",
+            type: "range"
+          }, {
+            element: ".control-header-color-hsl-l-number",
+            path: "header.color.hsl.l",
+            type: "number"
+          }],
+          func: function() {
+            header.mod.color.hsl();
+            header.render.color.custom();
+          }
+        }, {
+          element: ".control-header-color-rgb-r-number",
+          path: "header.color.rgb.r",
+          type: "number",
+          valueModify: {
+            min: 0,
+            max: 255
+          },
+          mirrorElement: [{
+            element: ".control-header-color-rgb-color",
+            path: "header.color.rgb",
+            type: "color"
+          }, {
+            element: ".control-header-color-rgb-text",
+            path: "header.color.rgb",
+            type: "text",
+            valueConvert: ["hexTextString"]
+          }, {
+            element: ".control-header-color-rgb-r-range",
+            path: "header.color.rgb.r",
+            type: "range"
+          }, {
+            element: ".control-header-color-hsl-h-range",
+            path: "header.color.hsl.h",
+            type: "range"
+          }, {
+            element: ".control-header-color-hsl-h-number",
+            path: "header.color.hsl.h",
+            type: "number"
+          }, {
+            element: ".control-header-color-hsl-s-range",
+            path: "header.color.hsl.s",
+            type: "range"
+          }, {
+            element: ".control-header-color-hsl-s-number",
+            path: "header.color.hsl.s",
+            type: "number"
+          }, {
+            element: ".control-header-color-hsl-l-range",
+            path: "header.color.hsl.l",
+            type: "range"
+          }, {
+            element: ".control-header-color-hsl-l-number",
+            path: "header.color.hsl.l",
+            type: "number"
+          }],
+          func: function() {
+            header.mod.color.hsl();
+            header.render.color.custom();
+          }
+        }, {
+          element: ".control-header-color-rgb-g-range",
+          path: "header.color.rgb.g",
+          type: "range",
+          valueModify: {
+            min: 0,
+            max: 255
+          },
+          mirrorElement: [{
+            element: ".control-header-color-rgb-color",
+            path: "header.color.rgb",
+            type: "color"
+          }, {
+            element: ".control-header-color-rgb-text",
+            path: "header.color.rgb",
+            type: "text",
+            valueConvert: ["hexTextString"]
+          }, {
+            element: ".control-header-color-rgb-g-number",
+            path: "header.color.rgb.g",
+            type: "number"
+          }, {
+            element: ".control-header-color-hsl-h-range",
+            path: "header.color.hsl.h",
+            type: "range"
+          }, {
+            element: ".control-header-color-hsl-h-number",
+            path: "header.color.hsl.h",
+            type: "number"
+          }, {
+            element: ".control-header-color-hsl-s-range",
+            path: "header.color.hsl.s",
+            type: "range"
+          }, {
+            element: ".control-header-color-hsl-s-number",
+            path: "header.color.hsl.s",
+            type: "number"
+          }, {
+            element: ".control-header-color-hsl-l-range",
+            path: "header.color.hsl.l",
+            type: "range"
+          }, {
+            element: ".control-header-color-hsl-l-number",
+            path: "header.color.hsl.l",
+            type: "number"
+          }],
+          func: function() {
+            header.mod.color.hsl();
+            header.render.color.custom();
+          }
+        }, {
+          element: ".control-header-color-rgb-g-number",
+          path: "header.color.rgb.g",
+          type: "number",
+          valueModify: {
+            min: 0,
+            max: 255
+          },
+          mirrorElement: [{
+            element: ".control-header-color-rgb-color",
+            path: "header.color.rgb",
+            type: "color"
+          }, {
+            element: ".control-header-color-rgb-text",
+            path: "header.color.rgb",
+            type: "text",
+            valueConvert: ["hexTextString"]
+          }, {
+            element: ".control-header-color-rgb-g-range",
+            path: "header.color.rgb.g",
+            type: "range"
+          }, {
+            element: ".control-header-color-hsl-h-range",
+            path: "header.color.hsl.h",
+            type: "range"
+          }, {
+            element: ".control-header-color-hsl-h-number",
+            path: "header.color.hsl.h",
+            type: "number"
+          }, {
+            element: ".control-header-color-hsl-s-range",
+            path: "header.color.hsl.s",
+            type: "range"
+          }, {
+            element: ".control-header-color-hsl-s-number",
+            path: "header.color.hsl.s",
+            type: "number"
+          }, {
+            element: ".control-header-color-hsl-l-range",
+            path: "header.color.hsl.l",
+            type: "range"
+          }, {
+            element: ".control-header-color-hsl-l-number",
+            path: "header.color.hsl.l",
+            type: "number"
+          }],
+          func: function() {
+            header.mod.color.hsl();
+            header.render.color.custom();
+          }
+        }, {
+          element: ".control-header-color-rgb-b-range",
+          path: "header.color.rgb.b",
+          type: "range",
+          valueModify: {
+            min: 0,
+            max: 255
+          },
+          mirrorElement: [{
+            element: ".control-header-color-rgb-color",
+            path: "header.color.rgb",
+            type: "color"
+          }, {
+            element: ".control-header-color-rgb-text",
+            path: "header.color.rgb",
+            type: "text",
+            valueConvert: ["hexTextString"]
+          }, {
+            element: ".control-header-color-rgb-b-number",
+            path: "header.color.rgb.b",
+            type: "number"
+          }, {
+            element: ".control-header-color-hsl-h-range",
+            path: "header.color.hsl.h",
+            type: "range"
+          }, {
+            element: ".control-header-color-hsl-h-number",
+            path: "header.color.hsl.h",
+            type: "number"
+          }, {
+            element: ".control-header-color-hsl-s-range",
+            path: "header.color.hsl.s",
+            type: "range"
+          }, {
+            element: ".control-header-color-hsl-s-number",
+            path: "header.color.hsl.s",
+            type: "number"
+          }, {
+            element: ".control-header-color-hsl-l-range",
+            path: "header.color.hsl.l",
+            type: "range"
+          }, {
+            element: ".control-header-color-hsl-l-number",
+            path: "header.color.hsl.l",
+            type: "number"
+          }],
+          func: function() {
+            header.mod.color.hsl();
+            header.render.color.custom();
+          }
+        }, {
+          element: ".control-header-color-rgb-b-number",
+          path: "header.color.rgb.b",
+          type: "number",
+          valueModify: {
+            min: 0,
+            max: 255
+          },
+          mirrorElement: [{
+            element: ".control-header-color-rgb-color",
+            path: "header.color.rgb",
+            type: "color"
+          }, {
+            element: ".control-header-color-rgb-text",
+            path: "header.color.rgb",
+            type: "text",
+            valueConvert: ["hexTextString"]
+          }, {
+            element: ".control-header-color-rgb-b-range",
+            path: "header.color.rgb.b",
+            type: "range"
+          }, {
+            element: ".control-header-color-hsl-h-range",
+            path: "header.color.hsl.h",
+            type: "range"
+          }, {
+            element: ".control-header-color-hsl-h-number",
+            path: "header.color.hsl.h",
+            type: "number"
+          }, {
+            element: ".control-header-color-hsl-s-range",
+            path: "header.color.hsl.s",
+            type: "range"
+          }, {
+            element: ".control-header-color-hsl-s-number",
+            path: "header.color.hsl.s",
+            type: "number"
+          }, {
+            element: ".control-header-color-hsl-l-range",
+            path: "header.color.hsl.l",
+            type: "range"
+          }, {
+            element: ".control-header-color-hsl-l-number",
+            path: "header.color.hsl.l",
+            type: "number"
+          }],
+          func: function() {
+            header.mod.color.hsl();
             header.render.color.custom();
           }
         }, {
@@ -3690,31 +4388,31 @@ var control = (function() {
             render.class();
           }
         }, {
-          element: ".control-link-item-display-order-letconname",
+          element: ".control-link-item-display-order-visualname",
           path: "link.item.display.order",
           type: "radio",
           func: function() {
             render.class();
           }
         }, {
-          element: ".control-link-item-display-order-nameletcon",
+          element: ".control-link-item-display-order-namevisual",
           path: "link.item.display.order",
           type: "radio",
           func: function() {
             render.class();
           }
         }],
-        letcon: [{
-          element: ".control-link-item-display-letcon-show",
-          path: "link.item.display.letcon.show",
+        visual: [{
+          element: ".control-link-item-display-visual-show",
+          path: "link.item.display.visual.show",
           type: "checkbox",
           func: function() {
             render.class();
             render.dependents();
           }
         }, {
-          element: ".control-link-item-display-letcon-letter-size-range",
-          path: "link.item.display.letcon.letter.size",
+          element: ".control-link-item-display-visual-letter-size-range",
+          path: "link.item.display.visual.letter.size",
           type: "range",
           valueConvert: ["float"],
           valueModify: {
@@ -3723,17 +4421,17 @@ var control = (function() {
             step: 10
           },
           mirrorElement: [{
-            element: ".control-link-item-display-letcon-letter-size-number",
-            path: "link.item.display.letcon.letter.size",
+            element: ".control-link-item-display-visual-letter-size-number",
+            path: "link.item.display.visual.letter.size",
             type: "number",
             valueConvert: ["float"]
           }],
           func: function() {
-            link.render.item.display.letter();
+            link.render.item.display.letter.size();
           }
         }, {
-          element: ".control-link-item-display-letcon-letter-size-number",
-          path: "link.item.display.letcon.letter.size",
+          element: ".control-link-item-display-visual-letter-size-number",
+          path: "link.item.display.visual.letter.size",
           type: "number",
           valueConvert: ["float"],
           valueModify: {
@@ -3742,26 +4440,26 @@ var control = (function() {
             step: 10
           },
           mirrorElement: [{
-            element: ".control-link-item-display-letcon-letter-size-range",
-            path: "link.item.display.letcon.letter.size",
+            element: ".control-link-item-display-visual-letter-size-range",
+            path: "link.item.display.visual.letter.size",
             type: "range",
             valueConvert: ["float"]
           }],
           func: function() {
-            link.render.item.display.letter();
+            link.render.item.display.letter.size();
           }
         }, {
-          element: ".control-link-item-display-letcon-letter-size-default",
+          element: ".control-link-item-display-visual-letter-size-default",
           type: "button",
           func: function() {
-            mod.default("link.item.display.letcon.letter.size");
-            link.render.item.display.letter();
+            mod.default("link.item.display.visual.letter.size");
+            link.render.item.display.letter.size();
             render.update.control.header();
             render.update.control.menu();
           }
         }, {
-          element: ".control-link-item-display-letcon-icon-size-range",
-          path: "link.item.display.letcon.icon.size",
+          element: ".control-link-item-display-visual-icon-size-range",
+          path: "link.item.display.visual.icon.size",
           type: "range",
           valueConvert: ["float"],
           valueModify: {
@@ -3770,17 +4468,17 @@ var control = (function() {
             step: 10
           },
           mirrorElement: [{
-            element: ".control-link-item-display-letcon-icon-size-number",
-            path: "link.item.display.letcon.icon.size",
+            element: ".control-link-item-display-visual-icon-size-number",
+            path: "link.item.display.visual.icon.size",
             type: "number",
             valueConvert: ["float"]
           }],
           func: function() {
-            link.render.item.display.icon();
+            link.render.item.display.icon.size();
           }
         }, {
-          element: ".control-link-item-display-letcon-icon-size-number",
-          path: "link.item.display.letcon.icon.size",
+          element: ".control-link-item-display-visual-icon-size-number",
+          path: "link.item.display.visual.icon.size",
           type: "number",
           valueConvert: ["float"],
           valueModify: {
@@ -3789,20 +4487,67 @@ var control = (function() {
             step: 10
           },
           mirrorElement: [{
-            element: ".control-link-item-display-letcon-icon-size-range",
-            path: "link.item.display.letcon.icon.size",
+            element: ".control-link-item-display-visual-icon-size-range",
+            path: "link.item.display.visual.icon.size",
             type: "range",
             valueConvert: ["float"]
           }],
           func: function() {
-            link.render.item.display.icon();
+            link.render.item.display.icon.size();
           }
         }, {
-          element: ".control-link-item-display-letcon-icon-size-default",
+          element: ".control-link-item-display-visual-icon-size-default",
           type: "button",
           func: function() {
-            mod.default("link.item.display.letcon.icon.size");
-            link.render.item.display.icon();
+            mod.default("link.item.display.visual.icon.size");
+            link.render.item.display.icon.size();
+            render.update.control.header();
+            render.update.control.menu();
+          }
+        }, {
+          element: ".control-link-item-display-visual-image-size-range",
+          path: "link.item.display.visual.image.size",
+          type: "range",
+          valueConvert: ["float"],
+          valueModify: {
+            min: 10,
+            max: 3000,
+            step: 10
+          },
+          mirrorElement: [{
+            element: ".control-link-item-display-visual-image-size-number",
+            path: "link.item.display.visual.image.size",
+            type: "number",
+            valueConvert: ["float"]
+          }],
+          func: function() {
+            link.render.item.display.image.size();
+          }
+        }, {
+          element: ".control-link-item-display-visual-image-size-number",
+          path: "link.item.display.visual.image.size",
+          type: "number",
+          valueConvert: ["float"],
+          valueModify: {
+            min: 10,
+            max: 3000,
+            step: 10
+          },
+          mirrorElement: [{
+            element: ".control-link-item-display-visual-image-size-range",
+            path: "link.item.display.visual.image.size",
+            type: "range",
+            valueConvert: ["float"]
+          }],
+          func: function() {
+            link.render.item.display.image.size();
+          }
+        }, {
+          element: ".control-link-item-display-visual-image-size-default",
+          type: "button",
+          func: function() {
+            mod.default("link.item.display.visual.image.size");
+            link.render.item.display.image.size();
             render.update.control.header();
             render.update.control.menu();
           }
@@ -3879,23 +4624,7 @@ var control = (function() {
           }
         }],
         color: [{
-          element: ".control-link-item-color-by-theme",
-          path: "link.item.color.by",
-          type: "radio",
-          func: function() {
-            render.dependents();
-            render.class();
-          }
-        }, {
-          element: ".control-link-item-color-by-custom",
-          path: "link.item.color.by",
-          type: "radio",
-          func: function() {
-            render.dependents();
-            render.class();
-          }
-        }, {
-          element: ".control-link-item-color-rgb-range",
+          element: ".control-link-item-color-rgb-color",
           path: "link.item.color.rgb",
           type: "color",
           mirrorElement: [{
@@ -3903,9 +4632,57 @@ var control = (function() {
             path: "link.item.color.rgb",
             type: "text",
             valueConvert: ["hexTextString"]
+          }, {
+            element: ".control-link-item-color-hsl-h-range",
+            path: "link.item.color.hsl.h",
+            type: "range"
+          }, {
+            element: ".control-link-item-color-hsl-h-number",
+            path: "link.item.color.hsl.h",
+            type: "number"
+          }, {
+            element: ".control-link-item-color-hsl-s-range",
+            path: "link.item.color.hsl.s",
+            type: "range"
+          }, {
+            element: ".control-link-item-color-hsl-s-number",
+            path: "link.item.color.hsl.s",
+            type: "number"
+          }, {
+            element: ".control-link-item-color-hsl-l-range",
+            path: "link.item.color.hsl.l",
+            type: "range"
+          }, {
+            element: ".control-link-item-color-hsl-l-number",
+            path: "link.item.color.hsl.l",
+            type: "number"
+          }, {
+            element: ".control-link-item-color-rgb-r-range",
+            path: "link.item.color.rgb.r",
+            type: "range"
+          }, {
+            element: ".control-link-item-color-rgb-r-number",
+            path: "link.item.color.rgb.r",
+            type: "number"
+          }, {
+            element: ".control-link-item-color-rgb-g-range",
+            path: "link.item.color.rgb.g",
+            type: "range"
+          }, {
+            element: ".control-link-item-color-rgb-g-number",
+            path: "link.item.color.rgb.g",
+            type: "number"
+          }, {
+            element: ".control-link-item-color-rgb-b-range",
+            path: "link.item.color.rgb.b",
+            type: "range"
+          }, {
+            element: ".control-link-item-color-rgb-b-number",
+            path: "link.item.color.rgb.b",
+            type: "number"
           }],
           func: function() {
-            link.render.item.color.custom();
+            link.mod.color.hsl();
           }
         }, {
           element: ".control-link-item-color-rgb-text",
@@ -3913,12 +4690,669 @@ var control = (function() {
           type: "text",
           valueConvert: ["hexTextString"],
           mirrorElement: [{
-            element: ".control-link-item-color-rgb-range",
+            element: ".control-link-item-color-rgb-color",
             path: "link.item.color.rgb",
             type: "color"
+          }, {
+            element: ".control-link-item-color-hsl-h-range",
+            path: "link.item.color.hsl.h",
+            type: "range"
+          }, {
+            element: ".control-link-item-color-hsl-h-number",
+            path: "link.item.color.hsl.h",
+            type: "number"
+          }, {
+            element: ".control-link-item-color-hsl-s-range",
+            path: "link.item.color.hsl.s",
+            type: "range"
+          }, {
+            element: ".control-link-item-color-hsl-s-number",
+            path: "link.item.color.hsl.s",
+            type: "number"
+          }, {
+            element: ".control-link-item-color-hsl-l-range",
+            path: "link.item.color.hsl.l",
+            type: "range"
+          }, {
+            element: ".control-link-item-color-hsl-l-number",
+            path: "link.item.color.hsl.l",
+            type: "number"
+          }, {
+            element: ".control-link-item-color-rgb-r-range",
+            path: "link.item.color.rgb.r",
+            type: "range"
+          }, {
+            element: ".control-link-item-color-rgb-r-number",
+            path: "link.item.color.rgb.r",
+            type: "number"
+          }, {
+            element: ".control-link-item-color-rgb-g-range",
+            path: "link.item.color.rgb.g",
+            type: "range"
+          }, {
+            element: ".control-link-item-color-rgb-g-number",
+            path: "link.item.color.rgb.g",
+            type: "number"
+          }, {
+            element: ".control-link-item-color-rgb-b-range",
+            path: "link.item.color.rgb.b",
+            type: "range"
+          }, {
+            element: ".control-link-item-color-rgb-b-number",
+            path: "link.item.color.rgb.b",
+            type: "number"
           }],
           func: function() {
-            link.render.item.color.custom();
+            link.mod.color.hsl();
+          }
+        }, {
+          element: ".control-link-item-color-hsl-h-range",
+          path: "link.item.color.hsl.h",
+          type: "range",
+          valueModify: {
+            min: 0,
+            max: 359
+          },
+          mirrorElement: [{
+            element: ".control-link-item-color-rgb-color",
+            path: "link.item.color.rgb",
+            type: "color"
+          }, {
+            element: ".control-link-item-color-rgb-text",
+            path: "link.item.color.rgb",
+            type: "text",
+            valueConvert: ["hexTextString"]
+          }, {
+            element: ".control-link-item-color-hsl-h-number",
+            path: "link.item.color.hsl.h",
+            type: "number"
+          }, {
+            element: ".control-link-item-color-rgb-r-range",
+            path: "link.item.color.rgb.r",
+            type: "range"
+          }, {
+            element: ".control-link-item-color-rgb-r-number",
+            path: "link.item.color.rgb.r",
+            type: "number"
+          }, {
+            element: ".control-link-item-color-rgb-g-range",
+            path: "link.item.color.rgb.g",
+            type: "range"
+          }, {
+            element: ".control-link-item-color-rgb-g-number",
+            path: "link.item.color.rgb.g",
+            type: "number"
+          }, {
+            element: ".control-link-item-color-rgb-b-range",
+            path: "link.item.color.rgb.b",
+            type: "range"
+          }, {
+            element: ".control-link-item-color-rgb-b-number",
+            path: "link.item.color.rgb.b",
+            type: "number"
+          }],
+          func: function() {
+            link.mod.color.rgb();
+          }
+        }, {
+          element: ".control-link-item-color-hsl-h-number",
+          path: "link.item.color.hsl.h",
+          type: "number",
+          valueModify: {
+            min: 0,
+            max: 359
+          },
+          mirrorElement: [{
+            element: ".control-link-item-color-rgb-color",
+            path: "link.item.color.rgb",
+            type: "color"
+          }, {
+            element: ".control-link-item-color-rgb-text",
+            path: "link.item.color.rgb",
+            type: "text",
+            valueConvert: ["hexTextString"]
+          }, {
+            element: ".control-link-item-color-hsl-h-range",
+            path: "link.item.color.hsl.h",
+            type: "range"
+          }, {
+            element: ".control-link-item-color-rgb-r-range",
+            path: "link.item.color.rgb.r",
+            type: "range"
+          }, {
+            element: ".control-link-item-color-rgb-r-number",
+            path: "link.item.color.rgb.r",
+            type: "number"
+          }, {
+            element: ".control-link-item-color-rgb-g-range",
+            path: "link.item.color.rgb.g",
+            type: "range"
+          }, {
+            element: ".control-link-item-color-rgb-g-number",
+            path: "link.item.color.rgb.g",
+            type: "number"
+          }, {
+            element: ".control-link-item-color-rgb-b-range",
+            path: "link.item.color.rgb.b",
+            type: "range"
+          }, {
+            element: ".control-link-item-color-rgb-b-number",
+            path: "link.item.color.rgb.b",
+            type: "number"
+          }],
+          func: function() {
+            link.mod.color.rgb();
+          }
+        }, {
+          element: ".control-link-item-color-hsl-s-range",
+          path: "link.item.color.hsl.s",
+          type: "range",
+          valueModify: {
+            min: 0,
+            max: 100
+          },
+          mirrorElement: [{
+            element: ".control-link-item-color-rgb-color",
+            path: "link.item.color.rgb",
+            type: "color"
+          }, {
+            element: ".control-link-item-color-rgb-text",
+            path: "link.item.color.rgb",
+            type: "text",
+            valueConvert: ["hexTextString"]
+          }, {
+            element: ".control-link-item-color-hsl-s-number",
+            path: "link.item.color.hsl.s",
+            type: "number"
+          }, {
+            element: ".control-link-item-color-rgb-r-range",
+            path: "link.item.color.rgb.r",
+            type: "range"
+          }, {
+            element: ".control-link-item-color-rgb-r-number",
+            path: "link.item.color.rgb.r",
+            type: "number"
+          }, {
+            element: ".control-link-item-color-rgb-g-range",
+            path: "link.item.color.rgb.g",
+            type: "range"
+          }, {
+            element: ".control-link-item-color-rgb-g-number",
+            path: "link.item.color.rgb.g",
+            type: "number"
+          }, {
+            element: ".control-link-item-color-rgb-b-range",
+            path: "link.item.color.rgb.b",
+            type: "range"
+          }, {
+            element: ".control-link-item-color-rgb-b-number",
+            path: "link.item.color.rgb.b",
+            type: "number"
+          }],
+          func: function() {
+            link.mod.color.rgb();
+          }
+        }, {
+          element: ".control-link-item-color-hsl-s-number",
+          path: "link.item.color.hsl.s",
+          type: "number",
+          valueModify: {
+            min: 0,
+            max: 100
+          },
+          mirrorElement: [{
+            element: ".control-link-item-color-rgb-color",
+            path: "link.item.color.rgb",
+            type: "color"
+          }, {
+            element: ".control-link-item-color-rgb-text",
+            path: "link.item.color.rgb",
+            type: "text",
+            valueConvert: ["hexTextString"]
+          }, {
+            element: ".control-link-item-color-hsl-s-range",
+            path: "link.item.color.hsl.s",
+            type: "range"
+          }, {
+            element: ".control-link-item-color-rgb-r-range",
+            path: "link.item.color.rgb.r",
+            type: "range"
+          }, {
+            element: ".control-link-item-color-rgb-r-number",
+            path: "link.item.color.rgb.r",
+            type: "number"
+          }, {
+            element: ".control-link-item-color-rgb-g-range",
+            path: "link.item.color.rgb.g",
+            type: "range"
+          }, {
+            element: ".control-link-item-color-rgb-g-number",
+            path: "link.item.color.rgb.g",
+            type: "number"
+          }, {
+            element: ".control-link-item-color-rgb-b-range",
+            path: "link.item.color.rgb.b",
+            type: "range"
+          }, {
+            element: ".control-link-item-color-rgb-b-number",
+            path: "link.item.color.rgb.b",
+            type: "number"
+          }],
+          func: function() {
+            link.mod.color.rgb();
+          }
+        }, {
+          element: ".control-link-item-color-hsl-l-range",
+          path: "link.item.color.hsl.l",
+          type: "range",
+          valueModify: {
+            min: 0,
+            max: 100
+          },
+          mirrorElement: [{
+            element: ".control-link-item-color-rgb-color",
+            path: "link.item.color.rgb",
+            type: "color"
+          }, {
+            element: ".control-link-item-color-rgb-text",
+            path: "link.item.color.rgb",
+            type: "text",
+            valueConvert: ["hexTextString"]
+          }, {
+            element: ".control-link-item-color-hsl-l-number",
+            path: "link.item.color.hsl.l",
+            type: "number"
+          }, {
+            element: ".control-link-item-color-rgb-r-range",
+            path: "link.item.color.rgb.r",
+            type: "range"
+          }, {
+            element: ".control-link-item-color-rgb-r-number",
+            path: "link.item.color.rgb.r",
+            type: "number"
+          }, {
+            element: ".control-link-item-color-rgb-g-range",
+            path: "link.item.color.rgb.g",
+            type: "range"
+          }, {
+            element: ".control-link-item-color-rgb-g-number",
+            path: "link.item.color.rgb.g",
+            type: "number"
+          }, {
+            element: ".control-link-item-color-rgb-b-range",
+            path: "link.item.color.rgb.b",
+            type: "range"
+          }, {
+            element: ".control-link-item-color-rgb-b-number",
+            path: "link.item.color.rgb.b",
+            type: "number"
+          }],
+          func: function() {
+            link.mod.color.rgb();
+          }
+        }, {
+          element: ".control-link-item-color-hsl-l-number",
+          path: "link.item.color.hsl.l",
+          type: "number",
+          valueModify: {
+            min: 0,
+            max: 100
+          },
+          mirrorElement: [{
+            element: ".control-link-item-color-rgb-color",
+            path: "link.item.color.rgb",
+            type: "color"
+          }, {
+            element: ".control-link-item-color-rgb-text",
+            path: "link.item.color.rgb",
+            type: "text",
+            valueConvert: ["hexTextString"]
+          }, {
+            element: ".control-link-item-color-hsl-l-range",
+            path: "link.item.color.hsl.l",
+            type: "range"
+          }, {
+            element: ".control-link-item-color-rgb-r-range",
+            path: "link.item.color.rgb.r",
+            type: "range"
+          }, {
+            element: ".control-link-item-color-rgb-r-number",
+            path: "link.item.color.rgb.r",
+            type: "number"
+          }, {
+            element: ".control-link-item-color-rgb-g-range",
+            path: "link.item.color.rgb.g",
+            type: "range"
+          }, {
+            element: ".control-link-item-color-rgb-g-number",
+            path: "link.item.color.rgb.g",
+            type: "number"
+          }, {
+            element: ".control-link-item-color-rgb-b-range",
+            path: "link.item.color.rgb.b",
+            type: "range"
+          }, {
+            element: ".control-link-item-color-rgb-b-number",
+            path: "link.item.color.rgb.b",
+            type: "number"
+          }],
+          func: function() {
+            link.mod.color.rgb();
+          }
+        }, {
+          element: ".control-link-item-color-rgb-r-range",
+          path: "link.item.color.rgb.r",
+          type: "range",
+          valueModify: {
+            min: 0,
+            max: 255
+          },
+          mirrorElement: [{
+            element: ".control-link-item-color-rgb-color",
+            path: "link.item.color.rgb",
+            type: "color"
+          }, {
+            element: ".control-link-item-color-rgb-text",
+            path: "link.item.color.rgb",
+            type: "text",
+            valueConvert: ["hexTextString"]
+          }, {
+            element: ".control-link-item-color-rgb-r-number",
+            path: "link.item.color.rgb.r",
+            type: "number"
+          }, {
+            element: ".control-link-item-color-hsl-h-range",
+            path: "link.item.color.hsl.h",
+            type: "range"
+          }, {
+            element: ".control-link-item-color-hsl-h-number",
+            path: "link.item.color.hsl.h",
+            type: "number"
+          }, {
+            element: ".control-link-item-color-hsl-s-range",
+            path: "link.item.color.hsl.s",
+            type: "range"
+          }, {
+            element: ".control-link-item-color-hsl-s-number",
+            path: "link.item.color.hsl.s",
+            type: "number"
+          }, {
+            element: ".control-link-item-color-hsl-l-range",
+            path: "link.item.color.hsl.l",
+            type: "range"
+          }, {
+            element: ".control-link-item-color-hsl-l-number",
+            path: "link.item.color.hsl.l",
+            type: "number"
+          }],
+          func: function() {
+            link.mod.color.hsl();
+          }
+        }, {
+          element: ".control-link-item-color-rgb-r-number",
+          path: "link.item.color.rgb.r",
+          type: "number",
+          valueModify: {
+            min: 0,
+            max: 255
+          },
+          mirrorElement: [{
+            element: ".control-link-item-color-rgb-color",
+            path: "link.item.color.rgb",
+            type: "color"
+          }, {
+            element: ".control-link-item-color-rgb-text",
+            path: "link.item.color.rgb",
+            type: "text",
+            valueConvert: ["hexTextString"]
+          }, {
+            element: ".control-link-item-color-rgb-r-range",
+            path: "link.item.color.rgb.r",
+            type: "range"
+          }, {
+            element: ".control-link-item-color-hsl-h-range",
+            path: "link.item.color.hsl.h",
+            type: "range"
+          }, {
+            element: ".control-link-item-color-hsl-h-number",
+            path: "link.item.color.hsl.h",
+            type: "number"
+          }, {
+            element: ".control-link-item-color-hsl-s-range",
+            path: "link.item.color.hsl.s",
+            type: "range"
+          }, {
+            element: ".control-link-item-color-hsl-s-number",
+            path: "link.item.color.hsl.s",
+            type: "number"
+          }, {
+            element: ".control-link-item-color-hsl-l-range",
+            path: "link.item.color.hsl.l",
+            type: "range"
+          }, {
+            element: ".control-link-item-color-hsl-l-number",
+            path: "link.item.color.hsl.l",
+            type: "number"
+          }],
+          func: function() {
+            link.mod.color.hsl();
+          }
+        }, {
+          element: ".control-link-item-color-rgb-g-range",
+          path: "link.item.color.rgb.g",
+          type: "range",
+          valueModify: {
+            min: 0,
+            max: 255
+          },
+          mirrorElement: [{
+            element: ".control-link-item-color-rgb-color",
+            path: "link.item.color.rgb",
+            type: "color"
+          }, {
+            element: ".control-link-item-color-rgb-text",
+            path: "link.item.color.rgb",
+            type: "text",
+            valueConvert: ["hexTextString"]
+          }, {
+            element: ".control-link-item-color-rgb-g-number",
+            path: "link.item.color.rgb.g",
+            type: "number"
+          }, {
+            element: ".control-link-item-color-hsl-h-range",
+            path: "link.item.color.hsl.h",
+            type: "range"
+          }, {
+            element: ".control-link-item-color-hsl-h-number",
+            path: "link.item.color.hsl.h",
+            type: "number"
+          }, {
+            element: ".control-link-item-color-hsl-s-range",
+            path: "link.item.color.hsl.s",
+            type: "range"
+          }, {
+            element: ".control-link-item-color-hsl-s-number",
+            path: "link.item.color.hsl.s",
+            type: "number"
+          }, {
+            element: ".control-link-item-color-hsl-l-range",
+            path: "link.item.color.hsl.l",
+            type: "range"
+          }, {
+            element: ".control-link-item-color-hsl-l-number",
+            path: "link.item.color.hsl.l",
+            type: "number"
+          }],
+          func: function() {
+            link.mod.color.hsl();
+          }
+        }, {
+          element: ".control-link-item-color-rgb-g-number",
+          path: "link.item.color.rgb.g",
+          type: "number",
+          valueModify: {
+            min: 0,
+            max: 255
+          },
+          mirrorElement: [{
+            element: ".control-link-item-color-rgb-color",
+            path: "link.item.color.rgb",
+            type: "color"
+          }, {
+            element: ".control-link-item-color-rgb-text",
+            path: "link.item.color.rgb",
+            type: "text",
+            valueConvert: ["hexTextString"]
+          }, {
+            element: ".control-link-item-color-rgb-g-range",
+            path: "link.item.color.rgb.g",
+            type: "range"
+          }, {
+            element: ".control-link-item-color-hsl-h-range",
+            path: "link.item.color.hsl.h",
+            type: "range"
+          }, {
+            element: ".control-link-item-color-hsl-h-number",
+            path: "link.item.color.hsl.h",
+            type: "number"
+          }, {
+            element: ".control-link-item-color-hsl-s-range",
+            path: "link.item.color.hsl.s",
+            type: "range"
+          }, {
+            element: ".control-link-item-color-hsl-s-number",
+            path: "link.item.color.hsl.s",
+            type: "number"
+          }, {
+            element: ".control-link-item-color-hsl-l-range",
+            path: "link.item.color.hsl.l",
+            type: "range"
+          }, {
+            element: ".control-link-item-color-hsl-l-number",
+            path: "link.item.color.hsl.l",
+            type: "number"
+          }],
+          func: function() {
+            link.mod.color.hsl();
+          }
+        }, {
+          element: ".control-link-item-color-rgb-b-range",
+          path: "link.item.color.rgb.b",
+          type: "range",
+          valueModify: {
+            min: 0,
+            max: 255
+          },
+          mirrorElement: [{
+            element: ".control-link-item-color-rgb-color",
+            path: "link.item.color.rgb",
+            type: "color"
+          }, {
+            element: ".control-link-item-color-rgb-text",
+            path: "link.item.color.rgb",
+            type: "text",
+            valueConvert: ["hexTextString"]
+          }, {
+            element: ".control-link-item-color-rgb-b-number",
+            path: "link.item.color.rgb.b",
+            type: "number"
+          }, {
+            element: ".control-link-item-color-hsl-h-range",
+            path: "link.item.color.hsl.h",
+            type: "range"
+          }, {
+            element: ".control-link-item-color-hsl-h-number",
+            path: "link.item.color.hsl.h",
+            type: "number"
+          }, {
+            element: ".control-link-item-color-hsl-s-range",
+            path: "link.item.color.hsl.s",
+            type: "range"
+          }, {
+            element: ".control-link-item-color-hsl-s-number",
+            path: "link.item.color.hsl.s",
+            type: "number"
+          }, {
+            element: ".control-link-item-color-hsl-l-range",
+            path: "link.item.color.hsl.l",
+            type: "range"
+          }, {
+            element: ".control-link-item-color-hsl-l-number",
+            path: "link.item.color.hsl.l",
+            type: "number"
+          }],
+          func: function() {
+            link.mod.color.hsl();
+          }
+        }, {
+          element: ".control-link-item-color-rgb-b-number",
+          path: "link.item.color.rgb.b",
+          type: "number",
+          valueModify: {
+            min: 0,
+            max: 255
+          },
+          mirrorElement: [{
+            element: ".control-link-item-color-rgb-color",
+            path: "link.item.color.rgb",
+            type: "color"
+          }, {
+            element: ".control-link-item-color-rgb-text",
+            path: "link.item.color.rgb",
+            type: "text",
+            valueConvert: ["hexTextString"]
+          }, {
+            element: ".control-link-item-color-rgb-b-range",
+            path: "link.item.color.rgb.b",
+            type: "range"
+          }, {
+            element: ".control-link-item-color-hsl-h-range",
+            path: "link.item.color.hsl.h",
+            type: "range"
+          }, {
+            element: ".control-link-item-color-hsl-h-number",
+            path: "link.item.color.hsl.h",
+            type: "number"
+          }, {
+            element: ".control-link-item-color-hsl-s-range",
+            path: "link.item.color.hsl.s",
+            type: "range"
+          }, {
+            element: ".control-link-item-color-hsl-s-number",
+            path: "link.item.color.hsl.s",
+            type: "number"
+          }, {
+            element: ".control-link-item-color-hsl-l-range",
+            path: "link.item.color.hsl.l",
+            type: "range"
+          }, {
+            element: ".control-link-item-color-hsl-l-number",
+            path: "link.item.color.hsl.l",
+            type: "number"
+          }],
+          func: function() {
+            link.mod.color.hsl();
+          }
+        }, {
+          element: ".control-link-item-color-apply",
+          type: "button",
+          func: function() {
+            link.mod.color.set();
+            link.groupAndItems();
+          }
+        }, {
+          element: ".control-link-item-color-rainbow",
+          type: "button",
+          func: function() {
+            link.mod.color.rainbow();
+            link.groupAndItems();
+          }
+        }, {
+          element: ".control-link-item-color-clear",
+          type: "button",
+          func: function() {
+            link.mod.color.clear();
+            link.groupAndItems();
           }
         }, {
           element: ".control-link-item-opacity-range",
@@ -3969,6 +5403,738 @@ var control = (function() {
             render.class();
           }
         }],
+        accent: [{
+          element: ".control-link-item-accent-rgb-color",
+          path: "link.item.accent.rgb",
+          type: "color",
+          mirrorElement: [{
+            element: ".control-link-item-accent-rgb-text",
+            path: "link.item.accent.rgb",
+            type: "text",
+            valueConvert: ["hexTextString"]
+          }, {
+            element: ".control-link-item-accent-hsl-h-range",
+            path: "link.item.accent.hsl.h",
+            type: "range"
+          }, {
+            element: ".control-link-item-accent-hsl-h-number",
+            path: "link.item.accent.hsl.h",
+            type: "number"
+          }, {
+            element: ".control-link-item-accent-hsl-s-range",
+            path: "link.item.accent.hsl.s",
+            type: "range"
+          }, {
+            element: ".control-link-item-accent-hsl-s-number",
+            path: "link.item.accent.hsl.s",
+            type: "number"
+          }, {
+            element: ".control-link-item-accent-hsl-l-range",
+            path: "link.item.accent.hsl.l",
+            type: "range"
+          }, {
+            element: ".control-link-item-accent-hsl-l-number",
+            path: "link.item.accent.hsl.l",
+            type: "number"
+          }, {
+            element: ".control-link-item-accent-rgb-r-range",
+            path: "link.item.accent.rgb.r",
+            type: "range"
+          }, {
+            element: ".control-link-item-accent-rgb-r-number",
+            path: "link.item.accent.rgb.r",
+            type: "number"
+          }, {
+            element: ".control-link-item-accent-rgb-g-range",
+            path: "link.item.accent.rgb.g",
+            type: "range"
+          }, {
+            element: ".control-link-item-accent-rgb-g-number",
+            path: "link.item.accent.rgb.g",
+            type: "number"
+          }, {
+            element: ".control-link-item-accent-rgb-b-range",
+            path: "link.item.accent.rgb.b",
+            type: "range"
+          }, {
+            element: ".control-link-item-accent-rgb-b-number",
+            path: "link.item.accent.rgb.b",
+            type: "number"
+          }],
+          func: function() {
+            link.mod.accent.hsl();
+          }
+        }, {
+          element: ".control-link-item-accent-rgb-text",
+          path: "link.item.accent.rgb",
+          type: "text",
+          valueConvert: ["hexTextString"],
+          mirrorElement: [{
+            element: ".control-link-item-accent-rgb-color",
+            path: "link.item.accent.rgb",
+            type: "color"
+          }, {
+            element: ".control-link-item-accent-hsl-h-range",
+            path: "link.item.accent.hsl.h",
+            type: "range"
+          }, {
+            element: ".control-link-item-accent-hsl-h-number",
+            path: "link.item.accent.hsl.h",
+            type: "number"
+          }, {
+            element: ".control-link-item-accent-hsl-s-range",
+            path: "link.item.accent.hsl.s",
+            type: "range"
+          }, {
+            element: ".control-link-item-accent-hsl-s-number",
+            path: "link.item.accent.hsl.s",
+            type: "number"
+          }, {
+            element: ".control-link-item-accent-hsl-l-range",
+            path: "link.item.accent.hsl.l",
+            type: "range"
+          }, {
+            element: ".control-link-item-accent-hsl-l-number",
+            path: "link.item.accent.hsl.l",
+            type: "number"
+          }, {
+            element: ".control-link-item-accent-rgb-r-range",
+            path: "link.item.accent.rgb.r",
+            type: "range"
+          }, {
+            element: ".control-link-item-accent-rgb-r-number",
+            path: "link.item.accent.rgb.r",
+            type: "number"
+          }, {
+            element: ".control-link-item-accent-rgb-g-range",
+            path: "link.item.accent.rgb.g",
+            type: "range"
+          }, {
+            element: ".control-link-item-accent-rgb-g-number",
+            path: "link.item.accent.rgb.g",
+            type: "number"
+          }, {
+            element: ".control-link-item-accent-rgb-b-range",
+            path: "link.item.accent.rgb.b",
+            type: "range"
+          }, {
+            element: ".control-link-item-accent-rgb-b-number",
+            path: "link.item.accent.rgb.b",
+            type: "number"
+          }],
+          func: function() {
+            link.mod.accent.hsl();
+          }
+        }, {
+          element: ".control-link-item-accent-hsl-h-range",
+          path: "link.item.accent.hsl.h",
+          type: "range",
+          valueModify: {
+            min: 0,
+            max: 359
+          },
+          mirrorElement: [{
+            element: ".control-link-item-accent-rgb-color",
+            path: "link.item.accent.rgb",
+            type: "color"
+          }, {
+            element: ".control-link-item-accent-rgb-text",
+            path: "link.item.accent.rgb",
+            type: "text",
+            valueConvert: ["hexTextString"]
+          }, {
+            element: ".control-link-item-accent-hsl-h-number",
+            path: "link.item.accent.hsl.h",
+            type: "number"
+          }, {
+            element: ".control-link-item-accent-rgb-r-range",
+            path: "link.item.accent.rgb.r",
+            type: "range"
+          }, {
+            element: ".control-link-item-accent-rgb-r-number",
+            path: "link.item.accent.rgb.r",
+            type: "number"
+          }, {
+            element: ".control-link-item-accent-rgb-g-range",
+            path: "link.item.accent.rgb.g",
+            type: "range"
+          }, {
+            element: ".control-link-item-accent-rgb-g-number",
+            path: "link.item.accent.rgb.g",
+            type: "number"
+          }, {
+            element: ".control-link-item-accent-rgb-b-range",
+            path: "link.item.accent.rgb.b",
+            type: "range"
+          }, {
+            element: ".control-link-item-accent-rgb-b-number",
+            path: "link.item.accent.rgb.b",
+            type: "number"
+          }],
+          func: function() {
+            link.mod.accent.rgb();
+          }
+        }, {
+          element: ".control-link-item-accent-hsl-h-number",
+          path: "link.item.accent.hsl.h",
+          type: "number",
+          valueModify: {
+            min: 0,
+            max: 359
+          },
+          mirrorElement: [{
+            element: ".control-link-item-accent-rgb-color",
+            path: "link.item.accent.rgb",
+            type: "color"
+          }, {
+            element: ".control-link-item-accent-rgb-text",
+            path: "link.item.accent.rgb",
+            type: "text",
+            valueConvert: ["hexTextString"]
+          }, {
+            element: ".control-link-item-accent-hsl-h-range",
+            path: "link.item.accent.hsl.h",
+            type: "range"
+          }, {
+            element: ".control-link-item-accent-rgb-r-range",
+            path: "link.item.accent.rgb.r",
+            type: "range"
+          }, {
+            element: ".control-link-item-accent-rgb-r-number",
+            path: "link.item.accent.rgb.r",
+            type: "number"
+          }, {
+            element: ".control-link-item-accent-rgb-g-range",
+            path: "link.item.accent.rgb.g",
+            type: "range"
+          }, {
+            element: ".control-link-item-accent-rgb-g-number",
+            path: "link.item.accent.rgb.g",
+            type: "number"
+          }, {
+            element: ".control-link-item-accent-rgb-b-range",
+            path: "link.item.accent.rgb.b",
+            type: "range"
+          }, {
+            element: ".control-link-item-accent-rgb-b-number",
+            path: "link.item.accent.rgb.b",
+            type: "number"
+          }],
+          func: function() {
+            link.mod.accent.rgb();
+          }
+        }, {
+          element: ".control-link-item-accent-hsl-s-range",
+          path: "link.item.accent.hsl.s",
+          type: "range",
+          valueModify: {
+            min: 0,
+            max: 100
+          },
+          mirrorElement: [{
+            element: ".control-link-item-accent-rgb-color",
+            path: "link.item.accent.rgb",
+            type: "color"
+          }, {
+            element: ".control-link-item-accent-rgb-text",
+            path: "link.item.accent.rgb",
+            type: "text",
+            valueConvert: ["hexTextString"]
+          }, {
+            element: ".control-link-item-accent-hsl-s-number",
+            path: "link.item.accent.hsl.s",
+            type: "number"
+          }, {
+            element: ".control-link-item-accent-rgb-r-range",
+            path: "link.item.accent.rgb.r",
+            type: "range"
+          }, {
+            element: ".control-link-item-accent-rgb-r-number",
+            path: "link.item.accent.rgb.r",
+            type: "number"
+          }, {
+            element: ".control-link-item-accent-rgb-g-range",
+            path: "link.item.accent.rgb.g",
+            type: "range"
+          }, {
+            element: ".control-link-item-accent-rgb-g-number",
+            path: "link.item.accent.rgb.g",
+            type: "number"
+          }, {
+            element: ".control-link-item-accent-rgb-b-range",
+            path: "link.item.accent.rgb.b",
+            type: "range"
+          }, {
+            element: ".control-link-item-accent-rgb-b-number",
+            path: "link.item.accent.rgb.b",
+            type: "number"
+          }],
+          func: function() {
+            link.mod.accent.rgb();
+          }
+        }, {
+          element: ".control-link-item-accent-hsl-s-number",
+          path: "link.item.accent.hsl.s",
+          type: "number",
+          valueModify: {
+            min: 0,
+            max: 100
+          },
+          mirrorElement: [{
+            element: ".control-link-item-accent-rgb-color",
+            path: "link.item.accent.rgb",
+            type: "color"
+          }, {
+            element: ".control-link-item-accent-rgb-text",
+            path: "link.item.accent.rgb",
+            type: "text",
+            valueConvert: ["hexTextString"]
+          }, {
+            element: ".control-link-item-accent-hsl-s-range",
+            path: "link.item.accent.hsl.s",
+            type: "range"
+          }, {
+            element: ".control-link-item-accent-rgb-r-range",
+            path: "link.item.accent.rgb.r",
+            type: "range"
+          }, {
+            element: ".control-link-item-accent-rgb-r-number",
+            path: "link.item.accent.rgb.r",
+            type: "number"
+          }, {
+            element: ".control-link-item-accent-rgb-g-range",
+            path: "link.item.accent.rgb.g",
+            type: "range"
+          }, {
+            element: ".control-link-item-accent-rgb-g-number",
+            path: "link.item.accent.rgb.g",
+            type: "number"
+          }, {
+            element: ".control-link-item-accent-rgb-b-range",
+            path: "link.item.accent.rgb.b",
+            type: "range"
+          }, {
+            element: ".control-link-item-accent-rgb-b-number",
+            path: "link.item.accent.rgb.b",
+            type: "number"
+          }],
+          func: function() {
+            link.mod.accent.rgb();
+          }
+        }, {
+          element: ".control-link-item-accent-hsl-l-range",
+          path: "link.item.accent.hsl.l",
+          type: "range",
+          valueModify: {
+            min: 0,
+            max: 100
+          },
+          mirrorElement: [{
+            element: ".control-link-item-accent-rgb-color",
+            path: "link.item.accent.rgb",
+            type: "color"
+          }, {
+            element: ".control-link-item-accent-rgb-text",
+            path: "link.item.accent.rgb",
+            type: "text",
+            valueConvert: ["hexTextString"]
+          }, {
+            element: ".control-link-item-accent-hsl-l-number",
+            path: "link.item.accent.hsl.l",
+            type: "number"
+          }, {
+            element: ".control-link-item-accent-rgb-r-range",
+            path: "link.item.accent.rgb.r",
+            type: "range"
+          }, {
+            element: ".control-link-item-accent-rgb-r-number",
+            path: "link.item.accent.rgb.r",
+            type: "number"
+          }, {
+            element: ".control-link-item-accent-rgb-g-range",
+            path: "link.item.accent.rgb.g",
+            type: "range"
+          }, {
+            element: ".control-link-item-accent-rgb-g-number",
+            path: "link.item.accent.rgb.g",
+            type: "number"
+          }, {
+            element: ".control-link-item-accent-rgb-b-range",
+            path: "link.item.accent.rgb.b",
+            type: "range"
+          }, {
+            element: ".control-link-item-accent-rgb-b-number",
+            path: "link.item.accent.rgb.b",
+            type: "number"
+          }],
+          func: function() {
+            link.mod.accent.rgb();
+          }
+        }, {
+          element: ".control-link-item-accent-hsl-l-number",
+          path: "link.item.accent.hsl.l",
+          type: "number",
+          valueModify: {
+            min: 0,
+            max: 100
+          },
+          mirrorElement: [{
+            element: ".control-link-item-accent-rgb-color",
+            path: "link.item.accent.rgb",
+            type: "color"
+          }, {
+            element: ".control-link-item-accent-rgb-text",
+            path: "link.item.accent.rgb",
+            type: "text",
+            valueConvert: ["hexTextString"]
+          }, {
+            element: ".control-link-item-accent-hsl-l-range",
+            path: "link.item.accent.hsl.l",
+            type: "range"
+          }, {
+            element: ".control-link-item-accent-rgb-r-range",
+            path: "link.item.accent.rgb.r",
+            type: "range"
+          }, {
+            element: ".control-link-item-accent-rgb-r-number",
+            path: "link.item.accent.rgb.r",
+            type: "number"
+          }, {
+            element: ".control-link-item-accent-rgb-g-range",
+            path: "link.item.accent.rgb.g",
+            type: "range"
+          }, {
+            element: ".control-link-item-accent-rgb-g-number",
+            path: "link.item.accent.rgb.g",
+            type: "number"
+          }, {
+            element: ".control-link-item-accent-rgb-b-range",
+            path: "link.item.accent.rgb.b",
+            type: "range"
+          }, {
+            element: ".control-link-item-accent-rgb-b-number",
+            path: "link.item.accent.rgb.b",
+            type: "number"
+          }],
+          func: function() {
+            link.mod.accent.rgb();
+          }
+        }, {
+          element: ".control-link-item-accent-rgb-r-range",
+          path: "link.item.accent.rgb.r",
+          type: "range",
+          valueModify: {
+            min: 0,
+            max: 255
+          },
+          mirrorElement: [{
+            element: ".control-link-item-accent-rgb-color",
+            path: "link.item.accent.rgb",
+            type: "color"
+          }, {
+            element: ".control-link-item-accent-rgb-text",
+            path: "link.item.accent.rgb",
+            type: "text",
+            valueConvert: ["hexTextString"]
+          }, {
+            element: ".control-link-item-accent-rgb-r-number",
+            path: "link.item.accent.rgb.r",
+            type: "number"
+          }, {
+            element: ".control-link-item-accent-hsl-h-range",
+            path: "link.item.accent.hsl.h",
+            type: "range"
+          }, {
+            element: ".control-link-item-accent-hsl-h-number",
+            path: "link.item.accent.hsl.h",
+            type: "number"
+          }, {
+            element: ".control-link-item-accent-hsl-s-range",
+            path: "link.item.accent.hsl.s",
+            type: "range"
+          }, {
+            element: ".control-link-item-accent-hsl-s-number",
+            path: "link.item.accent.hsl.s",
+            type: "number"
+          }, {
+            element: ".control-link-item-accent-hsl-l-range",
+            path: "link.item.accent.hsl.l",
+            type: "range"
+          }, {
+            element: ".control-link-item-accent-hsl-l-number",
+            path: "link.item.accent.hsl.l",
+            type: "number"
+          }],
+          func: function() {
+            link.mod.accent.hsl();
+          }
+        }, {
+          element: ".control-link-item-accent-rgb-r-number",
+          path: "link.item.accent.rgb.r",
+          type: "number",
+          valueModify: {
+            min: 0,
+            max: 255
+          },
+          mirrorElement: [{
+            element: ".control-link-item-accent-rgb-color",
+            path: "link.item.accent.rgb",
+            type: "color"
+          }, {
+            element: ".control-link-item-accent-rgb-text",
+            path: "link.item.accent.rgb",
+            type: "text",
+            valueConvert: ["hexTextString"]
+          }, {
+            element: ".control-link-item-accent-rgb-r-range",
+            path: "link.item.accent.rgb.r",
+            type: "range"
+          }, {
+            element: ".control-link-item-accent-hsl-h-range",
+            path: "link.item.accent.hsl.h",
+            type: "range"
+          }, {
+            element: ".control-link-item-accent-hsl-h-number",
+            path: "link.item.accent.hsl.h",
+            type: "number"
+          }, {
+            element: ".control-link-item-accent-hsl-s-range",
+            path: "link.item.accent.hsl.s",
+            type: "range"
+          }, {
+            element: ".control-link-item-accent-hsl-s-number",
+            path: "link.item.accent.hsl.s",
+            type: "number"
+          }, {
+            element: ".control-link-item-accent-hsl-l-range",
+            path: "link.item.accent.hsl.l",
+            type: "range"
+          }, {
+            element: ".control-link-item-accent-hsl-l-number",
+            path: "link.item.accent.hsl.l",
+            type: "number"
+          }],
+          func: function() {
+            link.mod.accent.hsl();
+          }
+        }, {
+          element: ".control-link-item-accent-rgb-g-range",
+          path: "link.item.accent.rgb.g",
+          type: "range",
+          valueModify: {
+            min: 0,
+            max: 255
+          },
+          mirrorElement: [{
+            element: ".control-link-item-accent-rgb-color",
+            path: "link.item.accent.rgb",
+            type: "color"
+          }, {
+            element: ".control-link-item-accent-rgb-text",
+            path: "link.item.accent.rgb",
+            type: "text",
+            valueConvert: ["hexTextString"]
+          }, {
+            element: ".control-link-item-accent-rgb-g-number",
+            path: "link.item.accent.rgb.g",
+            type: "number"
+          }, {
+            element: ".control-link-item-accent-hsl-h-range",
+            path: "link.item.accent.hsl.h",
+            type: "range"
+          }, {
+            element: ".control-link-item-accent-hsl-h-number",
+            path: "link.item.accent.hsl.h",
+            type: "number"
+          }, {
+            element: ".control-link-item-accent-hsl-s-range",
+            path: "link.item.accent.hsl.s",
+            type: "range"
+          }, {
+            element: ".control-link-item-accent-hsl-s-number",
+            path: "link.item.accent.hsl.s",
+            type: "number"
+          }, {
+            element: ".control-link-item-accent-hsl-l-range",
+            path: "link.item.accent.hsl.l",
+            type: "range"
+          }, {
+            element: ".control-link-item-accent-hsl-l-number",
+            path: "link.item.accent.hsl.l",
+            type: "number"
+          }],
+          func: function() {
+            link.mod.accent.hsl();
+          }
+        }, {
+          element: ".control-link-item-accent-rgb-g-number",
+          path: "link.item.accent.rgb.g",
+          type: "number",
+          valueModify: {
+            min: 0,
+            max: 255
+          },
+          mirrorElement: [{
+            element: ".control-link-item-accent-rgb-color",
+            path: "link.item.accent.rgb",
+            type: "color"
+          }, {
+            element: ".control-link-item-accent-rgb-text",
+            path: "link.item.accent.rgb",
+            type: "text",
+            valueConvert: ["hexTextString"]
+          }, {
+            element: ".control-link-item-accent-rgb-g-range",
+            path: "link.item.accent.rgb.g",
+            type: "range"
+          }, {
+            element: ".control-link-item-accent-hsl-h-range",
+            path: "link.item.accent.hsl.h",
+            type: "range"
+          }, {
+            element: ".control-link-item-accent-hsl-h-number",
+            path: "link.item.accent.hsl.h",
+            type: "number"
+          }, {
+            element: ".control-link-item-accent-hsl-s-range",
+            path: "link.item.accent.hsl.s",
+            type: "range"
+          }, {
+            element: ".control-link-item-accent-hsl-s-number",
+            path: "link.item.accent.hsl.s",
+            type: "number"
+          }, {
+            element: ".control-link-item-accent-hsl-l-range",
+            path: "link.item.accent.hsl.l",
+            type: "range"
+          }, {
+            element: ".control-link-item-accent-hsl-l-number",
+            path: "link.item.accent.hsl.l",
+            type: "number"
+          }],
+          func: function() {
+            link.mod.accent.hsl();
+          }
+        }, {
+          element: ".control-link-item-accent-rgb-b-range",
+          path: "link.item.accent.rgb.b",
+          type: "range",
+          valueModify: {
+            min: 0,
+            max: 255
+          },
+          mirrorElement: [{
+            element: ".control-link-item-accent-rgb-color",
+            path: "link.item.accent.rgb",
+            type: "color"
+          }, {
+            element: ".control-link-item-accent-rgb-text",
+            path: "link.item.accent.rgb",
+            type: "text",
+            valueConvert: ["hexTextString"]
+          }, {
+            element: ".control-link-item-accent-rgb-b-number",
+            path: "link.item.accent.rgb.b",
+            type: "number"
+          }, {
+            element: ".control-link-item-accent-hsl-h-range",
+            path: "link.item.accent.hsl.h",
+            type: "range"
+          }, {
+            element: ".control-link-item-accent-hsl-h-number",
+            path: "link.item.accent.hsl.h",
+            type: "number"
+          }, {
+            element: ".control-link-item-accent-hsl-s-range",
+            path: "link.item.accent.hsl.s",
+            type: "range"
+          }, {
+            element: ".control-link-item-accent-hsl-s-number",
+            path: "link.item.accent.hsl.s",
+            type: "number"
+          }, {
+            element: ".control-link-item-accent-hsl-l-range",
+            path: "link.item.accent.hsl.l",
+            type: "range"
+          }, {
+            element: ".control-link-item-accent-hsl-l-number",
+            path: "link.item.accent.hsl.l",
+            type: "number"
+          }],
+          func: function() {
+            link.mod.accent.hsl();
+          }
+        }, {
+          element: ".control-link-item-accent-rgb-b-number",
+          path: "link.item.accent.rgb.b",
+          type: "number",
+          valueModify: {
+            min: 0,
+            max: 255
+          },
+          mirrorElement: [{
+            element: ".control-link-item-accent-rgb-color",
+            path: "link.item.accent.rgb",
+            type: "color"
+          }, {
+            element: ".control-link-item-accent-rgb-text",
+            path: "link.item.accent.rgb",
+            type: "text",
+            valueConvert: ["hexTextString"]
+          }, {
+            element: ".control-link-item-accent-rgb-b-range",
+            path: "link.item.accent.rgb.b",
+            type: "range"
+          }, {
+            element: ".control-link-item-accent-hsl-h-range",
+            path: "link.item.accent.hsl.h",
+            type: "range"
+          }, {
+            element: ".control-link-item-accent-hsl-h-number",
+            path: "link.item.accent.hsl.h",
+            type: "number"
+          }, {
+            element: ".control-link-item-accent-hsl-s-range",
+            path: "link.item.accent.hsl.s",
+            type: "range"
+          }, {
+            element: ".control-link-item-accent-hsl-s-number",
+            path: "link.item.accent.hsl.s",
+            type: "number"
+          }, {
+            element: ".control-link-item-accent-hsl-l-range",
+            path: "link.item.accent.hsl.l",
+            type: "range"
+          }, {
+            element: ".control-link-item-accent-hsl-l-number",
+            path: "link.item.accent.hsl.l",
+            type: "number"
+          }],
+          func: function() {
+            link.mod.accent.hsl();
+          }
+        }, {
+          element: ".control-link-item-accent-apply",
+          type: "button",
+          func: function() {
+            link.mod.accent.set();
+            link.groupAndItems();
+          }
+        }, {
+          element: ".control-link-item-accent-rainbow",
+          type: "button",
+          func: function() {
+            link.mod.accent.rainbow();
+            link.groupAndItems();
+          }
+        }, {
+          element: ".control-link-item-accent-clear",
+          type: "button",
+          func: function() {
+            link.mod.accent.clear();
+            link.groupAndItems();
+          }
+        }],
         border: [{
           element: ".control-link-item-border-range",
           path: "link.item.border",
@@ -4050,21 +6216,6 @@ var control = (function() {
             bookmarks.sort("name");
             link.groupAndItems();
           }
-        }],
-        accent: [{
-          element: ".control-link-accent-clear",
-          type: "button",
-          func: function() {
-            link.mod.accent.clear();
-            link.groupAndItems();
-          }
-        }, {
-          element: ".control-link-accent-set",
-          type: "button",
-          func: function() {
-            link.mod.accent.rainbow();
-            link.groupAndItems();
-          }
         }]
       },
       groups: {
@@ -6709,7 +8860,7 @@ var control = (function() {
             render.class();
           }
         }, {
-          element: ".control-background-color-rgb-range",
+          element: ".control-background-color-rgb-color",
           path: "background.color.rgb",
           type: "color",
           mirrorElement: [{
@@ -6717,8 +8868,57 @@ var control = (function() {
             path: "background.color.rgb",
             type: "text",
             valueConvert: ["hexTextString"]
+          }, {
+            element: ".control-background-color-hsl-h-range",
+            path: "background.color.hsl.h",
+            type: "range"
+          }, {
+            element: ".control-background-color-hsl-h-number",
+            path: "background.color.hsl.h",
+            type: "number"
+          }, {
+            element: ".control-background-color-hsl-s-range",
+            path: "background.color.hsl.s",
+            type: "range"
+          }, {
+            element: ".control-background-color-hsl-s-number",
+            path: "background.color.hsl.s",
+            type: "number"
+          }, {
+            element: ".control-background-color-hsl-l-range",
+            path: "background.color.hsl.l",
+            type: "range"
+          }, {
+            element: ".control-background-color-hsl-l-number",
+            path: "background.color.hsl.l",
+            type: "number"
+          }, {
+            element: ".control-background-color-rgb-r-range",
+            path: "background.color.rgb.r",
+            type: "range"
+          }, {
+            element: ".control-background-color-rgb-r-number",
+            path: "background.color.rgb.r",
+            type: "number"
+          }, {
+            element: ".control-background-color-rgb-g-range",
+            path: "background.color.rgb.g",
+            type: "range"
+          }, {
+            element: ".control-background-color-rgb-g-number",
+            path: "background.color.rgb.g",
+            type: "number"
+          }, {
+            element: ".control-background-color-rgb-b-range",
+            path: "background.color.rgb.b",
+            type: "range"
+          }, {
+            element: ".control-background-color-rgb-b-number",
+            path: "background.color.rgb.b",
+            type: "number"
           }],
           func: function() {
+            background.mod.color.hsl();
             background.render.color.custom();
           }
         }, {
@@ -6727,11 +8927,660 @@ var control = (function() {
           type: "text",
           valueConvert: ["hexTextString"],
           mirrorElement: [{
-            element: ".control-background-color-rgb-range",
+            element: ".control-background-color-rgb-color",
             path: "background.color.rgb",
             type: "color"
+          }, {
+            element: ".control-background-color-hsl-h-range",
+            path: "background.color.hsl.h",
+            type: "range"
+          }, {
+            element: ".control-background-color-hsl-h-number",
+            path: "background.color.hsl.h",
+            type: "number"
+          }, {
+            element: ".control-background-color-hsl-s-range",
+            path: "background.color.hsl.s",
+            type: "range"
+          }, {
+            element: ".control-background-color-hsl-s-number",
+            path: "background.color.hsl.s",
+            type: "number"
+          }, {
+            element: ".control-background-color-hsl-l-range",
+            path: "background.color.hsl.l",
+            type: "range"
+          }, {
+            element: ".control-background-color-hsl-l-number",
+            path: "background.color.hsl.l",
+            type: "number"
+          }, {
+            element: ".control-background-color-rgb-r-range",
+            path: "background.color.rgb.r",
+            type: "range"
+          }, {
+            element: ".control-background-color-rgb-r-number",
+            path: "background.color.rgb.r",
+            type: "number"
+          }, {
+            element: ".control-background-color-rgb-g-range",
+            path: "background.color.rgb.g",
+            type: "range"
+          }, {
+            element: ".control-background-color-rgb-g-number",
+            path: "background.color.rgb.g",
+            type: "number"
+          }, {
+            element: ".control-background-color-rgb-b-range",
+            path: "background.color.rgb.b",
+            type: "range"
+          }, {
+            element: ".control-background-color-rgb-b-number",
+            path: "background.color.rgb.b",
+            type: "number"
           }],
           func: function() {
+            background.mod.color.hsl();
+            background.render.color.custom();
+          }
+        }, {
+          element: ".control-background-color-hsl-h-range",
+          path: "background.color.hsl.h",
+          type: "range",
+          valueModify: {
+            min: 0,
+            max: 359
+          },
+          mirrorElement: [{
+            element: ".control-background-color-rgb-color",
+            path: "background.color.rgb",
+            type: "color"
+          }, {
+            element: ".control-background-color-rgb-text",
+            path: "background.color.rgb",
+            type: "text",
+            valueConvert: ["hexTextString"]
+          }, {
+            element: ".control-background-color-hsl-h-number",
+            path: "background.color.hsl.h",
+            type: "number"
+          }, {
+            element: ".control-background-color-rgb-r-range",
+            path: "background.color.rgb.r",
+            type: "range"
+          }, {
+            element: ".control-background-color-rgb-r-number",
+            path: "background.color.rgb.r",
+            type: "number"
+          }, {
+            element: ".control-background-color-rgb-g-range",
+            path: "background.color.rgb.g",
+            type: "range"
+          }, {
+            element: ".control-background-color-rgb-g-number",
+            path: "background.color.rgb.g",
+            type: "number"
+          }, {
+            element: ".control-background-color-rgb-b-range",
+            path: "background.color.rgb.b",
+            type: "range"
+          }, {
+            element: ".control-background-color-rgb-b-number",
+            path: "background.color.rgb.b",
+            type: "number"
+          }],
+          func: function() {
+            background.mod.color.rgb();
+            background.render.color.custom();
+          }
+        }, {
+          element: ".control-background-color-hsl-h-number",
+          path: "background.color.hsl.h",
+          type: "number",
+          valueModify: {
+            min: 0,
+            max: 359
+          },
+          mirrorElement: [{
+            element: ".control-background-color-rgb-color",
+            path: "background.color.rgb",
+            type: "color"
+          }, {
+            element: ".control-background-color-rgb-text",
+            path: "background.color.rgb",
+            type: "text",
+            valueConvert: ["hexTextString"]
+          }, {
+            element: ".control-background-color-hsl-h-range",
+            path: "background.color.hsl.h",
+            type: "range"
+          }, {
+            element: ".control-background-color-rgb-r-range",
+            path: "background.color.rgb.r",
+            type: "range"
+          }, {
+            element: ".control-background-color-rgb-r-number",
+            path: "background.color.rgb.r",
+            type: "number"
+          }, {
+            element: ".control-background-color-rgb-g-range",
+            path: "background.color.rgb.g",
+            type: "range"
+          }, {
+            element: ".control-background-color-rgb-g-number",
+            path: "background.color.rgb.g",
+            type: "number"
+          }, {
+            element: ".control-background-color-rgb-b-range",
+            path: "background.color.rgb.b",
+            type: "range"
+          }, {
+            element: ".control-background-color-rgb-b-number",
+            path: "background.color.rgb.b",
+            type: "number"
+          }],
+          func: function() {
+            background.mod.color.rgb();
+            background.render.color.custom();
+          }
+        }, {
+          element: ".control-background-color-hsl-s-range",
+          path: "background.color.hsl.s",
+          type: "range",
+          valueModify: {
+            min: 0,
+            max: 100
+          },
+          mirrorElement: [{
+            element: ".control-background-color-rgb-color",
+            path: "background.color.rgb",
+            type: "color"
+          }, {
+            element: ".control-background-color-rgb-text",
+            path: "background.color.rgb",
+            type: "text",
+            valueConvert: ["hexTextString"]
+          }, {
+            element: ".control-background-color-hsl-s-number",
+            path: "background.color.hsl.s",
+            type: "number"
+          }, {
+            element: ".control-background-color-rgb-r-range",
+            path: "background.color.rgb.r",
+            type: "range"
+          }, {
+            element: ".control-background-color-rgb-r-number",
+            path: "background.color.rgb.r",
+            type: "number"
+          }, {
+            element: ".control-background-color-rgb-g-range",
+            path: "background.color.rgb.g",
+            type: "range"
+          }, {
+            element: ".control-background-color-rgb-g-number",
+            path: "background.color.rgb.g",
+            type: "number"
+          }, {
+            element: ".control-background-color-rgb-b-range",
+            path: "background.color.rgb.b",
+            type: "range"
+          }, {
+            element: ".control-background-color-rgb-b-number",
+            path: "background.color.rgb.b",
+            type: "number"
+          }],
+          func: function() {
+            background.mod.color.rgb();
+            background.render.color.custom();
+          }
+        }, {
+          element: ".control-background-color-hsl-s-number",
+          path: "background.color.hsl.s",
+          type: "number",
+          valueModify: {
+            min: 0,
+            max: 100
+          },
+          mirrorElement: [{
+            element: ".control-background-color-rgb-color",
+            path: "background.color.rgb",
+            type: "color"
+          }, {
+            element: ".control-background-color-rgb-text",
+            path: "background.color.rgb",
+            type: "text",
+            valueConvert: ["hexTextString"]
+          }, {
+            element: ".control-background-color-hsl-s-range",
+            path: "background.color.hsl.s",
+            type: "range"
+          }, {
+            element: ".control-background-color-rgb-r-range",
+            path: "background.color.rgb.r",
+            type: "range"
+          }, {
+            element: ".control-background-color-rgb-r-number",
+            path: "background.color.rgb.r",
+            type: "number"
+          }, {
+            element: ".control-background-color-rgb-g-range",
+            path: "background.color.rgb.g",
+            type: "range"
+          }, {
+            element: ".control-background-color-rgb-g-number",
+            path: "background.color.rgb.g",
+            type: "number"
+          }, {
+            element: ".control-background-color-rgb-b-range",
+            path: "background.color.rgb.b",
+            type: "range"
+          }, {
+            element: ".control-background-color-rgb-b-number",
+            path: "background.color.rgb.b",
+            type: "number"
+          }],
+          func: function() {
+            background.mod.color.rgb();
+            background.render.color.custom();
+          }
+        }, {
+          element: ".control-background-color-hsl-l-range",
+          path: "background.color.hsl.l",
+          type: "range",
+          valueModify: {
+            min: 0,
+            max: 100
+          },
+          mirrorElement: [{
+            element: ".control-background-color-rgb-color",
+            path: "background.color.rgb",
+            type: "color"
+          }, {
+            element: ".control-background-color-rgb-text",
+            path: "background.color.rgb",
+            type: "text",
+            valueConvert: ["hexTextString"]
+          }, {
+            element: ".control-background-color-hsl-l-number",
+            path: "background.color.hsl.l",
+            type: "number"
+          }, {
+            element: ".control-background-color-rgb-r-range",
+            path: "background.color.rgb.r",
+            type: "range"
+          }, {
+            element: ".control-background-color-rgb-r-number",
+            path: "background.color.rgb.r",
+            type: "number"
+          }, {
+            element: ".control-background-color-rgb-g-range",
+            path: "background.color.rgb.g",
+            type: "range"
+          }, {
+            element: ".control-background-color-rgb-g-number",
+            path: "background.color.rgb.g",
+            type: "number"
+          }, {
+            element: ".control-background-color-rgb-b-range",
+            path: "background.color.rgb.b",
+            type: "range"
+          }, {
+            element: ".control-background-color-rgb-b-number",
+            path: "background.color.rgb.b",
+            type: "number"
+          }],
+          func: function() {
+            background.mod.color.rgb();
+            background.render.color.custom();
+          }
+        }, {
+          element: ".control-background-color-hsl-l-number",
+          path: "background.color.hsl.l",
+          type: "number",
+          valueModify: {
+            min: 0,
+            max: 100
+          },
+          mirrorElement: [{
+            element: ".control-background-color-rgb-color",
+            path: "background.color.rgb",
+            type: "color"
+          }, {
+            element: ".control-background-color-rgb-text",
+            path: "background.color.rgb",
+            type: "text",
+            valueConvert: ["hexTextString"]
+          }, {
+            element: ".control-background-color-hsl-l-range",
+            path: "background.color.hsl.l",
+            type: "range"
+          }, {
+            element: ".control-background-color-rgb-r-range",
+            path: "background.color.rgb.r",
+            type: "range"
+          }, {
+            element: ".control-background-color-rgb-r-number",
+            path: "background.color.rgb.r",
+            type: "number"
+          }, {
+            element: ".control-background-color-rgb-g-range",
+            path: "background.color.rgb.g",
+            type: "range"
+          }, {
+            element: ".control-background-color-rgb-g-number",
+            path: "background.color.rgb.g",
+            type: "number"
+          }, {
+            element: ".control-background-color-rgb-b-range",
+            path: "background.color.rgb.b",
+            type: "range"
+          }, {
+            element: ".control-background-color-rgb-b-number",
+            path: "background.color.rgb.b",
+            type: "number"
+          }],
+          func: function() {
+            background.mod.color.rgb();
+            background.render.color.custom();
+          }
+        }, {
+          element: ".control-background-color-rgb-r-range",
+          path: "background.color.rgb.r",
+          type: "range",
+          valueModify: {
+            min: 0,
+            max: 255
+          },
+          mirrorElement: [{
+            element: ".control-background-color-rgb-color",
+            path: "background.color.rgb",
+            type: "color"
+          }, {
+            element: ".control-background-color-rgb-text",
+            path: "background.color.rgb",
+            type: "text",
+            valueConvert: ["hexTextString"]
+          }, {
+            element: ".control-background-color-rgb-r-number",
+            path: "background.color.rgb.r",
+            type: "number"
+          }, {
+            element: ".control-background-color-hsl-h-range",
+            path: "background.color.hsl.h",
+            type: "range"
+          }, {
+            element: ".control-background-color-hsl-h-number",
+            path: "background.color.hsl.h",
+            type: "number"
+          }, {
+            element: ".control-background-color-hsl-s-range",
+            path: "background.color.hsl.s",
+            type: "range"
+          }, {
+            element: ".control-background-color-hsl-s-number",
+            path: "background.color.hsl.s",
+            type: "number"
+          }, {
+            element: ".control-background-color-hsl-l-range",
+            path: "background.color.hsl.l",
+            type: "range"
+          }, {
+            element: ".control-background-color-hsl-l-number",
+            path: "background.color.hsl.l",
+            type: "number"
+          }],
+          func: function() {
+            background.mod.color.hsl();
+            background.render.color.custom();
+          }
+        }, {
+          element: ".control-background-color-rgb-r-number",
+          path: "background.color.rgb.r",
+          type: "number",
+          valueModify: {
+            min: 0,
+            max: 255
+          },
+          mirrorElement: [{
+            element: ".control-background-color-rgb-color",
+            path: "background.color.rgb",
+            type: "color"
+          }, {
+            element: ".control-background-color-rgb-text",
+            path: "background.color.rgb",
+            type: "text",
+            valueConvert: ["hexTextString"]
+          }, {
+            element: ".control-background-color-rgb-r-range",
+            path: "background.color.rgb.r",
+            type: "range"
+          }, {
+            element: ".control-background-color-hsl-h-range",
+            path: "background.color.hsl.h",
+            type: "range"
+          }, {
+            element: ".control-background-color-hsl-h-number",
+            path: "background.color.hsl.h",
+            type: "number"
+          }, {
+            element: ".control-background-color-hsl-s-range",
+            path: "background.color.hsl.s",
+            type: "range"
+          }, {
+            element: ".control-background-color-hsl-s-number",
+            path: "background.color.hsl.s",
+            type: "number"
+          }, {
+            element: ".control-background-color-hsl-l-range",
+            path: "background.color.hsl.l",
+            type: "range"
+          }, {
+            element: ".control-background-color-hsl-l-number",
+            path: "background.color.hsl.l",
+            type: "number"
+          }],
+          func: function() {
+            background.mod.color.hsl();
+            background.render.color.custom();
+          }
+        }, {
+          element: ".control-background-color-rgb-g-range",
+          path: "background.color.rgb.g",
+          type: "range",
+          valueModify: {
+            min: 0,
+            max: 255
+          },
+          mirrorElement: [{
+            element: ".control-background-color-rgb-color",
+            path: "background.color.rgb",
+            type: "color"
+          }, {
+            element: ".control-background-color-rgb-text",
+            path: "background.color.rgb",
+            type: "text",
+            valueConvert: ["hexTextString"]
+          }, {
+            element: ".control-background-color-rgb-g-number",
+            path: "background.color.rgb.g",
+            type: "number"
+          }, {
+            element: ".control-background-color-hsl-h-range",
+            path: "background.color.hsl.h",
+            type: "range"
+          }, {
+            element: ".control-background-color-hsl-h-number",
+            path: "background.color.hsl.h",
+            type: "number"
+          }, {
+            element: ".control-background-color-hsl-s-range",
+            path: "background.color.hsl.s",
+            type: "range"
+          }, {
+            element: ".control-background-color-hsl-s-number",
+            path: "background.color.hsl.s",
+            type: "number"
+          }, {
+            element: ".control-background-color-hsl-l-range",
+            path: "background.color.hsl.l",
+            type: "range"
+          }, {
+            element: ".control-background-color-hsl-l-number",
+            path: "background.color.hsl.l",
+            type: "number"
+          }],
+          func: function() {
+            background.mod.color.hsl();
+            background.render.color.custom();
+          }
+        }, {
+          element: ".control-background-color-rgb-g-number",
+          path: "background.color.rgb.g",
+          type: "number",
+          valueModify: {
+            min: 0,
+            max: 255
+          },
+          mirrorElement: [{
+            element: ".control-background-color-rgb-color",
+            path: "background.color.rgb",
+            type: "color"
+          }, {
+            element: ".control-background-color-rgb-text",
+            path: "background.color.rgb",
+            type: "text",
+            valueConvert: ["hexTextString"]
+          }, {
+            element: ".control-background-color-rgb-g-range",
+            path: "background.color.rgb.g",
+            type: "range"
+          }, {
+            element: ".control-background-color-hsl-h-range",
+            path: "background.color.hsl.h",
+            type: "range"
+          }, {
+            element: ".control-background-color-hsl-h-number",
+            path: "background.color.hsl.h",
+            type: "number"
+          }, {
+            element: ".control-background-color-hsl-s-range",
+            path: "background.color.hsl.s",
+            type: "range"
+          }, {
+            element: ".control-background-color-hsl-s-number",
+            path: "background.color.hsl.s",
+            type: "number"
+          }, {
+            element: ".control-background-color-hsl-l-range",
+            path: "background.color.hsl.l",
+            type: "range"
+          }, {
+            element: ".control-background-color-hsl-l-number",
+            path: "background.color.hsl.l",
+            type: "number"
+          }],
+          func: function() {
+            background.mod.color.hsl();
+            background.render.color.custom();
+          }
+        }, {
+          element: ".control-background-color-rgb-b-range",
+          path: "background.color.rgb.b",
+          type: "range",
+          valueModify: {
+            min: 0,
+            max: 255
+          },
+          mirrorElement: [{
+            element: ".control-background-color-rgb-color",
+            path: "background.color.rgb",
+            type: "color"
+          }, {
+            element: ".control-background-color-rgb-text",
+            path: "background.color.rgb",
+            type: "text",
+            valueConvert: ["hexTextString"]
+          }, {
+            element: ".control-background-color-rgb-b-number",
+            path: "background.color.rgb.b",
+            type: "number"
+          }, {
+            element: ".control-background-color-hsl-h-range",
+            path: "background.color.hsl.h",
+            type: "range"
+          }, {
+            element: ".control-background-color-hsl-h-number",
+            path: "background.color.hsl.h",
+            type: "number"
+          }, {
+            element: ".control-background-color-hsl-s-range",
+            path: "background.color.hsl.s",
+            type: "range"
+          }, {
+            element: ".control-background-color-hsl-s-number",
+            path: "background.color.hsl.s",
+            type: "number"
+          }, {
+            element: ".control-background-color-hsl-l-range",
+            path: "background.color.hsl.l",
+            type: "range"
+          }, {
+            element: ".control-background-color-hsl-l-number",
+            path: "background.color.hsl.l",
+            type: "number"
+          }],
+          func: function() {
+            background.mod.color.hsl();
+            background.render.color.custom();
+          }
+        }, {
+          element: ".control-background-color-rgb-b-number",
+          path: "background.color.rgb.b",
+          type: "number",
+          valueModify: {
+            min: 0,
+            max: 255
+          },
+          mirrorElement: [{
+            element: ".control-background-color-rgb-color",
+            path: "background.color.rgb",
+            type: "color"
+          }, {
+            element: ".control-background-color-rgb-text",
+            path: "background.color.rgb",
+            type: "text",
+            valueConvert: ["hexTextString"]
+          }, {
+            element: ".control-background-color-rgb-b-range",
+            path: "background.color.rgb.b",
+            type: "range"
+          }, {
+            element: ".control-background-color-hsl-h-range",
+            path: "background.color.hsl.h",
+            type: "range"
+          }, {
+            element: ".control-background-color-hsl-h-number",
+            path: "background.color.hsl.h",
+            type: "number"
+          }, {
+            element: ".control-background-color-hsl-s-range",
+            path: "background.color.hsl.s",
+            type: "range"
+          }, {
+            element: ".control-background-color-hsl-s-number",
+            path: "background.color.hsl.s",
+            type: "number"
+          }, {
+            element: ".control-background-color-hsl-l-range",
+            path: "background.color.hsl.l",
+            type: "range"
+          }, {
+            element: ".control-background-color-hsl-l-number",
+            path: "background.color.hsl.l",
+            type: "number"
+          }],
+          func: function() {
+            background.mod.color.hsl();
             background.render.color.custom();
           }
         }],
@@ -7787,8 +10636,8 @@ var control = (function() {
         name: "is-link-item-display-direction-" + state.get.current().link.item.display.direction
       }, {
         remove: [
-          "is-link-item-display-order-letconname",
-          "is-link-item-display-order-nameletcon"
+          "is-link-item-display-order-visualname",
+          "is-link-item-display-order-namevisual"
         ],
         condition: function() {
           return state.get.current().link.show;
@@ -7804,12 +10653,12 @@ var control = (function() {
         name: "is-link-item-display-name-show"
       }, {
         remove: [
-          "is-link-item-display-letcon-show"
+          "is-link-item-display-visual-show"
         ],
         condition: function() {
-          return (state.get.current().link.show && state.get.current().link.item.display.letcon.show);
+          return (state.get.current().link.show && state.get.current().link.item.display.visual.show);
         },
-        name: "is-link-item-display-letcon-show"
+        name: "is-link-item-display-visual-show"
       }, {
         remove: [
           "is-link-style-list",
@@ -8027,8 +10876,7 @@ var control = (function() {
               ".control-header-greeting-size-range",
               ".control-header-greeting-size-number",
               ".control-header-greeting-size-default",
-              ".control-header-greeting-newline",
-              ".control-header-greeting-newline-helper"
+              ".control-header-greeting-newline"
             ]
           }
         }],
@@ -8126,8 +10974,7 @@ var control = (function() {
               ".control-header-clock-size-range",
               ".control-header-clock-size-number",
               ".control-header-clock-size-default",
-              ".control-header-clock-newline",
-              ".control-header-clock-newline-helper"
+              ".control-header-clock-newline"
             ];
           }
         }],
@@ -8154,8 +11001,7 @@ var control = (function() {
               ".control-header-transitional-size-range",
               ".control-header-transitional-size-number",
               ".control-header-transitional-size-default",
-              '.control-header-transitional-newline',
-              '.control-header-transitional-newline-helper'
+              '.control-header-transitional-newline'
             ];
           }
         }],
@@ -8223,8 +11069,7 @@ var control = (function() {
             return [
               ".control-header-date-date-display-number",
               ".control-header-date-date-display-word",
-              ".control-header-date-date-ordinal",
-              ".control-header-date-date-ordinal-helper"
+              ".control-header-date-date-ordinal"
             ];
           }
         }, {
@@ -8286,8 +11131,7 @@ var control = (function() {
           },
           dependents: function() {
             return [
-              ".control-header-date-month-ordinal",
-              ".control-header-date-month-ordinal-helper"
+              ".control-header-date-month-ordinal"
             ];
           }
         }, {
@@ -8300,8 +11144,7 @@ var control = (function() {
               ".control-header-date-size-range",
               ".control-header-date-size-number",
               ".control-header-date-size-default",
-              ".control-header-date-newline",
-              ".control-header-date-newline-helper"
+              ".control-header-date-newline"
             ];
           }
         }],
@@ -8313,9 +11156,7 @@ var control = (function() {
             return [
               ".control-header-search-width-by-label",
               ".control-header-search-width-by-auto",
-              ".control-header-search-width-by-auto-helper",
               ".control-header-search-width-by-custom",
-              ".control-header-search-width-by-custom-helper",
               ".control-header-search-width-size-range",
               ".control-header-search-width-size-number",
               ".control-header-search-width-size-default",
@@ -8343,8 +11184,7 @@ var control = (function() {
               ".control-header-search-size-default",
               ".control-header-search-size-helper",
               ".control-header-search-newtab",
-              ".control-header-search-newline",
-              ".control-header-search-newline-helper"
+              ".control-header-search-newline"
             ];
           }
         }, {
@@ -8387,8 +11227,7 @@ var control = (function() {
               ".control-header-editadd-size-range",
               ".control-header-editadd-size-number",
               ".control-header-editadd-size-default",
-              ".control-header-editadd-newline",
-              ".control-header-editadd-newline-helper"
+              ".control-header-editadd-newline"
             ];
           }
         }],
@@ -8408,8 +11247,7 @@ var control = (function() {
               ".control-header-coloraccent-size-range",
               ".control-header-coloraccent-size-number",
               ".control-header-coloraccent-size-default",
-              ".control-header-coloraccent-newline",
-              ".control-header-coloraccent-newline-helper"
+              ".control-header-coloraccent-newline"
             ];
           }
         }],
@@ -8427,8 +11265,7 @@ var control = (function() {
               ".control-header-menu-size-range",
               ".control-header-menu-size-number",
               ".control-header-menu-size-default",
-              ".control-header-menu-newline",
-              ".control-header-menu-newline-helper"
+              ".control-header-menu-newline"
             ];
           }
         }],
@@ -8439,15 +11276,12 @@ var control = (function() {
           dependents: function() {
             return [
               ".control-header-color-style-always",
-              ".control-header-color-style-always-helper",
               ".control-header-color-style-scroll",
-              ".control-header-color-style-scroll-helper",
+              ".control-header-color-style-helper",
               ".control-header-color-by-theme",
               ".control-header-color-by-theme-helper",
               ".control-header-color-by-custom",
               ".control-header-color-by-custom-helper",
-              ".control-header-color-rgb-range",
-              ".control-header-color-rgb-text",
               "[for=control-header-color-opacity-range]",
               ".control-header-color-opacity-range",
               ".control-header-color-opacity-number",
@@ -8462,8 +11296,26 @@ var control = (function() {
           },
           dependents: function() {
             return [
-              ".control-header-color-rgb-range",
-              ".control-header-color-rgb-text"
+              ".control-header-color-rgb-color",
+              ".control-header-color-rgb-text",
+              "[for=control-header-color-hsl-h-range]",
+              ".control-header-color-hsl-h-range",
+              ".control-header-color-hsl-h-number",
+              "[for=control-header-color-hsl-s-range]",
+              ".control-header-color-hsl-s-range",
+              ".control-header-color-hsl-s-number",
+              "[for=control-header-color-hsl-l-range]",
+              ".control-header-color-hsl-l-range",
+              ".control-header-color-hsl-l-number",
+              "[for=control-header-color-rgb-r-range]",
+              ".control-header-color-rgb-r-range",
+              ".control-header-color-rgb-r-number",
+              "[for=control-header-color-rgb-g-range]",
+              ".control-header-color-rgb-g-range",
+              ".control-header-color-rgb-g-number",
+              "[for=control-header-color-rgb-b-range]",
+              ".control-header-color-rgb-b-range",
+              ".control-header-color-rgb-b-number"
             ];
           }
         }],
@@ -8474,9 +11326,7 @@ var control = (function() {
           dependents: function() {
             return [
               ".control-header-position-sticky",
-              ".control-header-position-sticky-helper",
-              ".control-header-position-inline",
-              ".control-header-position-inline-helper"
+              ".control-header-position-inline"
             ];
           }
         }]
@@ -8504,7 +11354,7 @@ var control = (function() {
             ".control-link-item-size-range",
             ".control-link-item-size-number",
             ".control-link-item-size-default",
-            ".control-link-item-display-letcon-show",
+            ".control-link-item-display-visual-show",
             ".control-link-item-display-name-show",
             ".control-link-item-url-show",
             ".control-link-item-line-show",
@@ -8518,27 +11368,74 @@ var control = (function() {
             ".control-link-item-color-by-theme-helper",
             ".control-link-item-color-by-custom",
             ".control-link-item-color-by-custom-helper",
-            "[for=control-link-item-opacity-range]",
-            ".control-link-item-opacity-range",
-            ".control-link-item-opacity-number",
-            ".control-link-item-opacity-default",
+            ".control-link-item-accent-set",
+            ".control-link-item-accent-clear",
+            ".control-link-item-accent-set-helper",
             "[for=control-link-item-border-range]",
             ".control-link-item-border-range",
             ".control-link-item-border-number",
             ".control-link-item-border-default",
             ".control-link-style-block",
-            ".control-link-style-block-helper",
             ".control-link-style-list",
-            ".control-link-style-list-helper",
+            ".control-link-item-color-rgb-color",
+            ".control-link-item-color-rgb-text",
+            ".control-link-item-color-helper",
+            "[for=control-link-item-color-hsl-h-range]",
+            ".control-link-item-color-hsl-h-range",
+            ".control-link-item-color-hsl-h-number",
+            "[for=control-link-item-color-hsl-s-range]",
+            ".control-link-item-color-hsl-s-range",
+            ".control-link-item-color-hsl-s-number",
+            "[for=control-link-item-color-hsl-l-range]",
+            ".control-link-item-color-hsl-l-range",
+            ".control-link-item-color-hsl-l-number",
+            "[for=control-link-item-color-rgb-r-range]",
+            ".control-link-item-color-rgb-r-range",
+            ".control-link-item-color-rgb-r-number",
+            "[for=control-link-item-color-rgb-g-range]",
+            ".control-link-item-color-rgb-g-range",
+            ".control-link-item-color-rgb-g-number",
+            "[for=control-link-item-color-rgb-b-range]",
+            ".control-link-item-color-rgb-b-range",
+            ".control-link-item-color-rgb-b-number",
+            ".control-link-item-color-apply",
+            ".control-link-item-color-clear",
+            ".control-link-item-color-rainbow",
+            "[for=control-link-item-opacity-range]",
+            ".control-link-item-opacity-range",
+            ".control-link-item-opacity-number",
+            ".control-link-item-opacity-default",
+            ".control-link-item-opacity-helper",
+            ".control-link-item-accent-rgb-color",
+            ".control-link-item-accent-rgb-text",
+            ".control-link-item-accent-helper",
+            "[for=control-link-item-accent-hsl-h-range]",
+            ".control-link-item-accent-hsl-h-range",
+            ".control-link-item-accent-hsl-h-number",
+            "[for=control-link-item-accent-hsl-s-range]",
+            ".control-link-item-accent-hsl-s-range",
+            ".control-link-item-accent-hsl-s-number",
+            "[for=control-link-item-accent-hsl-l-range]",
+            ".control-link-item-accent-hsl-l-range",
+            ".control-link-item-accent-hsl-l-number",
+            "[for=control-link-item-accent-rgb-r-range]",
+            ".control-link-item-accent-rgb-r-range",
+            ".control-link-item-accent-rgb-r-number",
+            "[for=control-link-item-accent-rgb-g-range]",
+            ".control-link-item-accent-rgb-g-range",
+            ".control-link-item-accent-rgb-g-number",
+            "[for=control-link-item-accent-rgb-b-range]",
+            ".control-link-item-accent-rgb-b-range",
+            ".control-link-item-accent-rgb-b-number",
+            ".control-link-item-accent-apply",
+            ".control-link-item-accent-clear",
+            ".control-link-item-accent-rainbow",
             ".control-link-orientation-top",
             ".control-link-orientation-bottom",
             ".control-link-orientation-helper",
             ".control-link-sort-name",
             ".control-link-sort-letter",
-            ".control-link-sort-icon",
-            ".control-link-accent-clear",
-            ".control-link-accent-set",
-            ".control-link-accent-set-helper"
+            ".control-link-sort-icon"
           ];
         }
       }, {
@@ -8557,18 +11454,22 @@ var control = (function() {
         }
       }, {
         condition: function() {
-          return (state.get.current().link.show && state.get.current().link.item.display.letcon.show);
+          return (state.get.current().link.show && state.get.current().link.item.display.visual.show);
         },
         dependents: function() {
           return [
-            "[for=control-link-item-display-letcon-letter-size-range]",
-            ".control-link-item-display-letcon-letter-size-range",
-            ".control-link-item-display-letcon-letter-size-number",
-            ".control-link-item-display-letcon-letter-size-default",
-            "[for=control-link-item-display-letcon-icon-size-range]",
-            ".control-link-item-display-letcon-icon-size-range",
-            ".control-link-item-display-letcon-icon-size-number",
-            ".control-link-item-display-letcon-icon-size-default"
+            "[for=control-link-item-display-visual-letter-size-range]",
+            ".control-link-item-display-visual-letter-size-range",
+            ".control-link-item-display-visual-letter-size-number",
+            ".control-link-item-display-visual-letter-size-default",
+            "[for=control-link-item-display-visual-icon-size-range]",
+            ".control-link-item-display-visual-icon-size-range",
+            ".control-link-item-display-visual-icon-size-number",
+            ".control-link-item-display-visual-icon-size-default",
+            "[for=control-link-item-display-visual-image-size-range]",
+            ".control-link-item-display-visual-image-size-range",
+            ".control-link-item-display-visual-image-size-number",
+            ".control-link-item-display-visual-image-size-default"
           ];
         }
       }, {
@@ -8585,7 +11486,7 @@ var control = (function() {
         }
       }, {
         condition: function() {
-          return (state.get.current().link.show && (state.get.current().link.item.display.letcon.show || state.get.current().link.item.display.name.show));
+          return (state.get.current().link.show && (state.get.current().link.item.display.visual.show || state.get.current().link.item.display.name.show));
         },
         dependents: function() {
           return [
@@ -8616,32 +11517,20 @@ var control = (function() {
         }
       }, {
         condition: function() {
-          return (state.get.current().link.show && state.get.current().link.item.display.letcon.show && state.get.current().link.item.display.name.show);
+          return (state.get.current().link.show && state.get.current().link.item.display.visual.show && state.get.current().link.item.display.name.show);
         },
         dependents: function() {
           return [
             ".control-link-item-display-direction-horizontal",
             ".control-link-item-display-direction-vertical",
-            ".control-link-item-display-order-letconname",
-            ".control-link-item-display-order-nameletcon",
-            ".control-link-item-display-direction-vertical-helper",
-            ".control-link-item-display-direction-horizontal-helper",
+            ".control-link-item-display-order-visualname",
+            ".control-link-item-display-order-namevisual",
             "[for=control-link-item-display-gutter-range]",
             ".control-link-item-display-gutter-range",
             ".control-link-item-display-gutter-number",
             ".control-link-item-display-gutter-default"
           ];
         }
-      }, {
-        condition: function() {
-          return state.get.current().link.item.color.by == "custom";
-        },
-        dependents: function() {
-          return [
-            ".control-link-item-color-rgb-range",
-            ".control-link-item-color-rgb-text"
-          ];
-        }
       }],
       theme: [{
         condition: function() {
@@ -8701,8 +11590,26 @@ var control = (function() {
         },
         dependents: function() {
           return [
-            ".control-background-color-rgb-range",
-            ".control-background-color-rgb-text"
+            ".control-background-color-rgb-color",
+            ".control-background-color-rgb-text",
+            "[for=control-background-color-hsl-h-range]",
+            ".control-background-color-hsl-h-range",
+            ".control-background-color-hsl-h-number",
+            "[for=control-background-color-hsl-s-range]",
+            ".control-background-color-hsl-s-range",
+            ".control-background-color-hsl-s-number",
+            "[for=control-background-color-hsl-l-range]",
+            ".control-background-color-hsl-l-range",
+            ".control-background-color-hsl-l-number",
+            "[for=control-background-color-rgb-r-range]",
+            ".control-background-color-rgb-r-range",
+            ".control-background-color-rgb-r-number",
+            "[for=control-background-color-rgb-g-range]",
+            ".control-background-color-rgb-g-range",
+            ".control-background-color-rgb-g-number",
+            "[for=control-background-color-rgb-b-range]",
+            ".control-background-color-rgb-b-range",
+            ".control-background-color-rgb-b-number"
           ];
         }
       }, {
diff --git a/src/js/header.js b/src/js/header.js
index a41eb8c3..5e173991 100644
--- a/src/js/header.js
+++ b/src/js/header.js
@@ -10,6 +10,33 @@ var header = (function() {
     }
   };
 
+  mod.color = {
+    hsl: function() {
+      var hsl = helper.convertColor.rgb.hsl(state.get.current().header.color.rgb);
+      helper.setObject({
+        object: state.get.current(),
+        path: "header.color.hsl",
+        newValue: {
+          h: Math.round(hsl.h),
+          s: Math.round(hsl.s),
+          l: Math.round(hsl.l)
+        }
+      });
+    },
+    rgb: function() {
+      var rgb = helper.convertColor.hsl.rgb(state.get.current().header.color.hsl);
+      helper.setObject({
+        object: state.get.current(),
+        path: "header.color.rgb",
+        newValue: {
+          r: Math.round(rgb.r),
+          g: Math.round(rgb.g),
+          b: Math.round(rgb.b)
+        }
+      });
+    }
+  };
+
   var bind = {};
 
   bind.resize = function() {
diff --git a/src/js/link.js b/src/js/link.js
index 56dc8eb5..80758936 100644
--- a/src/js/link.js
+++ b/src/js/link.js
@@ -54,33 +54,48 @@ var link = (function() {
       }
     },
     link: {
-      display: null,
-      letter: null,
-      icon: {
-        name: null,
-        prefix: null,
-        label: null
+      visual: {
+        display: null,
+        letter: null,
+        image: null,
+        icon: {
+          name: null,
+          prefix: null,
+          label: null
+        }
       },
       name: null,
       url: null,
       timeStamp: null,
       accent: {
-        override: null,
-        color: {
-          hsl: {
-            h: null,
-            s: null,
-            l: null
-          },
-          rgb: {
-            r: null,
-            g: null,
-            b: null
-          }
+        by: null,
+        hsl: {
+          h: null,
+          s: null,
+          l: null
+        },
+        rgb: {
+          r: null,
+          g: null,
+          b: null
         }
-      }
-    },
-    searchMatch: null
+      },
+      color: {
+        by: null,
+        hsl: {
+          h: null,
+          s: null,
+          l: null
+        },
+        rgb: {
+          r: null,
+          g: null,
+          b: null
+        }
+      },
+      image: null,
+      searchMatch: null
+    }
   };
 
   stagedLink.init = function() {
@@ -91,14 +106,23 @@ var link = (function() {
     stagedLink.position.group.new = false;
     stagedLink.position.group.name.show = false;
     stagedLink.position.group.openAll.show = false;
-    stagedLink.link.display = "letter";
-    stagedLink.link.accent.override = false;
-    stagedLink.link.accent.color.hsl.h = 0;
-    stagedLink.link.accent.color.hsl.s = 0;
-    stagedLink.link.accent.color.hsl.l = 0;
-    stagedLink.link.accent.color.rgb.r = 0;
-    stagedLink.link.accent.color.rgb.g = 0;
-    stagedLink.link.accent.color.rgb.b = 0;
+    stagedLink.link.visual.display = "letter";
+    stagedLink.link.name = "";
+    stagedLink.link.accent.by = "theme";
+    stagedLink.link.accent.hsl.h = 0;
+    stagedLink.link.accent.hsl.s = 0;
+    stagedLink.link.accent.hsl.l = 0;
+    stagedLink.link.accent.rgb.r = 0;
+    stagedLink.link.accent.rgb.g = 0;
+    stagedLink.link.accent.rgb.b = 0;
+    stagedLink.link.color.by = "theme";
+    stagedLink.link.color.hsl.h = 0;
+    stagedLink.link.color.hsl.s = 0;
+    stagedLink.link.color.hsl.l = 0;
+    stagedLink.link.color.rgb.r = 0;
+    stagedLink.link.color.rgb.g = 0;
+    stagedLink.link.color.rgb.b = 0;
+    stagedLink.link.image = "";
     stagedLink.link.searchMatch = false;
   };
 
@@ -109,65 +133,198 @@ var link = (function() {
     stagedLink.position.destination.item = null;
     stagedLink.position.group.new = null;
     stagedLink.position.group.name.text = null;
-    stagedLink.link.display = null;
-    stagedLink.link.letter = null;
-    stagedLink.link.icon.name = null;
-    stagedLink.link.icon.prefix = null;
-    stagedLink.link.icon.label = null;
+    stagedLink.link.visual.display = null;
+    stagedLink.link.visual.letter = null;
+    stagedLink.link.visual.image = null;
+    stagedLink.link.visual.icon.name = null;
+    stagedLink.link.visual.icon.prefix = null;
+    stagedLink.link.visual.icon.label = null;
     stagedLink.link.name = null;
     stagedLink.link.url = null;
     stagedLink.link.timeStamp = null;
-    stagedLink.link.accent.override = null;
-    stagedLink.link.accent.color.hsl.h = null;
-    stagedLink.link.accent.color.hsl.s = null;
-    stagedLink.link.accent.color.hsl.l = null;
-    stagedLink.link.accent.color.rgb.r = null;
-    stagedLink.link.accent.color.rgb.g = null;
-    stagedLink.link.accent.color.rgb.b = null;
+    stagedLink.link.accent.by = null;
+    stagedLink.link.accent.hsl.h = null;
+    stagedLink.link.accent.hsl.s = null;
+    stagedLink.link.accent.hsl.l = null;
+    stagedLink.link.accent.rgb.r = null;
+    stagedLink.link.accent.rgb.g = null;
+    stagedLink.link.accent.rgb.b = null;
+    stagedLink.link.color.by = null;
+    stagedLink.link.color.hsl.h = null;
+    stagedLink.link.color.hsl.s = null;
+    stagedLink.link.color.hsl.l = null;
+    stagedLink.link.color.rgb.r = null;
+    stagedLink.link.color.rgb.g = null;
+    stagedLink.link.color.rgb.b = null;
+    stagedLink.link.image = null;
     stagedLink.link.searchMatch = null;
   };
 
   var mod = {};
 
+  mod.collapse = {
+    form: {
+      item: {
+        color: false,
+        accent: false
+      }
+    },
+    reset: function() {
+      mod.collapse.form.item.color = false;
+      mod.collapse.form.item.accent = false;
+    }
+  }
+
   mod.accent = {
+    hsl: function() {
+      var hsl = helper.convertColor.rgb.hsl(state.get.current().link.item.accent.rgb);
+      helper.setObject({
+        object: state.get.current(),
+        path: "link.item.accent.hsl",
+        newValue: {
+          h: Math.round(hsl.h),
+          s: Math.round(hsl.s),
+          l: Math.round(hsl.l)
+        }
+      });
+    },
+    rgb: function() {
+      var rgb = helper.convertColor.hsl.rgb(state.get.current().link.item.accent.hsl);
+      helper.setObject({
+        object: state.get.current(),
+        path: "link.item.accent.rgb",
+        newValue: {
+          r: Math.round(rgb.r),
+          g: Math.round(rgb.g),
+          b: Math.round(rgb.b)
+        }
+      });
+    },
     clear: function() {
       bookmarks.get().forEach(function(arrayItem, index) {
         arrayItem.items.forEach(function(arrayItem, index) {
           arrayItem.accent = {
-            override: false,
-            color: {
-              hsl: {
-                h: 0,
-                s: 0,
-                l: 0
-              },
-              rgb: {
-                r: 0,
-                g: 0,
-                b: 0
-              }
+            by: "theme",
+            hsl: {
+              h: 0,
+              s: 0,
+              l: 0
+            },
+            rgb: {
+              r: 0,
+              g: 0,
+              b: 0
             }
           };
         });
       });
     },
+    set: function() {
+      bookmarks.get().forEach(function(arrayItem, index) {
+        arrayItem.items.forEach(function(arrayItem, index) {
+          arrayItem.accent.by = "custom";
+          arrayItem.accent.hsl = state.get.current().link.item.accent.hsl;
+          arrayItem.accent.rgb = state.get.current().link.item.accent.rgb;
+        });
+      });
+    },
     rainbow: function() {
       var units = 360 / bookmarks.count();
       var degree = 0;
       bookmarks.get().forEach(function(arrayItem, index) {
         arrayItem.items.forEach(function(arrayItem, index) {
-          arrayItem.accent.override = true;
+          arrayItem.accent.by = "custom";
           var rgb = helper.convertColor.hsl.rgb({
             h: degree,
             s: 100,
             l: 50
           });
-          arrayItem.accent.color.hsl = {
+          arrayItem.accent.hsl = {
             h: degree,
             s: 100,
             l: 50
           };
-          arrayItem.accent.color.rgb = {
+          arrayItem.accent.rgb = {
+            r: Math.round(rgb.r),
+            g: Math.round(rgb.g),
+            b: Math.round(rgb.b)
+          };
+          degree = degree + units;
+        });
+      });
+    }
+  };
+
+  mod.color = {
+    hsl: function() {
+      var hsl = helper.convertColor.rgb.hsl(state.get.current().link.item.color.rgb);
+      helper.setObject({
+        object: state.get.current(),
+        path: "link.item.color.hsl",
+        newValue: {
+          h: Math.round(hsl.h),
+          s: Math.round(hsl.s),
+          l: Math.round(hsl.l)
+        }
+      });
+    },
+    rgb: function() {
+      var rgb = helper.convertColor.hsl.rgb(state.get.current().link.item.color.hsl);
+      helper.setObject({
+        object: state.get.current(),
+        path: "link.item.color.rgb",
+        newValue: {
+          r: Math.round(rgb.r),
+          g: Math.round(rgb.g),
+          b: Math.round(rgb.b)
+        }
+      });
+    },
+    clear: function() {
+      bookmarks.get().forEach(function(arrayItem, index) {
+        arrayItem.items.forEach(function(arrayItem, index) {
+          arrayItem.color = {
+            by: "theme",
+            hsl: {
+              h: 0,
+              s: 0,
+              l: 0
+            },
+            rgb: {
+              r: 0,
+              g: 0,
+              b: 0
+            }
+          };
+        });
+      });
+    },
+    set: function() {
+      bookmarks.get().forEach(function(arrayItem, index) {
+        arrayItem.items.forEach(function(arrayItem, index) {
+          arrayItem.color.by = "custom";
+          arrayItem.color.hsl = state.get.current().link.item.color.hsl;
+          arrayItem.color.rgb = state.get.current().link.item.color.rgb;
+        });
+      });
+    },
+    rainbow: function() {
+      var units = 360 / bookmarks.count();
+      var degree = 0;
+      bookmarks.get().forEach(function(arrayItem, index) {
+        arrayItem.items.forEach(function(arrayItem, index) {
+          arrayItem.color.by = "custom";
+          var rgb = helper.convertColor.hsl.rgb({
+            h: degree,
+            s: 100,
+            l: 50
+          });
+          arrayItem.color.hsl = {
+            h: degree,
+            s: 100,
+            l: 50
+          };
+          arrayItem.color.rgb = {
             r: Math.round(rgb.r),
             g: Math.round(rgb.g),
             b: Math.round(rgb.b)
@@ -747,12 +904,16 @@ var link = (function() {
           value: "link-item"
         }]
       };
-      if (stagedLink.link.accent.override) {
+      if (stagedLink.link.accent.by == "custom" || stagedLink.link.color.by == "custom" || (stagedLink.link.image != null && stagedLink.link.image != "")) {
         linkItemOptions.attr.push({
           key: "style",
-          value: "--theme-accent-r: " + stagedLink.link.accent.color.rgb.r + ";" +
-            "--theme-accent-g: " + stagedLink.link.accent.color.rgb.g + ";" +
-            "--theme-accent-b: " + stagedLink.link.accent.color.rgb.b + ";" +
+          value: ""
+        });
+        if (stagedLink.link.accent.by == "custom") {
+          linkItemOptions.attr[1].value = linkItemOptions.attr[1].value +
+            "--theme-accent-r: " + stagedLink.link.accent.rgb.r + ";" +
+            "--theme-accent-g: " + stagedLink.link.accent.rgb.g + ";" +
+            "--theme-accent-b: " + stagedLink.link.accent.rgb.b + ";" +
             "--theme-accent: var(--theme-accent-r), var(--theme-accent-g), var(--theme-accent-b);" +
             "--theme-accent-accessible-threshold: 0.5;" +
             "--theme-accent-accessible-r: calc(var(--theme-accent-r) * 0.50);" +
@@ -761,7 +922,15 @@ var link = (function() {
             "--theme-accent-accessible-sum: calc(var(--theme-accent-accessible-r) + var(--theme-accent-accessible-g) + var(--theme-accent-accessible-b));" +
             "--theme-accent-accessible-perceived-lightness: calc(var(--theme-accent-accessible-sum) / 255);" +
             "--theme-accent-accessible-color: 0, 0%, calc((var(--theme-accent-accessible-perceived-lightness) - var(--theme-accent-accessible-threshold)) * -10000000%);"
-        });
+        };
+        if (stagedLink.link.color.by == "custom") {
+          linkItemOptions.attr[1].value = linkItemOptions.attr[1].value +
+            "--link-item-color: " + stagedLink.link.color.rgb.r + ", " + stagedLink.link.color.rgb.g + ", " + stagedLink.link.color.rgb.b + ";" +
+            "--link-item-color-focus-hover: " + stagedLink.link.color.rgb.r + ", " + stagedLink.link.color.rgb.g + ", " + stagedLink.link.color.rgb.b + ";";
+        };
+        if (stagedLink.link.image != null && stagedLink.link.image != "") {
+          linkItemOptions.attr[1].value = linkItemOptions.attr[1].value + "--link-image-url: url(" + stagedLink.link.image.trim() + ");"
+        };
       };
       var linkItem = helper.makeNode(linkItemOptions);
       var linkPanelFrontOptions = {
@@ -783,25 +952,40 @@ var link = (function() {
           value: "_blank"
         });
       };
+
+      var linkImage = helper.node("div|class:link-image");
+
       var linkPanelFront = helper.makeNode(linkPanelFrontOptions);
       var linkPanelBack = helper.node("div|class:link-panel-back");
 
       var linkDisplay = helper.node("div|class:link-display");
-      var linkDisplayLetcon = helper.node("div|class:link-display-letcon");
+      var linkDisplayVisual = helper.node("div|class:link-display-visual");
 
       var linkDisplayLetter = null;
       var linkDisplayIcon = null;
+      var linkDisplayImage = null;
 
-      if (stagedLink.link.display == "letter") {
-        var letterText = stagedLink.link.letter;
+      if (stagedLink.link.visual.display == "letter") {
+        var letterText = stagedLink.link.visual.letter;
         if (letterText == null) {
           letterText = "";
         };
         linkDisplayLetter = helper.node("p:" + letterText + "|class:link-display-letter");
-      } else if (stagedLink.link.display == "icon" && stagedLink.link.icon.prefix != null && stagedLink.link.icon.name != null) {
-        linkDisplayIcon = helper.node("div|class:link-display-icon " + stagedLink.link.icon.prefix + " fa-" + stagedLink.link.icon.name);
+      } else if (stagedLink.link.visual.display == "icon" && stagedLink.link.visual.icon.prefix != null && stagedLink.link.visual.icon.name != null) {
+        linkDisplayIcon = helper.node("div|class:link-display-icon " + stagedLink.link.visual.icon.prefix + " fa-" + stagedLink.link.visual.icon.name);
+      } else if (stagedLink.link.visual.display == "image" && stagedLink.link.visual.image != null && typeof stagedLink.link.visual.image == "string") {
+        linkDisplayImage = helper.makeNode({
+          tag: "div",
+          attr: [{
+            key: "class",
+            value: "link-display-image"
+          }, {
+            key: "style",
+            value: "--link-display-image-url: url(" + stagedLink.link.visual.image.trim() + ")"
+          }]
+        });
       };
-      var nameText = stagedLink.link.name;
+      var nameText = stagedLink.link.name.trim();
       if (nameText == null) {
         nameText = "";
       };
@@ -835,13 +1019,25 @@ var link = (function() {
       var linkRemove = helper.node("button|class:button button-small link-control-item link-control-item-remove,tabindex:-1,title:Remove this bookmark");
       var linkRemoveIcon = helper.node("span|class:button-icon icon-close");
 
-      if (stagedLink.link.display == "letter") {
-        linkDisplayLetcon.appendChild(linkDisplayLetter);
-      } else if (stagedLink.link.display == "icon" && stagedLink.link.icon.prefix != null && stagedLink.link.icon.name != null) {
-        linkDisplayLetcon.appendChild(linkDisplayIcon);
+      if (stagedLink.link.visual.display == "letter" && linkDisplayLetter != null) {
+        linkDisplayVisual.appendChild(linkDisplayLetter);
+      } else if (stagedLink.link.visual.display == "icon" && linkDisplayIcon != null) {
+        linkDisplayVisual.appendChild(linkDisplayIcon);
+      } else if (stagedLink.link.visual.display == "image" && linkDisplayImage != null) {
+        linkDisplayVisual.appendChild(linkDisplayImage);
+      };
+
+      if (linkDisplayLetter != null || linkDisplayIcon != null || linkDisplayImage != null) {
+        linkDisplay.appendChild(linkDisplayVisual);
+      };
+
+      if (stagedLink.link.name != null && stagedLink.link.name != "") {
+        linkDisplay.appendChild(linkDisplayName);
+      };
+
+      if (stagedLink.link.image != null && stagedLink.link.image != "") {
+        linkPanelFront.appendChild(linkImage);
       };
-      linkDisplay.appendChild(linkDisplayLetcon);
-      linkDisplay.appendChild(linkDisplayName);
       linkPanelFront.appendChild(linkDisplay);
       linkLeft.appendChild(linkLeftIcon);
       linkControl.appendChild(linkLeft);
@@ -950,6 +1146,26 @@ var link = (function() {
       var displayIconHelper = helper.node("div|class:form-helper");
       var displayIconHelperItem = helper.node("p:Refer to the \"Free\" and \"Brand\" icons from FontAwesome for full set of icons supported.|class:link-form-input-icon-helper form-helper-item disabled");
 
+      // image
+      var displayImageRadiotWrap = helper.node("div|class:form-wrap");
+      var displayImageRadio = helper.node("input|class:link-form-input-display-image,id:link-form-input-display-image,type:radio,name:link-form-input-display,tabindex:1,value:image");
+      var displayImageLable = helper.node("label|for:link-form-input-display-image");
+      var displayImageLableText = helper.node("span:Image");
+      var displayImageLableIcon = helper.node("span|class:label-icon");
+      var displayImageFormIndentWrap = helper.node("div|class:form-wrap");
+      var displayImageFormIndent = helper.node("div|class:form-indent");
+      var displayImageInputWrap = helper.node("div|class:form-wrap");
+      var displayImageInput = helper.node("input|type:text,class:link-form-input-image,id:link-form-input-image,placeholder:https://...,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false,disabled");
+      var displayImageHelper = helper.node("div|class:form-helper");
+      var displayImageHelperItem = helper.makeNode({
+        tag: "p",
+        text: "Be sure to use the full URL and include \"http://\" or \"https://\".",
+        attr: [{
+          key: "class",
+          value: "form-helper-item disabled"
+        }]
+      });
+
       // name
       var nameInputWrap = helper.node("div|class:form-wrap");
       var nameLabel = helper.node("label:Name|for:link-form-input-name");
@@ -969,57 +1185,133 @@ var link = (function() {
         }]
       });
 
+      // color
+      var colorLabelWrap = helper.node("div|class:form-wrap");
+      var colorLabel = helper.node("label:Color override");
+      var colorThemeRadioWrap = helper.node("div|class:form-wrap");
+      var colorThemeRadio = helper.node("input|class:link-form-input-color-theme,id:link-form-input-color-theme,type:radio,name:link-form-input-color,tabindex:1,checked,value:theme");
+      var colorThemeLabel = helper.node("label|for:link-form-input-color-theme");
+      var colorThemeLabelIcon = helper.node("span|class:label-icon");
+      var colorThemeLabelBlock = helper.node("span|class:label-block");
+      var colorThemeLabelBlockItem1 = helper.node("span:Theme colour|class:label-block-item");
+      var colorThemeLabelBlockItem2 = helper.node("span:Use the Colour defined by the Theme.|class:label-block-item small muted");
+      var colorCustomInputWrap = helper.node("div|class:form-wrap");
+      var colorCustomRadio = helper.node("input|class:link-form-input-color-custom,id:link-form-input-color-custom,type:radio,name:link-form-input-color,tabindex:1,value:custom");
+      var colorCustomLabel = helper.node("label|for:link-form-input-color-custom");
+      var colorCustomLabelIcon = helper.node("span|class:label-icon");
+      var colorCustomBlock = helper.node("span|class:label-block");
+      var colorCustomBlockItem1 = helper.node("span:Custom colour|class:label-block-item");
+      var colorCustomBlockItem2 = helper.node("span:Override the Theme colour.|class:label-block-item small muted");
+      var colorColorFormIndentWrap = helper.node("div|class:form-wrap");
+      var colorColorFormIndent = helper.node("div|class:form-indent");
+      var colorColorInputWrap = helper.node("div|class:form-wrap mb-0");
+      var colorColorFormGroup = helper.node("div|class:form-group form-group-block");
+      var colorColorPicker = helper.node("input|id:link-form-input-color-picker,class:form-group-item-half link-form-input-color-picker,type:color,value:#000000,tabindex:1,disabled");
+      var colorColorHex = helper.node("input|id:link-form-input-color-hex,class:form-group-item-half link-form-input-color-hex,type:text,placeholder:Hex code,value:#000000,tabindex:1,maxlength:7,disabled");
+      var colorColorCollapseButton = helper.node("button|class:link-form-collapse-button button button-line,type:button,tabindex:1,disabled");
+      var colorColorCollapseButtonIcon = helper.node("span|class:link-form-collapse-button-icon icon-arrow-down");
+      var colorColorCollapse = helper.node("div|class:link-form-collapse");
+      var colorHslHWrap = helper.node("div|class:form-wrap");
+      var colorHslHLabel = helper.node("label:Hue|for:link-form-input-color-hsl-h-range,class:form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0 disabled");
+      var colorHslHGroup = helper.node("div|class:form-group form-group-block");
+      var colorHslHRange = helper.node("input|class:link-form-input-color-hsl-h-range mr-3,id:link-form-input-color-hsl-h-range,type:range,name:link-form-input-color-hsl-h-range,value:0,min:0,max:359,tabindex:1,disabled");
+      var colorHslHNumber = helper.node("input|class:link-form-input-color-hsl-h-number form-group-item-medium form-group-radius-left,type:number,value:0,min:0,max:359,tabindex:1,disabled");
+      var colorHslSWrap = helper.node("div|class:form-wrap");
+      var colorHslSLabel = helper.node("label:Saturation|for:link-form-input-color-hsl-s-range,class:form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0 disabled");
+      var colorHslSGroup = helper.node("div|class:form-group form-group-block");
+      var colorHslSRange = helper.node("input|class:link-form-input-color-hsl-s-range mr-3,id:link-form-input-color-hsl-s-range,type:range,name:link-form-input-color-hsl-s-range,value:0,min:0,max:100,tabindex:1,disabled");
+      var colorHslSNumber = helper.node("input|class:link-form-input-color-hsl-s-number form-group-item-medium form-group-radius-left,type:number,value:0,min:0,max:100,tabindex:1,disabled");
+      var colorHslLWrap = helper.node("div|class:form-wrap");
+      var colorHslLLabel = helper.node("label:Lightness|for:link-form-input-color-hsl-l-range,class:form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0 disabled");
+      var colorHslLGroup = helper.node("div|class:form-group form-group-block");
+      var colorHslLRange = helper.node("input|class:link-form-input-color-hsl-l-range mr-3,id:link-form-input-color-hsl-l-range,type:range,name:link-form-input-color-hsl-l-range,value:0,min:0,max:100,tabindex:1,disabled");
+      var colorHslLNumber = helper.node("input|class:link-form-input-color-hsl-l-number form-group-item-medium form-group-radius-left,type:number,value:0,min:0,max:100,tabindex:1,disabled");
+      var colorRgbRWrap = helper.node("div|class:form-wrap");
+      var colorRgbRLabel = helper.node("label:Red|for:link-form-input-color-rgb-r-range,class:form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0 disabled");
+      var colorRgbRGroup = helper.node("div|class:form-group form-group-block");
+      var colorRgbRRange = helper.node("input|class:link-form-input-color-rgb-r-range mr-3,id:link-form-input-color-rgb-r-range,type:range,name:link-form-input-color-rgb-r-range,value:0,min:0,max:255,tabindex:1,disabled");
+      var colorRgbRNumber = helper.node("input|class:link-form-input-color-rgb-r-number form-group-item-medium form-group-radius-left,type:number,value:0,min:0,max:255,tabindex:1,disabled");
+      var colorRgbGWrap = helper.node("div|class:form-wrap");
+      var colorRgbGLabel = helper.node("label:Green|for:link-form-input-color-rgb-g-range,class:form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0 disabled");
+      var colorRgbGGroup = helper.node("div|class:form-group form-group-block");
+      var colorRgbGRange = helper.node("input|class:link-form-input-color-rgb-g-range mr-3,id:link-form-input-color-rgb-g-range,type:range,name:link-form-input-color-rgb-g-range,value:0,min:0,max:255,tabindex:1,disabled");
+      var colorRgbGNumber = helper.node("input|class:link-form-input-color-rgb-g-number form-group-item-medium form-group-radius-left,type:number,value:0,min:0,max:255,tabindex:1,disabled");
+      var colorRgbBWrap = helper.node("div|class:form-wrap");
+      var colorRgbBLabel = helper.node("label:Blue|for:link-form-input-color-rgb-b-range,class:form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0 disabled");
+      var colorRgbBGroup = helper.node("div|class:form-group form-group-block");
+      var colorRgbBRange = helper.node("input|class:link-form-input-color-rgb-b-range mr-3,id:link-form-input-color-rgb-b-range,type:range,name:link-form-input-color-rgb-b-range,value:0,min:0,max:255,tabindex:1,disabled");
+      var colorRgbBNumber = helper.node("input|class:link-form-input-color-rgb-b-number form-group-item-medium form-group-radius-left,type:number,value:0,min:0,max:255,tabindex:1,disabled");
+
       // accent
       var accentLabelWrap = helper.node("div|class:form-wrap");
-      var accentLabel = helper.node("label:Accent colour");
-      var accentGlobalRadioWrap = helper.node("div|class:form-wrap");
-      var accentGlobalRadio = helper.node("input|class:link-form-input-accent-global,id:link-form-input-accent-global,type:radio,name:link-form-input-accent,tabindex:1,checked,value:global");
-      var accentGlobalLabel = helper.node("label|for:link-form-input-accent-global");
-      var accentGlobalLabelText = helper.node("span:Global");
-      var accentGlobalLabelIcon = helper.node("span|class:label-icon");
+      var accentLabel = helper.node("label:Accent override");
+      var accentThemeRadioWrap = helper.node("div|class:form-wrap");
+      var accentThemeRadio = helper.node("input|class:link-form-input-accent-theme,id:link-form-input-accent-theme,type:radio,name:link-form-input-accent,tabindex:1,checked,value:theme");
+      var accentThemeLabel = helper.node("label|for:link-form-input-accent-theme");
+      var accentThemeLabelIcon = helper.node("span|class:label-icon");
+      var accentThemeLabelBlock = helper.node("span|class:label-block");
+      var accentThemeLabelBlockItem1 = helper.node("span:Theme accent|class:label-block-item");
+      var accentThemeLabelBlockItem2 = helper.node("span:Use the Accent defined by the Theme.|class:label-block-item small muted");
       var accentCustomInputWrap = helper.node("div|class:form-wrap");
       var accentCustomRadio = helper.node("input|class:link-form-input-accent-custom,id:link-form-input-accent-custom,type:radio,name:link-form-input-accent,tabindex:1,value:custom");
       var accentCustomLabel = helper.node("label|for:link-form-input-accent-custom");
-      var accentCustomLabelText = helper.node("span:Custom");
       var accentCustomLabelIcon = helper.node("span|class:label-icon");
+      var accentCustomLabelBlock = helper.node("span|class:label-block");
+      var accentCustomLabelBlockItem1 = helper.node("span:Custom accent|class:label-block-item");
+      var accentCustomLabelBlockItem2 = helper.node("span:Override the Theme Accent.|class:label-block-item small muted");
       var accentColorFormIndentWrap = helper.node("div|class:form-wrap");
       var accentColorFormIndent = helper.node("div|class:form-indent");
-      var accentColorInputWrap = helper.node("div|class:form-wrap");
+      var accentColorInputWrap = helper.node("div|class:form-wrap mb-0");
       var accentColorFormGroup = helper.node("div|class:form-group form-group-block");
       var accentColorPicker = helper.node("input|id:link-form-input-accent-picker,class:form-group-item-half link-form-input-accent-picker,type:color,value:#000000,tabindex:1,disabled");
       var accentColorHex = helper.node("input|id:link-form-input-accent-hex,class:form-group-item-half link-form-input-accent-hex,type:text,placeholder:Hex code,value:#000000,tabindex:1,maxlength:7,disabled");
-      var accentColorInputHelper = helper.node("div|class:form-helper");
-      var accentColorInputHelperItem = helper.node("p:Use this colour to override the global accent colour.|class:link-form-input-accent-helper form-helper-item disabled");
-      var linkFormAccentHslHWrap = helper.node("div|class:form-wrap");
-      var linkFormAccentHslHLabel = helper.node("label:Hue|for:link-form-input-accent-hsl-h-range,class:form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0 disabled");
-      var linkFormAccentHslHGroup = helper.node("div|class:form-group form-group-block");
-      var linkFormAccentHslHRange = helper.node("input|class:link-form-input-accent-hsl-h-range mr-3,id:link-form-input-accent-hsl-h-range,type:range,name:link-form-input-accent-hsl-h-range,value:0,min:0,max:359,tabindex:1,disabled");
-      var linkFormAccentHslHNumber = helper.node("input|class:link-form-input-accent-hsl-h-number form-group-item-medium form-group-radius-left,type:number,value:0,min:0,max:359,tabindex:1,disabled");
-      var linkFormAccentHslSWrap = helper.node("div|class:form-wrap");
-      var linkFormAccentHslSLabel = helper.node("label:Saturation|for:link-form-input-accent-hsl-s-range,class:form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0 disabled");
-      var linkFormAccentHslSGroup = helper.node("div|class:form-group form-group-block");
-      var linkFormAccentHslSRange = helper.node("input|class:link-form-input-accent-hsl-s-range mr-3,id:link-form-input-accent-hsl-s-range,type:range,name:link-form-input-accent-hsl-s-range,value:0,min:0,max:100,tabindex:1,disabled");
-      var linkFormAccentHslSNumber = helper.node("input|class:link-form-input-accent-hsl-s-number form-group-item-medium form-group-radius-left,type:number,value:0,min:0,max:100,tabindex:1,disabled");
-      var linkFormAccentHslLWrap = helper.node("div|class:form-wrap");
-      var linkFormAccentHslLLabel = helper.node("label:Lightness|for:link-form-input-accent-hsl-l-range,class:form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0 disabled");
-      var linkFormAccentHslLGroup = helper.node("div|class:form-group form-group-block");
-      var linkFormAccentHslLRange = helper.node("input|class:link-form-input-accent-hsl-l-range mr-3,id:link-form-input-accent-hsl-l-range,type:range,name:link-form-input-accent-hsl-l-range,value:0,min:0,max:100,tabindex:1,disabled");
-      var linkFormAccentHslLNumber = helper.node("input|class:link-form-input-accent-hsl-l-number form-group-item-medium form-group-radius-left,type:number,value:0,min:0,max:100,tabindex:1,disabled");
-      var linkFormAccentRgbRWrap = helper.node("div|class:form-wrap");
-      var linkFormAccentRgbRLabel = helper.node("label:Red|for:link-form-input-accent-rgb-r-range,class:form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0 disabled");
-      var linkFormAccentRgbRGroup = helper.node("div|class:form-group form-group-block");
-      var linkFormAccentRgbRRange = helper.node("input|class:link-form-input-accent-rgb-r-range mr-3,id:link-form-input-accent-rgb-r-range,type:range,name:link-form-input-accent-rgb-r-range,value:0,min:0,max:255,tabindex:1,disabled");
-      var linkFormAccentRgbRNumber = helper.node("input|class:link-form-input-accent-rgb-r-number form-group-item-medium form-group-radius-left,type:number,value:0,min:0,max:255,tabindex:1,disabled");
-      var linkFormAccentRgbGWrap = helper.node("div|class:form-wrap");
-      var linkFormAccentRgbGLabel = helper.node("label:Green|for:link-form-input-accent-rgb-g-range,class:form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0 disabled");
-      var linkFormAccentRgbGGroup = helper.node("div|class:form-group form-group-block");
-      var linkFormAccentRgbGRange = helper.node("input|class:link-form-input-accent-rgb-g-range mr-3,id:link-form-input-accent-rgb-g-range,type:range,name:link-form-input-accent-rgb-g-range,value:0,min:0,max:255,tabindex:1,disabled");
-      var linkFormAccentRgbGNumber = helper.node("input|class:link-form-input-accent-rgb-g-number form-group-item-medium form-group-radius-left,type:number,value:0,min:0,max:255,tabindex:1,disabled");
-      var linkFormAccentRgbBWrap = helper.node("div|class:form-wrap");
-      var linkFormAccentRgbBLabel = helper.node("label:Blue|for:link-form-input-accent-rgb-b-range,class:form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0 disabled");
-      var linkFormAccentRgbBGroup = helper.node("div|class:form-group form-group-block");
-      var linkFormAccentRgbBRange = helper.node("input|class:link-form-input-accent-rgb-b-range mr-3,id:link-form-input-accent-rgb-b-range,type:range,name:link-form-input-accent-rgb-b-range,value:0,min:0,max:255,tabindex:1,disabled");
-      var linkFormAccentRgbBNumber = helper.node("input|class:link-form-input-accent-rgb-b-number form-group-item-medium form-group-radius-left,type:number,value:0,min:0,max:255,tabindex:1,disabled");
+      var accentColorCollapseButton = helper.node("button|class:link-form-collapse-button button button-line,type:button,tabindex:1,disabled");
+      var accentColorCollapseButtonIcon = helper.node("span|class:link-form-collapse-button-icon icon-arrow-down");
+      var accentColorCollapse = helper.node("div|class:link-form-collapse");
+      var accentHslHWrap = helper.node("div|class:form-wrap");
+      var accentHslHLabel = helper.node("label:Hue|for:link-form-input-accent-hsl-h-range,class:form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0 disabled");
+      var accentHslHGroup = helper.node("div|class:form-group form-group-block");
+      var accentHslHRange = helper.node("input|class:link-form-input-accent-hsl-h-range mr-3,id:link-form-input-accent-hsl-h-range,type:range,name:link-form-input-accent-hsl-h-range,value:0,min:0,max:359,tabindex:1,disabled");
+      var accentHslHNumber = helper.node("input|class:link-form-input-accent-hsl-h-number form-group-item-medium form-group-radius-left,type:number,value:0,min:0,max:359,tabindex:1,disabled");
+      var accentHslSWrap = helper.node("div|class:form-wrap");
+      var accentHslSLabel = helper.node("label:Saturation|for:link-form-input-accent-hsl-s-range,class:form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0 disabled");
+      var accentHslSGroup = helper.node("div|class:form-group form-group-block");
+      var accentHslSRange = helper.node("input|class:link-form-input-accent-hsl-s-range mr-3,id:link-form-input-accent-hsl-s-range,type:range,name:link-form-input-accent-hsl-s-range,value:0,min:0,max:100,tabindex:1,disabled");
+      var accentHslSNumber = helper.node("input|class:link-form-input-accent-hsl-s-number form-group-item-medium form-group-radius-left,type:number,value:0,min:0,max:100,tabindex:1,disabled");
+      var accentHslLWrap = helper.node("div|class:form-wrap");
+      var accentHslLLabel = helper.node("label:Lightness|for:link-form-input-accent-hsl-l-range,class:form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0 disabled");
+      var accentHslLGroup = helper.node("div|class:form-group form-group-block");
+      var accentHslLRange = helper.node("input|class:link-form-input-accent-hsl-l-range mr-3,id:link-form-input-accent-hsl-l-range,type:range,name:link-form-input-accent-hsl-l-range,value:0,min:0,max:100,tabindex:1,disabled");
+      var accentHslLNumber = helper.node("input|class:link-form-input-accent-hsl-l-number form-group-item-medium form-group-radius-left,type:number,value:0,min:0,max:100,tabindex:1,disabled");
+      var accentRgbRWrap = helper.node("div|class:form-wrap");
+      var accentRgbRLabel = helper.node("label:Red|for:link-form-input-accent-rgb-r-range,class:form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0 disabled");
+      var accentRgbRGroup = helper.node("div|class:form-group form-group-block");
+      var accentRgbRRange = helper.node("input|class:link-form-input-accent-rgb-r-range mr-3,id:link-form-input-accent-rgb-r-range,type:range,name:link-form-input-accent-rgb-r-range,value:0,min:0,max:255,tabindex:1,disabled");
+      var accentRgbRNumber = helper.node("input|class:link-form-input-accent-rgb-r-number form-group-item-medium form-group-radius-left,type:number,value:0,min:0,max:255,tabindex:1,disabled");
+      var accentRgbGWrap = helper.node("div|class:form-wrap");
+      var accentRgbGLabel = helper.node("label:Green|for:link-form-input-accent-rgb-g-range,class:form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0 disabled");
+      var accentRgbGGroup = helper.node("div|class:form-group form-group-block");
+      var accentRgbGRange = helper.node("input|class:link-form-input-accent-rgb-g-range mr-3,id:link-form-input-accent-rgb-g-range,type:range,name:link-form-input-accent-rgb-g-range,value:0,min:0,max:255,tabindex:1,disabled");
+      var accentRgbGNumber = helper.node("input|class:link-form-input-accent-rgb-g-number form-group-item-medium form-group-radius-left,type:number,value:0,min:0,max:255,tabindex:1,disabled");
+      var accentRgbBWrap = helper.node("div|class:form-wrap");
+      var accentRgbBLabel = helper.node("label:Blue|for:link-form-input-accent-rgb-b-range,class:form-group-text form-group-text-left form-group-text-transparent form-group-text-borderless form-group-item-medium mr-3 pb-0 disabled");
+      var accentRgbBGroup = helper.node("div|class:form-group form-group-block");
+      var accentRgbBRange = helper.node("input|class:link-form-input-accent-rgb-b-range mr-3,id:link-form-input-accent-rgb-b-range,type:range,name:link-form-input-accent-rgb-b-range,value:0,min:0,max:255,tabindex:1,disabled");
+      var accentRgbBNumber = helper.node("input|class:link-form-input-accent-rgb-b-number form-group-item-medium form-group-radius-left,type:number,value:0,min:0,max:255,tabindex:1,disabled");
+
+      // background image
+      var imageInputWrap = helper.node("div|class:form-wrap");
+      var imageLabel = helper.node("label:Background image|for:link-form-image");
+      var imageInput = helper.node("input|type:text,class:link-form-image,id:link-form-image,placeholder:https://www.example.com/,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
+      var imageInputHelper = helper.node("div|class:form-helper");
+      var imageInputHelperItem = helper.makeNode({
+        tag: "p",
+        text: "Be sure to use the full URL and include \"http://\" or \"https://\".",
+        attr: [{
+          key: "class",
+          value: "form-helper-item"
+        }]
+      });
 
       groupExistingRadioWrap.appendChild(groupExistingRadio);
       groupExistingLable.appendChild(groupExistingLableIcon);
@@ -1072,6 +1364,18 @@ var link = (function() {
       displayIconFormIndent.appendChild(displayIconHelper);
       displayIconFormIndentWrap.appendChild(displayIconFormIndent);
       fieldset.appendChild(displayIconFormIndentWrap);
+      displayImageRadiotWrap.appendChild(displayImageRadio);
+      displayImageLable.appendChild(displayImageLableIcon);
+      displayImageLable.appendChild(displayImageLableText);
+      displayImageRadiotWrap.appendChild(displayImageLable);
+      displayImageFormIndentWrap.appendChild(displayImageFormIndent);
+      displayImageInputWrap.appendChild(displayImageInput);
+      displayImageFormIndent.appendChild(displayImageInputWrap);
+      displayImageFormIndentWrap.appendChild(displayImageFormIndent);
+      fieldset.appendChild(displayImageRadiotWrap);
+      fieldset.appendChild(displayImageFormIndentWrap);
+      displayImageHelper.appendChild(displayImageHelperItem);
+      displayImageFormIndent.appendChild(displayImageHelper);
 
       fieldset.appendChild(helper.node("hr"));
 
@@ -1086,68 +1390,152 @@ var link = (function() {
 
       fieldset.appendChild(helper.node("hr"));
 
+      colorLabelWrap.appendChild(colorLabel);
+      fieldset.appendChild(colorLabelWrap);
+      colorThemeRadioWrap.appendChild(colorThemeRadio);
+      colorThemeLabel.appendChild(colorThemeLabelIcon);
+      colorThemeLabelBlock.appendChild(colorThemeLabelBlockItem1);
+      colorThemeLabelBlock.appendChild(colorThemeLabelBlockItem2);
+      colorThemeLabel.appendChild(colorThemeLabelBlock);
+      colorThemeRadioWrap.appendChild(colorThemeLabel);
+      fieldset.appendChild(colorThemeRadioWrap);
+      colorCustomInputWrap.appendChild(colorCustomRadio);
+      colorCustomLabel.appendChild(colorCustomLabelIcon);
+      colorCustomBlock.appendChild(colorCustomBlockItem1);
+      colorCustomBlock.appendChild(colorCustomBlockItem2);
+      colorCustomLabel.appendChild(colorCustomBlock);
+      colorCustomInputWrap.appendChild(colorCustomLabel);
+      fieldset.appendChild(colorCustomInputWrap);
+      colorColorCollapseButton.appendChild(colorColorCollapseButtonIcon);
+      colorColorFormGroup.appendChild(colorColorPicker);
+      colorColorFormGroup.appendChild(colorColorHex);
+      colorColorFormGroup.appendChild(colorColorCollapseButton);
+      colorColorInputWrap.appendChild(colorColorFormGroup);
+      colorColorFormIndent.appendChild(colorColorInputWrap);
+
+      colorColorCollapse.appendChild(helper.node("hr"));
+
+      colorHslHGroup.appendChild(colorHslHLabel);
+      colorHslHGroup.appendChild(colorHslHRange);
+      colorHslHGroup.appendChild(colorHslHNumber);
+      colorHslHWrap.appendChild(colorHslHGroup);
+      colorColorCollapse.appendChild(colorHslHWrap);
+
+      colorHslSGroup.appendChild(colorHslSLabel);
+      colorHslSGroup.appendChild(colorHslSRange);
+      colorHslSGroup.appendChild(colorHslSNumber);
+      colorHslSWrap.appendChild(colorHslSGroup);
+      colorColorCollapse.appendChild(colorHslSWrap);
+
+      colorHslLGroup.appendChild(colorHslLLabel);
+      colorHslLGroup.appendChild(colorHslLRange);
+      colorHslLGroup.appendChild(colorHslLNumber);
+      colorHslLWrap.appendChild(colorHslLGroup);
+      colorColorCollapse.appendChild(colorHslLWrap);
+
+      colorColorCollapse.appendChild(helper.node("hr"));
+
+      colorRgbRGroup.appendChild(colorRgbRLabel);
+      colorRgbRGroup.appendChild(colorRgbRRange);
+      colorRgbRGroup.appendChild(colorRgbRNumber);
+      colorRgbRWrap.appendChild(colorRgbRGroup);
+      colorColorCollapse.appendChild(colorRgbRWrap);
+
+      colorRgbGGroup.appendChild(colorRgbGLabel);
+      colorRgbGGroup.appendChild(colorRgbGRange);
+      colorRgbGGroup.appendChild(colorRgbGNumber);
+      colorRgbGWrap.appendChild(colorRgbGGroup);
+      colorColorCollapse.appendChild(colorRgbGWrap);
+
+      colorRgbBGroup.appendChild(colorRgbBLabel);
+      colorRgbBGroup.appendChild(colorRgbBRange);
+      colorRgbBGroup.appendChild(colorRgbBNumber);
+      colorRgbBWrap.appendChild(colorRgbBGroup);
+      colorColorCollapse.appendChild(colorRgbBWrap);
+
+      colorColorFormIndent.appendChild(colorColorCollapse);
+
+      colorColorFormIndentWrap.appendChild(colorColorFormIndent);
+      fieldset.appendChild(colorColorFormIndentWrap);
+
+      fieldset.appendChild(helper.node("hr"));
+
       accentLabelWrap.appendChild(accentLabel);
       fieldset.appendChild(accentLabelWrap);
-      accentGlobalRadioWrap.appendChild(accentGlobalRadio);
-      accentGlobalLabel.appendChild(accentGlobalLabelIcon);
-      accentGlobalLabel.appendChild(accentGlobalLabelText);
-      accentGlobalRadioWrap.appendChild(accentGlobalLabel);
-      fieldset.appendChild(accentGlobalRadioWrap);
+      accentThemeRadioWrap.appendChild(accentThemeRadio);
+      accentThemeLabel.appendChild(accentThemeLabelIcon);
+      accentThemeLabelBlock.appendChild(accentThemeLabelBlockItem1);
+      accentThemeLabelBlock.appendChild(accentThemeLabelBlockItem2);
+      accentThemeLabel.appendChild(accentThemeLabelBlock);
+      accentThemeRadioWrap.appendChild(accentThemeLabel);
+      fieldset.appendChild(accentThemeRadioWrap);
       accentCustomInputWrap.appendChild(accentCustomRadio);
       accentCustomLabel.appendChild(accentCustomLabelIcon);
-      accentCustomLabel.appendChild(accentCustomLabelText);
+      accentCustomLabelBlock.appendChild(accentCustomLabelBlockItem1);
+      accentCustomLabelBlock.appendChild(accentCustomLabelBlockItem2);
+      accentCustomLabel.appendChild(accentCustomLabelBlock);
       accentCustomInputWrap.appendChild(accentCustomLabel);
       fieldset.appendChild(accentCustomInputWrap);
+      accentColorCollapseButton.appendChild(accentColorCollapseButtonIcon)
       accentColorFormGroup.appendChild(accentColorPicker);
       accentColorFormGroup.appendChild(accentColorHex);
+      accentColorFormGroup.appendChild(accentColorCollapseButton);
       accentColorInputWrap.appendChild(accentColorFormGroup);
       accentColorFormIndent.appendChild(accentColorInputWrap);
-      accentColorInputHelper.appendChild(accentColorInputHelperItem);
-      accentColorFormIndent.appendChild(accentColorInputHelper);
 
-      accentColorFormIndent.appendChild(helper.node("hr"));
+      accentColorCollapse.appendChild(helper.node("hr"));
 
-      linkFormAccentHslHGroup.appendChild(linkFormAccentHslHLabel);
-      linkFormAccentHslHGroup.appendChild(linkFormAccentHslHRange);
-      linkFormAccentHslHGroup.appendChild(linkFormAccentHslHNumber);
-      linkFormAccentHslHWrap.appendChild(linkFormAccentHslHGroup);
-      accentColorFormIndent.appendChild(linkFormAccentHslHWrap);
+      accentHslHGroup.appendChild(accentHslHLabel);
+      accentHslHGroup.appendChild(accentHslHRange);
+      accentHslHGroup.appendChild(accentHslHNumber);
+      accentHslHWrap.appendChild(accentHslHGroup);
+      accentColorCollapse.appendChild(accentHslHWrap);
 
-      linkFormAccentHslSGroup.appendChild(linkFormAccentHslSLabel);
-      linkFormAccentHslSGroup.appendChild(linkFormAccentHslSRange);
-      linkFormAccentHslSGroup.appendChild(linkFormAccentHslSNumber);
-      linkFormAccentHslSWrap.appendChild(linkFormAccentHslSGroup);
-      accentColorFormIndent.appendChild(linkFormAccentHslSWrap);
+      accentHslSGroup.appendChild(accentHslSLabel);
+      accentHslSGroup.appendChild(accentHslSRange);
+      accentHslSGroup.appendChild(accentHslSNumber);
+      accentHslSWrap.appendChild(accentHslSGroup);
+      accentColorCollapse.appendChild(accentHslSWrap);
 
-      linkFormAccentHslLGroup.appendChild(linkFormAccentHslLLabel);
-      linkFormAccentHslLGroup.appendChild(linkFormAccentHslLRange);
-      linkFormAccentHslLGroup.appendChild(linkFormAccentHslLNumber);
-      linkFormAccentHslLWrap.appendChild(linkFormAccentHslLGroup);
-      accentColorFormIndent.appendChild(linkFormAccentHslLWrap);
+      accentHslLGroup.appendChild(accentHslLLabel);
+      accentHslLGroup.appendChild(accentHslLRange);
+      accentHslLGroup.appendChild(accentHslLNumber);
+      accentHslLWrap.appendChild(accentHslLGroup);
+      accentColorCollapse.appendChild(accentHslLWrap);
 
-      accentColorFormIndent.appendChild(helper.node("hr"));
+      accentColorCollapse.appendChild(helper.node("hr"));
 
-      linkFormAccentRgbRGroup.appendChild(linkFormAccentRgbRLabel);
-      linkFormAccentRgbRGroup.appendChild(linkFormAccentRgbRRange);
-      linkFormAccentRgbRGroup.appendChild(linkFormAccentRgbRNumber);
-      linkFormAccentRgbRWrap.appendChild(linkFormAccentRgbRGroup);
-      accentColorFormIndent.appendChild(linkFormAccentRgbRWrap);
+      accentRgbRGroup.appendChild(accentRgbRLabel);
+      accentRgbRGroup.appendChild(accentRgbRRange);
+      accentRgbRGroup.appendChild(accentRgbRNumber);
+      accentRgbRWrap.appendChild(accentRgbRGroup);
+      accentColorCollapse.appendChild(accentRgbRWrap);
 
-      linkFormAccentRgbGGroup.appendChild(linkFormAccentRgbGLabel);
-      linkFormAccentRgbGGroup.appendChild(linkFormAccentRgbGRange);
-      linkFormAccentRgbGGroup.appendChild(linkFormAccentRgbGNumber);
-      linkFormAccentRgbGWrap.appendChild(linkFormAccentRgbGGroup);
-      accentColorFormIndent.appendChild(linkFormAccentRgbGWrap);
+      accentRgbGGroup.appendChild(accentRgbGLabel);
+      accentRgbGGroup.appendChild(accentRgbGRange);
+      accentRgbGGroup.appendChild(accentRgbGNumber);
+      accentRgbGWrap.appendChild(accentRgbGGroup);
+      accentColorCollapse.appendChild(accentRgbGWrap);
 
-      linkFormAccentRgbBGroup.appendChild(linkFormAccentRgbBLabel);
-      linkFormAccentRgbBGroup.appendChild(linkFormAccentRgbBRange);
-      linkFormAccentRgbBGroup.appendChild(linkFormAccentRgbBNumber);
-      linkFormAccentRgbBWrap.appendChild(linkFormAccentRgbBGroup);
-      accentColorFormIndent.appendChild(linkFormAccentRgbBWrap);
+      accentRgbBGroup.appendChild(accentRgbBLabel);
+      accentRgbBGroup.appendChild(accentRgbBRange);
+      accentRgbBGroup.appendChild(accentRgbBNumber);
+      accentRgbBWrap.appendChild(accentRgbBGroup);
+      accentColorCollapse.appendChild(accentRgbBWrap);
+
+      accentColorFormIndent.appendChild(accentColorCollapse);
 
       accentColorFormIndentWrap.appendChild(accentColorFormIndent);
       fieldset.appendChild(accentColorFormIndentWrap);
 
+      fieldset.appendChild(helper.node("hr"));
+
+      imageInputWrap.appendChild(imageLabel);
+      imageInputWrap.appendChild(imageInput);
+      fieldset.appendChild(imageInputWrap);
+      imageInputHelper.appendChild(imageInputHelperItem);
+      fieldset.appendChild(imageInputHelper);
+
       form.appendChild(fieldset);
 
       var makeGroupOptions = function() {
@@ -1208,7 +1596,10 @@ var link = (function() {
       var populateForm = function() {
         groupExistingGroup.selectedIndex = stagedLink.position.origin.group;
         groupExistingPosition.selectedIndex = stagedLink.position.origin.item;
-        if (stagedLink.link.display == "letter") {
+        if (stagedLink.link.visual.display == "letter") {
+          displayLetterRadio.checked = true;
+          displayIconRadio.checked = false;
+          displayImageRadio.checked = false;
           displayLetterInput.removeAttribute("disabled");
           displayIconInput.setAttribute("disabled", "");
           helper.addClass(displayIconFormGroupText, "disabled");
@@ -1216,164 +1607,179 @@ var link = (function() {
           helper.addClass(displayIconHelper, "disabled");
           displayIconFormGroupClear.setAttribute("disabled", "");
           displayIconFormGroupText.tabIndex = -1;
-        } else if (stagedLink.link.display == "icon") {
+          displayImageInput.setAttribute("disabled", "");
+          helper.addClass(displayImageHelperItem, "disabled");
+        } else if (stagedLink.link.visual.display == "icon") {
+          displayLetterRadio.checked = false;
+          displayIconRadio.checked = true;
+          displayImageRadio.checked = false;
           displayLetterInput.setAttribute("disabled", "");
           displayIconInput.removeAttribute("disabled");
           helper.removeClass(displayIconFormGroupText, "disabled");
           displayIconInput.removeAttribute("disabled");
           helper.removeClass(displayIconHelper, "disabled");
           displayIconFormGroupClear.removeAttribute("disabled");
-          displayIconRadio.checked = true;
           displayIconFormGroupText.tabIndex = 1;
+          displayImageInput.setAttribute("disabled", "");
+          helper.addClass(displayImageHelperItem, "disabled");
+        } else if (stagedLink.link.visual.display == "image") {
+          displayLetterRadio.checked = false;
+          displayIconRadio.checked = false;
+          displayImageRadio.checked = true;
+          displayLetterInput.setAttribute("disabled", "");
+          displayIconInput.setAttribute("disabled", "");
+          displayImageInput.setAttribute("disabled", "");
+          helper.addClass(displayIconFormGroupText, "disabled");
+          helper.addClass(displayIconHelperItem, "disabled");
+          displayIconFormGroupClear.setAttribute("disabled", "");
+          displayIconFormGroupText.tabIndex = -1;
+          displayImageInput.removeAttribute("disabled");
+          helper.removeClass(displayImageHelperItem, "disabled");
         };
-        if (stagedLink.link.icon.name != null && stagedLink.link.icon.prefix != null && stagedLink.link.icon.label != null) {
-          displayIconFormGroupText.appendChild(helper.node("span|class:link-form-icon " + stagedLink.link.icon.prefix + " fa-" + stagedLink.link.icon.name));
+        if (stagedLink.link.visual.icon.name != null && stagedLink.link.visual.icon.prefix != null && stagedLink.link.visual.icon.label != null) {
+          displayIconFormGroupText.appendChild(helper.node("span|class:link-form-icon " + stagedLink.link.visual.icon.prefix + " fa-" + stagedLink.link.visual.icon.name));
         };
-        displayLetterInput.value = stagedLink.link.letter;
-        displayIconInput.value = stagedLink.link.icon.label;
+        displayLetterInput.value = stagedLink.link.visual.letter;
+        displayIconInput.value = stagedLink.link.visual.icon.label;
+        displayImageInput.value = stagedLink.link.visual.image;
         nameInput.value = stagedLink.link.name;
         urlInput.value = stagedLink.link.url;
-        if (stagedLink.link.accent.override) {
-          accentGlobalRadio.checked = false;
+        if (stagedLink.link.color.by == "custom") {
+          colorThemeRadio.checked = false;
+          colorCustomRadio.checked = true;
+          colorColorPicker.removeAttribute("disabled");
+          colorColorHex.removeAttribute("disabled");
+          colorColorCollapseButton.removeAttribute("disabled");
+          helper.removeClass(colorHslHLabel, "disabled");
+          colorHslHRange.removeAttribute("disabled");
+          colorHslHNumber.removeAttribute("disabled");
+          helper.removeClass(colorHslSLabel, "disabled");
+          colorHslSRange.removeAttribute("disabled");
+          colorHslSNumber.removeAttribute("disabled");
+          helper.removeClass(colorHslLLabel, "disabled");
+          colorHslLRange.removeAttribute("disabled");
+          colorHslLNumber.removeAttribute("disabled");
+          helper.removeClass(colorRgbRLabel, "disabled");
+          colorRgbRRange.removeAttribute("disabled");
+          colorRgbRNumber.removeAttribute("disabled");
+          helper.removeClass(colorRgbGLabel, "disabled");
+          colorRgbGRange.removeAttribute("disabled");
+          colorRgbGNumber.removeAttribute("disabled");
+          helper.removeClass(colorRgbBLabel, "disabled");
+          colorRgbBRange.removeAttribute("disabled");
+          colorRgbBNumber.removeAttribute("disabled");
+        } else {
+          colorThemeRadio.checked = true;
+          colorCustomRadio.checked = false;
+          colorColorPicker.setAttribute("disabled", "");
+          colorColorHex.setAttribute("disabled", "");
+          colorColorCollapseButton.setAttribute("disabled", "");
+          helper.addClass(colorHslHLabel, "disabled", "");
+          colorHslHRange.setAttribute("disabled", "");
+          colorHslHNumber.setAttribute("disabled", "");
+          helper.addClass(colorHslSLabel, "disabled", "");
+          colorHslSRange.setAttribute("disabled", "");
+          colorHslSNumber.setAttribute("disabled", "");
+          helper.addClass(colorHslLLabel, "disabled", "");
+          colorHslLRange.setAttribute("disabled", "");
+          colorHslLNumber.setAttribute("disabled", "");
+          helper.addClass(colorRgbRLabel, "disabled", "");
+          colorRgbRRange.setAttribute("disabled", "");
+          colorRgbRNumber.setAttribute("disabled", "");
+          helper.addClass(colorRgbGLabel, "disabled", "");
+          colorRgbGRange.setAttribute("disabled", "");
+          colorRgbGNumber.setAttribute("disabled", "");
+          helper.addClass(colorRgbBLabel, "disabled", "");
+          colorRgbBRange.setAttribute("disabled", "");
+          colorRgbBNumber.setAttribute("disabled", "");
+        };
+        if (stagedLink.link.color.rgb.r != null && stagedLink.link.color.rgb.g != null && stagedLink.link.color.rgb.b != null) {
+          colorColorPicker.value = helper.convertColor.rgb.hex(stagedLink.link.color.rgb);
+          colorColorHex.value = helper.convertColor.rgb.hex(stagedLink.link.color.rgb);
+          colorHslHRange.value = stagedLink.link.color.hsl.h;
+          colorHslHNumber.value = stagedLink.link.color.hsl.h;
+          colorHslSRange.value = stagedLink.link.color.hsl.s;
+          colorHslSNumber.value = stagedLink.link.color.hsl.s;
+          colorHslLRange.value = stagedLink.link.color.hsl.l;
+          colorHslLNumber.value = stagedLink.link.color.hsl.l;
+          colorRgbRRange.value = stagedLink.link.color.rgb.r;
+          colorRgbRNumber.value = stagedLink.link.color.rgb.r;
+          colorRgbGRange.value = stagedLink.link.color.rgb.g;
+          colorRgbGNumber.value = stagedLink.link.color.rgb.g;
+          colorRgbBRange.value = stagedLink.link.color.rgb.b;
+          colorRgbBNumber.value = stagedLink.link.color.rgb.b;
+        };
+        if (stagedLink.link.accent.by == "custom") {
+          accentThemeRadio.checked = false;
           accentCustomRadio.checked = true;
           accentColorPicker.removeAttribute("disabled");
           accentColorHex.removeAttribute("disabled");
-          helper.removeClass(accentColorInputHelperItem, "disabled");
-          helper.removeClass(linkFormAccentHslHLabel, "disabled");
-          linkFormAccentHslHRange.removeAttribute("disabled");
-          linkFormAccentHslHNumber.removeAttribute("disabled");
-          helper.removeClass(linkFormAccentHslSLabel, "disabled");
-          linkFormAccentHslSRange.removeAttribute("disabled");
-          linkFormAccentHslSNumber.removeAttribute("disabled");
-          helper.removeClass(linkFormAccentHslLLabel, "disabled");
-          linkFormAccentHslLRange.removeAttribute("disabled");
-          linkFormAccentHslLNumber.removeAttribute("disabled");
-          helper.removeClass(linkFormAccentRgbRLabel, "disabled");
-          linkFormAccentRgbRRange.removeAttribute("disabled");
-          linkFormAccentRgbRNumber.removeAttribute("disabled");
-          helper.removeClass(linkFormAccentRgbGLabel, "disabled");
-          linkFormAccentRgbGRange.removeAttribute("disabled");
-          linkFormAccentRgbGNumber.removeAttribute("disabled");
-          helper.removeClass(linkFormAccentRgbBLabel, "disabled");
-          linkFormAccentRgbBRange.removeAttribute("disabled");
-          linkFormAccentRgbBNumber.removeAttribute("disabled");
+          accentColorCollapseButton.removeAttribute("disabled");
+          helper.removeClass(accentHslHLabel, "disabled");
+          accentHslHRange.removeAttribute("disabled");
+          accentHslHNumber.removeAttribute("disabled");
+          helper.removeClass(accentHslSLabel, "disabled");
+          accentHslSRange.removeAttribute("disabled");
+          accentHslSNumber.removeAttribute("disabled");
+          helper.removeClass(accentHslLLabel, "disabled");
+          accentHslLRange.removeAttribute("disabled");
+          accentHslLNumber.removeAttribute("disabled");
+          helper.removeClass(accentRgbRLabel, "disabled");
+          accentRgbRRange.removeAttribute("disabled");
+          accentRgbRNumber.removeAttribute("disabled");
+          helper.removeClass(accentRgbGLabel, "disabled");
+          accentRgbGRange.removeAttribute("disabled");
+          accentRgbGNumber.removeAttribute("disabled");
+          helper.removeClass(accentRgbBLabel, "disabled");
+          accentRgbBRange.removeAttribute("disabled");
+          accentRgbBNumber.removeAttribute("disabled");
         } else {
-          accentGlobalRadio.checked = true;
+          accentThemeRadio.checked = true;
           accentCustomRadio.checked = false;
           accentColorPicker.setAttribute("disabled", "");
           accentColorHex.setAttribute("disabled", "");
-          helper.addClass(accentColorInputHelperItem, "disabled");
-          helper.addClass(linkFormAccentHslHLabel, "disabled", "");
-          linkFormAccentHslHRange.setAttribute("disabled", "");
-          linkFormAccentHslHNumber.setAttribute("disabled", "");
-          helper.addClass(linkFormAccentHslSLabel, "disabled", "");
-          linkFormAccentHslSRange.setAttribute("disabled", "");
-          linkFormAccentHslSNumber.setAttribute("disabled", "");
-          helper.addClass(linkFormAccentHslLLabel, "disabled", "");
-          linkFormAccentHslLRange.setAttribute("disabled", "");
-          linkFormAccentHslLNumber.setAttribute("disabled", "");
-          helper.addClass(linkFormAccentRgbRLabel, "disabled", "");
-          linkFormAccentRgbRRange.setAttribute("disabled", "");
-          linkFormAccentRgbRNumber.setAttribute("disabled", "");
-          helper.addClass(linkFormAccentRgbGLabel, "disabled", "");
-          linkFormAccentRgbGRange.setAttribute("disabled", "");
-          linkFormAccentRgbGNumber.setAttribute("disabled", "");
-          helper.addClass(linkFormAccentRgbBLabel, "disabled", "");
-          linkFormAccentRgbBRange.setAttribute("disabled", "");
-          linkFormAccentRgbBNumber.setAttribute("disabled", "");
+          accentColorCollapseButton.setAttribute("disabled", "");
+          helper.addClass(accentHslHLabel, "disabled", "");
+          accentHslHRange.setAttribute("disabled", "");
+          accentHslHNumber.setAttribute("disabled", "");
+          helper.addClass(accentHslSLabel, "disabled", "");
+          accentHslSRange.setAttribute("disabled", "");
+          accentHslSNumber.setAttribute("disabled", "");
+          helper.addClass(accentHslLLabel, "disabled", "");
+          accentHslLRange.setAttribute("disabled", "");
+          accentHslLNumber.setAttribute("disabled", "");
+          helper.addClass(accentRgbRLabel, "disabled", "");
+          accentRgbRRange.setAttribute("disabled", "");
+          accentRgbRNumber.setAttribute("disabled", "");
+          helper.addClass(accentRgbGLabel, "disabled", "");
+          accentRgbGRange.setAttribute("disabled", "");
+          accentRgbGNumber.setAttribute("disabled", "");
+          helper.addClass(accentRgbBLabel, "disabled", "");
+          accentRgbBRange.setAttribute("disabled", "");
+          accentRgbBNumber.setAttribute("disabled", "");
         };
-        if (stagedLink.link.accent.color.rgb.r != null && stagedLink.link.accent.color.rgb.g != null && stagedLink.link.accent.color.rgb.b != null) {
-          accentColorPicker.value = helper.convertColor.rgb.hex(stagedLink.link.accent.color.rgb);
-          accentColorHex.value = helper.convertColor.rgb.hex(stagedLink.link.accent.color.rgb);
-          linkFormAccentHslHRange.value = stagedLink.link.accent.color.hsl.h;
-          linkFormAccentHslHNumber.value = stagedLink.link.accent.color.hsl.h;
-          linkFormAccentHslSRange.value = stagedLink.link.accent.color.hsl.s;
-          linkFormAccentHslSNumber.value = stagedLink.link.accent.color.hsl.s;
-          linkFormAccentHslLRange.value = stagedLink.link.accent.color.hsl.l;
-          linkFormAccentHslLNumber.value = stagedLink.link.accent.color.hsl.l;
-          linkFormAccentRgbRRange.value = stagedLink.link.accent.color.rgb.r;
-          linkFormAccentRgbRNumber.value = stagedLink.link.accent.color.rgb.r;
-          linkFormAccentRgbGRange.value = stagedLink.link.accent.color.rgb.g;
-          linkFormAccentRgbGNumber.value = stagedLink.link.accent.color.rgb.g;
-          linkFormAccentRgbBRange.value = stagedLink.link.accent.color.rgb.b;
-          linkFormAccentRgbBNumber.value = stagedLink.link.accent.color.rgb.b;
+        if (stagedLink.link.accent.rgb.r != null && stagedLink.link.accent.rgb.g != null && stagedLink.link.accent.rgb.b != null) {
+          accentColorPicker.value = helper.convertColor.rgb.hex(stagedLink.link.accent.rgb);
+          accentColorHex.value = helper.convertColor.rgb.hex(stagedLink.link.accent.rgb);
+          accentHslHRange.value = stagedLink.link.accent.hsl.h;
+          accentHslHNumber.value = stagedLink.link.accent.hsl.h;
+          accentHslSRange.value = stagedLink.link.accent.hsl.s;
+          accentHslSNumber.value = stagedLink.link.accent.hsl.s;
+          accentHslLRange.value = stagedLink.link.accent.hsl.l;
+          accentHslLNumber.value = stagedLink.link.accent.hsl.l;
+          accentRgbRRange.value = stagedLink.link.accent.rgb.r;
+          accentRgbRNumber.value = stagedLink.link.accent.rgb.r;
+          accentRgbGRange.value = stagedLink.link.accent.rgb.g;
+          accentRgbGNumber.value = stagedLink.link.accent.rgb.g;
+          accentRgbBRange.value = stagedLink.link.accent.rgb.b;
+          accentRgbBNumber.value = stagedLink.link.accent.rgb.b;
         };
+        imageInput.value = stagedLink.link.image;
       };
 
-      var updateAccent = {
+      var mirror = {
         delay: null,
-        inputs: function(input) {
-          var rgb = stagedLink.link.accent.color.rgb;
-          var hsl = stagedLink.link.accent.color.hsl;
-          var hex = helper.convertColor.rgb.hex(rgb);
-          if (input != accentColorPicker) {
-            accentColorPicker.value = hex;
-          };
-          if (input != accentColorHex) {
-            accentColorHex.value = hex;
-          };
-          if (input != linkFormAccentHslHRange) {
-            linkFormAccentHslHRange.value = stagedLink.link.accent.color.hsl.h;
-          };
-          if (input != linkFormAccentHslHNumber) {
-            linkFormAccentHslHNumber.value = stagedLink.link.accent.color.hsl.h;
-          };
-          if (input != linkFormAccentHslSRange) {
-            linkFormAccentHslSRange.value = stagedLink.link.accent.color.hsl.s;
-          };
-          if (input != linkFormAccentHslSNumber) {
-            linkFormAccentHslSNumber.value = stagedLink.link.accent.color.hsl.s;
-          };
-          if (input != linkFormAccentHslLRange) {
-            linkFormAccentHslLRange.value = stagedLink.link.accent.color.hsl.l;
-          };
-          if (input != linkFormAccentHslLNumber) {
-            linkFormAccentHslLNumber.value = stagedLink.link.accent.color.hsl.l;
-          };
-          if (input != linkFormAccentRgbRRange) {
-            linkFormAccentRgbRRange.value = stagedLink.link.accent.color.rgb.r;
-          };
-          if (input != linkFormAccentRgbRNumber) {
-            linkFormAccentRgbRNumber.value = stagedLink.link.accent.color.rgb.r;
-          };
-          if (input != linkFormAccentRgbGRange) {
-            linkFormAccentRgbGRange.value = stagedLink.link.accent.color.rgb.g;
-          };
-          if (input != linkFormAccentRgbGNumber) {
-            linkFormAccentRgbGNumber.value = stagedLink.link.accent.color.rgb.g;
-          };
-          if (input != linkFormAccentRgbBRange) {
-            linkFormAccentRgbBRange.value = stagedLink.link.accent.color.rgb.b;
-          };
-          if (input != linkFormAccentRgbBNumber) {
-            linkFormAccentRgbBNumber.value = stagedLink.link.accent.color.rgb.b;
-          };
-        },
-        by: {
-          hsl: function() {
-            stagedLink.link.accent.color.rgb = helper.convertColor.hsl.rgb(stagedLink.link.accent.color.hsl);
-            stagedLink.link.accent.color.rgb.r = Math.round(stagedLink.link.accent.color.rgb.r);
-            stagedLink.link.accent.color.rgb.g = Math.round(stagedLink.link.accent.color.rgb.g);
-            stagedLink.link.accent.color.rgb.b = Math.round(stagedLink.link.accent.color.rgb.b);
-          },
-          rgb: function() {
-            stagedLink.link.accent.color.hsl = helper.convertColor.rgb.hsl(stagedLink.link.accent.color.rgb);
-            stagedLink.link.accent.color.hsl.h = Math.round(stagedLink.link.accent.color.hsl.h);
-            stagedLink.link.accent.color.hsl.s = Math.round(stagedLink.link.accent.color.hsl.s);
-            stagedLink.link.accent.color.hsl.l = Math.round(stagedLink.link.accent.color.hsl.l);
-          },
-          hex: function(value) {
-            stagedLink.link.accent.color.rgb = helper.convertColor.hex.rgb(value);
-            stagedLink.link.accent.color.rgb.r = Math.round(stagedLink.link.accent.color.rgb.r);
-            stagedLink.link.accent.color.rgb.g = Math.round(stagedLink.link.accent.color.rgb.g);
-            stagedLink.link.accent.color.rgb.b = Math.round(stagedLink.link.accent.color.rgb.b);
-            stagedLink.link.accent.color.hsl = helper.convertColor.rgb.hsl(stagedLink.link.accent.color.rgb);
-            stagedLink.link.accent.color.hsl.h = Math.round(stagedLink.link.accent.color.hsl.h);
-            stagedLink.link.accent.color.hsl.s = Math.round(stagedLink.link.accent.color.hsl.s);
-            stagedLink.link.accent.color.hsl.l = Math.round(stagedLink.link.accent.color.hsl.l);
-          }
-        },
-        number: function(input) {
+        minMax: function(input) {
           var value = parseInt(input.value, 10);
           var min = parseInt(input.min, 10);
           var max = parseInt(input.max, 10);
@@ -1383,13 +1789,207 @@ var link = (function() {
           if (value > max) {
             value = max;
           };
+          if (isNaN(value)) {
+            value = 0;
+          };
           return value;
         },
-        delay: null
+        data: {
+          accent: {
+            by: {
+              hsl: function() {
+                stagedLink.link.accent.rgb = helper.convertColor.hsl.rgb(stagedLink.link.accent.hsl);
+                stagedLink.link.accent.rgb.r = Math.round(stagedLink.link.accent.rgb.r);
+                stagedLink.link.accent.rgb.g = Math.round(stagedLink.link.accent.rgb.g);
+                stagedLink.link.accent.rgb.b = Math.round(stagedLink.link.accent.rgb.b);
+              },
+              rgb: function() {
+                stagedLink.link.accent.hsl = helper.convertColor.rgb.hsl(stagedLink.link.accent.rgb);
+                stagedLink.link.accent.hsl.h = Math.round(stagedLink.link.accent.hsl.h);
+                stagedLink.link.accent.hsl.s = Math.round(stagedLink.link.accent.hsl.s);
+                stagedLink.link.accent.hsl.l = Math.round(stagedLink.link.accent.hsl.l);
+              },
+              hex: function(value) {
+                stagedLink.link.accent.rgb = helper.convertColor.hex.rgb(value);
+                stagedLink.link.accent.rgb.r = Math.round(stagedLink.link.accent.rgb.r);
+                stagedLink.link.accent.rgb.g = Math.round(stagedLink.link.accent.rgb.g);
+                stagedLink.link.accent.rgb.b = Math.round(stagedLink.link.accent.rgb.b);
+                stagedLink.link.accent.hsl = helper.convertColor.rgb.hsl(stagedLink.link.accent.rgb);
+                stagedLink.link.accent.hsl.h = Math.round(stagedLink.link.accent.hsl.h);
+                stagedLink.link.accent.hsl.s = Math.round(stagedLink.link.accent.hsl.s);
+                stagedLink.link.accent.hsl.l = Math.round(stagedLink.link.accent.hsl.l);
+              }
+            }
+          },
+          color: {
+            by: {
+              hsl: function() {
+                stagedLink.link.color.rgb = helper.convertColor.hsl.rgb(stagedLink.link.color.hsl);
+                stagedLink.link.color.rgb.r = Math.round(stagedLink.link.color.rgb.r);
+                stagedLink.link.color.rgb.g = Math.round(stagedLink.link.color.rgb.g);
+                stagedLink.link.color.rgb.b = Math.round(stagedLink.link.color.rgb.b);
+              },
+              rgb: function() {
+                stagedLink.link.color.hsl = helper.convertColor.rgb.hsl(stagedLink.link.color.rgb);
+                stagedLink.link.color.hsl.h = Math.round(stagedLink.link.color.hsl.h);
+                stagedLink.link.color.hsl.s = Math.round(stagedLink.link.color.hsl.s);
+                stagedLink.link.color.hsl.l = Math.round(stagedLink.link.color.hsl.l);
+              },
+              hex: function(value) {
+                stagedLink.link.color.rgb = helper.convertColor.hex.rgb(value);
+                stagedLink.link.color.rgb.r = Math.round(stagedLink.link.color.rgb.r);
+                stagedLink.link.color.rgb.g = Math.round(stagedLink.link.color.rgb.g);
+                stagedLink.link.color.rgb.b = Math.round(stagedLink.link.color.rgb.b);
+                stagedLink.link.color.hsl = helper.convertColor.rgb.hsl(stagedLink.link.color.rgb);
+                stagedLink.link.color.hsl.h = Math.round(stagedLink.link.color.hsl.h);
+                stagedLink.link.color.hsl.s = Math.round(stagedLink.link.color.hsl.s);
+                stagedLink.link.color.hsl.l = Math.round(stagedLink.link.color.hsl.l);
+              }
+            }
+          }
+        },
+        inputs: {
+          accent: function() {
+            return [{
+              element: accentColorPicker,
+              value: stagedLink.link.accent.rgb
+            }, {
+              element: accentColorHex,
+              value: stagedLink.link.accent.rgb
+            }, {
+              element: accentHslHRange,
+              value: stagedLink.link.accent.hsl.h
+            }, {
+              element: accentHslHNumber,
+              value: stagedLink.link.accent.hsl.h
+            }, {
+              element: accentHslSRange,
+              value: stagedLink.link.accent.hsl.s
+            }, {
+              element: accentHslSNumber,
+              value: stagedLink.link.accent.hsl.s
+            }, {
+              element: accentHslLRange,
+              value: stagedLink.link.accent.hsl.l
+            }, {
+              element: accentHslLNumber,
+              value: stagedLink.link.accent.hsl.l
+            }, {
+              element: accentRgbRRange,
+              value: stagedLink.link.accent.rgb.r
+            }, {
+              element: accentRgbRNumber,
+              value: stagedLink.link.accent.rgb.r
+            }, {
+              element: accentRgbGRange,
+              value: stagedLink.link.accent.rgb.g
+            }, {
+              element: accentRgbGNumber,
+              value: stagedLink.link.accent.rgb.g
+            }, {
+              element: accentRgbBRange,
+              value: stagedLink.link.accent.rgb.b
+            }, {
+              element: accentRgbBNumber,
+              value: stagedLink.link.accent.rgb.b
+            }]
+          },
+          color: function() {
+            return [{
+              element: colorColorPicker,
+              value: stagedLink.link.color.rgb
+            }, {
+              element: colorColorHex,
+              value: stagedLink.link.color.rgb
+            }, {
+              element: colorHslHRange,
+              value: stagedLink.link.color.hsl.h
+            }, {
+              element: colorHslHNumber,
+              value: stagedLink.link.color.hsl.h
+            }, {
+              element: colorHslSRange,
+              value: stagedLink.link.color.hsl.s
+            }, {
+              element: colorHslSNumber,
+              value: stagedLink.link.color.hsl.s
+            }, {
+              element: colorHslLRange,
+              value: stagedLink.link.color.hsl.l
+            }, {
+              element: colorHslLNumber,
+              value: stagedLink.link.color.hsl.l
+            }, {
+              element: colorRgbRRange,
+              value: stagedLink.link.color.rgb.r
+            }, {
+              element: colorRgbRNumber,
+              value: stagedLink.link.color.rgb.r
+            }, {
+              element: colorRgbGRange,
+              value: stagedLink.link.color.rgb.g
+            }, {
+              element: colorRgbGNumber,
+              value: stagedLink.link.color.rgb.g
+            }, {
+              element: colorRgbBRange,
+              value: stagedLink.link.color.rgb.b
+            }, {
+              element: colorRgbBNumber,
+              value: stagedLink.link.color.rgb.b
+            }]
+          }
+        },
+        value: function(origin, targets) {
+          targets.forEach(function(arrayItem, index) {
+            if (arrayItem != origin) {
+              switch (arrayItem.element.type) {
+                case "color":
+                  arrayItem.element.value = helper.convertColor.rgb.hex(arrayItem.value);
+                  break;
+
+                case "text":
+                  arrayItem.element.value = helper.convertColor.rgb.hex(arrayItem.value);
+                  break;
+
+                case "number":
+                  arrayItem.element.value = arrayItem.value;
+                  break;
+
+                case "range":
+                  arrayItem.element.value = arrayItem.value;
+                  break;
+              };
+            };
+          });
+        }
+      };
+
+      var collapse = {
+        color: function() {
+          if (mod.collapse.form.item.color) {
+            helper.addClass(colorColorCollapse, "active");
+            helper.addClass(colorColorCollapseButton, "active");
+          } else {
+            helper.removeClass(colorColorCollapse, "active");
+            helper.removeClass(colorColorCollapseButton, "active");
+          };
+        },
+        accent: function() {
+          if (mod.collapse.form.item.accent) {
+            helper.addClass(accentColorCollapse, "active");
+            helper.addClass(accentColorCollapseButton, "active");
+          } else {
+            helper.removeClass(accentColorCollapse, "active");
+            helper.removeClass(accentColorCollapseButton, "active");
+          };
+        }
       };
 
       makeGroupOptions();
+
       makePostionOptions();
+
       if (options.useStagedLink) {
         populateForm();
       };
@@ -1441,201 +2041,403 @@ var link = (function() {
         groupNewInput.value = randomName;
       }, false);
       displayLetterRadio.addEventListener("change", function(event) {
-        stagedLink.link.display = this.value;
+        stagedLink.link.visual.display = this.value;
         displayLetterInput.removeAttribute("disabled");
         displayIconInput.setAttribute("disabled", "");
+        displayImageInput.setAttribute("disabled", "");
         helper.addClass(displayIconFormGroupText, "disabled");
         helper.addClass(displayIconHelperItem, "disabled");
         displayIconFormGroupClear.setAttribute("disabled", "");
         displayIconFormGroupText.tabIndex = -1;
+        displayImageInput.setAttribute("disabled", "");
+        helper.addClass(displayImageHelperItem, "disabled");
       }, false);
       displayIconRadio.addEventListener("change", function(event) {
-        stagedLink.link.display = this.value;
+        stagedLink.link.visual.display = this.value;
         displayLetterInput.setAttribute("disabled", "");
         displayIconInput.removeAttribute("disabled");
+        displayImageInput.setAttribute("disabled", "");
         helper.removeClass(displayIconFormGroupText, "disabled");
         helper.removeClass(displayIconHelperItem, "disabled");
         displayIconFormGroupClear.removeAttribute("disabled");
         displayIconFormGroupText.tabIndex = 1;
+        displayImageInput.setAttribute("disabled", "");
+        helper.addClass(displayImageHelperItem, "disabled");
+      }, false);
+      displayImageRadio.addEventListener("change", function(event) {
+        stagedLink.link.visual.display = this.value;
+        displayLetterInput.setAttribute("disabled", "");
+        displayIconInput.setAttribute("disabled", "");
+        displayImageInput.setAttribute("disabled", "");
+        helper.addClass(displayIconFormGroupText, "disabled");
+        helper.addClass(displayIconHelperItem, "disabled");
+        displayIconFormGroupClear.setAttribute("disabled", "");
+        displayIconFormGroupText.tabIndex = -1;
+        displayImageInput.removeAttribute("disabled");
+        helper.removeClass(displayImageHelperItem, "disabled");
       }, false);
       displayLetterInput.addEventListener("input", function(event) {
-        stagedLink.link.letter = this.value;
+        stagedLink.link.visual.letter = this.value;
       }, false);
       nameInput.addEventListener("input", function(event) {
         stagedLink.link.name = this.value;
       }, false);
+      displayImageInput.addEventListener("input", function(event) {
+        stagedLink.link.visual.image = this.value;
+      }, false);
       urlInput.addEventListener("input", function(event) {
         stagedLink.link.url = this.value;
       }, false);
-      accentGlobalRadio.addEventListener("change", function() {
-        stagedLink.link.accent.override = false;
-        accentColorPicker.setAttribute("disabled", "");
-        accentColorHex.setAttribute("disabled", "");
-        helper.addClass(accentColorInputHelperItem, "disabled");
-        helper.addClass(linkFormAccentHslHLabel, "disabled", "");
-        linkFormAccentHslHRange.setAttribute("disabled", "");
-        linkFormAccentHslHNumber.setAttribute("disabled", "");
-        helper.addClass(linkFormAccentHslSLabel, "disabled", "");
-        linkFormAccentHslSRange.setAttribute("disabled", "");
-        linkFormAccentHslSNumber.setAttribute("disabled", "");
-        helper.addClass(linkFormAccentHslLLabel, "disabled", "");
-        linkFormAccentHslLRange.setAttribute("disabled", "");
-        linkFormAccentHslLNumber.setAttribute("disabled", "");
-        helper.addClass(linkFormAccentRgbRLabel, "disabled", "");
-        linkFormAccentRgbRRange.setAttribute("disabled", "");
-        linkFormAccentRgbRNumber.setAttribute("disabled", "");
-        helper.addClass(linkFormAccentRgbGLabel, "disabled", "");
-        linkFormAccentRgbGRange.setAttribute("disabled", "");
-        linkFormAccentRgbGNumber.setAttribute("disabled", "");
-        helper.addClass(linkFormAccentRgbBLabel, "disabled", "");
-        linkFormAccentRgbBRange.setAttribute("disabled", "");
-        linkFormAccentRgbBNumber.setAttribute("disabled", "");
-      }, false);
-      accentCustomRadio.addEventListener("change", function() {
-        stagedLink.link.accent.override = true;
-        accentColorPicker.removeAttribute("disabled");
-        accentColorHex.removeAttribute("disabled");
-        helper.removeClass(accentColorInputHelperItem, "disabled");
-        helper.removeClass(linkFormAccentHslHLabel, "disabled");
-        linkFormAccentHslHRange.removeAttribute("disabled");
-        linkFormAccentHslHNumber.removeAttribute("disabled");
-        helper.removeClass(linkFormAccentHslSLabel, "disabled");
-        linkFormAccentHslSRange.removeAttribute("disabled");
-        linkFormAccentHslSNumber.removeAttribute("disabled");
-        helper.removeClass(linkFormAccentHslLLabel, "disabled");
-        linkFormAccentHslLRange.removeAttribute("disabled");
-        linkFormAccentHslLNumber.removeAttribute("disabled");
-        helper.removeClass(linkFormAccentRgbRLabel, "disabled");
-        linkFormAccentRgbRRange.removeAttribute("disabled");
-        linkFormAccentRgbRNumber.removeAttribute("disabled");
-        helper.removeClass(linkFormAccentRgbGLabel, "disabled");
-        linkFormAccentRgbGRange.removeAttribute("disabled");
-        linkFormAccentRgbGNumber.removeAttribute("disabled");
-        helper.removeClass(linkFormAccentRgbBLabel, "disabled");
-        linkFormAccentRgbBRange.removeAttribute("disabled");
-        linkFormAccentRgbBNumber.removeAttribute("disabled");
-      }, false);
-      accentColorPicker.addEventListener("change", function() {
-        if (helper.isHexNumber(this.value)) {
-          updateAccent.by.hex(this.value);
-          updateAccent.inputs(this);
-        };
-      }, false);
-      accentColorHex.addEventListener("input", function() {
-        if (helper.isHexNumber(this.value)) {
-          updateAccent.by.hex(this.value);
-          updateAccent.inputs(this);
-        };
-      }, false);
-      linkFormAccentHslHRange.addEventListener("input", function() {
-        stagedLink.link.accent.color.hsl.h = parseInt(this.value, 10);
-        updateAccent.by.hsl();
-        updateAccent.inputs(this);
-      });
-      linkFormAccentHslHNumber.addEventListener("input", function() {
-        var set = function(input) {
-          stagedLink.link.accent.color.hsl.h = updateAccent.number(input);
-          updateAccent.by.hsl();
-          updateAccent.inputs(input);
-        };
-        clearTimeout(updateAccent.delay);
-        updateAccent.delay = setTimeout(set, 1000, this);
-      });
-      linkFormAccentHslSRange.addEventListener("input", function() {
-        stagedLink.link.accent.color.hsl.s = parseInt(this.value, 10);
-        updateAccent.by.hsl();
-        updateAccent.inputs(this);
-      });
-      linkFormAccentHslSNumber.addEventListener("input", function() {
-        var set = function(input) {
-          stagedLink.link.accent.color.hsl.s = updateAccent.number(input);
-          updateAccent.by.hsl();
-          updateAccent.inputs(input);
-        };
-        clearTimeout(updateAccent.delay);
-        updateAccent.delay = setTimeout(set, 1000, this);
-      });
-      linkFormAccentHslLRange.addEventListener("input", function() {
-        stagedLink.link.accent.color.hsl.l = parseInt(this.value, 10);
-        updateAccent.by.hsl();
-        updateAccent.inputs(this);
-      });
-      linkFormAccentHslLNumber.addEventListener("input", function() {
-        var set = function(input) {
-          stagedLink.link.accent.color.hsl.l = updateAccent.number(input);
-          updateAccent.by.hsl();
-          updateAccent.inputs(input);
-        };
-        clearTimeout(updateAccent.delay);
-        updateAccent.delay = setTimeout(set, 1000, this);
-      });
-      linkFormAccentRgbRRange.addEventListener("input", function() {
-        stagedLink.link.accent.color.rgb.r = parseInt(this.value, 10);
-        updateAccent.by.rgb();
-        updateAccent.inputs(this);
-      });
-      linkFormAccentRgbRNumber.addEventListener("input", function() {
-        var set = function(input) {
-          stagedLink.link.accent.color.rgb.r = updateAccent.number(input);
-          updateAccent.by.rgb();
-          updateAccent.inputs(input);
-        };
-        clearTimeout(updateAccent.delay);
-        updateAccent.delay = setTimeout(set, 1000, this);
-      });
-      linkFormAccentRgbGRange.addEventListener("input", function() {
-        stagedLink.link.accent.color.rgb.g = parseInt(this.value, 10);
-        updateAccent.by.rgb();
-        updateAccent.inputs(this);
-      });
-      linkFormAccentRgbGNumber.addEventListener("input", function() {
-        var set = function(input) {
-          stagedLink.link.accent.color.rgb.g = updateAccent.number(input);
-          updateAccent.by.rgb();
-          updateAccent.inputs(input);
-        };
-        clearTimeout(updateAccent.delay);
-        updateAccent.delay = setTimeout(set, 1000, this);
-      });
-      linkFormAccentRgbBRange.addEventListener("input", function() {
-        stagedLink.link.accent.color.rgb.b = parseInt(this.value, 10);
-        updateAccent.by.rgb();
-        updateAccent.inputs(this);
-      });
-      linkFormAccentRgbBNumber.addEventListener("input", function() {
-        var set = function(input) {
-          stagedLink.link.accent.color.rgb.b = updateAccent.number(input);
-          updateAccent.by.rgb();
-          updateAccent.inputs(input);
-        };
-        clearTimeout(updateAccent.delay);
-        updateAccent.delay = setTimeout(set, 1000, this);
-      });
       displayIconFormGroupClear.addEventListener("click", function(event) {
-        stagedLink.link.icon.name = null;
-        stagedLink.link.icon.prefix = null;
-        stagedLink.link.icon.label = null;
+        stagedLink.link.visual.icon.name = null;
+        stagedLink.link.visual.icon.prefix = null;
+        stagedLink.link.visual.icon.label = null;
         var existingIcon = helper.e(".link-form-icon");
         if (existingIcon) {
           existingIcon.remove();
         };
         displayIconInput.value = "";
       }, false);
+
+      colorThemeRadio.addEventListener("change", function() {
+        stagedLink.link.color.by = this.value;
+        colorColorPicker.setAttribute("disabled", "");
+        colorColorHex.setAttribute("disabled", "");
+        colorColorCollapseButton.setAttribute("disabled", "");
+        helper.addClass(colorHslHLabel, "disabled", "");
+        colorHslHRange.setAttribute("disabled", "");
+        colorHslHNumber.setAttribute("disabled", "");
+        helper.addClass(colorHslSLabel, "disabled", "");
+        colorHslSRange.setAttribute("disabled", "");
+        colorHslSNumber.setAttribute("disabled", "");
+        helper.addClass(colorHslLLabel, "disabled", "");
+        colorHslLRange.setAttribute("disabled", "");
+        colorHslLNumber.setAttribute("disabled", "");
+        helper.addClass(colorRgbRLabel, "disabled", "");
+        colorRgbRRange.setAttribute("disabled", "");
+        colorRgbRNumber.setAttribute("disabled", "");
+        helper.addClass(colorRgbGLabel, "disabled", "");
+        colorRgbGRange.setAttribute("disabled", "");
+        colorRgbGNumber.setAttribute("disabled", "");
+        helper.addClass(colorRgbBLabel, "disabled", "");
+        colorRgbBRange.setAttribute("disabled", "");
+        colorRgbBNumber.setAttribute("disabled", "");
+      }, false);
+      colorCustomRadio.addEventListener("change", function() {
+        stagedLink.link.color.by = this.value;
+        colorColorPicker.removeAttribute("disabled");
+        colorColorHex.removeAttribute("disabled");
+        colorColorCollapseButton.removeAttribute("disabled");
+        helper.removeClass(colorHslHLabel, "disabled");
+        colorHslHRange.removeAttribute("disabled");
+        colorHslHNumber.removeAttribute("disabled");
+        helper.removeClass(colorHslSLabel, "disabled");
+        colorHslSRange.removeAttribute("disabled");
+        colorHslSNumber.removeAttribute("disabled");
+        helper.removeClass(colorHslLLabel, "disabled");
+        colorHslLRange.removeAttribute("disabled");
+        colorHslLNumber.removeAttribute("disabled");
+        helper.removeClass(colorRgbRLabel, "disabled");
+        colorRgbRRange.removeAttribute("disabled");
+        colorRgbRNumber.removeAttribute("disabled");
+        helper.removeClass(colorRgbGLabel, "disabled");
+        colorRgbGRange.removeAttribute("disabled");
+        colorRgbGNumber.removeAttribute("disabled");
+        helper.removeClass(colorRgbBLabel, "disabled");
+        colorRgbBRange.removeAttribute("disabled");
+        colorRgbBNumber.removeAttribute("disabled");
+      }, false);
+
+      colorColorPicker.addEventListener("change", function() {
+        mirror.data.color.by.hex(this.value);
+        mirror.value(this, mirror.inputs.color());
+      }, false);
+      colorColorHex.addEventListener("input", function() {
+        if (helper.isHexNumber(this.value)) {
+          mirror.data.color.by.hex(this.value);
+          mirror.value(this, mirror.inputs.color());
+        };
+      }, false);
+      colorColorCollapseButton.addEventListener("click", function() {
+        if (mod.collapse.form.item.color) {
+          mod.collapse.form.item.color = false;
+        } else {
+          mod.collapse.form.item.color = true;
+        };
+        collapse.color();
+      });
+      colorHslHRange.addEventListener("input", function() {
+        stagedLink.link.color.hsl.h = parseInt(this.value, 10);
+        mirror.data.color.by.hsl();
+        mirror.value(this, mirror.inputs.color());
+      });
+      colorHslHNumber.addEventListener("input", function() {
+        var set = function(input) {
+          stagedLink.link.color.hsl.h = mirror.minMax(input);
+          mirror.data.color.by.hsl();
+          mirror.value(input, mirror.inputs.color());
+        };
+        clearTimeout(mirror.delay);
+        mirror.delay = setTimeout(set, 1000, this);
+      });
+      colorHslSRange.addEventListener("input", function() {
+        stagedLink.link.color.hsl.s = parseInt(this.value, 10);
+        mirror.data.color.by.hsl();
+        mirror.value(this, mirror.inputs.color());
+      });
+      colorHslSNumber.addEventListener("input", function() {
+        var set = function(input) {
+          stagedLink.link.color.hsl.s = mirror.minMax(input);
+          mirror.data.color.by.hsl();
+          mirror.value(input, mirror.inputs.color());
+        };
+        clearTimeout(mirror.delay);
+        mirror.delay = setTimeout(set, 1000, this);
+      });
+      colorHslLRange.addEventListener("input", function() {
+        stagedLink.link.color.hsl.l = parseInt(this.value, 10);
+        mirror.data.color.by.hsl();
+        mirror.value(this, mirror.inputs.color());
+      });
+      colorHslLNumber.addEventListener("input", function() {
+        var set = function(input) {
+          stagedLink.link.color.hsl.l = mirror.minMax(input);
+          mirror.data.color.by.hsl();
+          mirror.value(input, mirror.inputs.color());
+        };
+        clearTimeout(mirror.delay);
+        mirror.delay = setTimeout(set, 1000, this);
+      });
+      colorRgbRRange.addEventListener("input", function() {
+        stagedLink.link.color.rgb.r = parseInt(this.value, 10);
+        mirror.data.color.by.rgb();
+        mirror.value(this, mirror.inputs.color());
+      });
+      colorRgbRNumber.addEventListener("input", function() {
+        var set = function(input) {
+          stagedLink.link.color.rgb.r = mirror.minMax(input);
+          mirror.data.color.by.rgb();
+          mirror.value(input, mirror.inputs.color());
+        };
+        clearTimeout(mirror.delay);
+        mirror.delay = setTimeout(set, 1000, this);
+      });
+      colorRgbGRange.addEventListener("input", function() {
+        stagedLink.link.color.rgb.g = parseInt(this.value, 10);
+        mirror.data.color.by.rgb();
+        mirror.value(this, mirror.inputs.color());
+      });
+      colorRgbGNumber.addEventListener("input", function() {
+        var set = function(input) {
+          stagedLink.link.color.rgb.g = mirror.minMax(input);
+          mirror.data.color.by.rgb();
+          mirror.value(input, mirror.inputs.color());
+        };
+        clearTimeout(mirror.delay);
+        mirror.delay = setTimeout(set, 1000, this);
+      });
+      colorRgbBRange.addEventListener("input", function() {
+        stagedLink.link.color.rgb.b = parseInt(this.value, 10);
+        mirror.data.color.by.rgb();
+        mirror.value(this, mirror.inputs.color());
+      });
+      colorRgbBNumber.addEventListener("input", function() {
+        var set = function(input) {
+          stagedLink.link.color.rgb.b = mirror.minMax(input);
+          mirror.data.color.by.rgb();
+          mirror.value(input, mirror.inputs.color());
+        };
+        clearTimeout(mirror.delay);
+        mirror.delay = setTimeout(set, 1000, this);
+      });
+
+      accentThemeRadio.addEventListener("change", function() {
+        stagedLink.link.accent.by = this.value;
+        accentColorPicker.setAttribute("disabled", "");
+        accentColorHex.setAttribute("disabled", "");
+        accentColorCollapseButton.setAttribute("disabled", "");
+        helper.addClass(accentHslHLabel, "disabled", "");
+        accentHslHRange.setAttribute("disabled", "");
+        accentHslHNumber.setAttribute("disabled", "");
+        helper.addClass(accentHslSLabel, "disabled", "");
+        accentHslSRange.setAttribute("disabled", "");
+        accentHslSNumber.setAttribute("disabled", "");
+        helper.addClass(accentHslLLabel, "disabled", "");
+        accentHslLRange.setAttribute("disabled", "");
+        accentHslLNumber.setAttribute("disabled", "");
+        helper.addClass(accentRgbRLabel, "disabled", "");
+        accentRgbRRange.setAttribute("disabled", "");
+        accentRgbRNumber.setAttribute("disabled", "");
+        helper.addClass(accentRgbGLabel, "disabled", "");
+        accentRgbGRange.setAttribute("disabled", "");
+        accentRgbGNumber.setAttribute("disabled", "");
+        helper.addClass(accentRgbBLabel, "disabled", "");
+        accentRgbBRange.setAttribute("disabled", "");
+        accentRgbBNumber.setAttribute("disabled", "");
+      }, false);
+      accentCustomRadio.addEventListener("change", function() {
+        stagedLink.link.accent.by = this.value;
+        accentColorPicker.removeAttribute("disabled");
+        accentColorHex.removeAttribute("disabled");
+        accentColorCollapseButton.removeAttribute("disabled");
+        helper.removeClass(accentHslHLabel, "disabled");
+        accentHslHRange.removeAttribute("disabled");
+        accentHslHNumber.removeAttribute("disabled");
+        helper.removeClass(accentHslSLabel, "disabled");
+        accentHslSRange.removeAttribute("disabled");
+        accentHslSNumber.removeAttribute("disabled");
+        helper.removeClass(accentHslLLabel, "disabled");
+        accentHslLRange.removeAttribute("disabled");
+        accentHslLNumber.removeAttribute("disabled");
+        helper.removeClass(accentRgbRLabel, "disabled");
+        accentRgbRRange.removeAttribute("disabled");
+        accentRgbRNumber.removeAttribute("disabled");
+        helper.removeClass(accentRgbGLabel, "disabled");
+        accentRgbGRange.removeAttribute("disabled");
+        accentRgbGNumber.removeAttribute("disabled");
+        helper.removeClass(accentRgbBLabel, "disabled");
+        accentRgbBRange.removeAttribute("disabled");
+        accentRgbBNumber.removeAttribute("disabled");
+      }, false);
+
+      accentColorPicker.addEventListener("change", function() {
+        mirror.data.accent.by.hex(this.value);
+        mirror.value(this, mirror.inputs.accent());
+      }, false);
+      accentColorHex.addEventListener("input", function() {
+        if (helper.isHexNumber(this.value)) {
+          mirror.data.accent.by.hex(this.value);
+          mirror.value(this, mirror.inputs.accent());
+        };
+      }, false);
+      accentColorCollapseButton.addEventListener("click", function() {
+        if (mod.collapse.form.item.accent) {
+          mod.collapse.form.item.accent = false;
+        } else {
+          mod.collapse.form.item.accent = true;
+        };
+        collapse.accent();
+      });
+      accentHslHRange.addEventListener("input", function() {
+        stagedLink.link.accent.hsl.h = parseInt(this.value, 10);
+        mirror.data.accent.by.hsl();
+        mirror.value(this, mirror.inputs.accent());
+      });
+      accentHslHNumber.addEventListener("input", function() {
+        var set = function(input) {
+          stagedLink.link.accent.hsl.h = mirror.minMax(input);
+          mirror.data.accent.by.hsl();
+          mirror.value(input, mirror.inputs.accent());
+        };
+        clearTimeout(mirror.delay);
+        mirror.delay = setTimeout(set, 1000, this);
+      });
+      accentHslSRange.addEventListener("input", function() {
+        stagedLink.link.accent.hsl.s = parseInt(this.value, 10);
+        mirror.data.accent.by.hsl();
+        mirror.value(this, mirror.inputs.accent());
+      });
+      accentHslSNumber.addEventListener("input", function() {
+        var set = function(input) {
+          stagedLink.link.accent.hsl.s = mirror.minMax(input);
+          mirror.data.accent.by.hsl();
+          mirror.value(input, mirror.inputs.accent());
+        };
+        clearTimeout(mirror.delay);
+        mirror.delay = setTimeout(set, 1000, this);
+      });
+      accentHslLRange.addEventListener("input", function() {
+        stagedLink.link.accent.hsl.l = parseInt(this.value, 10);
+        mirror.data.accent.by.hsl();
+        mirror.value(this, mirror.inputs.accent());
+      });
+      accentHslLNumber.addEventListener("input", function() {
+        var set = function(input) {
+          stagedLink.link.accent.hsl.l = mirror.minMax(input);
+          mirror.data.accent.by.hsl();
+          mirror.value(input, mirror.inputs.accent());
+        };
+        clearTimeout(mirror.delay);
+        mirror.delay = setTimeout(set, 1000, this);
+      });
+      accentRgbRRange.addEventListener("input", function() {
+        stagedLink.link.accent.rgb.r = parseInt(this.value, 10);
+        mirror.data.accent.by.rgb();
+        mirror.value(this, mirror.inputs.accent());
+      });
+      accentRgbRNumber.addEventListener("input", function() {
+        var set = function(input) {
+          stagedLink.link.accent.rgb.r = mirror.minMax(input);
+          mirror.data.accent.by.rgb();
+          mirror.value(input, mirror.inputs.accent());
+        };
+        clearTimeout(mirror.delay);
+        mirror.delay = setTimeout(set, 1000, this);
+      });
+      accentRgbGRange.addEventListener("input", function() {
+        stagedLink.link.accent.rgb.g = parseInt(this.value, 10);
+        mirror.data.accent.by.rgb();
+        mirror.value(this, mirror.inputs.accent());
+      });
+      accentRgbGNumber.addEventListener("input", function() {
+        var set = function(input) {
+          stagedLink.link.accent.rgb.g = mirror.minMax(input);
+          mirror.data.accent.by.rgb();
+          mirror.value(input, mirror.inputs.accent());
+        };
+        clearTimeout(mirror.delay);
+        mirror.delay = setTimeout(set, 1000, this);
+      });
+      accentRgbBRange.addEventListener("input", function() {
+        stagedLink.link.accent.rgb.b = parseInt(this.value, 10);
+        mirror.data.accent.by.rgb();
+        mirror.value(this, mirror.inputs.accent());
+      });
+      accentRgbBNumber.addEventListener("input", function() {
+        var set = function(input) {
+          stagedLink.link.accent.rgb.b = mirror.minMax(input);
+          mirror.data.accent.by.rgb();
+          mirror.value(input, mirror.inputs.accent());
+        };
+        clearTimeout(mirror.delay);
+        mirror.delay = setTimeout(set, 1000, this);
+      });
+      imageInput.addEventListener("input", function(event) {
+        stagedLink.link.image = this.value;
+      }, false);
       autoSuggest.bind.input({
         input: displayIconInput,
         type: "fontawesomeIcon",
         postFocus: displayIconFormGroupText
       });
+
       return form;
     },
+    formCollapse: function() {
+      helper.eA(".link-form-collapse").forEach(function(arrayItem, index) {
+        helper.addClass(arrayItem, "active");
+        arrayItem.setAttribute("style", "--link-form-collapse-height:" + arrayItem.getBoundingClientRect().height + "px;");
+        helper.removeClass(arrayItem, "active");
+      });
+    },
     display: {
-      letter: function() {
-        var html = helper.e("html");
-        html.style.setProperty("--link-item-display-letter-size", state.get.current().link.item.display.letcon.letter.size + "em");
+      letter: {
+        size: function() {
+          var html = helper.e("html");
+          html.style.setProperty("--link-item-display-letter-size", state.get.current().link.item.display.visual.letter.size + "em");
+        }
       },
-      icon: function() {
-        var html = helper.e("html");
-        html.style.setProperty("--link-item-display-icon-size", state.get.current().link.item.display.letcon.icon.size + "em");
+      icon: {
+        size: function() {
+          var html = helper.e("html");
+          html.style.setProperty("--link-item-display-icon-size", state.get.current().link.item.display.visual.icon.size + "em");
+        }
+      },
+      image: {
+        size: function() {
+          var html = helper.e("html");
+          html.style.setProperty("--link-item-display-image-size", state.get.current().link.item.display.visual.image.size + "em");
+        }
       }
     },
     name: function() {
@@ -1658,11 +2460,6 @@ var link = (function() {
         });
       };
     },
-    color: {
-      custom: function() {
-        helper.e("html").style.setProperty("--link-item-color-custom", state.get.current().link.item.color.rgb.r + ", " + state.get.current().link.item.color.rgb.g + ", " + state.get.current().link.item.color.rgb.b);
-      }
-    },
     border: function() {
       var html = helper.e("html");
       html.style.setProperty("--link-item-border", state.get.current().link.item.border);
@@ -1945,19 +2742,19 @@ var link = (function() {
   };
 
   render.autoSuggestIconAction = function(autoSuggestData) {
-    stagedLink.link.icon.label = autoSuggestData.label;
-    stagedLink.link.icon.name = autoSuggestData.name;
+    stagedLink.link.visual.icon.label = autoSuggestData.label;
+    stagedLink.link.visual.icon.name = autoSuggestData.name;
     if (autoSuggestData.styles.includes("solid")) {
-      stagedLink.link.icon.prefix = "fas";
+      stagedLink.link.visual.icon.prefix = "fas";
     } else if (autoSuggestData.styles.includes("brands")) {
-      stagedLink.link.icon.prefix = "fab";
+      stagedLink.link.visual.icon.prefix = "fab";
     };
     var existingIcon = helper.e(".link-form-icon");
     if (existingIcon) {
       existingIcon.remove();
     };
     helper.e(".link-form-input-icon").value = autoSuggestData.label;
-    helper.e(".link-form-text-icon").appendChild(helper.node("span|class:link-form-icon " + stagedLink.link.icon.prefix + " fa-" + stagedLink.link.icon.name));
+    helper.e(".link-form-text-icon").appendChild(helper.node("span|class:link-form-icon " + stagedLink.link.visual.icon.prefix + " fa-" + stagedLink.link.visual.icon.name));
     helper.e(".link-form-text-icon").focus();
   };
 
@@ -1995,12 +2792,14 @@ var link = (function() {
           }
         });
         pagelock.lock();
+        render.item.formCollapse();
         stagedLink.position.destination.item = helper.e(".link-form-position").selectedIndex;
       },
       close: function() {
         stagedLink.reset();
         autoSuggest.close();
         pagelock.unlock();
+        mod.collapse.reset();
       },
       selectGroup: function(groupIndex) {
         stagedGroup.init();
@@ -2104,11 +2903,13 @@ var link = (function() {
           }
         });
         pagelock.lock();
+        render.item.formCollapse();
       },
       close: function() {
         stagedLink.reset();
         autoSuggest.close();
         pagelock.unlock();
+        mod.collapse.reset();
       }
     },
     group: {
@@ -2364,10 +3165,10 @@ var link = (function() {
     render.group.openall.size();
     render.group.openall.opacity();
     render.group.border();
-    render.item.color.custom();
     render.item.size();
-    render.item.display.letter();
-    render.item.display.icon();
+    render.item.display.letter.size();
+    render.item.display.icon.size();
+    render.item.display.image.size();
     render.item.name();
     render.item.border();
     render.item.rotate();
diff --git a/src/js/menu.js b/src/js/menu.js
index 2d7b1afa..e0f8933d 100644
--- a/src/js/menu.js
+++ b/src/js/menu.js
@@ -172,7 +172,7 @@ var menu = (function() {
       var allMenuNavBody = helper.eA(".menu-subnav");
       allMenuNavBody.forEach(function(arrayItem, index) {
         helper.addClass(arrayItem, "active");
-        arrayItem.setAttribute("style", "--menu-subnav-height:" + arrayItem.getBoundingClientRect().height + "px;");
+        arrayItem.setAttribute("style", "--menu-subnav-height: " + arrayItem.getBoundingClientRect().height + "px;");
         helper.removeClass(arrayItem, "active");
       });
     }
@@ -251,6 +251,7 @@ var menu = (function() {
     mod.close();
     render.removeStyle();
     render.subnav.height();
+    render.nav.active();
   };
 
   return {
diff --git a/src/js/state.js b/src/js/state.js
index d533861d..4442c55c 100644
--- a/src/js/state.js
+++ b/src/js/state.js
@@ -152,6 +152,11 @@ var state = (function() {
       },
       color: {
         by: "theme",
+        hsl: {
+          h: 0,
+          s: 0,
+          l: 0
+        },
         rgb: {
           r: 0,
           g: 0,
@@ -173,7 +178,23 @@ var state = (function() {
       },
       item: {
         color: {
-          by: "theme",
+          hsl: {
+            h: 0,
+            s: 0,
+            l: 0
+          },
+          rgb: {
+            r: 0,
+            g: 0,
+            b: 0
+          }
+        },
+        accent: {
+          hsl: {
+            h: 0,
+            s: 0,
+            l: 0
+          },
           rgb: {
             r: 0,
             g: 0,
@@ -181,13 +202,16 @@ var state = (function() {
           }
         },
         display: {
-          letcon: {
+          visual: {
             show: true,
             letter: {
               size: 3
             },
             icon: {
               size: 3
+            },
+            image: {
+              size: 3
             }
           },
           name: {
@@ -196,7 +220,7 @@ var state = (function() {
           },
           gutter: 2,
           direction: "vertical",
-          order: "letconname",
+          order: "visualname",
           alignment: "centercenter",
           rotate: 0,
           translate: {
@@ -322,6 +346,11 @@ var state = (function() {
     background: {
       color: {
         by: "theme",
+        hsl: {
+          h: 0,
+          s: 0,
+          l: 0
+        },
         rgb: {
           r: 0,
           g: 0,
@@ -415,12 +444,15 @@ var state = (function() {
       },
       item: {
         display: {
-          letcon: {
+          visual: {
             letter: {
               size: 3
             },
             icon: {
               size: 3
+            },
+            image: {
+              size: 3
             }
           },
           name: {
diff --git a/src/js/update.js b/src/js/update.js
index e316e2e8..dbd7379b 100644
--- a/src/js/update.js
+++ b/src/js/update.js
@@ -995,6 +995,89 @@ var update = (function() {
         });
       });
       return data;
+    },
+    "5.33.0": function(data) {
+      data.bookmarks.forEach(function(arrayItem, index) {
+        arrayItem.items.forEach(function(arrayItem, index) {
+          arrayItem.visual = {
+            display: arrayItem.display,
+            letter: arrayItem.letter,
+            image: null,
+            icon: arrayItem.icon
+          };
+          delete arrayItem.display;
+          delete arrayItem.letter;
+          delete arrayItem.icon;
+          if (arrayItem.accent.override) {
+            arrayItem.accent.by = "custom";
+          } else {
+            arrayItem.accent.by = "theme";
+          };
+          delete arrayItem.accent.override;
+          arrayItem.accent.hsl = arrayItem.accent.color.hsl;
+          arrayItem.accent.rgb = arrayItem.accent.color.rgb;
+          delete arrayItem.accent.color;
+          arrayItem.color = {
+            by: "theme",
+            hsl: {
+              h: 0,
+              s: 0,
+              l: 0
+            },
+            rgb: {
+              r: 0,
+              g: 0,
+              b: 0
+            }
+          };
+          arrayItem.image = "";
+        });
+      });
+      data.state.header.color.hsl = {
+        h: 0,
+        s: 0,
+        l: 0
+      };
+      data.state.link.item.color = {
+        hsl: {
+          h: 0,
+          s: 0,
+          l: 0
+        },
+        rgb: {
+          r: 0,
+          g: 0,
+          b: 0
+        }
+      };
+      data.state.link.item.accent = {
+        hsl: {
+          h: 0,
+          s: 0,
+          l: 0
+        },
+        rgb: {
+          r: 0,
+          g: 0,
+          b: 0
+        }
+      };
+      data.state.link.item.display.visual = data.state.link.item.display.letcon;
+      delete data.state.link.item.display.letcon;
+      data.state.link.item.display.visual.image = {
+        size: 3
+      };
+      if (data.state.link.item.display.order == "letconname") {
+        data.state.link.item.display.order = "visualname";
+      } else if (data.state.link.item.display.order == "nameletcon") {
+        data.state.link.item.display.order = "namevisual";
+      };
+      data.state.background.color.hsl = {
+        h: 0,
+        s: 0,
+        l: 0
+      };
+      return data;
     }
   };
 
diff --git a/src/js/version.js b/src/js/version.js
index e1690eda..fc41a1d6 100644
--- a/src/js/version.js
+++ b/src/js/version.js
@@ -1,6 +1,6 @@
 var version = (function() {
 
-  var current = "5.32.0";
+  var current = "5.33.0";
 
   var name = "Zonked Tarsier";
 
diff --git a/src/manifest.json b/src/manifest.json
index 3c45ae74..2057bbd1 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -2,7 +2,7 @@
   "name": "nightTab",
   "short_name": "nightTab",
   "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
-  "version": "5.32.0",
+  "version": "5.33.0",
   "manifest_version": 2,
   "chrome_url_overrides": {
     "newtab": "index.html"