diff --git a/app/css/all.css b/app/css/all.css
index 8ab09de0..92bf45d1 100644
--- a/app/css/all.css
+++ b/app/css/all.css
@@ -6,8 +6,14 @@ Description: Classes shared by all themes
 License: GNU General Public License v3.0
 */
 
+:root {
+  --raspap-content-main: #495057;
+  --raspap-text-muted: #858796;
+  --raspap-brand-color: #2b8080;
+}
+
 a {
-    color: #2b8080;
+    color: var(--raspap-brand-color);
     text-decoration: none;
 }
 
@@ -17,22 +23,21 @@ a {
 }
 
 .sb-sidenav-light .sb-sidenav-menu .nav-link, .card-title, h4 {
-  color: #495057;
+  color: var(--raspap-content-main);
 }
 
 .sb-topnav.navbar-light #sidebarToggle {
-  color: #495057;
+  color: var(--raspap-content-main);
 }
 .sidebar-brand-text {
   text-transform: none;
-  color: #212529;
   font-size: 2.0rem;
   font-weight: 500;
   font-family: Helvetica, Arial, sans-serif;
 }
 
 th {
-  color: #495057 !important;
+  color: var(--raspap-content-main) !important;
 }
 
 .h-underlined {
@@ -53,7 +58,7 @@ th {
 .info-item {
   text-transform: uppercase;
   font-size: 0.7em;
-  color: #858796;
+  color: var(--raspap-text-muted);
 }
 
 .info-value {
@@ -130,7 +135,7 @@ th {
   display: flex;
   justify-content: center;
   align-items: center;
-  color: #858796;
+  color: var(--raspap-text-muted);
   content: "\f1ce"; /* Unicode for the circle-notch icon */
   font-family: "Font Awesome 5 Free";
   font-weight: 900; /* Adjust as needed */
@@ -212,7 +217,6 @@ button.btn.btn-light.js-toggle-password {
   width: 4px;
   border-radius: 1px;
   opacity: 30%;
-  background: <?php echo $color; ?>;
 }
 
 .signal-icon .signal-bar:nth-child(1) { height: 40%; }
@@ -259,7 +263,7 @@ button.btn.btn-light.js-toggle-password {
 }
 
 figcaption.figure-caption a {
-  color: #858796;
+  color: var(--raspap-text-muted);
 }
 
 button > i.fas {
diff --git a/app/css/custom.php b/app/css/custom.php
index 8781c0a2..4d1aef60 100644
--- a/app/css/custom.php
+++ b/app/css/custom.php
@@ -13,22 +13,38 @@ License: GNU General Public License v3.0
 
 @import url('all.css');
 
+:root {
+  --raspap-theme-color: <?php echo $color; ?>;
+  --raspap-theme-lighter: <?php echo lightenColor($color, 20); ?>;
+  --raspap-theme-darker: <?php echo darkenColor($color, 20); ?>;
+}
+
 body {
   color: #212529;
   background-color: #f8f9fc;
 }
 
 a {
-    color: <?php echo $color; ?>;
-    text-decoration: none;
+  color: var(--raspap-theme-color);
+  text-decoration: none;
 }
+
+a:focus, a:hover {
+  color: var(--raspap-theme-darker);
+}
+
 .sb-sidenav-light .sb-sidenav-menu .nav-link:hover {
-    color: <?php echo $color; ?>;
+  color: var(--raspap-theme-color);
+}
+
+.sidebar-brand-text:focus,
+.sidebar-brand-text:hover {
+  color: var(--raspap-theme-darker);
 }
 
 .form-check-input:checked {
-    background-color: <?php echo $color; ?>;
-    border-color: <?php echo $color; ?>;
+  background-color: var(--raspap-theme-color); 
+  border-color: var(--raspap-theme-color); 
 }
 
 .sidebar {
@@ -44,13 +60,13 @@ a {
 }
 
 .sidebar-brand-text {
-  color: <?php echo $color; ?>;
+  color: var(--raspap-theme-color); 
 }
 
 .card .card-header, .modal-header {
-  border-color: <?php echo $color; ?>;
+  border-color: var(--raspap-theme-color); 
   color: #fff;
-  background-color: <?php echo $color; ?>;
+  background-color: var(--raspap-theme-color); 
 }
 
 .modal-header {
@@ -58,17 +74,21 @@ a {
 }
 
 .btn-primary {
-  color: <?php echo $color; ?>;
-  border-color: <?php echo $color; ?>;
+  color: var(--raspap-theme-color); 
+  border-color: var(--raspap-theme-color); 
   background-color: #fff;
 }
 
 .btn-primary:disabled {
-  color: <?php echo $color; ?> !important;
-  border-color: <?php echo $color; ?> !important;
+  color: var(--raspap-theme-color) !important;
+  border-color: var(--raspap-theme-color) !important;
   background-color: #fff !important;
 }
 
+.card-body {
+  color: #495057;
+}
+
 .card-footer, .modal-footer {
   background-color: #f2f1f0;
 }
@@ -103,8 +123,8 @@ a.nav-link.active {
 }
 
 .btn-primary:hover {
-  background-color: <?php echo $color; ?>;
-  border-color: <?php echo $color; ?>;
+  background-color: var(--raspap-theme-color); 
+  border-color: var(--raspap-theme-color); 
 }
 
 i.fa.fa-bars {
@@ -133,6 +153,6 @@ pre.unstyled {
 }
 
 .signal-icon .signal-bar {
-  background: <?php echo $color; ?>;
+  background: var(--raspap-theme-color); 
 }