diff --git a/openwisp_controller/config/static/config/css/admin.css b/openwisp_controller/config/static/config/css/admin.css
index e7a5f811c..407024350 100644
--- a/openwisp_controller/config/static/config/css/admin.css
+++ b/openwisp_controller/config/static/config/css/admin.css
@@ -9,17 +9,17 @@ a.jsoneditor-exit:focus {
   font-family:
     "Bitstream Vera Sans Mono", "Monaco", "Droid Sans Mono", "DejaVu Sans Mono",
     "Ubuntu Mono", "Courier New", Courier, monospace;
-  color: #f9f9f9;
+  color: var(--ow-color-fg-lightest);
   overflow: auto;
-  background-color: #222;
+  background-color: var(--ow-color-fg-darker);
   white-space: pre-wrap;
   word-wrap: break-word;
   padding: 20px;
   line-height: 25px;
 }
 .jsoneditor .vLargeTextField {
-  color: #333;
-  background-color: #fff;
+  color: var(--ow-color-fg-darker);
+  background-color: var(--ow-color-white);
   padding: 15px;
 }
 .vLargeTextField.jsoneditor-raw {
@@ -28,8 +28,8 @@ a.jsoneditor-exit:focus {
   box-sizing: border-box;
 }
 input.readonly {
-  border: 1px solid rgba(0, 0, 0, 0.05) !important;
-  background-color: rgba(0, 0, 0, 0.07);
+  border: 1px solid var(--ow-overlay-5) !important;
+  background-color: var(--ow-overlay-7);
 }
 .djnjc-overlay {
   display: none;
@@ -39,7 +39,7 @@ input.readonly {
   z-index: 10000;
   width: 100%;
   height: 100%;
-  background: rgba(0, 0, 0, 0.91);
+  background: var(--ow-overlay-90);
 }
 .djnjc-overlay .inner {
   width: 100%;
@@ -49,13 +49,13 @@ input.readonly {
 }
 .djnjc-overlay.loading {
   display: flex;
-  background: rgba(255, 255, 255, 0.98);
+  background: var(--ow-overlay-light-75);
   align-items: center;
 }
 .spinner {
   width: 40px;
   height: 40px;
-  background-color: rgba(0, 0, 0, 0.8);
+  background-color: var(--ow-overlay-90);
   margin: 0 auto;
   border-radius: 100%;
   -webkit-animation: sk-scaleout 1s infinite ease-in-out;
@@ -102,11 +102,11 @@ input.readonly {
   margin: 0;
   padding: 40px 60px 20px;
   background-color: transparent;
-  color: #adffa6;
+  color: var(--ow-color-success);
   line-height: 1.5em;
 }
 .djnjc-preformatted.error {
-  color: #ff7277;
+  color: var(--ow-btn-danger-bg);
 }
 .djnjc-overlay .close,
 .djnjc-overlay .close:focus,
@@ -116,14 +116,14 @@ input.readonly {
   top: 1.5%;
   font-weight: bold;
   font-size: 15px;
-  background-color: #772299;
-  color: #fff;
+  background-color: var(--ow-color-primary);
+  color: var(--ow-color-white);
   padding: 5px 8px;
   border-radius: 5px;
   text-decoration: none;
 }
 .djnjc-overlay .close:hover {
-  background-color: #9e47c1;
+  background-color: var(--ow-color-primary);
 }
 .errors.field-templates li,
 .errorlist.nonfield li {
@@ -131,11 +131,11 @@ input.readonly {
   word-break: break-all;
 }
 .form-row select {
-  background-color: #fff;
+  background-color: var(--ow-color-white);
 }
 .form-row input[disabled],
 .form-row select[disabled] {
-  background-color: #f4f4f4;
+  background-color: var(--ow-color-fg-light);
 }
 
 /* hide vpn specific fields by default */
@@ -166,7 +166,7 @@ input.readonly {
 }
 #container .sortedm2m-container .help {
   margin-bottom: 20px;
-  color: #333;
+  color: var(--ow-color-fg-darker);
   font-weight: bold;
 }
 #main ul.sortedm2m li {
@@ -193,9 +193,13 @@ input.readonly {
 }
 #config-group .field-status .help div {
   white-space: pre;
-  color: #777;
+  color: var(--ow-color-fg-dark);
 }
-div.change-form #device_form div.inline-group.tab-content > fieldset.module > h2,
+div.change-form
+  #device_form
+  div.inline-group.tab-content
+  > fieldset.module
+  > h2,
 div.change-form
   #device_form
   div.inline-group.tab-content
@@ -247,8 +251,8 @@ ul.tabs a:hover,
 ul.tabs a:focus {
   display: inline-block;
   padding: 12px 14px;
-  color: #333;
-  background: rgba(0, 0, 0, 0.06);
+  color: var(--ow-color-fg-darker);
+  background: var(--ow-overlay-5);
   border-radius: 3px;
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
@@ -257,17 +261,17 @@ ul.tabs a:focus {
 }
 ul.tabs a:hover,
 ul.tabs a:focus {
-  color: #000;
-  background: rgba(0, 0, 0, 0.15);
+  color: var(--ow-color-black);
+  background: var(--ow-overlay-10);
 }
 ul.tabs a.current,
 ul.tabs a.current:hover,
 ul.tabs a.current:focus {
   background: var(--ow-color-fg-ghost);
-  color: #000;
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  color: var(--ow-color-black);
+  border: 1px solid var(--ow-overlay-10);
   border-bottom: 0 none;
-  border-color: rgba(0, 0, 0, 0.25);
+  border-color: var(--ow-overlay-25);
   cursor: default;
   position: relative;
   z-index: 9;
@@ -315,11 +319,11 @@ defined variables such as `secret`
   margin-top: 0;
 }
 .submit-row .previewlink {
-  background: #778898;
+  background: var(--ow-color-fg-medium);
 }
 .submit-row .previewlink:hover,
 .submit-row .previewlink:focus {
-  background: #576a7c;
+  background: var(--ow-color-fg-dark);
 }
 #system-context {
   overflow: hidden;
@@ -365,7 +369,7 @@ button.show-sc {
   max-height: 10em;
   padding: 0.5em;
   overflow: auto;
-  background-color: #ffe5e582;
+  background-color: var(--ow-btn-danger-bg);
 }
 
 @media (max-width: 767px) {
@@ -380,7 +384,7 @@ button.show-sc {
     width: 100%;
     padding-left: 0;
     padding-right: 0;
-    border: 1px solid rgba(0, 0, 0, 0.1) !important;
+    border: 1px solid var(--ow-overlay-10) !important;
     border-radius: 0;
     text-align: center;
   }
diff --git a/openwisp_controller/config/static/config/css/lib/advanced-mode.css b/openwisp_controller/config/static/config/css/lib/advanced-mode.css
index 22737d95f..f36b96cd0 100644
--- a/openwisp_controller/config/static/config/css/lib/advanced-mode.css
+++ b/openwisp_controller/config/static/config/css/lib/advanced-mode.css
@@ -74,7 +74,7 @@ a.jsoneditor-value.jsoneditor-url {
 }
 a.jsoneditor-value.jsoneditor-url:hover,
 a.jsoneditor-value.jsoneditor-url:focus {
-  color: #ee422e;
+  color: var(--ow-btn-danger-bg);
 }
 .field-config div.jsoneditor td.jsoneditor-separator {
   padding: 3px 0;
@@ -87,7 +87,7 @@ div.jsoneditor-value[contenteditable="true"]:focus,
 div.jsoneditor-value[contenteditable="true"]:hover,
 div.jsoneditor-field.jsoneditor-highlight,
 div.jsoneditor-value.jsoneditor-highlight {
-  background-color: #ffffab;
+  background-color: var(--ow-color-fg-lighter);
   border: 1px solid yellow;
   border-radius: 2px;
 }
@@ -97,29 +97,29 @@ div.jsoneditor-field.jsoneditor-highlight-active:hover,
 div.jsoneditor-value.jsoneditor-highlight-active,
 div.jsoneditor-value.jsoneditor-highlight-active:focus,
 div.jsoneditor-value.jsoneditor-highlight-active:hover {
-  background-color: #ffee00;
-  border: 1px solid #ffc700;
+  background-color: var(--ow-color-fg-lighter);
+  border: 1px solid var(--ow-color-fg-lighter);
   border-radius: 2px;
 }
 div.jsoneditor-value.jsoneditor-string {
-  color: #008000;
+  color: var(--ow-color-success);
 }
 div.jsoneditor-value.jsoneditor-object,
 div.jsoneditor-value.jsoneditor-array {
   min-width: 16px;
-  color: #808080;
+  color: var(--ow-color-fg-medium);
 }
 div.jsoneditor-value.jsoneditor-number {
-  color: #ee422e;
+  color: var(--ow-btn-danger-bg);
 }
 div.jsoneditor-value.jsoneditor-boolean {
-  color: #ff8c00;
+  color: var(--ow-color-fg-darker);
 }
 div.jsoneditor-value.jsoneditor-null {
-  color: #004ed0;
+  color: var(--ow-color-fg-darker);
 }
 div.jsoneditor-value.jsoneditor-invalid {
-  color: #000000;
+  color: var(--ow-color-black);
 }
 div.jsoneditor-tree button {
   width: 24px;
@@ -154,19 +154,19 @@ div.jsoneditor-tree *:focus {
 }
 div.jsoneditor-tree button:focus {
   /* TODO: nice outline for buttons with focus
-  outline: #97B0F8 solid 2px;
-  box-shadow: 0 0 8px #97B0F8;
+  outline: var(--ow-color-primary) solid 2px;
+  box-shadow: 0 0 8px var(--ow-color-primary);
   */
-  background-color: #f5f5f5;
-  outline: #e5e5e5 solid 1px;
+  background-color: var(--ow-color-fg-lighter);
+  outline: var(--ow-color-fg-light) solid 1px;
 }
 div.jsoneditor-tree button.jsoneditor-invisible {
   visibility: hidden;
   background: none;
 }
 .field-config div.jsoneditor {
-  color: #1a1a1a;
-  border: 1px solid #3883fa;
+  color: var(--ow-color-fg-darker);
+  border: 1px solid var(--ow-color-primary);
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
@@ -218,7 +218,7 @@ textarea.jsoneditor-text {
 }
 tr.jsoneditor-highlight,
 tr.jsoneditor-selected {
-  background-color: #e6e6e6;
+  background-color: var(--ow-color-fg-light);
 }
 tr.jsoneditor-selected button.jsoneditor-dragarea,
 tr.jsoneditor-selected button.jsoneditor-contextmenu {
@@ -263,7 +263,7 @@ div.jsoneditor-value,
     courier,
     sans-serif;
   font-size: 10pt;
-  color: #1a1a1a;
+  color: var(--ow-color-fg-darker);
 }
 
 /* popover */
@@ -287,10 +287,10 @@ div.jsoneditor-tree .jsoneditor-schema-error {
   background: url("img/jsoneditor-icons.svg") -168px -48px;
 }
 .jsoneditor-schema-error .jsoneditor-popover {
-  background-color: #4c4c4c;
+  background-color: var(--ow-color-fg-dark);
   border-radius: 3px;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
-  color: #fff;
+  box-shadow: 0 0 5px var(--ow-overlay-25);
+  color: var(--ow-color-white);
   display: none;
   padding: 7px 10px;
   position: absolute;
@@ -323,15 +323,15 @@ div.jsoneditor-tree .jsoneditor-schema-error {
   position: absolute;
 }
 .jsoneditor-schema-error .jsoneditor-popover.jsoneditor-above:before {
-  border-top: 7px solid #4c4c4c;
+  border-top: 7px solid var(--ow-color-fg-dark);
   bottom: -7px;
 }
 .jsoneditor-schema-error .jsoneditor-popover.jsoneditor-below:before {
-  border-bottom: 7px solid #4c4c4c;
+  border-bottom: 7px solid var(--ow-color-fg-dark);
   top: -7px;
 }
 .jsoneditor-schema-error .jsoneditor-popover.jsoneditor-left:before {
-  border-left: 7px solid #4c4c4c;
+  border-left: 7px solid var(--ow-color-fg-dark);
   border-top: 7px solid transparent;
   border-bottom: 7px solid transparent;
   content: "";
@@ -343,7 +343,7 @@ div.jsoneditor-tree .jsoneditor-schema-error {
   position: absolute;
 }
 .jsoneditor-schema-error .jsoneditor-popover.jsoneditor-right:before {
-  border-right: 7px solid #4c4c4c;
+  border-right: 7px solid var(--ow-color-fg-dark);
   border-top: 7px solid transparent;
   border-bottom: 7px solid transparent;
   content: "";
@@ -426,8 +426,8 @@ div.jsoneditor-tree .jsoneditor-schema-error {
 .jsoneditor .jsoneditor-text-errors {
   width: 100%;
   border-collapse: collapse;
-  background-color: #ffef8b;
-  border-top: 1px solid #ffd700;
+  background-color: var(--ow-color-fg-lighter);
+  border-top: 1px solid var(--ow-color-fg-lighter);
 }
 .jsoneditor .jsoneditor-text-errors td {
   padding: 3px 6px;
@@ -464,8 +464,8 @@ div.jsoneditor-contextmenu ul {
   top: 0;
   width: 124px;
   background: white;
-  border: 1px solid #d3d3d3;
-  box-shadow: 2px 2px 12px rgba(128, 128, 128, 0.3);
+  border: 1px solid var(--ow-color-fg-medium);
+  box-shadow: 2px 2px 12px var(--ow-overlay-25);
   list-style: none;
   margin: 0;
   padding: 0;
@@ -477,7 +477,7 @@ div.jsoneditor-contextmenu ul li button {
   height: 24px;
   border: none;
   cursor: pointer;
-  color: #4d4d4d;
+  color: var(--ow-color-fg-dark);
   background: transparent;
   font-size: 10pt;
   font-family: arial, sans-serif;
@@ -494,8 +494,8 @@ div.jsoneditor-contextmenu ul li button::-moz-focus-inner {
 }
 div.jsoneditor-contextmenu ul li button:hover,
 div.jsoneditor-contextmenu ul li button:focus {
-  color: #1a1a1a;
-  background-color: #f5f5f5;
+  color: var(--ow-color-fg-darker);
+  background-color: var(--ow-color-fg-lighter);
   outline: none;
 }
 div.jsoneditor-contextmenu ul li button.jsoneditor-default {
@@ -505,7 +505,7 @@ div.jsoneditor-contextmenu ul li button.jsoneditor-expand {
   float: right;
   width: 32px;
   height: 24px;
-  border-left: 1px solid #e5e5e5;
+  border-left: 1px solid var(--ow-color-fg-light);
 }
 div.jsoneditor-contextmenu div.jsoneditor-icon {
   float: left;
@@ -528,13 +528,21 @@ div.jsoneditor-contextmenu ul li button div.jsoneditor-expand {
 div.jsoneditor-contextmenu ul li button:hover div.jsoneditor-expand,
 div.jsoneditor-contextmenu ul li button:focus div.jsoneditor-expand,
 div.jsoneditor-contextmenu ul li.jsoneditor-selected div.jsoneditor-expand,
-div.jsoneditor-contextmenu ul li button.jsoneditor-expand:hover div.jsoneditor-expand,
-div.jsoneditor-contextmenu ul li button.jsoneditor-expand:focus div.jsoneditor-expand {
+div.jsoneditor-contextmenu
+  ul
+  li
+  button.jsoneditor-expand:hover
+  div.jsoneditor-expand,
+div.jsoneditor-contextmenu
+  ul
+  li
+  button.jsoneditor-expand:focus
+  div.jsoneditor-expand {
   opacity: 1;
 }
 div.jsoneditor-contextmenu div.jsoneditor-separator {
   height: 0;
-  border-top: 1px solid #e5e5e5;
+  border-top: 1px solid var(--ow-color-fg-light);
   padding-top: 5px;
   margin-top: 5px;
 }
@@ -542,42 +550,60 @@ div.jsoneditor-contextmenu button.jsoneditor-remove > div.jsoneditor-icon {
   background-position: -24px -24px;
 }
 div.jsoneditor-contextmenu button.jsoneditor-remove:hover > div.jsoneditor-icon,
-div.jsoneditor-contextmenu button.jsoneditor-remove:focus > div.jsoneditor-icon {
+div.jsoneditor-contextmenu
+  button.jsoneditor-remove:focus
+  > div.jsoneditor-icon {
   background-position: -24px 0;
 }
 div.jsoneditor-contextmenu button.jsoneditor-append > div.jsoneditor-icon {
   background-position: 0 -24px;
 }
 div.jsoneditor-contextmenu button.jsoneditor-append:hover > div.jsoneditor-icon,
-div.jsoneditor-contextmenu button.jsoneditor-append:focus > div.jsoneditor-icon {
+div.jsoneditor-contextmenu
+  button.jsoneditor-append:focus
+  > div.jsoneditor-icon {
   background-position: 0 0;
 }
 div.jsoneditor-contextmenu button.jsoneditor-insert > div.jsoneditor-icon {
   background-position: 0 -24px;
 }
 div.jsoneditor-contextmenu button.jsoneditor-insert:hover > div.jsoneditor-icon,
-div.jsoneditor-contextmenu button.jsoneditor-insert:focus > div.jsoneditor-icon {
+div.jsoneditor-contextmenu
+  button.jsoneditor-insert:focus
+  > div.jsoneditor-icon {
   background-position: 0 0;
 }
 div.jsoneditor-contextmenu button.jsoneditor-duplicate > div.jsoneditor-icon {
   background-position: -48px -24px;
 }
-div.jsoneditor-contextmenu button.jsoneditor-duplicate:hover > div.jsoneditor-icon,
-div.jsoneditor-contextmenu button.jsoneditor-duplicate:focus > div.jsoneditor-icon {
+div.jsoneditor-contextmenu
+  button.jsoneditor-duplicate:hover
+  > div.jsoneditor-icon,
+div.jsoneditor-contextmenu
+  button.jsoneditor-duplicate:focus
+  > div.jsoneditor-icon {
   background-position: -48px 0;
 }
 div.jsoneditor-contextmenu button.jsoneditor-sort-asc > div.jsoneditor-icon {
   background-position: -168px -24px;
 }
-div.jsoneditor-contextmenu button.jsoneditor-sort-asc:hover > div.jsoneditor-icon,
-div.jsoneditor-contextmenu button.jsoneditor-sort-asc:focus > div.jsoneditor-icon {
+div.jsoneditor-contextmenu
+  button.jsoneditor-sort-asc:hover
+  > div.jsoneditor-icon,
+div.jsoneditor-contextmenu
+  button.jsoneditor-sort-asc:focus
+  > div.jsoneditor-icon {
   background-position: -168px 0;
 }
 div.jsoneditor-contextmenu button.jsoneditor-sort-desc > div.jsoneditor-icon {
   background-position: -192px -24px;
 }
-div.jsoneditor-contextmenu button.jsoneditor-sort-desc:hover > div.jsoneditor-icon,
-div.jsoneditor-contextmenu button.jsoneditor-sort-desc:focus > div.jsoneditor-icon {
+div.jsoneditor-contextmenu
+  button.jsoneditor-sort-desc:hover
+  > div.jsoneditor-icon,
+div.jsoneditor-contextmenu
+  button.jsoneditor-sort-desc:focus
+  > div.jsoneditor-icon {
   background-position: -192px 0;
 }
 
@@ -587,7 +613,7 @@ div.jsoneditor-contextmenu ul li button.jsoneditor-selected,
 div.jsoneditor-contextmenu ul li button.jsoneditor-selected:hover,
 div.jsoneditor-contextmenu ul li button.jsoneditor-selected:focus {
   color: white;
-  background-color: #ee422e;
+  background-color: var(--ow-btn-danger-bg);
 }
 div.jsoneditor-contextmenu ul li {
   overflow: hidden;
@@ -598,7 +624,7 @@ div.jsoneditor-contextmenu ul li ul {
   left: -10px;
   top: 0;
   border: none;
-  box-shadow: inset 0 0 10px rgba(128, 128, 128, 0.5);
+  box-shadow: inset 0 0 10px var(--ow-overlay-25);
   padding: 0 10px;
 
   /* TODO: transition is not supported on IE8-9 */
@@ -613,13 +639,17 @@ div.jsoneditor-contextmenu ul li ul li button {
 }
 div.jsoneditor-contextmenu ul li ul li button:hover,
 div.jsoneditor-contextmenu ul li ul li button:focus {
-  background-color: #f5f5f5;
+  background-color: var(--ow-color-fg-lighter);
 }
 div.jsoneditor-contextmenu button.jsoneditor-type-string > div.jsoneditor-icon {
   background-position: -144px -24px;
 }
-div.jsoneditor-contextmenu button.jsoneditor-type-string:hover > div.jsoneditor-icon,
-div.jsoneditor-contextmenu button.jsoneditor-type-string:focus > div.jsoneditor-icon,
+div.jsoneditor-contextmenu
+  button.jsoneditor-type-string:hover
+  > div.jsoneditor-icon,
+div.jsoneditor-contextmenu
+  button.jsoneditor-type-string:focus
+  > div.jsoneditor-icon,
 div.jsoneditor-contextmenu
   button.jsoneditor-type-string.jsoneditor-selected
   > div.jsoneditor-icon {
@@ -628,8 +658,12 @@ div.jsoneditor-contextmenu
 div.jsoneditor-contextmenu button.jsoneditor-type-auto > div.jsoneditor-icon {
   background-position: -120px -24px;
 }
-div.jsoneditor-contextmenu button.jsoneditor-type-auto:hover > div.jsoneditor-icon,
-div.jsoneditor-contextmenu button.jsoneditor-type-auto:focus > div.jsoneditor-icon,
+div.jsoneditor-contextmenu
+  button.jsoneditor-type-auto:hover
+  > div.jsoneditor-icon,
+div.jsoneditor-contextmenu
+  button.jsoneditor-type-auto:focus
+  > div.jsoneditor-icon,
 div.jsoneditor-contextmenu
   button.jsoneditor-type-auto.jsoneditor-selected
   > div.jsoneditor-icon {
@@ -638,8 +672,12 @@ div.jsoneditor-contextmenu
 div.jsoneditor-contextmenu button.jsoneditor-type-object > div.jsoneditor-icon {
   background-position: -72px -24px;
 }
-div.jsoneditor-contextmenu button.jsoneditor-type-object:hover > div.jsoneditor-icon,
-div.jsoneditor-contextmenu button.jsoneditor-type-object:focus > div.jsoneditor-icon,
+div.jsoneditor-contextmenu
+  button.jsoneditor-type-object:hover
+  > div.jsoneditor-icon,
+div.jsoneditor-contextmenu
+  button.jsoneditor-type-object:focus
+  > div.jsoneditor-icon,
 div.jsoneditor-contextmenu
   button.jsoneditor-type-object.jsoneditor-selected
   > div.jsoneditor-icon {
@@ -648,8 +686,12 @@ div.jsoneditor-contextmenu
 div.jsoneditor-contextmenu button.jsoneditor-type-array > div.jsoneditor-icon {
   background-position: -96px -24px;
 }
-div.jsoneditor-contextmenu button.jsoneditor-type-array:hover > div.jsoneditor-icon,
-div.jsoneditor-contextmenu button.jsoneditor-type-array:focus > div.jsoneditor-icon,
+div.jsoneditor-contextmenu
+  button.jsoneditor-type-array:hover
+  > div.jsoneditor-icon,
+div.jsoneditor-contextmenu
+  button.jsoneditor-type-array:focus
+  > div.jsoneditor-icon,
 div.jsoneditor-contextmenu
   button.jsoneditor-type-array.jsoneditor-selected
   > div.jsoneditor-icon {
@@ -668,7 +710,7 @@ div.jsoneditor-menu {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   color: white;
-  background-color: #3883fa;
+  background-color: var(--ow-color-primary);
 }
 div.jsoneditor-menu > button,
 div.jsoneditor-menu > div.jsoneditor-modes > button {
@@ -687,14 +729,14 @@ div.jsoneditor-menu > div.jsoneditor-modes > button {
 }
 div.jsoneditor-menu > button:hover,
 div.jsoneditor-menu > div.jsoneditor-modes > button:hover {
-  background-color: rgba(255, 255, 255, 0.2);
-  border: 1px solid rgba(255, 255, 255, 0.4);
+  background-color: var(--ow-overlay-light-75);
+  border: 1px solid var(--ow-overlay-light-75);
 }
 div.jsoneditor-menu > button:focus,
 div.jsoneditor-menu > button:active,
 div.jsoneditor-menu > div.jsoneditor-modes > button:focus,
 div.jsoneditor-menu > div.jsoneditor-modes > button:active {
-  background-color: rgba(255, 255, 255, 0.3);
+  background-color: var(--ow-overlay-light-75);
 }
 div.jsoneditor-menu > button:disabled,
 div.jsoneditor-menu > div.jsoneditor-modes > button:disabled {
@@ -749,15 +791,15 @@ div.jsoneditor-menu a.jsoneditor-exit {
   margin: 3px;
   padding: 0 12px;
   font-size: 13px;
-  background-color: rgba(255, 255, 255, 0.8);
-  color: #000;
+  background-color: var(--ow-overlay-light-75);
+  color: var(--ow-color-black);
   height: 28px;
   line-height: 28px;
   border-radius: 3px;
   text-decoration: none !important;
 }
 div.jsoneditor-menu a.jsoneditor-exit:hover {
-  background-color: rgba(255, 255, 255, 1);
+  background-color: var(--ow-color-white);
 }
 div.jsoneditor-menu a.jsoneditor-exit img {
   margin: -2px 1px 0 0;
@@ -766,7 +808,7 @@ table.jsoneditor-search input,
 table.jsoneditor-search div.jsoneditor-results {
   font-family: arial, sans-serif;
   font-size: 10pt;
-  color: #1a1a1a;
+  color: var(--ow-color-fg-darker);
   background: transparent;
 
   /* For Firefox */
@@ -861,7 +903,7 @@ table.jsoneditor-search button.jsoneditor-previous:hover {
   bottom: 0;
   padding-left: 0;
   padding-right: 0;
-  background-color: #ffffff;
+  background-color: var(--ow-color-white);
   z-index: 10000;
 }
 .editor-full {
@@ -871,14 +913,14 @@ table.jsoneditor-search button.jsoneditor-previous:hover {
   float: right;
 }
 .jsoneditor-menu label {
-  color: #fff !important;
+  color: var(--ow-color-white) !important;
   line-height: 28px;
   padding: 0;
   margin-left: 20px;
 }
 .jsoneditor-menu label a {
   font-weight: bold;
-  color: #fff !important;
+  color: var(--ow-color-white) !important;
 }
 .jsoneditor-menu #netjsonconfig-hint-advancedmode,
 .jsoneditor-menu #netjsonconfig-hint-advancedmode a {
diff --git a/openwisp_controller/config/static/config/css/lib/jsonschema-ui.css b/openwisp_controller/config/static/config/css/lib/jsonschema-ui.css
index 7982637d0..a2a213c22 100644
--- a/openwisp_controller/config/static/config/css/lib/jsonschema-ui.css
+++ b/openwisp_controller/config/static/config/css/lib/jsonschema-ui.css
@@ -12,17 +12,17 @@
 }
 .jsoneditor-wrapper div.jsoneditor-wrapper > fieldset {
   margin-bottom: 0;
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid var(--ow-color-fg-light);
 }
 .jsoneditor-wrapper div.jsoneditor-wrapper h2 {
   padding: 18px;
 }
 input.deletelink {
-  background: #ba2121;
+  background: var(--ow-btn-danger-bg);
 }
 input.deletelink:hover,
 input.deletelink:focus {
-  background: #a41515;
+  background: var(--ow-btn-danger-bg);
 }
 .jsoneditor-wrapper div.jsoneditor input.button,
 .jsoneditor-wrapper div.jsoneditor input.deletelink,
@@ -34,7 +34,7 @@ input.deletelink:focus {
 a.json-editor-btn-edit {
   margin-left: 10px;
   padding: 6px 12px;
-  color: #ffffff;
+  color: var(--ow-color-white);
 }
 
 .form-row .json-editor-btn-edit {
@@ -52,7 +52,7 @@ a.json-editor-btn-edit {
 .jsoneditor-wrapper div.jsoneditor .inline-group {
   clear: both;
   margin: 0;
-  border: 1px solid #eee;
+  border: 1px solid var(--ow-color-fg-light);
 }
 
 /* avoid redundant borders */
@@ -126,7 +126,7 @@ a.json-editor-btn-edit {
   > div
   > div
   > div {
-  border-bottom: 2px dotted #ccc;
+  border-bottom: 2px dotted var(--ow-color-fg-medium);
 }
 
 .jsoneditor-wrapper div.jsoneditor div.control {
@@ -149,7 +149,7 @@ a.json-editor-btn-edit {
 }
 .jsoneditor-wrapper div.jsoneditor .grid-column > h3 {
   border: 0 none;
-  outline: 1px solid #eee;
+  outline: 1px solid var(--ow-color-fg-light);
 }
 
 span.control input {
@@ -165,7 +165,7 @@ span.control input {
   > div
   > div
   > div {
-  border-bottom: 2px dotted #ccc;
+  border-bottom: 2px dotted var(--ow-color-fg-medium);
   padding-bottom: 20px;
   margin-bottom: 22px !important;
 }
@@ -240,7 +240,7 @@ div[data-schematype="object"]
   > div
   > .grid-row
   > .inline-group {
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid var(--ow-color-fg-light);
   border-top: 0 none;
 }
 .grid-row > .inline-group > div > .inline-group > div.form-row {
@@ -371,7 +371,7 @@ div[data-schematype="object"]
 .jsoneditor-wrapper div.jsoneditor .inline-related > select,
 .jsoneditor-wrapper div.jsoneditor .grid-column > select {
   margin-left: 188px;
-  background-color: #fff;
+  background-color: var(--ow-color-white);
   top: 12px;
 }
 .jsoneditor-wrapper div.jsoneditor .grid-row .grid-column {
@@ -384,7 +384,7 @@ div[data-schematype="object"]
   position: absolute;
   z-index: 10;
   background-color: white;
-  border: 1px solid #ddd;
+  border: 1px solid var(--ow-color-fg-light);
   padding-bottom: 10px;
   width: 340px;
   margin-left: -215px;
@@ -449,13 +449,13 @@ div[data-schematype="object"]
 #content .jsoneditor-wrapper div.jsoneditor div.form-row > .help {
   margin-left: 181px;
   margin-top: 4px;
-  color: #888;
+  color: var(--ow-color-fg-dark);
 }
 #content .jsoneditor-wrapper div.jsoneditor .inline-group > .help,
 #content .jsoneditor-wrapper div.jsoneditor .grid-column > .help {
   padding: 20px 15px 20px 18px;
   margin: 0;
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid var(--ow-color-fg-light);
 }
 
 #content .jsoneditor-wrapper div.jsoneditor .modal label {
@@ -489,10 +489,10 @@ div.jsoneditor > div > h3.controls {
   background: transparent !important;
 }
 #main div.jsoneditor .inline-related h3 {
-  color: #666 !important;
-  background-color: #f8f8f8 !important;
-  border-top: 1px solid #eee !important;
-  border-bottom: 1px solid #eee !important;
+  color: var(--ow-color-fg-dark) !important;
+  background-color: var(--ow-color-fg-lighter) !important;
+  border-top: 1px solid var(--ow-color-fg-light) !important;
+  border-bottom: 1px solid var(--ow-color-fg-light) !important;
   padding-top: 0;
   padding-bottom: 0;
 }
@@ -550,9 +550,11 @@ div.jsoneditor > div > h3.controls {
   margin-top: 45px;
   margin-left: -2px;
 }
-.jsoneditor-wrapper div[data-schemapath^="root.radios"][data-schemapath$=".hwmode"] {
+.jsoneditor-wrapper
+  div[data-schemapath^="root.radios"][data-schemapath$=".hwmode"] {
   display: none;
 }
-.jsoneditor-wrapper div[data-schemapath^="root.radios"][data-schemapath$=".band"] {
+.jsoneditor-wrapper
+  div[data-schemapath^="root.radios"][data-schemapath$=".band"] {
   display: none;
 }
diff --git a/openwisp_controller/config/static/import_export/import-openwisp.css b/openwisp_controller/config/static/import_export/import-openwisp.css
index fab739c48..2cfcc34ee 100644
--- a/openwisp_controller/config/static/import_export/import-openwisp.css
+++ b/openwisp_controller/config/static/import_export/import-openwisp.css
@@ -15,24 +15,24 @@ div#main-content table tbody td {
 /* Overrides system/browser dark theme, which is not supported in OpenWISP yet */
 @media (prefers-color-scheme: dark) {
   table.import-preview tr.skip {
-    background-color: #d2d2d2;
+    background-color: var(--ow-color-fg-light);
   }
   table.import-preview tr.new {
-    background-color: #bdd8b2;
+    background-color: var(--ow-color-success);
   }
   table.import-preview tr.delete {
-    background-color: #f9bebf;
+    background-color: var(--ow-btn-danger-bg);
   }
   table.import-preview tr.update {
-    background-color: #fdfdcf;
+    background-color: var(--ow-color-fg-lighter);
   }
   .validation-error-container {
-    background-color: #ffc1c1;
+    background-color: var(--ow-btn-danger-bg);
   }
   table.import-preview td ins {
-    background-color: #ededed;
+    background-color: var(--ow-color-fg-light);
   }
   table.import-preview td del {
-    background-color: #ededed;
+    background-color: var(--ow-color-fg-light);
   }
 }
diff --git a/openwisp_controller/connection/static/connection/css/command-inline.css b/openwisp_controller/connection/static/connection/css/command-inline.css
index f40037e53..b1e3422c5 100644
--- a/openwisp_controller/connection/static/connection/css/command-inline.css
+++ b/openwisp_controller/connection/static/connection/css/command-inline.css
@@ -38,13 +38,13 @@ li.commands:not(.recent) {
   height: 100%;
   width: 100%;
   left: 0px;
-  background-color: rgba(0, 0, 0, 0.6);
+  background-color: var(--ow-overlay-60);
   backdrop-filter: blur(2px);
 }
 #command_set-group > fieldset,
 #ow-command-confirm-dialog {
-  border: 2px black solid;
-  box-shadow: 0px 0px 20px 10px #464646;
+  border: 2px var(--ow-color-black) solid;
+  box-shadow: 0px 0px 20px 10px var(--ow-color-fg-darker);
   position: relative;
   transform: translateY(30vh);
   margin: auto;
@@ -69,7 +69,7 @@ li.commands:not(.recent) {
   display: inherit !important;
 }
 .ow-error-input {
-  border: 1px #ba2121 solid;
+  border: 1px var(--ow-btn-danger-bg) solid;
 }
 #id_command_set-0-input_jsoneditor .errorlist {
   display: none;
@@ -101,13 +101,13 @@ li.commands:not(.recent) {
 /* Styles for confirmation dialog element */
 #ow-command-confirm-dialog {
   text-align: center;
-  background-color: #ffffff;
+  background-color: var(--ow-color-white);
 }
 #ow-command-confirm-text {
-  color: #666;
+  color: var(--ow-color-fg-dark);
   font-family:
-    "Roboto", "Lucida Grande", "DejaVu Sans", "Bitstream Vera Sans", Verdana, Arial,
-    sans-serif;
+    "Roboto", "Lucida Grande", "DejaVu Sans", "Bitstream Vera Sans", Verdana,
+    Arial, sans-serif;
   font-size: 14px;
   font-weight: normal;
   margin: 20px;
@@ -119,18 +119,18 @@ li.commands:not(.recent) {
   margin-left: 5px;
 }
 #ow-command-confirm-yes {
-  background-color: #498b26;
+  background-color: var(--ow-btn-success-bg);
 }
 #ow-command-confirm-yes:hover,
 #ow-command-confirm-yes:focus {
-  background-color: #417927;
+  background-color: var(--ow-btn-success-bg);
 }
 #ow-command-confirm-no {
-  background-color: #ba2121;
+  background-color: var(--ow-btn-danger-bg);
 }
 #ow-command-confirm-no:hover,
 #ow-command-confirm-no:focus {
-  background-color: #a41515;
+  background-color: var(--ow-btn-danger-bg);
 }
 #command_set-0 .field-input {
   padding: 0 15px;
@@ -200,7 +200,10 @@ li.commands:not(.recent) {
     right: 20%;
   }
 
-  #command_set-0 .inline-group[data-inline-type="stacked"] .inline-related .module {
+  #command_set-0
+    .inline-group[data-inline-type="stacked"]
+    .inline-related
+    .module {
     padding: 0px !important;
   }
 
diff --git a/openwisp_controller/subnet_division/static/subnet-division/css/subnet-division.css b/openwisp_controller/subnet_division/static/subnet-division/css/subnet-division.css
index d8c56f092..7c71509c0 100644
--- a/openwisp_controller/subnet_division/static/subnet-division/css/subnet-division.css
+++ b/openwisp_controller/subnet_division/static/subnet-division/css/subnet-division.css
@@ -1,9 +1,9 @@
 input.readonly {
-  border: 1px solid rgba(0, 0, 0, 0.05) !important;
-  background-color: rgba(0, 0, 0, 0.07);
+  border: 1px solid var(--ow-overlay-5) !important;
+  background-color: var(--ow-overlay-7);
 }
 .help-text-warning {
-  background-color: #ffe5e5;
+  background-color: var(--ow-color-primary-light);
   padding: 5px 10px;
   font-size: 15px;
   font-weight: bolder;