diff --git a/src/app/app.ts b/src/app/app.ts
index e54f875f..49a5449c 100644
--- a/src/app/app.ts
+++ b/src/app/app.ts
@@ -182,11 +182,11 @@ Promise.all([
   const updateTheme = (theme: string | null) => {
     if (theme === null) return
     if (theme === 'dark') {
-      document.body.setAttribute('data-style', 'dark')
+      document.documentElement.setAttribute('data-theme', 'dark')
       themeSelector.classList.add('toggled')
       localStorage.setItem(LOCAL_STORAGE_THEME, 'dark')
     } else {
-      document.body.setAttribute('data-style', 'light')
+      document.documentElement.setAttribute('data-theme', 'light')
       themeSelector.classList.remove('toggled')
       localStorage.setItem(LOCAL_STORAGE_THEME, 'light')
     }
@@ -194,7 +194,7 @@ Promise.all([
   updateTheme(localStorage.getItem(LOCAL_STORAGE_THEME))
 
   themeSelector.addEventListener('click', evt => {
-    if (document.body.getAttribute('data-style') === 'dark') {
+    if (document.documentElement.getAttribute('data-theme') === 'dark') {
       updateTheme('light')
     } else {
       updateTheme('dark')
diff --git a/src/styles/global.css b/src/styles/global.css
index 6ea76404..14d789cf 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,8 +1,41 @@
+:root {
+  --background: #ffffff;
+  --text: #000000;
+  --nav: #343a40;
+  --nav-hover: #565d64;
+  --nav-faded: #9fa2a7;
+  --nav-faded-hover: #bcbfc3;
+  --selection: rgba(103, 134, 221, 0.6);
+  --border: #cccccc;
+  --nav-menu: #ffffff83;
+  --btn-background: #1f2020a6;
+  --btn-hover: #5d5f5fa6;
+  --btn-text: #ffffff;
+  --btn-active: #a5e77a;
+  --errors-background: #f13000c5;
+  --errors-text: #000000cc;
+  
+  --style-transition: 0.3s;
+}
+
+:root[data-theme=dark] {
+  --background: #222222;
+  --text: #ffffff;
+  --nav: #91908f;
+  --nav-hover: #b4b3b0;
+  --nav-faded: #4d4c4c;
+  --nav-faded-hover: #6e6e6e;
+  --border: #3d3d3d;
+  --nav-menu: #00000083;
+  --btn-background: #0a0a0aa6;
+  --btn-hover: #383838a6;
+  --errors-text: #ffffffcc;
+}
+
 * {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
-  --style-transition: 0.3s;
 }
 
 body {
@@ -12,7 +45,8 @@ body {
 
 .container {
   overflow-x: hidden;
-  transition: background-color 0.2s;
+  background-color: var(--background);
+  transition: background-color var(--style-transition);
 }
 
 .header {
@@ -21,7 +55,8 @@ body {
   align-items: center;
   padding: 10px;
   height: 56px;
-  border-bottom: 2px solid;
+  border-bottom: 2px solid var(--border);
+  transition: border-color var(--style-transition);
 }
 
 .header-title {
@@ -31,6 +66,8 @@ body {
 
 .header-title h2 {
   margin-right: 10px;
+  color: var(--nav);
+  transition: color var(--style-transition);
 }
 
 .header-title .model-selector {
@@ -48,6 +85,12 @@ body {
   cursor: pointer;
   margin: 0 16px;
   user-select: none;
+  fill: var(--nav);
+  transition: fill var(--style-transition);
+}
+
+.nav-item:hover {
+  fill: var(--nav-hover);
 }
 
 .nav-item span {
@@ -58,6 +101,14 @@ body {
   display: none;
 }
 
+.nav-item#github-link {
+  fill: var(--nav-faded);
+}
+
+.nav-item#github-link:hover {
+  fill: var(--nav-faded-hover);
+}
+
 .toggle:not(.toggled) svg:nth-child(1) {
   display: none;
 }
@@ -80,6 +131,7 @@ body {
   margin-top: 10px;
   z-index: 10;
   border-radius: 3px;
+  background-color: var(--nav-menu);
 }
 
 .nav-selector-menu .btn {
@@ -112,8 +164,14 @@ body {
   -webkit-tab-size: 4;
   outline: none;
   resize: none;
+  background-color: var(--background);
+  color: var(--text);
+  transition:all var(--style-transition);
 }
 
+.source textarea::selection {
+  background-color: var(--selection);
+}
 .source-controls {
   display: flex;
   flex-direction: row-reverse;
@@ -141,6 +199,8 @@ body {
   border-left: 2px solid;
   float: left;
   cursor: ew-resize;
+  border-color: var(--border);
+  transition: border-color var(--style-transition);
 }
 
 .btn {
@@ -152,7 +212,14 @@ body {
   cursor: pointer;
   outline: none;
   font-size: 1rem;
-  transition: background-color 0.2s;
+  background-color: var(--btn-background);
+  color: var(--btn-text);
+  fill: var(--btn-text);
+  transition: background-color var(--style-transition);
+}
+
+.btn:hover {
+  background-color: var(--btn-hover);
 }
 
 .btn svg:not(:last-child) {
@@ -169,12 +236,21 @@ body {
   border-top-left-radius: 0px;
 }
 
+.btn.check,
+.btn.selected {
+  fill: var(--btn-active);
+  color: var(--btn-active);
+}
+
 .errors {
   position: absolute;
-  bottom: 0;
+  bottom: 17px;
   right: 17px;
   margin: 5px;
   border-radius: 3px;
+  background-color: var(--errors-background);
+  color: var(--errors-text);
+  fill: var(--errors-text);
 }
 
 .errors.hidden .error-list {
@@ -268,133 +344,3 @@ body {
     font-size: 18px;
   }
 }
-/* COLORS */
-
-.container,
-.source textarea {
-  background-color: #ffffff;
-  transition: background-color var(--style-transition);
-}
-
-.source textarea {
-  transition:all var(--style-transition);
-}
-
-.header-title h2,
-.nav-item {
-  fill: #343a40;
-  color: #343a40;
-  transition: color, fill var(--style-transition);
-}
-
-.nav-item:hover {
-  fill: #565d64;
-}
-
-.nav-item#github-link {
-  fill: #9fa2a7;
-}
-
-.nav-item#github-link:hover {
-  fill: #bcbfc3;
-}
-
-.source textarea::selection {
-  background-color: rgba(103, 134, 221, 0.6);
-}
-
-.gutter.gutter-horizontal,
-.header {
-  border-color: #cccccc;
-  transition: border-color var(--style-transition);
-}
-
-.nav-selector-menu {
-  background-color: #ffffff83;
-}
-
-.btn {
-  background-color: #1f2020a6;
-  color: #ffffff;
-  fill: #ffffff;
-}
-
-.btn.check,
-.btn.selected {
-  fill: #a5e77a;
-  color: #a5e77a;
-}
-
-.btn:hover {
-  background-color: #5d5f5fa6;
-}
-
-.errors {
-  background-color: #f13000c5;
-  color: #000000cc;
-  fill: #000000cc;
-}
-
-/* DARK MODE */
-
-body[data-style=dark] .container,
-body[data-style=dark] .source textarea {
-  background-color: #222222;
-}
-
-body[data-style=dark] .source textarea {
-  color: #ffffff;
-}
-
-body[data-style=dark] .header-title h2,
-body[data-style=dark] .nav-item {
-  fill: #91908f;
-  color: #91908f;
-}
-
-body[data-style=dark] .nav-item:hover {
-  fill: #b4b3b0;
-}
-
-body[data-style=dark] .nav-item#github-link {
-  fill: #4d4c4c;
-}
-
-body[data-style=dark] .nav-item#github-link:hover {
-  fill: #6e6e6e;
-}
-
-body[data-style=dark] .source textarea::selection {
-  background-color: rgba(103, 134, 221, 0.6);
-}
-
-body[data-style=dark] .gutter.gutter-horizontal,
-body[data-style=dark] .header {
-  border-color: #3d3d3d;
-}
-
-body[data-style=dark] .nav-selector-menu {
-  background-color: #00000083;
-}
-
-body[data-style=dark] .btn {
-  background-color: #0a0a0aa6;
-  color: #ffffff;
-  fill: #ffffff;
-}
-
-body[data-style=dark] .btn.check,
-body[data-style=dark] .btn.selected {
-  fill: #a5e77a;
-  color: #a5e77a;
-}
-
-body[data-style=dark] .btn:hover {
-  background-color: #383838a6;
-}
-
-body[data-style=dark] .errors {
-  background-color: #f13000c5;
-  color: #ffffffcc;
-  fill: #ffffffcc;
-}
diff --git a/src/styles/nodes.css b/src/styles/nodes.css
index 8c6cdf16..af36374a 100644
--- a/src/styles/nodes.css
+++ b/src/styles/nodes.css
@@ -1,3 +1,38 @@
+:root {
+  --node-border: #bcbfc3;
+  --node-background-label: #e4e4e4;
+  --node-background-input: #ffffff;
+  --node-text: #000000;
+  --node-selected: #f0e65e;
+  --node-selected-border: #b9a327;
+  --node-add: #9bd464;
+  --node-add-border: #498d09;
+  --node-remove: #e76f51;
+  --node-remove-border: #be4b2e;
+  --node-indent-border: #b9b9b9;
+  --category-predicate: #65b5b8;
+  --category-predicate-border: #187e81;
+  --category-function: #979fa7;
+  --category-function-border: #788086;
+}
+
+:root[data-theme=dark] {
+  --node-border: #4e4e4e;
+  --node-background-label: #1b1b1b;
+  --node-background-input: #272727;
+  --node-text: #dadada;
+  --node-selected: #9e9843;
+  --node-selected-border: #837d2a;
+  --node-add: #5a961e;
+  --node-add-border: #3b6e0c;
+  --node-remove: #b64023;
+  --node-remove-border: #7e1d05;
+  --node-indent-border: #454749;
+  --category-predicate: #306163;
+  --category-predicate-border: #224849;
+  --category-function: #838383;
+  --category-function-border: #6b6b6b;
+}
 
 .tree > .object-node > .node-body {
   border-left: none;
@@ -16,24 +51,9 @@
   margin-bottom: 0;
 }
 
-.list-node > .node-body,
-.map-node > .node-body,
-.object-node > .node-body {
-  border-left: 3px solid;
-}
-
-.node-header > label,
-.node-header > button {
-  user-select: none;
-}
-.object-node > .node-header > label.collapse {
-  cursor: pointer;
-}
-
-.node input,
-.node select,
-.node button {
-  font-size: 18px;
+.node-body {
+  border-left: 3px solid var(--node-indent-border);
+  transition: border-color var(--style-transition);
 }
 
 .node-header {
@@ -45,21 +65,41 @@
 .node-header > * {
   height: 34px;
   border: 1px solid;
+  color: var(--node-text);
+  border-color: var(--node-border);
+  transition: all var(--style-transition);
 }
 
-.node-header > button {
-  cursor: pointer;
-}
-
-.node-header > input,
-.node-header > select {
-  padding-left: 9px;
-}
-
-.node-header > label,
-.node-header > button {
+.node-header > label {
   padding: 0 9px;
   line-height: 1.94rem;
+  user-select: none;
+  background-color: var(--node-background-label);
+}
+
+.node-header > input {
+  font-size: 18px;
+  padding-left: 9px;
+  background-color: var(--node-background-input);
+}
+
+.node-header > select {
+  font-size: 18px;
+  padding-left: 6px;
+  background-color: var(--node-background-input);
+}
+
+.node-header > button {
+  font-size: 18px;
+  padding: 0 9px;
+  line-height: 1.94rem;
+  user-select: none;
+  cursor: pointer;
+  background-color: var(--node-background-input);
+}
+
+.object-node > .node-header > label.collapse {
+  cursor: pointer;
 }
 
 .node-header > *:first-child {
@@ -88,6 +128,23 @@
   border-bottom-left-radius: 3px;
 }
 
+button.selected {
+  background-color: var(--node-selected);
+  border-color: var(--node-selected-border);
+}
+
+label.collapse.closed,
+button.add {
+  background-color: var(--node-add);
+  border-color: var(--node-add-border);
+}
+
+label.collapse.open,
+button.remove {
+  background-color: var(--node-remove);
+  border-color: var(--node-remove-border);
+}
+
 label.collapse::before,
 button.remove::before {
   padding-right: 5px;
@@ -125,7 +182,8 @@ button.remove::before {
   border: none;
   height: 34px;
   width: 34px;
-  padding: 6px;
+  padding-left: 6px;
+  fill: var(--node-remove);
 }
 
 .node-body {
@@ -155,130 +213,26 @@ button.remove::before {
   margin-top: 2px;
 }
 
-/* COLORS */
-
-.node-header > * {
-  border-color: #bcbfc3;
-  transition: all var(--style-transition);
-}
-
-.node-header > label {
-  background-color: #e4e4e4;
-}
-
-button.selected {
-  background-color: #f0e65e;
-  border-color: #b9a327
-}
-
-.node-header > label.collapse.closed,
-button.add {
-  border-color: #498d09;
-  background-color: #9bd464;
-}
-
-.node-header > label.collapse.open,
-button.remove {
-  border-color: #be4b2e;
-  background-color: #e76f51;
-}
-
-.node-header[data-error] > svg {
-  fill: #e76f51;
-}
-
-.node-body {
-  border-color: #b9b9b9 !important;
-  transition: border-color var(--style-transition);
-}
-
 [data-category=predicate] > .node-header > label,
 [data-category=predicate] > .node-body > .node.node-header > *:first-child,
 [data-category=predicate] > .node-body > .node > .node-header > *:first-child {
-  background-color: #65b5b8 !important;
+  background-color: var(--category-predicate) !important;
 }
 
 [data-category=predicate] > .node-body,
 [data-category=predicate] > .node-header > label,
 [data-category=predicate] > .node-body > .node.node-header > *:not(button),
 [data-category=predicate] > .node-body > .node > .node-header > *:not(button) {
-  border-color: #187e81 !important;
+  border-color: var(--category-predicate-border) !important;
 }
 
 [data-category=function] > .node-body > .node.node-header > *:first-child,
 [data-category=function] > .node-body > .node > .node-header > *:first-child {
-  background-color: #979fa7 !important;
+  background-color: var(--category-function) !important;
 }
 
 [data-category=function] > .node-body,
 [data-category=function] > .node-body > .node.node-header > *:not(button),
 [data-category=function] > .node-body > .node > .node-header > *:not(button) {
-  border-color: #788086 !important;
-}
-
-/* DARK MODE */
-
-body[data-style=dark] .node-header > * {
-  border-color: #4e4e4e;
-}
-
-body[data-style=dark] .node-header > label {
-  background-color: #1b1b1b;
-  color: #dadada;
-}
-
-body[data-style=dark] .node-header > input,
-body[data-style=dark] .node-header > select,
-body[data-style=dark] .node-header > button {
-  background-color: #272727;
-  color: #dadada;
-}
-
-body[data-style=dark] button.selected {
-  background-color: #9e9843;
-  border-color: #a59c18
-}
-
-body[data-style=dark] .node-header > label.collapse.closed,
-body[data-style=dark] button.add {
-  border-color: #3b6e0c;
-  background-color: #5a961e;
-}
-
-body[data-style=dark] .node-header > label.collapse.open,
-body[data-style=dark] button.remove {
-  border-color: #7e1d05;
-  background-color: #b64023;
-}
-
-body[data-style=dark] .node-header[data-error] > svg {
-  fill: #b64023;
-}
-
-body[data-style=dark] .node-body {
-  border-color: #454749 !important;
-}
-
-body[data-style=dark] [data-category=predicate] > .node-header > label,
-body[data-style=dark] [data-category=predicate] > .node-body > .node.node-header > *:first-child,
-body[data-style=dark] [data-category=predicate] > .node-body > .node > .node-header > *:first-child {
-  background-color: #306163 !important;
-}
-
-body[data-style=dark] [data-category=predicate] > .node-body,
-body[data-style=dark] [data-category=predicate] > .node-header > label,
-body[data-style=dark] [data-category=predicate] > .node-body > .node.node-header > *:not(button),
-body[data-style=dark] [data-category=predicate] > .node-body > .node > .node-header > *:not(button) {
-  border-color: #224849 !important;
-}
-
-body[data-style=dark] [data-category=function] > .node-body > .node.node-header > *:first-child,
-body[data-style=dark] [data-category=function] > .node-body > .node > .node-header > *:first-child {
-  background-color: #838383 !important;
-}
-
-body[data-style=dark] [data-category=function] > .node-body,
-body[data-style=dark] [data-category=function] > .node-body > .node.node-header > *:not(button),
-body[data-style=dark] [data-category=function] > .node-body > .node > .node-header > *:not(button) {
-  border-color: #6b6b6b !important;
+  border-color: var(--category-function-border) !important;
 }