diff --git a/README.md b/README.md
index 417f674a..26277cb5 100644
--- a/README.md
+++ b/README.md
@@ -16,6 +16,7 @@ New-tab-page/Start-page for all browsers
   - <kbd>ctrl</kbd>+<kbd>alt</kbd>+<kbd>a</kbd> *to add a new bookmark*
   - <kbd>ctrl</kbd>+<kbd>alt</kbd>+<kbd>m</kbd> *to open menu*
   - <kbd>ctrl</kbd>+<kbd>alt</kbd>+<kbd>e</kbd> *to toggle edit state*
+  - <kbd>ctrl</kbd>+<kbd>alt</kbd>+<kbd>d</kbd> *to toggle dark and light mode`
   - <kbd>ctrl</kbd>+<kbd>alt</kbd>+<kbd>r</kbd> *random theme if option is turned on in* `menu > layout > random Accent colour`
 - Responsive design
 - Customise Accent colour!
diff --git a/css/animation.css b/css/animation.css
old mode 100644
new mode 100755
diff --git a/css/background.css b/css/background.css
old mode 100644
new mode 100755
diff --git a/css/base.css b/css/base.css
old mode 100644
new mode 100755
index 73dccc9c..ab0b664b
--- a/css/base.css
+++ b/css/base.css
@@ -1,26 +1,48 @@
 :root {
   --black: 0, 0, 0;
   --white: 255, 255, 255;
-  --gray-01: 38, 40, 49;
-  --gray-02: 47, 51, 62;
-  --gray-03: 57, 62, 75;
-  --gray-04: 67, 73, 88;
-  --gray-05: 77, 84, 101;
-  --gray-06: 87, 95, 114;
-  --gray-07: 97, 106, 127;
-  --gray-08: 107, 117, 140;
-  --gray-09: 117, 128, 153;
-  --gray-10: 127, 139, 166;
-  --gray-11: 137, 151, 180;
-  --gray-12: 149, 162, 187;
-  --gray-13: 162, 173, 195;
-  --gray-14: 174, 184, 203;
-  --gray-15: 187, 195, 211;
-  --gray-16: 199, 206, 218;
-  --gray-17: 212, 217, 226;
-  --gray-18: 224, 228, 234;
-  --gray-19: 237, 239, 242;
-  --gray-20: 250, 250, 250;
+  --shade-01: 38, 40, 49;
+  --shade-02: 47, 51, 62;
+  --shade-03: 57, 62, 75;
+  --shade-04: 67, 73, 88;
+  --shade-05: 77, 84, 101;
+  --shade-06: 87, 95, 114;
+  --shade-07: 97, 106, 127;
+  --shade-08: 107, 117, 140;
+  --shade-09: 117, 128, 153;
+  --shade-10: 127, 139, 166;
+  --shade-11: 137, 151, 180;
+  --shade-12: 149, 162, 187;
+  --shade-13: 162, 173, 195;
+  --shade-14: 174, 184, 203;
+  --shade-15: 187, 195, 211;
+  --shade-16: 199, 206, 218;
+  --shade-17: 212, 217, 226;
+  --shade-18: 224, 228, 234;
+  --shade-19: 237, 239, 242;
+  --shade-20: 250, 250, 250;
+  --button-text: var(--gray-12);
+  --button-text-hover-focus: var(--style-neutral-text);
+  --button-text-active: var(--style-neutral-text);
+  --button-text-disabled: var(--gray-04);
+  --button-link-text: var(--gray-10);
+  --button-link-text-hover-focus: var(--gray-14);
+  --button-link-text-active: var(--gray-18);
+  --button-link-text-disabled: var(--gray-04);
+  --form-input-text: var(--gray-16);
+  --form-input-text-hover: var(--style-neutral-text);
+  --form-input-text-focus: var(--style-neutral-text);
+  --form-input-text-disabled: var(--gray-04);
+  --form-input-text-disabled-helper-text: var(--gray-04);
+  --form-input-placeholder: var(--gray-06);
+  --form-input-placeholder-hover-focus: var(--gray-10);
+  --form-input-placeholder-disabled: var(--gray-04);
+  --form-label: var(--gray-16);
+  --form-label-disabled: var(--gray-04);
+  --form-checkbox-radio-label: var(--gray-12);
+  --form-checkbox-radio-chcked-label: var(--gray-16);
+  --form-checkbox-radio-disabled-label: var(--gray-04);
+  --form-range-thumb: var(--gray-12);
   --accent: 0, 255, 0;
   --root-font-size: 14px;
   --radius: 0.2em;
@@ -91,13 +113,14 @@ html {
 
 body {
   background-color: var(--background);
-  color: rgb(var(--white));
+  color: rgb(var(--style-neutral-text));
   font-size: 1rem;
   line-height: 1.6;
   font-family: var(--font-regular);
   display: flex;
   flex-direction: column;
   height: 100vh;
+  transition: background-color var(--animation-speed-fast) ease-in-out;
 }
 
 .is-menu-open body {
@@ -120,3 +143,51 @@ body {
   display: inherit;
   height: inherit;
 }
+
+.is-theme-style-dark {
+  --gray-01: var(--shade-01);
+  --gray-02: var(--shade-02);
+  --gray-03: var(--shade-03);
+  --gray-04: var(--shade-04);
+  --gray-05: var(--shade-05);
+  --gray-06: var(--shade-06);
+  --gray-07: var(--shade-07);
+  --gray-08: var(--shade-08);
+  --gray-09: var(--shade-09);
+  --gray-10: var(--shade-10);
+  --gray-11: var(--shade-11);
+  --gray-12: var(--shade-12);
+  --gray-13: var(--shade-13);
+  --gray-14: var(--shade-14);
+  --gray-15: var(--shade-15);
+  --gray-16: var(--shade-16);
+  --gray-17: var(--shade-17);
+  --gray-18: var(--shade-18);
+  --gray-19: var(--shade-19);
+  --gray-20: var(--shade-20);
+  --style-neutral-text: var(--white);
+}
+
+.is-theme-style-light {
+  --gray-01: var(--shade-20);
+  --gray-02: var(--shade-19);
+  --gray-03: var(--shade-18);
+  --gray-04: var(--shade-17);
+  --gray-05: var(--shade-16);
+  --gray-06: var(--shade-15);
+  --gray-07: var(--shade-14);
+  --gray-08: var(--shade-13);
+  --gray-09: var(--shade-12);
+  --gray-10: var(--shade-11);
+  --gray-11: var(--shade-10);
+  --gray-12: var(--shade-09);
+  --gray-13: var(--shade-08);
+  --gray-14: var(--shade-07);
+  --gray-15: var(--shade-06);
+  --gray-16: var(--shade-05);
+  --gray-17: var(--shade-04);
+  --gray-18: var(--shade-03);
+  --gray-19: var(--shade-02);
+  --gray-20: var(--shade-01);
+  --style-neutral-text: var(--black);
+}
diff --git a/css/button.css b/css/button.css
old mode 100644
new mode 100755
index 53e6f42d..0004ec82
--- a/css/button.css
+++ b/css/button.css
@@ -6,7 +6,7 @@ input[type="submit"] {
   background-color: rgb(var(--gray-02));
   padding: 0.125em 1em;
   margin: 0 0 1em 0;
-  color: rgb(var(--gray-12));
+  color: rgb(var(--button-text));
   font-size: 1em;
   font-family: var(--font-regular);
   min-height: 2.5em;
@@ -41,7 +41,7 @@ input[type="submit"]:hover,
 input[type="submit"]:focus {
   background-color: rgb(var(--gray-03));
   border-bottom-color: rgb(var(--gray-08));
-  color: rgb(var(--white));
+  color: rgb(var(--button-text-hover-focus));
   outline: none;
 }
 
@@ -52,7 +52,7 @@ input[type="reset"]:active,
 input[type="submit"]:active {
   background-color: rgb(var(--gray-04));
   border-bottom-color: rgb(var(--accent));
-  color: rgb(var(--white));
+  color: rgb(var(--button-text-active));
   transition: none;
 }
 
@@ -66,7 +66,7 @@ button[disabled]:active,
 .button[disabled]:active {
   background-color: rgb(var(--gray-02));
   border-color: transparent;
-  color: rgb(var(--gray-04));
+  color: rgb(var(--button-text-disabled));
   cursor: default;
 }
 
@@ -84,7 +84,7 @@ button [class*=" icon-"],
 
 .button.active {
   border-bottom-color: rgb(var(--accent));
-  color: rgb(var(--white));
+  color: rgb(var(--button-text-active));
 }
 
 .button-small {
@@ -152,7 +152,18 @@ button [class*=" button-"]:last-child,
 .button-link {
   background-color: transparent;
   border: 0;
-  color: rgb(var(--gray-10));
+  color: rgb(var(--button-link-text));
+}
+
+.button-link:hover,
+.button-link:focus {
+  background-color: transparent;
+  color: rgb(var(--button-link-text-hover-focus));
+}
+
+.button-link:active {
+  background-color: transparent;
+  color: rgb(var(--button-link-text-active));
 }
 
 .button-link[disabled] {
@@ -166,14 +177,3 @@ button [class*=" button-"]:last-child,
   background-color: transparent;
   color: transparent;
 }
-
-.button-link:hover,
-.button-link:focus {
-  background-color: transparent;
-  color: rgb(var(--gray-14));
-}
-
-.button-link:active {
-  background-color: transparent;
-  color: rgb(var(--gray-18));
-}
diff --git a/css/clock.css b/css/clock.css
old mode 100644
new mode 100755
index 08cfa5f3..be2dedb7
--- a/css/clock.css
+++ b/css/clock.css
@@ -4,7 +4,7 @@
   border-radius: var(--radius);
   font-size: 1em;
   font-family: var(--font-fjalla);
-  color: rgb(var(--white));
+  color: rgb(var(--style-neutral-text));
   width: 100%;
   min-height: 2.5em;
   display: flex;
@@ -47,7 +47,7 @@
 }
 
 .clock-hours {
-  color: rgb(var(--white));
+  color: rgb(var(--style-neutral-text));
 }
 
 .clock-minutes,
diff --git a/css/container.css b/css/container.css
old mode 100644
new mode 100755
diff --git a/css/date.css b/css/date.css
old mode 100644
new mode 100755
index f5290d72..aa5d02a0
--- a/css/date.css
+++ b/css/date.css
@@ -4,7 +4,7 @@
   border-radius: var(--radius);
   font-size: 1em;
   font-family: var(--font-fjalla);
-  color: rgb(var(--white));
+  color: rgb(var(--style-neutral-text));
   width: 100%;
   min-height: 2.5em;
   display: flex;
@@ -47,7 +47,7 @@
 }
 
 .date-day {
-  color: rgb(var(--white));
+  color: rgb(var(--style-neutral-text));
 }
 
 .date-date,
diff --git a/css/fonts.css b/css/fonts.css
old mode 100644
new mode 100755
diff --git a/css/form.css b/css/form.css
old mode 100644
new mode 100755
index 2437a308..1e0bbb5a
--- a/css/form.css
+++ b/css/form.css
@@ -4,16 +4,18 @@ input[type="password"],
 input[type="search"],
 input[type="tel"],
 input[type="text"] {
-  background-color: rgb(var(--gray-14));
-  padding: 0 0.5em;
+  background-color: rgb(var(--gray-02));
+  padding: 0 1em;
   margin: 0 0 1em 0;
-  color: rgb(var(--black));
+  color: rgb(var(--form-input-text));
   font-size: 1em;
   font-family: var(--font-regular);
   line-height: 2.5em;
   height: 2.5em;
   width: 100%;
-  border-width: var(--line-width);
+  border-width: 0;
+  /* border-top-width: var(--line-width); */
+  /* border-bottom-width: var(--line-width); */
   border-style: solid;
   border-color: transparent;
   border-radius: var(--radius);
@@ -22,49 +24,64 @@ input[type="text"] {
   -moz-appearance: textfield;
 }
 
+input[type="email"]:hover,
+input[type="number"]:hover,
+input[type="password"]:hover,
+input[type="search"]:hover,
+input[type="tel"]:hover,
+input[type="text"]:hover {
+  background-color: rgb(var(--gray-03));
+  /* border-bottom-color: rgb(var(--gray-08)); */
+  color: rgb(var(--form-input-text-hover));
+  outline: none;
+  box-shadow: 0 0 0 var(--line-width) rgb(var(--gray-06));
+}
+
+input[type="email"]:focus,
+input[type="number"]:focus,
+input[type="password"]:focus,
+input[type="search"]:focus,
+input[type="tel"]:focus,
+input[type="text"]:focus {
+  background-color: rgb(var(--gray-02));
+  /* border-bottom-color: rgb(var(--accent)); */
+  /* border-color: transparent; */
+  color: rgb(var(--form-input-text-focus));
+  outline: none;
+  z-index: 2;
+  box-shadow: 0 0 0 var(--line-width) rgb(var(--accent)), 0 0 0 calc(var(--line-width) * 2) rgba(var(--accent), 0.25);
+}
+
 input[type="email"][disabled],
-input[type="email"][disabled]:hover,
-input[type="email"][disabled]:focus,
-input[type="email"][disabled]::placeholder,
-input[type="email"][disabled]:hover::placeholder,
-input[type="email"][disabled]:focus::placeholder,
 input[type="number"][disabled],
-input[type="number"][disabled]:hover,
-input[type="number"][disabled]:focus,
-input[type="number"][disabled]::placeholder,
-input[type="number"][disabled]:hover::placeholder,
-input[type="number"][disabled]:focus::placeholder,
 input[type="password"][disabled],
-input[type="password"][disabled]:hover,
-input[type="password"][disabled]:focus,
-input[type="password"][disabled]::placeholder,
-input[type="password"][disabled]:hover::placeholder,
-input[type="password"][disabled]:focus::placeholder,
 input[type="search"][disabled],
-input[type="search"][disabled]:hover,
-input[type="search"][disabled]:focus,
-input[type="search"][disabled]::placeholder,
-input[type="search"][disabled]:hover::placeholder,
-input[type="search"][disabled]:focus::placeholder,
 input[type="tel"][disabled],
-input[type="tel"][disabled]:hover,
-input[type="tel"][disabled]:focus,
-input[type="tel"][disabled]::placeholder,
-input[type="tel"][disabled]:hover::placeholder,
-input[type="tel"][disabled]:focus::placeholder,
-input[type="text"][disabled],
-input[type="text"][disabled]:hover,
-input[type="text"][disabled]:focus,
-input[type="text"][disabled]::placeholder,
-input[type="text"][disabled]:hover::placeholder,
-input[type="text"][disabled]:focus::placeholder {
-  background-color: rgb(var(--gray-04));
-  color: rgb(var(--gray-08));
-  border-color: transparent;
+input[type="text"][disabled] {
+  background-color: transparent;
+  padding: 0 calc(1em - var(--line-width));
+  color: rgb(var(--form-input-text-disabled));
+  border-width: var(--line-width);
+  border-color: rgb(var(--gray-02));
   cursor: default;
   box-shadow: none;
 }
 
+input[type="email"][disabled]:hover,
+input[type="email"][disabled]:focus,
+input[type="number"][disabled]:hover,
+input[type="number"][disabled]:focus,
+input[type="password"][disabled]:hover,
+input[type="password"][disabled]:focus,
+input[type="search"][disabled]:hover,
+input[type="search"][disabled]:focus,
+input[type="tel"][disabled]:hover,
+input[type="tel"][disabled]:focus,
+input[type="text"][disabled]:hover,
+input[type="text"][disabled]:focus {
+  color: rgb(var(--form-input-text-disabled));
+}
+
 input[type="checkbox"][disabled]~.input-helper,
 input[type="radio"][disabled]~.input-helper,
 input[type="email"][disabled]~.input-helper,
@@ -73,33 +90,7 @@ input[type="password"][disabled]~.input-helper,
 input[type="search"][disabled]~.input-helper,
 input[type="tel"][disabled]~.input-helper,
 input[type="text"][disabled]~.input-helper {
-  color: rgb(var(--gray-04));
-}
-
-input[type="email"]:hover,
-input[type="number"]:hover,
-input[type="password"]:hover,
-input[type="search"]:hover,
-input[type="tel"]:hover,
-input[type="text"]:hover {
-  background-color: rgb(var(--gray-16));
-  border-color: rgb(var(--gray-10));
-  color: rgb(var(--black));
-  outline: none;
-}
-
-input[type="email"]:focus,
-input[type="number"]:focus,
-input[type="password"]:focus,
-input[type="search"]:focus,
-input[type="tel"]:focus,
-input[type="text"]:focus {
-  background-color: rgb(var(--white));
-  border-color: transparent;
-  color: rgb(var(--black));
-  outline: none;
-  z-index: 2;
-  box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 var(--line-width) rgb(var(--accent));
+  color: rgb(var(--form-input-text-disabled-helper-text));
 }
 
 input[type="email"]::placeholder,
@@ -108,7 +99,7 @@ input[type="password"]::placeholder,
 input[type="search"]::placeholder,
 input[type="tel"]::placeholder,
 input[type="text"]::placeholder {
-  color: rgb(var(--gray-10));
+  color: rgb(var(--form-input-placeholder));
   transition: all var(--animation-speed-fast) ease-in-out;
 }
 
@@ -118,7 +109,7 @@ input[type="password"]:hover::placeholder,
 input[type="search"]:hover::placeholder,
 input[type="tel"]:hover::placeholder,
 input[type="text"]:hover::placeholder {
-  color: rgb(var(--gray-12));
+  color: rgb(var(--form-input-placeholder-hover-focus));
 }
 
 input[type="email"]:focus::placeholder,
@@ -127,19 +118,40 @@ input[type="password"]:focus::placeholder,
 input[type="search"]:focus::placeholder,
 input[type="tel"]:focus::placeholder,
 input[type="text"]:focus::placeholder {
-  color: rgb(var(--gray-14));
+  color: rgb(var(--form-input-placeholder-hover-focus));
+}
+
+input[type="email"][disabled]::placeholder,
+input[type="email"][disabled]:hover::placeholder,
+input[type="email"][disabled]:focus::placeholder,
+input[type="number"][disabled]::placeholder,
+input[type="number"][disabled]:hover::placeholder,
+input[type="number"][disabled]:focus::placeholder,
+input[type="password"][disabled]::placeholder,
+input[type="password"][disabled]:hover::placeholder,
+input[type="password"][disabled]:focus::placeholder,
+input[type="search"][disabled]::placeholder,
+input[type="search"][disabled]:hover::placeholder,
+input[type="search"][disabled]:focus::placeholder,
+input[type="tel"][disabled]::placeholder,
+input[type="tel"][disabled]:hover::placeholder,
+input[type="tel"][disabled]:focus::placeholder,
+input[type="text"][disabled]::placeholder,
+input[type="text"][disabled]:hover::placeholder,
+input[type="text"][disabled]:focus::placeholder {
+  color: rgb(var(--form-input-placeholder-disabled));
 }
 
 label {
   padding: 0.5em 0;
-  color: rgb(var(--gray-16));
+  color: rgb(var(--form-label));
   margin-bottom: 0;
   font-size: 1em;
   display: block;
 }
 
 label[disabled] {
-  color: rgb(var(--gray-04));
+  color: rgb(var(--form-label-disabled));
 }
 
 input[type="color"] {
@@ -222,11 +234,12 @@ input[type="radio"] {
   pointer-events: none;
   box-sizing: border-box;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  /* transition: all var(--animation-speed-fast) ease-in-out; */
 }
 
 input[type="checkbox"]+label,
 input[type="radio"]+label {
-  color: rgb(var(--gray-12));
+  color: rgb(var(--form-checkbox-radio-label));
   font-size: 1em;
   font-family: var(--font-regular);
   min-height: 2.5em;
@@ -254,19 +267,19 @@ input[type="checkbox"]:focus+label,
 input[type="checkbox"]:hover+label,
 input[type="radio"]:focus+label,
 input[type="radio"]:hover+label {
-  color: rgb(var(--white));
+  color: rgb(var(--style-neutral-text));
 }
 
 input[type="checkbox"]:active+label,
 input[type="radio"]:active+label {
-  color: rgb(var(--white));
+  color: rgb(var(--style-neutral-text));
 }
 
 input[type="checkbox"]:focus+label .label-icon,
 input[type="checkbox"]:hover+label .label-icon,
 input[type="radio"]:focus+label .label-icon,
 input[type="radio"]:hover+label .label-icon {
-  color: rgb(var(--white));
+  color: rgb(var(--style-neutral-text));
 }
 
 input[type="checkbox"]:active+label .label-icon,
@@ -277,14 +290,14 @@ input[type="radio"]:active+label .label-icon {
 
 input[type="checkbox"]:checked+label,
 input[type="radio"]:checked+label {
-  color: rgb(var(--gray-16));
+  color: rgb(var(--form-checkbox-radio-chcked-label));
 }
 
 input[type="checkbox"]:not([disabled]):hover:checked+label,
 input[type="checkbox"]:not([disabled]):focus:checked+label,
 input[type="radio"]:not([disabled]):hover:checked+label,
 input[type="radio"]:not([disabled]):focus:checked+label {
-  color: rgb(var(--white));
+  color: rgb(var(--style-neutral-text));
 }
 
 input[type="checkbox"]:checked+label .label-icon,
@@ -302,6 +315,7 @@ input[type="checkbox"]+.input-label-button,
 input[type="radio"]+.input-label-button {
   justify-content: center;
   align-items: center;
+  position: relative;
 }
 
 input[type="color"]:hover+.input-label-button,
@@ -311,8 +325,8 @@ input[type="checkbox"]:focus+.input-label-button,
 input[type="radio"]:hover+.input-label-button,
 input[type="radio"]:focus+.input-label-button {
   background-color: rgb(var(--gray-03));
-  border-bottom-color: rgb(var(--gray-10));
-  color: rgb(var(--white));
+  border-bottom-color: rgb(var(--gray-08));
+  color: rgb(var(--style-neutral-text));
   outline: none;
 }
 
@@ -333,19 +347,19 @@ input[type="checkbox"][disabled]+.input-label-button,
 input[type="radio"][disabled]+.input-label-button {
   background-color: rgb(var(--gray-02));
   border-color: transparent;
-  color: rgb(var(--gray-04));
+  color: rgb(var(--form-checkbox-radio-disabled-label));
   cursor: default;
 }
 
 input[type="checkbox"][disabled]+label,
 input[type="radio"][disabled]+label {
-  color: rgb(var(--gray-04));
+  color: rgb(var(--form-checkbox-radio-disabled-label));
   cursor: default;
 }
 
 input[type="checkbox"][disabled]+label .label-icon,
 input[type="radio"][disabled]+label .label-icon {
-  color: rgb(var(--gray-04));
+  color: rgb(var(--form-checkbox-radio-disabled-label));
   cursor: default;
 }
 
@@ -385,7 +399,7 @@ input[type="range"] {
   background-color: transparent;
   padding: 0;
   margin: 0 0 1em 0;
-  color: rgb(var(--black));
+  color: rgb(var(--style-neutral-text));
   font-size: 1em;
   font-family: var(--font-regular);
   height: 2em;
@@ -417,7 +431,7 @@ input[type="range"]:focus {
 }
 
 input[type="range"]:focus:before {
-  background-color: rgb(var(--white));
+  background-color: rgb(var(--style-neutral-text));
 }
 
 input[type="range"][disabled] {
@@ -439,7 +453,7 @@ input[type="range"]::-webkit-slider-runnable-track {
 
 input[type="range"]::-webkit-slider-thumb {
   background-color: rgb(var(--gray-01));
-  color: rgb(var(--gray-12));
+  color: rgb(var(--form-range-thumb));
   margin: 0;
   padding: 0;
   border-width: var(--line-width);
@@ -503,7 +517,7 @@ input[type="range"]::-moz-range-track {
 
 input[type="range"]::-moz-range-thumb {
   background-color: rgb(var(--gray-01));
-  color: rgb(var(--gray-12));
+  color: rgb(var(--form-range-thumb));
   margin: 0;
   padding: 0;
   border-width: var(--line-width);
diff --git a/css/greeting.css b/css/greeting.css
old mode 100644
new mode 100755
index a00653b4..9399d45f
--- a/css/greeting.css
+++ b/css/greeting.css
@@ -4,7 +4,7 @@
   border-radius: var(--radius);
   font-size: 1em;
   font-family: var(--font-fjalla);
-  color: rgb(var(--white));
+  color: rgb(var(--style-neutral-text));
   width: 100%;
   min-height: 2.5em;
   display: flex;
diff --git a/css/header.css b/css/header.css
old mode 100644
new mode 100755
diff --git a/css/link.css b/css/link.css
old mode 100644
new mode 100755
index 07fce62a..ad9561d2
--- a/css/link.css
+++ b/css/link.css
@@ -94,7 +94,7 @@
   text-decoration: none;
   outline: none;
   background-color: rgb(var(--gray-03));
-  box-shadow: 0 2px 1em 0 rgba(0, 0, 0, 0.4);
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4);
 }
 
 .is-bookmarks-show-url .link-item:focus .link-panel-front,
@@ -161,12 +161,12 @@
 
 .link-control-item:focus,
 .link-control-item:hover {
-  color: rgb(var(--white));
+  color: rgb(var(--style-neutral-text));
   background-color: rgba(0, 0, 0, 0.2);
 }
 
 .link-control-item:active {
-  color: rgb(var(--white));
+  color: rgb(var(--style-neutral-text));
   background-color: rgba(0, 0, 0, 0.3);
   transition: none;
 }
@@ -202,13 +202,20 @@
 .link-url-text {
   margin: 0;
   font-size: 0.7em;
-  color: rgb(var(--black));
   font-family: var(--font-regular);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
+.bookmarks-url-dark .link-url-text {
+  color: rgb(var(--black));
+}
+
+.bookmarks-url-light .link-url-text {
+  color: rgb(var(--white));
+}
+
 .link-letter {
   font-family: var(--font-fjalla);
   color: rgb(var(--accent));
@@ -234,11 +241,11 @@
 
 .link-item:hover .link-letter,
 .link-item:focus .link-letter {
-  color: rgb(var(--white));
+  color: rgb(var(--style-neutral-text));
 }
 
 .link-panel-front:focus .link-letter {
-  color: rgb(var(--white));
+  color: rgb(var(--style-neutral-text));
 }
 
 .link-name {
@@ -260,11 +267,11 @@
 
 .link-item:hover .link-name,
 .link-item:focus .link-name {
-  color: rgb(var(--white));
+  color: rgb(var(--style-neutral-text));
 }
 
 .link-panel-front:focus .link-name {
-  color: rgb(var(--white));
+  color: rgb(var(--style-neutral-text));
 }
 
 .link-empty {
@@ -285,7 +292,7 @@
 .is-bookmarks-edit .link-item:hover .link-panel-front,
 .is-bookmarks-edit .link-item:focus .link-panel-front {
   height: calc(100% - var(--edit-height));
-  box-shadow: 0 2px 1em 0 rgba(0, 0, 0, 0.4);
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4);
 }
 
 .is-bookmarks-edit.is-bookmarks-show-url .link-item:focus .link-panel-front,
diff --git a/css/menu.css b/css/menu.css
old mode 100644
new mode 100755
index 64307ea2..147a4b5c
--- a/css/menu.css
+++ b/css/menu.css
@@ -26,6 +26,7 @@
   height: 100%;
   overflow-y: auto;
   pointer-events: all;
+  transition: background-color var(--animation-speed-fast) ease-in-out;
 }
 
 .menu-nav {
@@ -133,11 +134,11 @@
 
 @media (min-width: 900px) {
   .menu {
-    width: 60vw;
+    width: 70vw;
   }
 }
 
-@media (min-width: 1100px) {
+@media (min-width: 1600px) {
   .menu {
     width: 50vw;
   }
diff --git a/css/modal.css b/css/modal.css
old mode 100644
new mode 100755
diff --git a/css/reset.css b/css/reset.css
old mode 100644
new mode 100755
diff --git a/css/search.css b/css/search.css
old mode 100644
new mode 100755
diff --git a/css/shade.css b/css/shade.css
old mode 100644
new mode 100755
diff --git a/css/spacing.css b/css/spacing.css
old mode 100644
new mode 100755
diff --git a/css/state.css b/css/state.css
old mode 100644
new mode 100755
diff --git a/css/tip.css b/css/tip.css
old mode 100644
new mode 100755
diff --git a/css/typography.css b/css/typography.css
old mode 100644
new mode 100755
index 60e16e8a..6e8d55bc
--- a/css/typography.css
+++ b/css/typography.css
@@ -45,7 +45,7 @@ h6 {
 }
 
 p {
-  color: rgb(var(--white));
+  color: rgb(var(--style-neutral-text));
   margin: 0 0 1em 0;
   line-height: 1.5;
 }
@@ -80,12 +80,12 @@ a:focus {
 }
 
 a:hover {
-  color: rgb(var(--white));
+  color: rgb(var(--style-neutral-text));
   text-decoration: underline;
 }
 
 a:active {
-  color: rgb(var(--white));
+  color: rgb(var(--style-neutral-text));
 }
 
 ol,
diff --git a/css/utilities.css b/css/utilities.css
old mode 100644
new mode 100755
diff --git a/index.html b/index.html
index 44fd8812..9de4b1e5 100644
--- a/index.html
+++ b/index.html
@@ -1,4 +1,3 @@
-
 <!DOCTYPE html>
 <html lang="en">
 
@@ -77,8 +76,8 @@
         </div>
         <div class="header-item header-accent">
           <div class="input-wrap">
-            <input id="control-layout-theme-current" class="control-layout-theme-current" type="color" value="#00ff00" tabindex="1">
-            <label for="control-layout-theme-current" class="button input-label-button mb-0">
+            <input id="control-theme-accent-current" class="control-theme-accent-current" type="color" value="#00ff00" tabindex="1">
+            <label for="control-theme-accent-current" class="button input-label-button mb-0">
               <span class="button-text">Accent</span>
             </label>
           </div>
@@ -105,6 +104,7 @@
         <div class="menu-nav-area menu-nav-area-grow mb-0 list-unstyled">
           <button class="menu-nav-button button button-large active" data-target=".menu-content-area-header" tabindex="1">Header</button>
           <button class="menu-nav-button button button-large" data-target=".menu-content-area-bookmarks" tabindex="1">Bookmarks</button>
+          <button class="menu-nav-button button button-large" data-target=".menu-content-area-theme" tabindex="1">Theme</button>
           <button class="menu-nav-button button button-large" data-target=".menu-content-area-layout" tabindex="1">Layout</button>
           <button class="menu-nav-button button button-large" data-target=".menu-content-area-background" tabindex="1">Background</button>
         </div>
@@ -314,16 +314,24 @@
           <div class="menu-item">
             <h1 class="menu-header">Bookmarks</h1>
             <div class="checkbox-wrap">
-              <input id="control-bookmarks-show-link" class="control-bookmarks-show-link" type="checkbox" tabindex="1">
-              <label for="control-bookmarks-show-link"><span class="label-icon"></span>Show</label>
+              <input id="control-bookmarks-link-show" class="control-bookmarks-link-show" type="checkbox" tabindex="1">
+              <label for="control-bookmarks-link-show"><span class="label-icon"></span>Show</label>
             </div>
             <div class="checkbox-wrap form-indent-1">
-              <input id="control-bookmarks-show-name" class="control-bookmarks-show-name" type="checkbox" tabindex="1">
-              <label for="control-bookmarks-show-name"><span class="label-icon"></span>Names</label>
+              <input id="control-bookmarks-name-show" class="control-bookmarks-name-show" type="checkbox" tabindex="1">
+              <label for="control-bookmarks-name-show"><span class="label-icon"></span>Names</label>
             </div>
             <div class="checkbox-wrap form-indent-1">
-              <input id="control-bookmarks-show-url" class="control-bookmarks-show-url" type="checkbox" tabindex="1">
-              <label for="control-bookmarks-show-url"><span class="label-icon"></span>URL on hover</label>
+              <input id="control-bookmarks-url-show" class="control-bookmarks-url-show" type="checkbox" tabindex="1">
+              <label for="control-bookmarks-url-show"><span class="label-icon"></span>URL on hover</label>
+            </div>
+            <div class="radio-wrap form-indent-2">
+              <input id="control-bookmarks-url-style-dark" class="control-bookmarks-url-style-dark" type="radio" name="control-bookmarks-url-style" value="dark" tabindex="1">
+              <label for="control-bookmarks-url-style-dark"><span class="label-icon"></span>Dark text</label>
+            </div>
+            <div class="radio-wrap form-indent-2">
+              <input id="control-bookmarks-url-style-light" class="control-bookmarks-url-style-light" type="radio" name="control-bookmarks-url-style" value="light" tabindex="1">
+              <label for="control-bookmarks-url-style-light"><span class="label-icon"></span>Light text</label>
             </div>
           </div>
           <div class="menu-item">
@@ -361,6 +369,51 @@
           </div>
         </div>
 
+        <div class="menu-content-area menu-content-area-theme is-hidden">
+          <div class="menu-item">
+            <h1 class="menu-header">Style</h1>
+            <div class="radio-wrap">
+              <input id="control-theme-style-dark" class="control-theme-style-dark" type="radio" name="control-theme-style" value="dark" tabindex="1">
+              <label for="control-theme-style-dark"><span class="label-icon"></span>Dark</label>
+            </div>
+            <div class="radio-wrap">
+              <input id="control-theme-style-light" class="control-theme-style-light" type="radio" name="control-theme-style" value="light" tabindex="1">
+              <label for="control-theme-style-light"><span class="label-icon"></span>Light</label>
+              <p class="input-helper small muted">Accent colour may need to be changed to best fit the Theme Style.</p>
+            </div>
+          </div>
+          <div class="menu-item">
+            <h1 class="menu-header">Accent</h1>
+            <div class="checkbox-wrap">
+              <input id="control-theme-accent-random-active" class="control-theme-accent-random-active" type="checkbox" tabindex="1">
+              <label for="control-theme-accent-random-active"><span class="label-icon"></span>Random Accent colour on load/refresh</label>
+            </div>
+            <div class="radio-wrap form-indent-1">
+              <input id="control-theme-accent-random-style-any" class="control-theme-accent-random-style-any" type="radio" name="control-theme-accent-random-style" value="any" tabindex="1">
+              <label for="control-theme-accent-random-style-any"><span class="label-icon"></span>Any colour</label>
+            </div>
+            <div class="radio-wrap form-indent-1">
+              <input id="control-theme-accent-random-style-light" class="control-theme-accent-random-style-light" type="radio" name="control-theme-accent-random-style" value="light" tabindex="1">
+              <label for="control-theme-accent-random-style-light"><span class="label-icon"></span>Light colours</label>
+            </div>
+            <div class="radio-wrap form-indent-1">
+              <input id="control-theme-accent-random-style-dark" class="control-theme-accent-random-style-dark" type="radio" name="control-theme-accent-random-style" value="dark" tabindex="1">
+              <label for="control-theme-accent-random-style-dark"><span class="label-icon"></span>Dark colours</label>
+            </div>
+            <div class="radio-wrap form-indent-1">
+              <input id="control-theme-accent-random-style-pastel" class="control-theme-accent-random-style-pastel" type="radio" name="control-theme-accent-random-style" value="pastel" tabindex="1">
+              <label for="control-theme-accent-random-style-pastel"><span class="label-icon"></span>Pastel colours</label>
+            </div>
+            <div class="radio-wrap form-indent-1 mb-3">
+              <input id="control-theme-accent-random-style-saturated" class="control-theme-accent-random-style-saturated" type="radio" name="control-theme-accent-random-style" value="saturated" tabindex="1">
+              <label for="control-theme-accent-random-style-saturated"><span class="label-icon"></span>Saturated colours</label>
+            </div>
+            <div class="button-wrap form-indent-1">
+              <button class="control-theme-accent-randomise" type="button">Randomise now</button>
+            </div>
+          </div>
+        </div>
+
         <div class="menu-content-area menu-content-area-layout is-hidden">
           <div class="menu-item">
             <h1 class="menu-header">Width</h1>
@@ -388,36 +441,6 @@
               <input id="control-layout-title" class="control-layout-title" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="New Tab" tabindex="1">
             </div>
           </div>
-          <div class="menu-item">
-            <h1 class="menu-header">Theme</h1>
-            <div class="checkbox-wrap">
-              <input id="control-layout-theme-random-active" class="control-layout-theme-random-active" type="checkbox" tabindex="1">
-              <label for="control-layout-theme-random-active"><span class="label-icon"></span>Random Accent colour on load/refresh</label>
-            </div>
-            <div class="radio-wrap form-indent-1">
-              <input id="control-layout-theme-style-any" class="control-layout-theme-style-any" type="radio" name="control-layout-theme-style" value="any" tabindex="1">
-              <label for="control-layout-theme-style-any"><span class="label-icon"></span>Any colour</label>
-            </div>
-            <div class="radio-wrap form-indent-1">
-              <input id="control-layout-theme-style-light" class="control-layout-theme-style-light" type="radio" name="control-layout-theme-style" value="light" tabindex="1">
-              <label for="control-layout-theme-style-light"><span class="label-icon"></span>Light colours</label>
-            </div>
-            <div class="radio-wrap form-indent-1">
-              <input id="control-layout-theme-style-dark" class="control-layout-theme-style-dark" type="radio" name="control-layout-theme-style" value="dark" tabindex="1">
-              <label for="control-layout-theme-style-dark"><span class="label-icon"></span>Dark colours</label>
-            </div>
-            <div class="radio-wrap form-indent-1">
-              <input id="control-layout-theme-style-pastel" class="control-layout-theme-style-pastel" type="radio" name="control-layout-theme-style" value="pastel" tabindex="1">
-              <label for="control-layout-theme-style-pastel"><span class="label-icon"></span>Pastel colours</label>
-            </div>
-            <div class="radio-wrap form-indent-1 mb-3">
-              <input id="control-layout-theme-style-saturated" class="control-layout-theme-style-saturated" type="radio" name="control-layout-theme-style" value="saturated" tabindex="1">
-              <label for="control-layout-theme-style-saturated"><span class="label-icon"></span>Saturated colours</label>
-            </div>
-            <div class="button-wrap form-indent-1">
-              <button class="control-layout-theme-randomise" type="button">Randomise now</button>
-            </div>
-          </div>
         </div>
 
         <div class="menu-content-area menu-content-area-background is-hidden">
@@ -472,6 +495,7 @@
 <script src="js/modal.js"></script>
 <script src="js/tip.js"></script>
 <script src="js/shade.js"></script>
+<script src="js/accent.js"></script>
 <script src="js/theme.js"></script>
 <script src="js/date.js"></script>
 <script src="js/greeting.js"></script>
diff --git a/js/accent.js b/js/accent.js
new file mode 100644
index 00000000..553717d5
--- /dev/null
+++ b/js/accent.js
@@ -0,0 +1,77 @@
+var accent = (function() {
+
+  var render = function() {
+    var html = helper.e("html");
+    var color = state.get().theme.accent.current;
+    html.style.setProperty("--accent", color.r + ", " + color.g + ", " + color.b);
+  };
+
+  var random = function() {
+    if (state.get().theme.accent.random.active) {
+      var randomVal = function(min, max) {
+        return Math.floor(Math.random() * (max - min) + 1) + min;
+      };
+      var color = {
+        any: function() {
+          return {
+            h: randomVal(0, 360),
+            s: randomVal(0, 100),
+            l: randomVal(0, 100)
+          };
+        },
+        light: function() {
+          return {
+            h: randomVal(0, 360),
+            s: randomVal(50, 90),
+            l: randomVal(50, 90)
+          };
+        },
+        dark: function() {
+          return {
+            h: randomVal(0, 360),
+            s: randomVal(10, 50),
+            l: randomVal(10, 50)
+          };
+        },
+        pastel: function() {
+          return {
+            h: randomVal(0, 360),
+            s: 50,
+            l: 80
+          };
+        },
+        saturated: function() {
+          return {
+            h: randomVal(0, 360),
+            s: 100,
+            l: 50
+          };
+        }
+      };
+      var hsl = color[state.get().theme.accent.random.style]();
+      var randomColor = helper.hslToRgb({
+        h: hsl.h,
+        s: (hsl.s / 100),
+        l: (hsl.l / 100)
+      });
+      helper.setObject({
+        object: state.get(),
+        path: "theme.accent.current",
+        newValue: randomColor
+      });
+    };
+  };
+
+  var init = function() {
+    random();
+    render();
+  };
+
+  // exposed methods
+  return {
+    init: init,
+    render: render,
+    random: random
+  };
+
+})();
diff --git a/js/control.js b/js/control.js
index d572c69e..613237ac 100644
--- a/js/control.js
+++ b/js/control.js
@@ -20,11 +20,11 @@ var control = (function() {
       render();
     }
   }, {
-    element: helper.e(".control-layout-theme-current"),
-    path: "layout.theme.current",
+    element: helper.e(".control-theme-accent-current"),
+    path: "theme.accent.current",
     type: "color",
     func: function() {
-      theme.render();
+      accent.render();
     }
   }, {
     element: helper.e(".control-header-clock-show-hours"),
@@ -343,8 +343,8 @@ var control = (function() {
       header.render();
     }
   }, {
-    element: helper.e(".control-bookmarks-show-link"),
-    path: "bookmarks.show.link",
+    element: helper.e(".control-bookmarks-link-show"),
+    path: "bookmarks.link.show",
     type: "checkbox",
     func: function() {
       render();
@@ -352,8 +352,8 @@ var control = (function() {
       header.render();
     }
   }, {
-    element: helper.e(".control-bookmarks-show-name"),
-    path: "bookmarks.show.name",
+    element: helper.e(".control-bookmarks-name-show"),
+    path: "bookmarks.name.show",
     type: "checkbox",
     func: function() {
       render();
@@ -415,13 +415,27 @@ var control = (function() {
       header.render();
     }
   }, {
-    element: helper.e(".control-bookmarks-show-url"),
-    path: "bookmarks.show.url",
+    element: helper.e(".control-bookmarks-url-show"),
+    path: "bookmarks.url.show",
     type: "checkbox",
     func: function() {
       render();
       dependents();
     }
+  }, {
+    element: helper.e(".control-bookmarks-url-style-dark"),
+    path: "bookmarks.url.style",
+    type: "radio",
+    func: function() {
+      render();
+    }
+  }, {
+    element: helper.e(".control-bookmarks-url-style-light"),
+    path: "bookmarks.url.style",
+    type: "radio",
+    func: function() {
+      render();
+    }
   }, {
     element: helper.e(".control-bookmarks-new-tab"),
     path: "bookmarks.newTab",
@@ -504,54 +518,70 @@ var control = (function() {
       title.render();
     }
   }, {
-    element: helper.e(".control-layout-theme-random-active"),
-    path: "layout.theme.random.active",
+    element: helper.e(".control-theme-style-dark"),
+    path: "theme.style",
+    type: "radio",
+    func: function() {
+      render();
+      accent.render();
+    }
+  }, {
+    element: helper.e(".control-theme-style-light"),
+    path: "theme.style",
+    type: "radio",
+    func: function() {
+      render();
+      accent.render();
+    }
+  }, {
+    element: helper.e(".control-theme-accent-random-active"),
+    path: "theme.accent.random.active",
     type: "checkbox",
     func: function() {
       dependents();
-      theme.render();
+      accent.render();
     }
   }, {
-    element: helper.e(".control-layout-theme-style-any"),
-    path: "layout.theme.random.style",
+    element: helper.e(".control-theme-accent-random-style-any"),
+    path: "theme.accent.random.style",
     type: "radio",
     func: function() {
       render();
     }
   }, {
-    element: helper.e(".control-layout-theme-style-light"),
-    path: "layout.theme.random.style",
+    element: helper.e(".control-theme-accent-random-style-light"),
+    path: "theme.accent.random.style",
     type: "radio",
     func: function() {
       render();
     }
   }, {
-    element: helper.e(".control-layout-theme-style-dark"),
-    path: "layout.theme.random.style",
+    element: helper.e(".control-theme-accent-random-style-dark"),
+    path: "theme.accent.random.style",
     type: "radio",
     func: function() {
       render();
     }
   }, {
-    element: helper.e(".control-layout-theme-style-pastel"),
-    path: "layout.theme.random.style",
+    element: helper.e(".control-theme-accent-random-style-pastel"),
+    path: "theme.accent.random.style",
     type: "radio",
     func: function() {
       render();
     }
   }, {
-    element: helper.e(".control-layout-theme-style-saturated"),
-    path: "layout.theme.random.style",
+    element: helper.e(".control-theme-accent-random-style-saturated"),
+    path: "theme.accent.random.style",
     type: "radio",
     func: function() {
       render();
     }
   }, {
-    element: helper.e(".control-layout-theme-randomise"),
+    element: helper.e(".control-theme-accent-randomise"),
     type: "button",
     func: function() {
-      theme.random();
-      theme.render();
+      accent.random();
+      accent.render();
     }
   }, {
     element: helper.e(".control-background-image-show"),
@@ -743,21 +773,32 @@ var control = (function() {
         }
       };
       view[state.get().bookmarks.style]();
-      if (state.get().bookmarks.show.link) {
+      if (state.get().bookmarks.link.show) {
         helper.addClass(html, "is-bookmarks-show-link");
       } else {
         helper.removeClass(html, "is-bookmarks-show-link");
       };
-      if (state.get().bookmarks.show.name) {
+      if (state.get().bookmarks.name.show) {
         helper.addClass(html, "is-bookmarks-show-name");
       } else {
         helper.removeClass(html, "is-bookmarks-show-name");
       };
-      if (state.get().bookmarks.show.url) {
+      if (state.get().bookmarks.url.show) {
         helper.addClass(html, "is-bookmarks-show-url");
       } else {
         helper.removeClass(html, "is-bookmarks-show-url");
       };
+      var urlText = {
+        dark: function() {
+          helper.addClass(html, "bookmarks-url-dark");
+          helper.removeClass(html, "bookmarks-url-light");
+        },
+        light: function() {
+          helper.removeClass(html, "bookmarks-url-dark");
+          helper.addClass(html, "bookmarks-url-light");
+        }
+      };
+      urlText[state.get().bookmarks.url.style]();
     };
     var _layout = function() {
       helper.removeClass(html, "is-layout-width-fluid");
@@ -770,6 +811,11 @@ var control = (function() {
         helper.removeClass(html, "is-layout-scroll-past-end");
       };
     };
+    var _theme = function() {
+    helper.removeClass(html, "is-theme-style-dark");
+    helper.removeClass(html, "is-theme-style-light");
+    helper.addClass(html, "is-theme-style-" + state.get().theme.style);
+    };
     var _editAdd = function() {
       if (state.get().header.editAdd.show) {
         helper.addClass(html, "is-header-edit-add");
@@ -831,6 +877,7 @@ var control = (function() {
     _accent();
     _link();
     _layout();
+    _theme();
     _background();
     _header();
   };
@@ -933,22 +980,22 @@ var control = (function() {
       };
     };
     var _theme = function() {
-      if (state.get().layout.theme.random.active) {
-        helper.eA("input[name='control-layout-theme-style']").forEach(function(arrayItem, index) {
+      if (state.get().theme.accent.random.active) {
+        helper.eA("input[name='control-theme-accent-random-style']").forEach(function(arrayItem, index) {
           arrayItem.disabled = false;
-          helper.e(".control-layout-theme-randomise").disabled = false;
+          helper.e(".control-theme-accent-randomise").disabled = false;
         });
       } else {
-        helper.eA("input[name='control-layout-theme-style']").forEach(function(arrayItem, index) {
+        helper.eA("input[name='control-theme-accent-random-style']").forEach(function(arrayItem, index) {
           arrayItem.disabled = true;
-          helper.e(".control-layout-theme-randomise").disabled = true;
+          helper.e(".control-theme-accent-randomise").disabled = true;
         });
       };
     };
     var _link = function() {
-      if (state.get().bookmarks.show.link) {
-        helper.e(".control-bookmarks-show-name").disabled = false;
-        helper.e(".control-bookmarks-show-url").disabled = false;
+      if (state.get().bookmarks.link.show) {
+        helper.e(".control-bookmarks-name-show").disabled = false;
+        helper.e(".control-bookmarks-url-show").disabled = false;
         helper.e(".control-bookmarks-style-block").disabled = false;
         helper.e(".control-bookmarks-style-list").disabled = false;
         helper.e(".control-bookmarks-new-tab").disabled = false;
@@ -959,8 +1006,8 @@ var control = (function() {
         helper.e(".control-layout-alignment-vertical-center").disabled = true;
         helper.e(".control-layout-alignment-vertical-bottom").disabled = true;
       } else {
-        helper.e(".control-bookmarks-show-name").disabled = true;
-        helper.e(".control-bookmarks-show-url").disabled = true;
+        helper.e(".control-bookmarks-name-show").disabled = true;
+        helper.e(".control-bookmarks-url-show").disabled = true;
         helper.e(".control-bookmarks-style-block").disabled = true;
         helper.e(".control-bookmarks-style-list").disabled = true;
         helper.e(".control-bookmarks-new-tab").disabled = true;
@@ -971,6 +1018,13 @@ var control = (function() {
         helper.e(".control-layout-alignment-vertical-center").disabled = false;
         helper.e(".control-layout-alignment-vertical-bottom").disabled = false;
       };
+      if (state.get().bookmarks.link.show && state.get().bookmarks.url.show) {
+        helper.e(".control-bookmarks-url-style-dark").disabled = false;
+        helper.e(".control-bookmarks-url-style-light").disabled = false;
+      } else {
+        helper.e(".control-bookmarks-url-style-dark").disabled = true;
+        helper.e(".control-bookmarks-url-style-light").disabled = true;
+      }
     };
     var _background = function() {
       if (state.get().background.image.show) {
diff --git a/js/init.js b/js/init.js
index d6c5f08d..246ba187 100644
--- a/js/init.js
+++ b/js/init.js
@@ -15,9 +15,8 @@ bookmarks.init();
 // bind menu tabs
 menu.init();
 
-// render input color value
 // render css accent var
-theme.init();
+accent.init();
 
 // render links from bookmarks
 link.init();
diff --git a/js/keyboard.js b/js/keyboard.js
index 95f3ab94..13ab780c 100644
--- a/js/keyboard.js
+++ b/js/keyboard.js
@@ -23,11 +23,18 @@ var keyboard = (function() {
       };
       // ctrl+alt+a
       if (event.ctrlKey && event.altKey && event.keyCode == 65) {
-        if (state.get().bookmarks.show.link) {
+        if (state.get().bookmarks.link.show) {
           menu.close();
           link.add();
         };
       };
+      // ctrl+alt+d
+      if (event.ctrlKey && event.altKey && event.keyCode == 68) {
+        theme.toggle();
+        control.render();
+        control.update();
+        data.save();
+      };
       // ctrl+alt+m
       if (event.ctrlKey && event.altKey && event.keyCode == 77) {
         shade.destroy();
@@ -36,7 +43,7 @@ var keyboard = (function() {
       };
       // ctrl+alt+e
       if (event.ctrlKey && event.altKey && event.keyCode == 69) {
-        if (state.get().bookmarks.show.link && bookmarks.get().length > 0) {
+        if (state.get().bookmarks.link.show && bookmarks.get().length > 0) {
           if (state.get().bookmarks.edit) {
             helper.setObject({
               object: state.get(),
@@ -57,8 +64,8 @@ var keyboard = (function() {
       };
       // ctrl+alt+r
       if (event.ctrlKey && event.altKey && event.keyCode == 82) {
-        theme.random();
-        theme.render();
+        accent.random();
+        accent.render();
         data.save();
       };
     }, false);
diff --git a/js/state.js b/js/state.js
index 061df8f6..fcaaab51 100644
--- a/js/state.js
+++ b/js/state.js
@@ -71,10 +71,15 @@ var state = (function() {
       }
     },
     bookmarks: {
-      show: {
-        link: true,
-        name: true,
-        url: true
+      link: {
+        show: true
+      },
+      name: {
+        show: true
+      },
+      url: {
+        show: true,
+        style: "dark"
       },
       newTab: false,
       edit: false,
@@ -85,8 +90,10 @@ var state = (function() {
     layout: {
       width: "wide",
       scrollPastEnd: true,
-      title: "New Tab",
-      theme: {
+      title: "New Tab"
+    },
+    theme: {
+      accent: {
         current: {
           r: 0,
           g: 255,
@@ -96,7 +103,8 @@ var state = (function() {
           active: false,
           style: "any"
         }
-      }
+      },
+      style: "dark"
     },
     background: {
       image: {
diff --git a/js/theme.js b/js/theme.js
index dd984c81..1fba04bd 100644
--- a/js/theme.js
+++ b/js/theme.js
@@ -1,77 +1,28 @@
 var theme = (function() {
 
-  var render = function() {
-    var html = helper.e("html");
-    var color = state.get().layout.theme.current;
-    html.style.setProperty("--accent", color.r + ", " + color.g + ", " + color.b);
-  };
-
-  var random = function() {
-    if (state.get().layout.theme.random.active) {
-      var randomVal = function(min, max) {
-        return Math.floor(Math.random() * (max - min) + 1) + min;
-      };
-      var color = {
-        any: function() {
-          return {
-            h: randomVal(0, 360),
-            s: randomVal(0, 100),
-            l: randomVal(0, 100)
-          };
-        },
-        light: function() {
-          return {
-            h: randomVal(0, 360),
-            s: randomVal(50, 90),
-            l: randomVal(50, 90)
-          };
-        },
-        dark: function() {
-          return {
-            h: randomVal(0, 360),
-            s: randomVal(10, 50),
-            l: randomVal(10, 50)
-          };
-        },
-        pastel: function() {
-          return {
-            h: randomVal(0, 360),
-            s: 50,
-            l: 80
-          };
-        },
-        saturated: function() {
-          return {
-            h: randomVal(0, 360),
-            s: 100,
-            l: 50
-          };
-        }
-      };
-      var hsl = color[state.get().layout.theme.random.style]();
-      var randomColor = helper.hslToRgb({
-        h: hsl.h,
-        s: (hsl.s / 100),
-        l: (hsl.l / 100)
-      });
-      helper.setObject({
-        object: state.get(),
-        path: "layout.theme.current",
-        newValue: randomColor
-      });
+  var toggle = function() {
+    var style = {
+      dark: function() {
+        helper.setObject({
+          object: state.get(),
+          path: "theme.style",
+          newValue: "light"
+        })
+      },
+      light: function() {
+        helper.setObject({
+          object: state.get(),
+          path: "theme.style",
+          newValue: "dark"
+        })
+      }
     };
-  };
-
-  var init = function() {
-    random();
-    render();
+    style[state.get().theme.style]();
   };
 
   // exposed methods
   return {
-    init: init,
-    random: random,
-    render: render
+    toggle: toggle
   };
 
 })();
diff --git a/js/update.js b/js/update.js
index ba4dee45..561f46db 100644
--- a/js/update.js
+++ b/js/update.js
@@ -208,6 +208,29 @@ var update = (function() {
         };
         data.version = "2.11.0";
       };
+      if (version.compare(data.version, "2.12.0") == -1) {
+        console.log("\t -- running update", "2.12.0");
+        data.state.bookmarks.link = {
+          show: data.state.bookmarks.show.link
+        };
+        data.state.bookmarks.name = {
+          show: data.state.bookmarks.show.name
+        };
+        data.state.bookmarks.url = {
+          show: data.state.bookmarks.show.url,
+          style: "dark"
+        };
+        delete data.state.bookmarks.show;
+        data.state.theme = {
+          accent: {
+            current: data.state.layout.theme.current,
+            random: data.state.layout.theme.random
+          },
+          style: "dark"
+        };
+        delete data.state.layout.theme;
+        data.version = "2.12.0";
+      };
     };
     // if no update is needed
     // version bump
diff --git a/js/version.js b/js/version.js
index 08f628dc..06aec855 100644
--- a/js/version.js
+++ b/js/version.js
@@ -1,7 +1,7 @@
 var version = (function() {
 
   // version is normally bumped when the state needs changing or any new functionality is added
-  var current = "2.11.0";
+  var current = "2.12.0";
 
   var compare = function(a, b) {
     var pa = a.split(".");