diff --git a/openwisp_utils/admin_theme/static/admin/css/help-text-stacked.css b/openwisp_utils/admin_theme/static/admin/css/help-text-stacked.css
index 0252c9f4..83765208 100644
--- a/openwisp_utils/admin_theme/static/admin/css/help-text-stacked.css
+++ b/openwisp_utils/admin_theme/static/admin/css/help-text-stacked.css
@@ -1,5 +1,5 @@
 .ow-help-text {
-  background-color: #ffe5e5;
+  background-color: var(--ow-stacked-inline-helptext-bg);
   padding: 5px 10px;
   font-size: 15px;
   font-weight: bolder;
@@ -9,5 +9,5 @@
   min-width: 30px;
 }
 .ow-help-text a {
-  color: #df5d43;
+  color: var(--ow-color-primary);
 }
diff --git a/openwisp_utils/admin_theme/static/admin/css/openwisp.css b/openwisp_utils/admin_theme/static/admin/css/openwisp.css
index debe8b73..25a579c8 100644
--- a/openwisp_utils/admin_theme/static/admin/css/openwisp.css
+++ b/openwisp_utils/admin_theme/static/admin/css/openwisp.css
@@ -76,6 +76,176 @@ See https://code.djangoproject.com/ticket/33878 */
   --font-family-primary:
     "Roboto", "Lucida Grande", "DejaVu Sans", "Bitstream Vera Sans", Verdana, Arial,
     sans-serif;
+
+  /* ========================================
+     OPENWISP BASE COLOR PALETTE (Tier 1)
+     ======================================== */
+
+  /* Primary Brand Colors */
+  --ow-color-primary: #df5d43;
+  --ow-color-primary-dark: #b31e00;
+  --ow-color-primary-alt: #c74126;
+  --ow-color-primary-light: #ffe5e5;
+  --ow-color-primary-lighter: #fdf2f2;
+
+  /* Success/Positive */
+  --ow-color-success: #498b26;
+
+  /* Foreground Scale Spectrum */
+  --ow-color-black: #000;
+  --ow-color-fg-darkest: #1b1818;
+  --ow-color-fg-darker: #333;
+  --ow-color-fg-dark: #777;
+  --ow-color-fg-medium: #bbbbbb;
+  --ow-color-fg-light: #efefef;
+  --ow-color-fg-lighter: #f6f6f6;
+  --ow-color-fg-lightest: #f9f9f9;
+  --ow-color-fg-ghost: #fcfcfc;
+  --ow-color-white: #fff;
+
+  /* Special Tones */
+  --ow-color-breadcrumb-text: #8d7d76cf;
+
+  /* Highlight/Selection Colors */
+  --ow-color-highlight: var(--ow-color-primary-light);
+  --ow-color-highlight-subtle: var(--ow-color-primary-lighter);
+
+  /* Utility Colors */
+  --ow-color-login-bg: #f4f7f6;
+  --ow-color-scrollbar-track: #f1f1f1;
+
+  /* Overlays (Dark with opacity) */
+  --ow-overlay-10: rgba(0, 0, 0, 0.1);
+  --ow-overlay-5: rgba(0, 0, 0, 0.05);
+  --ow-overlay-7: rgba(0, 0, 0, 0.07);
+  --ow-overlay-7-5: rgba(0, 0, 0, 0.075);
+  --ow-overlay-25: rgba(0, 0, 0, 0.25);
+  --ow-overlay-40: rgba(0, 0, 0, 0.4);
+  --ow-overlay-45: rgba(0, 0, 0, 0.45);
+  --ow-overlay-60: rgba(0, 0, 0, 0.6);
+  --ow-overlay-67-5: rgba(0, 0, 0, 0.675);
+  --ow-overlay-90: rgba(0, 0, 0, 0.9);
+  --ow-overlay-gray-70: rgba(51, 51, 51, 0.7);
+
+  /* White Overlay */
+  --ow-overlay-light-75: rgba(255, 255, 255, 0.75);
+
+  /* ========================================
+     COMPONENT SEMANTIC VARIABLES (Tier 2)
+     ======================================== */
+
+  /* === LINKS === */
+  --ow-link-color: var(--ow-color-fg-dark);
+  --ow-link-hover: var(--ow-color-black);
+  --ow-link-highlighted: var(--ow-color-primary);
+  --ow-link-highlighted-hover: var(--ow-color-primary-dark);
+
+  /* === BUTTONS === */
+  --ow-btn-default-bg: var(--ow-color-fg-darker);
+  --ow-btn-default-text: var(--ow-color-white);
+  --ow-btn-default-hover: var(--ow-overlay-gray-70);
+
+  --ow-btn-danger-bg: #df5d43;
+  --ow-btn-danger-text: var(--button-fg);
+  --ow-btn-danger-hover: #b31e00;
+
+  --ow-btn-success-bg: var(--ow-color-success);
+  --ow-btn-success-text: var(--ow-color-white);
+
+  /* === MENU/NAVIGATION === */
+  --ow-menu-bg: var(--ow-color-fg-ghost);
+  --ow-menu-separator: var(--ow-overlay-7-5);
+  --ow-menu-link-text: var(--ow-color-fg-dark);
+  --ow-menu-sublink-text: var(--ow-overlay-67-5);
+  --ow-menu-link-hover-bg: var(--ow-color-highlight);
+  --ow-menu-link-hover-text: var(--ow-color-primary);
+  --ow-menu-sublink-hover: var(--ow-color-primary-alt);
+  --ow-menu-icon-hover: var(--ow-color-primary);
+  --ow-menu-link-active-bg: var(--ow-color-highlight);
+  --ow-menu-link-active-text: var(--ow-color-primary);
+  --ow-menu-group-active-bg: var(--ow-color-highlight-subtle);
+  --ow-menu-group-active-text: var(--ow-color-primary);
+  --ow-menu-dropdown-bg: var(--ow-color-white);
+  --ow-menu-toggle-bg: var(--ow-overlay-25);
+  --ow-menu-toggle-icon: var(--ow-color-white);
+  --ow-menu-toggle-hover: var(--ow-overlay-60);
+  --ow-menu-backdrop: var(--ow-overlay-10);
+  --ow-menu-tooltip-bg: var(--ow-color-fg-dark);
+  --ow-menu-tooltip-text: var(--ow-color-white);
+  --ow-menu-backdrop: var(--ow-overlay-10);
+  --ow-menu-tooltip-bg: var(--ow-color-fg-dark);
+  --ow-menu-tooltip-text: var(--ow-color-white);
+
+  /* === CALENDAR/DATE PICKER === */
+  --ow-calendar-header-bg: var(--ow-color-primary);
+  --ow-calendar-header-text: var(--ow-color-white);
+  --ow-calendar-bg: var(--ow-color-fg-light);
+  --ow-calendar-nav-bg: var(--ow-overlay-light-75);
+  --ow-calendar-nav-hover: var(--ow-color-white);
+  --ow-calendar-selected-bg: var(--ow-color-highlight);
+  --ow-calendar-selected-text: var(--ow-color-primary);
+  --ow-calendar-icon: var(--ow-color-primary);
+  --ow-calendar-icon-hover: var(--ow-color-primary-dark);
+  --ow-calendar-shortcut-hover: var(--ow-color-primary);
+
+  /* === PAGINATION === */
+  --ow-paginator-bg: var(--ow-color-primary);
+  --ow-paginator-text: var(--button-fg);
+  --ow-paginator-hover: var(--ow-color-primary-dark);
+  --ow-paginator-border-color: color-mix(in srgb, var(--ow-paginator-bg), white 30%);
+  --ow-paginator-showall-text: var(--ow-color-primary);
+  --ow-paginator-showall-hover: var(--ow-color-primary-dark);
+
+  /* === ACCOUNT MENU === */
+  --ow-account-text: var(--ow-color-fg-dark);
+  --ow-account-hover: var(--ow-color-primary);
+  --ow-account-icon: var(--ow-color-fg-dark);
+  --ow-account-icon-hover: var(--ow-color-primary);
+  --ow-account-menu-bg: var(--ow-color-white);
+  --ow-account-menu-separator: var(--ow-color-fg-lighter);
+
+  /* === FORMS === */
+  --ow-form-label: var(--ow-color-fg-darkest);
+  --ow-form-help-text: var(--ow-overlay-45);
+  --ow-form-readonly-border: var(--ow-overlay-5);
+  --ow-form-readonly-bg: var(--ow-overlay-7);
+  --ow-form-input-bg: var(--ow-color-white);
+  --ow-form-input-border: var(--ow-overlay-40);
+
+  /* === BREADCRUMBS === */
+  --ow-breadcrumb-bg: var(--ow-color-white);
+  --ow-breadcrumb-text: var(--ow-color-breadcrumb-text);
+  --ow-breadcrumb-border: var(--ow-color-fg-lighter);
+
+  /* === MODULES/SECTIONS === */
+  --ow-module-bg: var(--ow-color-fg-lightest);
+  --ow-module-text: var(--ow-color-fg-darker);
+
+  /* === OVERLAYS & MODALS === */
+  --ow-overlay-bg: var(--ow-overlay-light-75);
+  --ow-loading-spinner-bg: var(--ow-overlay-90);
+  --ow-selector-chosen-bg: var(--ow-overlay-60);
+
+  /* === SCROLLBAR === */
+  --ow-scrollbar-thumb: var(--ow-color-fg-dark);
+  --ow-scrollbar-thumb-hover: var(--ow-color-fg-darker);
+  --ow-scrollbar-track: var(--ow-color-scrollbar-track);
+
+  /* === LOGIN PAGE === */
+  --ow-login-bg: var(--ow-color-login-bg);
+  --ow-login-shadow: var(--ow-color-login-bg);
+
+  /* === MISC === */
+  --ow-toggle-btn-bg: var(--ow-color-white);
+  --ow-toggle-btn-hover-bg: var(--darkened-bg);
+  --ow-option-container-bg: var(--ow-color-fg-light);
+  --ow-option-container-text: var(--ow-color-fg-darker);
+  --ow-option-hover-bg: var(--ow-color-primary);
+  --ow-option-hover-text: var(--ow-color-white);
+  --ow-hamburger-bg: var(--ow-color-white);
+  --ow-hamburger-hover: var(--ow-color-fg-light);
+  --ow-selector-chosen-text: var(--ow-color-white);
+  --ow-stacked-inline-helptext-bg: #ffe5e5;
 }
 body {
   min-width: 320px;
@@ -89,7 +259,7 @@ th {
   width: 100%;
   top: 0;
   left: 0;
-  background: rgba(0, 0, 0, 0.1);
+  background: var(--ow-menu-backdrop);
   z-index: 9999;
   display: none;
 }
@@ -127,14 +297,14 @@ table thead th.sorted .sortoptions a.sortremove:focus:after,
 table thead th.sorted .sortoptions a.sortremove:hover:after,
 a:link,
 a:visited {
-  color: #777;
+  color: var(--ow-link-color);
   text-decoration: none;
 }
 table thead th.sorted .sortoptions a.sortremove:focus:after,
 table thead th.sorted .sortoptions a.sortremove:hover:after,
 a:hover,
 a:focus {
-  color: #000;
+  color: var(--ow-link-hover);
   text-decoration: underline;
 }
 #main-content .breadcrumbs a,
@@ -147,7 +317,7 @@ fieldset.collapsed a.collapse-toggle,
 fieldset a.collapse-toggle,
 a.highlighted,
 a.highlighted:visited {
-  color: #df5d43;
+  color: var(--ow-link-highlighted);
   text-decoration: none;
 }
 #main-content .breadcrumbs a:hover,
@@ -168,7 +338,7 @@ a.highlighted:focus {
 }
 #main-content .module caption a {
   text-decoration: none;
-  color: #000;
+  color: var(--ow-link-hover);
 }
 #main-content .module caption a:hover {
   text-decoration: underline;
@@ -180,23 +350,23 @@ fieldset.module h2,
 #content-main fieldset.module summary,
 .selector .selector-available-title,
 .selector .selector-chosen-title {
-  background: #f9f9f9;
-  color: #333;
+  background: var(--ow-module-bg);
+  color: var(--ow-module-text);
   padding: 15px;
 }
 #content-main fieldset.module summary {
   border-color: var(--hairline-color);
 }
 #changelist-filter li.selected a {
-  color: #df5d43 !important;
+  color: var(--ow-link-highlighted) !important;
 }
 #netjsonconfig-hint,
 #netjsonconfig-hint a,
 #container .field-backend a {
-  color: #df5d43;
+  color: var(--ow-link-highlighted);
 }
 #main .form-row label {
-  color: #1b1818;
+  color: var(--ow-form-label);
   display: inline-block;
 }
 #main .form-row .help,
@@ -205,7 +375,7 @@ fieldset.module h2,
 #container #main-content .helptext {
   font-size: 14px !important;
   line-height: 20px;
-  color: rgba(0, 0, 0, 0.45);
+  color: var(--ow-form-help-text);
 }
 .addlink,
 .changelink {
@@ -216,7 +386,7 @@ fieldset.module h2,
 }
 .addlink:hover,
 .changelink:hover {
-  color: #000;
+  color: var(--ow-link-hover);
 }
 
 /* increase font size and spacing */
@@ -236,7 +406,7 @@ fieldset.module h2 {
 #main .inline-related h3 {
   padding: 15px;
   font-size: 15px;
-  background: #f9f9f9;
+  background: var(--ow-module-bg);
   margin-top: 0px;
   color: var(--body-quiet-color);
   border-top: 1px solid var(--hairline-color);
@@ -270,7 +440,7 @@ form .button,
   font-size: 15px;
 }
 select:not([disabled]):not(.readonly) {
-  background: #fff;
+  background: var(--ow-form-input-bg);
 }
 input[type="text"],
 input[type="password"],
@@ -287,8 +457,8 @@ textarea,
   float: left;
 }
 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-form-readonly-border) !important;
+  background-color: var(--ow-form-readonly-bg);
 }
 select {
   height: 36px;
@@ -320,13 +490,18 @@ select {
   padding: 10px 12px !important;
 }
 .select2-search--dropdown .select2-search__field {
-  border: 1px solid rgba(0, 0, 0, 0.4);
+  border: 1px solid var(--ow-form-input-border);
   border-radius: 4px;
   box-sizing: border-box;
 }
 .select2-selection__clear {
   left: -27px;
 }
+.select2-results__option--highlighted[aria-selected],
+.select2-results__option[aria-selected="true"] {
+  background: var(--ow-menu-link-hover-bg) !important;
+  color: var(--ow-menu-link-hover-text) !important;
+}
 .related-widget-wrapper .change-related {
   margin-left: 7px;
 }
@@ -406,7 +581,7 @@ html {
   z-index: 10000;
   width: 100%;
   height: 100%;
-  background: rgba(255, 255, 255, 0.75);
+  background: var(--ow-overlay-bg);
 }
 .ow-overlay-inner {
   display: -webkit-box;
@@ -424,7 +599,7 @@ html {
 .ow-loading-spinner {
   width: 3.125rem;
   height: 3.125rem;
-  background-color: rgba(0, 0, 0, 0.9);
+  background-color: var(--ow-loading-spinner-bg);
   margin: 0 auto;
   border-radius: 100%;
   -webkit-animation: sk-scaleout 1s infinite ease-in-out;
@@ -455,35 +630,35 @@ html {
   }
 }
 div.breadcrumbs {
-  background: #fff;
-  color: #8d7d76cf;
-  border-bottom: 2px solid #f6f6f6;
+  background: var(--ow-breadcrumb-bg);
+  color: var(--ow-breadcrumb-text);
+  border-bottom: 2px solid var(--ow-breadcrumb-border);
 }
 #main-content div.breadcrumbs {
   padding: 1rem 2.5rem;
 }
 #main .selector-chosen h2,
 #main .aligned .selector-chosen-title {
-  background: rgba(0, 0, 0, 0.6);
-  color: #fff;
+  background: var(--ow-selector-chosen-bg);
+  color: var(--ow-form-input-bg);
 }
 span.datetimeshortcuts .date-icon {
   mask: url(../../ui/openwisp/images/date.svg) no-repeat center;
   -webkit-mask: url(../../ui/openwisp/images/date.svg) no-repeat center;
   -webkit-mask-size: contain;
   -webkit-mask: contain;
-  background: #df5d43;
+  background: var(--ow-calendar-icon);
 }
 span.datetimeshortcuts .clock-icon {
   mask: url(../../ui/openwisp/images/clock.svg) no-repeat center;
   -webkit-mask: url(../../ui/openwisp/images/clock.svg) no-repeat center;
   -webkit-mask-size: contain;
   -webkit-mask: contain;
-  background: #df5d43;
+  background: var(--ow-calendar-icon);
 }
 span.datetimeshortcuts .date-icon:hover,
 span.datetimeshortcuts .clock-icon:hover {
-  background: #b31e00;
+  background: var(--ow-calendar-icon-hover);
 }
 
 /*******************************
@@ -497,7 +672,7 @@ span.datetimeshortcuts .clock-icon:hover {
   align-items: center;
   box-shadow: 0px 1px 2px #00000040;
   border-radius: 4px;
-  background: #ffff;
+  background: var(--ow-toggle-btn-bg);
   cursor: pointer;
   border: 0;
   padding: 0.313rem 0.625rem;
@@ -506,7 +681,7 @@ span.datetimeshortcuts .clock-icon:hover {
 .toggle-btn:focus,
 .toggle-btn:active {
   outline: 0 none;
-  background: #f8f8f8;
+  background: var(--ow-toggle-btn-hover-bg);
 }
 
 /* For danger,error, red button [ class="danger-btn" ] */
@@ -516,11 +691,11 @@ div.submit-row a.deletelink,
   display: inline-block;
   text-align: center;
   border-radius: 4px;
-  background: #df5d43;
+  background: var(--ow-btn-danger-bg);
   cursor: pointer;
   border: 0;
   padding: 0.625rem 1rem;
-  color: #fff;
+  color: var(--ow-btn-danger-text);
   font-weight: 500;
 }
 div.submit-row a.deletelink {
@@ -535,7 +710,7 @@ div.submit-row a.deletelink:active,
 .delete-confirmation form input[type="submit"]:hover,
 .delete-confirmation form input[type="submit"]:active,
 .delete-confirmation form input[type="submit"]:focus {
-  background: #b31e00;
+  background: var(--ow-btn-danger-hover);
   outline: 0 none;
 }
 #content .submit-row p.deletelink-box {
@@ -561,11 +736,11 @@ a.button,
   display: inline-block;
   text-align: center;
   border-radius: 4px;
-  background: #333;
+  background: var(--ow-btn-default-bg);
   cursor: pointer;
   border: 0;
   padding: 0.625rem 1rem;
-  color: #fff;
+  color: var(--ow-btn-default-text);
   font-weight: 500;
   font-size: 15px;
 }
@@ -580,9 +755,9 @@ div#toolbar {
 div#toolbar form input[type="submit"] {
   margin: 0 10px 0 3px;
   padding: 0.47rem 1rem;
-  background: #333;
+  background: var(--ow-btn-default-bg);
   border: 0 none;
-  color: #fff;
+  color: var(--ow-btn-default-text);
 }
 div#toolbar #searchbar {
   padding: 15px 0.8em;
@@ -601,14 +776,14 @@ div#changelist .actions select {
 div#changelist .actions .button {
   padding: 7px 1rem;
   border: 0 none;
-  background: #333;
-  color: #fff;
+  background: var(--ow-btn-default-bg);
+  color: var(--ow-btn-default-text);
   height: unset;
 }
 div#changelist .actions .button:hover,
 div#toolbar form input[type="submit"]:hover {
   opacity: 0.7;
-  border-color: #333;
+  border-color: var(--ow-btn-default-bg);
 }
 .object-tools a,
 .object-tools a:link,
@@ -654,7 +829,7 @@ input[type="submit"]:hover,
 input[type="button"]:hover,
 .delete-confirmation form .cancel-link:hover {
   outline: 0 none;
-  background: rgba(51, 51, 51, 0.7);
+  background: var(--ow-btn-default-hover);
 }
 #main .related-lookup {
   padding-left: 20px;
@@ -676,11 +851,11 @@ input[type="button"]:hover,
   display: inline-block;
   text-align: center;
   border-radius: 4px;
-  background: #498b26 !important;
+  background: var(--ow-btn-success-bg) !important;
   cursor: pointer;
   border: 0;
   padding: 0.625rem 1rem;
-  color: #fff;
+  color: var(--ow-btn-success-text);
   font-weight: 500;
 }
 .success-btn:hover,
@@ -716,7 +891,7 @@ input[type="button"]:hover,
   cursor: pointer;
   justify-content: center;
   align-items: center;
-  background: #fff;
+  background: var(--ow-hamburger-bg);
 }
 .hamburger span {
   background: url(../../ui/openwisp/images/hamburger.svg) no-repeat center;
@@ -725,7 +900,7 @@ input[type="button"]:hover,
   display: inline-block;
 }
 .hamburger:hover {
-  background: #efefef;
+  background: var(--ow-hamburger-hover);
 }
 .menu-toggle {
   position: fixed;
@@ -741,14 +916,14 @@ input[type="button"]:hover,
   margin-top: -3.125rem;
   z-index: 1;
   transition: all ease;
-  background: rgba(0, 0, 0, 0.25);
+  background: var(--ow-menu-toggle-bg);
   border-radius: 0 3px 3px 0px;
 }
 .menu-toggle span {
   mask: url(../../ui/openwisp/images/left-arrow.svg) no-repeat center;
   -webkit-mask: url(../../ui/openwisp/images/left-arrow.svg) no-repeat center;
   mask-position: center;
-  background: #ffffff;
+  background: var(--ow-menu-toggle-icon);
   height: 1rem;
   width: 1rem;
   display: inline-block;
@@ -759,7 +934,7 @@ input[type="button"]:hover,
   opacity: 1;
   right: -1.65rem;
   width: 1.65rem;
-  background: rgba(0, 0, 0, 0.6);
+  background: var(--ow-menu-toggle-hover);
 }
 
 /* USER TOOLS */
@@ -773,13 +948,13 @@ input[type="button"]:hover,
 }
 .account-button:hover,
 .account-button:focus {
-  color: #df5d43;
+  color: var(--ow-account-hover);
 }
 .account-button:hover span,
 .account-button:focus span,
 .account-menu .dropdown-clickable:hover span,
 .account-menu .dropdown-clickable:focus span {
-  background: #df5d43;
+  background: var(--ow-color-primary);
 }
 .account-menu {
   position: absolute;
@@ -788,7 +963,7 @@ input[type="button"]:hover,
   width: 200px;
   top: 2.5rem;
   right: 0;
-  background: #fff;
+  background: var(--ow-account-menu-bg);
   border-radius: 0.5rem;
   box-shadow: 0px 1px 0.188rem #00000040;
   z-index: 10;
@@ -804,7 +979,7 @@ input[type="button"]:hover,
   height: 1.375rem;
   width: 1.375rem;
   display: inline-block;
-  background: #777;
+  background: var(--ow-account-icon);
   margin-right: 0.313rem;
   -webkit-mask-size: 1.375rem;
   -webkit-mask-repeat: no-repeat;
@@ -817,22 +992,22 @@ input[type="button"]:hover,
 .account-button {
   padding: 0.313rem 0.625rem;
   position: relative;
-  color: #777;
+  color: var(--ow-account-text);
 }
 .account-menu li {
   list-style: none;
-  border-bottom: 2px solid #f6f6f6;
+  border-bottom: 2px solid var(--ow-account-menu-separator);
 }
 .account-menu-username {
   justify-content: center;
   align-items: center;
   display: none;
-  color: #777;
+  color: var(--ow-account-text);
 }
 #header .account-menu .dropdown-clickable {
   display: flex;
   padding: 0.375rem;
-  color: #777;
+  color: var(--ow-account-text);
   font-weight: 700;
   text-decoration: none;
   line-height: 22px;
@@ -851,7 +1026,7 @@ input[type="button"]:hover,
 #header .account-menu .dropdown-clickable:hover,
 #header .account-menu .dropdown-clickable:active,
 #header .account-menu .dropdown-clickable:focus {
-  color: #df5d43;
+  color: var(--ow-account-hover);
 }
 #main-content #header {
   height: 0;
@@ -909,27 +1084,27 @@ input[type="button"]:hover,
 }
 #changelist p.paginator a,
 #changelist p.paginator .this-page {
-  background: #df5d43;
+  background: var(--ow-paginator-bg);
   padding: 5px 10px;
   margin-right: 5px;
   border-radius: 2px;
 }
 #changelist p.paginator .this-page {
   background: transparent;
-  border: 1px solid rgba(223, 93, 67, 0.7);
+  border: 1px solid var(--ow-paginator-border-color);
   padding: 4px 9px;
 }
 #changelist p.paginator a:focus,
 #changelist p.paginator a:hover {
-  background: #b31e00;
+  background: var(--ow-paginator-hover);
 }
 #changelist p.paginator a.showall {
   background: none;
-  color: #df5d43;
+  color: var(--ow-paginator-showall-text);
 }
 #changelist p.paginator a.showall:focus,
 #changelist p.paginator a.showall:hover {
-  color: #b31e00;
+  color: var(--ow-paginator-showall-hover);
 }
 div#toolbar #searchbar {
   max-width: 68%;
@@ -942,10 +1117,10 @@ div#toolbar #searchbar {
   flex-direction: column;
   text-align: center;
   z-index: 999;
-  background-color: #efefef;
+  background-color: var(--ow-option-container-bg);
   border-radius: 8px;
   box-shadow: 0px 1px 3px #00000040;
-  color: #333333;
+  color: var(--ow-option-container-text);
   font-weight: normal;
 }
 #main .option-container .option {
@@ -953,15 +1128,15 @@ div#toolbar #searchbar {
   border: 0;
   font-weight: normal;
   cursor: pointer;
-  background-color: #efefef;
-  color: #333333;
+  background-color: var(--ow-option-container-bg);
+  color: var(--ow-option-container-text);
   border-radius: 0;
 }
 #main .option-container .option:hover,
 #main .option-container .option:focus,
 #main .option-container .option:active {
-  background: #df5d43;
-  color: #fff;
+  background: var(--ow-option-hover-bg);
+  color: var(--ow-option-hover-text);
   outline: 0 none;
 }
 #content p {
@@ -979,15 +1154,15 @@ p.calendar-cancel {
 }
 div.calendar caption,
 div.calendarbox h2 {
-  background: #df5d43;
-  color: #fff;
+  background: var(--ow-calendar-header-bg);
+  color: var(--ow-calendar-header-text);
 }
 div.calendar caption {
   padding: 0.9rem 10px;
 }
 .calendarbox a.calendarnav-previous,
 .calendarbox a.calendarnav-next {
-  background: rgb(255 255 255 / 75%);
+  background: var(--ow-calendar-nav-bg);
   mask-size: contain !important;
   -webkit-mask-size: contain !important;
   top: 15px;
@@ -995,7 +1170,7 @@ div.calendar caption {
 div.calendarbox,
 div.clockbox {
   width: auto;
-  background-color: #efefef;
+  background-color: var(--ow-calendar-bg);
   border-radius: 8px;
   box-shadow: 0px 1px 3px #00000040;
 }
@@ -1011,8 +1186,8 @@ ul.timelist a {
 div.calendar td a:hover,
 div.calendar td.selected a,
 ul.timelist a:hover {
-  background: #ffe5e5;
-  color: #df5d43;
+  background: var(--ow-calendar-selected-bg);
+  color: var(--ow-calendar-selected-text);
 }
 .calendarbox a.calendarnav-previous {
   mask: url(../../ui/openwisp/images/calender-prev.svg) no-repeat center;
@@ -1035,7 +1210,7 @@ div.calendarbox .calendarnav-next:focus,
 div.calendarbox .calendarnav-next:hover,
 .calendarbox .calendarnav-previous:focus,
 .calendarbox .calendarnav-previous:hover {
-  background: #fff;
+  background: var(--ow-calendar-nav-hover);
 }
 div.calendar-shortcuts {
   padding: 10px;
@@ -1044,7 +1219,7 @@ p.calendar-cancel {
   padding: 10px;
 }
 div.calendar-shortcuts a:hover {
-  color: #df5d43;
+  color: var(--ow-calendar-shortcut-hover);
 }
 
 /* RESPONSIVE */
@@ -1106,7 +1281,7 @@ div.calendar-shortcuts a:hover {
 }
 #main .form-row .selector-chosen-title label,
 #container #main .form-row .selector-chosen-title .helptext {
-  color: #fff;
+  color: var(--ow-selector-chosen-text);
 }
 
 @media (max-width: 1226px) and (min-width: 1024px) {
@@ -1156,13 +1331,13 @@ div#container.no-auth,
 }
 #menu {
   position: fixed;
-  background: #fcfcfc;
+  background: var(--ow-menu-bg);
   box-shadow: 0 1px 4px -1px #00000026;
   top: 0;
   left: 0;
 }
 .menu-bar {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.075);
+  border-bottom: 1px solid var(--ow-menu-separator);
 }
 a.menu-item,
 .mg-link,
@@ -1175,13 +1350,13 @@ a.menu-item,
   font-size: 0.86rem;
   font-weight: 500;
   align-items: center;
-  color: #777;
+  color: var(--ow-menu-link-text);
   text-decoration: none !important;
 }
 .menu-item .icon,
 .mg-heading .icon,
 .mg-link .icon {
-  background: #777;
+  background: var(--ow-menu-link-text);
   width: 1.375rem;
   height: 1.375rem;
   flex-shrink: 0;
@@ -1202,12 +1377,12 @@ a.menu-item,
 #menu .mg-link:focus,
 .select2-results__option--highlighted[aria-selected],
 .select2-results__option[aria-selected="true"] {
-  background: #ffe5e5 !important;
-  color: #df5d43 !important;
+  background: var(--ow-menu-link-hover-bg) !important;
+  color: var(--ow-menu-link-hover-text) !important;
 }
 #menu .mg-link:hover,
 #menu .mg-link:focus {
-  color: #c74126;
+  color: var(--ow-menu-sublink-hover);
 }
 .mg-head {
   justify-content: space-between;
@@ -1217,7 +1392,7 @@ a.menu-item,
   font-size: 0.9rem;
   padding: 0.55rem 1rem;
   text-transform: capitalize;
-  color: rgba(0, 0, 0, 0.675);
+  color: var(--ow-menu-sublink-text);
 }
 .menu-item:hover .icon,
 .mg-head:hover .icon,
@@ -1232,7 +1407,7 @@ a.menu-item,
 .mg-link:hover .icon,
 .mg-link:focus .icon,
 #menu a.active .icon {
-  background: #df5d43;
+  background: var(--ow-menu-icon-hover);
 }
 .mg-arrow {
   flex-shrink: 0;
@@ -1241,7 +1416,7 @@ a.menu-item,
   height: 1.25rem;
   width: 1.25rem;
   margin-left: 1.25rem;
-  background: #bbbbbb;
+  background: var(--ow-color-fg-medium);
   transition: transform 0.3s;
 }
 .mg-heading {
@@ -1252,7 +1427,7 @@ a.menu-item,
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.3s ease;
-  background: #fdf2f2;
+  background: var(--ow-color-highlight-subtle);
 }
 .mg-list li {
   padding: 0;
@@ -1264,7 +1439,7 @@ a.menu-item,
 }
 .mg-dropdown-label {
   text-transform: uppercase;
-  color: #777;
+  color: var(--ow-menu-link-text);
   padding: 0.625rem 0.875rem;
   font-weight: 600;
   display: none;
@@ -1280,7 +1455,7 @@ a.menu-item,
   transform: rotate(-90deg);
 }
 .menu-group.active .mg-head {
-  color: #df5d43;
+  color: var(--ow-menu-group-active-text);
 }
 .mg-heading,
 .mg-list span,
@@ -1288,7 +1463,7 @@ a.menu-item,
   pointer-events: none;
 }
 .menu-group.active {
-  background: #fdf2f2f2;
+  background: var(--ow-menu-group-active-bg);
 }
 h1#site-name {
   margin: 0;
@@ -1315,15 +1490,15 @@ h1#site-name {
 
 /* Highlight menu item */
 #menu a.active {
-  background: #ffe5e5 !important;
-  color: #df5d43 !important;
+  background: var(--ow-menu-link-active-bg) !important;
+  color: var(--ow-menu-link-active-text) !important;
   cursor: default;
 }
 .menu-group.active-mg:not(.active) .mg-head {
-  background: #ffe5e5 !important;
+  background: var(--ow-menu-link-active-bg) !important;
 }
 #menu a.active:hover {
-  background: #ffe5e5 !important;
+  background: var(--ow-menu-link-active-bg) !important;
 }
 
 /****************** MENU(screen-size > 768px) ******************/
@@ -1415,8 +1590,8 @@ h1#site-name {
     position: absolute;
     left: 3.125rem;
     width: fit-content;
-    background: #777;
-    color: #fff;
+    background: var(--ow-menu-tooltip-bg);
+    color: var(--ow-menu-tooltip-text);
     padding: 0.375rem 0.875rem;
     white-space: nowrap;
     border-radius: 0.188rem;
@@ -1444,7 +1619,7 @@ h1#site-name {
   .toggle-menu .mg-dropdown-label,
   .toggle-menu .mg-list {
     border-radius: 0.5rem;
-    background: #ffffff;
+    background: var(--ow-menu-dropdown-bg);
     box-shadow: 0px 1px 4px #00000040;
   }
   .toggle-menu .mg-dropdown-label {
@@ -1605,7 +1780,7 @@ body.login {
 * Scrollbar
 ************/
 :root {
-  scrollbar-color: #777 #f1f1f1 !important;
+  scrollbar-color: var(--ow-scrollbar-thumb) var(--ow-scrollbar-track) !important;
 }
 body::-webkit-scrollbar {
   width: 12px;
@@ -1614,13 +1789,13 @@ body::-webkit-scrollbar {
   width: 5px;
 }
 ::-webkit-scrollbar-track {
-  background: #f1f1f1;
+  background: var(--ow-scrollbar-track);
 }
 ::-webkit-scrollbar-thumb {
-  background: #777;
+  background: var(--ow-scrollbar-thumb);
 }
 ::-webkit-scrollbar-thumb:hover {
-  background: #333;
+  background: var(--ow-scrollbar-thumb-hover);
 }
 
 /* UTILS ICONS */
diff --git a/openwisp_utils/admin_theme/static/admin/css/ow-auto-filter.css b/openwisp_utils/admin_theme/static/admin/css/ow-auto-filter.css
index 4d382558..2eae6eff 100644
--- a/openwisp_utils/admin_theme/static/admin/css/ow-auto-filter.css
+++ b/openwisp_utils/admin_theme/static/admin/css/ow-auto-filter.css
@@ -14,8 +14,8 @@
   padding: 0px 5px;
   width: fit-content;
   width: -moz-fit-content;
-  background: #fff;
-  color: rgba(0, 0, 0, 0.65);
+  background: var(--body-bg);
+  color: var(--ow-overlay-67-5);
   pointer-events: none;
   font-weight: 300;
   transform: translate(10px, -8px);
@@ -41,15 +41,15 @@
   min-width: 222px !important;
 }
 .auto-filter .select2-selection {
-  border: 1px solid #747272 !important;
+  border: 1px solid var(--ow-color-fg-dark) !important;
   border-radius: 0.2rem !important;
   padding: 0.4rem 1.25rem 0.3125rem 1rem;
 }
 .auto-filter .select2-selection[aria-expanded="true"] {
-  border-color: #df5d43 !important;
+  border-color: var(--ow-selected-filter-option-bg) !important;
 }
 .auto-filter .select2-selection[aria-expanded="true"] .select2-selection__rendered {
-  color: #df5d43 !important;
+  color: var(--ow-active-filter-title) !important;
 }
 .auto-filter .select2-selection__placeholder {
   color: var(--body-fg) !important;
@@ -64,12 +64,12 @@
   left: 0 !important;
 }
 .auto-filter-choices .select2-search--dropdown {
-  background: #fff !important;
+  background: var(--body-bg) !important;
 }
 .auto-filter-choices .select2-dropdown--below {
   border-radius: 0.35rem;
   width: min-content;
-  background: #fff;
+  background: var(--body-bg);
   width: min-content;
   max-height: 18.75rem;
   min-width: 100%;
@@ -84,7 +84,7 @@
 .auto-filter-choices .select2-results li {
   margin: 0;
   list-style-type: none;
-  color: #777;
+  color: var(--ow-color-fg-dark);
   font-size: 14px;
   border-radius: 4px;
   font-weight: 500;
@@ -93,10 +93,19 @@
     background 0.15s;
 }
 .auto-filter-choices .select2-results__option[aria-selected="true"] {
-  background: #df5d43 !important;
-  color: #ffff !important;
-}
-.auto-filter-choices .select2-results__option--highlighted {
-  background: #ffe5e5 !important;
-  color: #ba2121 !important;
+  color: var(--ow-selected-filter-option-text) !important;
+  background: var(--ow-selected-filter-option-bg) !important;
+}
+.change-list
+  .select2-container--admin-autocomplete
+  .select2-results__option--highlighted[aria-selected] {
+  background: var(--ow-filter-option-hover-bg) !important;
+  color: var(--ow-filter-option-hover-text) !important;
+  text-decoration: underline;
+}
+.change-list
+  .select2-container--admin-autocomplete
+  .select2-results__option[aria-selected="true"] {
+  color: var(--ow-selected-filter-option-text) !important;
+  background: var(--ow-selected-filter-option-bg) !important;
 }
diff --git a/openwisp_utils/admin_theme/static/admin/css/ow-filters.css b/openwisp_utils/admin_theme/static/admin/css/ow-filters.css
index 4bf0eafa..41d820a3 100644
--- a/openwisp_utils/admin_theme/static/admin/css/ow-filters.css
+++ b/openwisp_utils/admin_theme/static/admin/css/ow-filters.css
@@ -1,3 +1,11 @@
+:root {
+  --ow-selected-filter-option-bg: var(--ow-color-primary);
+  --ow-selected-filter-option-text: var(--button-fg);
+  --ow-filter-option-hover-bg: var(--ow-color-primary-light);
+  --ow-filter-option-hover-text: var(--ow-color-primary-dark);
+  --ow-active-filter-title: var(--ow-color-primary);
+}
+
 #changelist .results,
 #changelist .actions,
 #changelist .paginator {
@@ -5,8 +13,8 @@
 }
 #ow-changelist-filter {
   padding: 1.25rem 2.5rem;
-  background: #fff;
-  border-bottom: 2px solid #f6f6f6;
+  background-color: var(--body-bg);
+  border-bottom: 2px solid var(--ow-color-fg-lighter);
   display: flex;
   flex-direction: column-reverse;
 }
@@ -77,7 +85,7 @@
   opacity: 0;
   border-radius: 0.35rem;
   width: min-content;
-  background: #ffffff;
+  background: var(--body-bg);
   width: min-content;
   max-height: 18.75rem;
   min-width: 100%;
@@ -97,7 +105,7 @@
   padding: 0px;
 }
 .filter-title {
-  border: 1px solid #747272;
+  border: 1px solid var(--ow-color-fg-dark);
   border-radius: 0.2rem;
   padding: 0.4rem 1.25rem 0.3125rem 1rem;
   cursor: pointer;
@@ -115,8 +123,8 @@
   padding: 0px 5px;
   width: fit-content;
   width: -moz-fit-content;
-  background: #fff;
-  color: rgba(0, 0, 0, 0.65);
+  background: var(--body-bg);
+  color: var(--ow-overlay-67-5);
   pointer-events: none;
   font-weight: 300;
 }
@@ -142,8 +150,8 @@
   font-size: 14px;
 }
 .ow-filter.ow-active .filter-title {
-  border-color: #df5d43;
-  color: #df5d43;
+  border-color: var(--ow-active-filter-title);
+  color: var(--ow-active-filter-title);
 }
 .filter-options a {
   padding: 0.5rem 0.75rem;
@@ -161,15 +169,16 @@
 .filter-options .selected,
 .filter-options .selected:hover,
 .filter-options .selected:focus {
-  background: #df5d43;
-  color: #ffff;
+  background: var(--ow-selected-filter-option-bg);
+  color: var(--ow-selected-filter-option-text);
   cursor: default;
 }
 .filter-options a:hover,
 .filter-options a:focus {
-  background: #ffe5e5;
-  color: #ba2121;
+  background: var(--ow-filter-option-hover-bg);
+  color: var(--ow-filter-option-hover-text);
 }
+
 .ow-filter-slider {
   overflow-x: auto;
   padding: 0.625rem 1rem;
@@ -214,7 +223,7 @@
 }
 .left-arrow:hover,
 .right-arrow:hover {
-  background-color: #f7f7f7;
+  background-color: var(--ow-color-fg-lightest);
 }
 .left-arrow.down,
 .right-arrow.down {
@@ -227,7 +236,7 @@ a.field-clear {
   cursor: pointer;
   right: 0.5rem;
   top: 8px;
-  color: #ba2121;
+  color: var(--delete-button-bg);
   position: absolute;
 }