diff --git a/public/css/FilterWidget.css b/public/css/FilterWidget.css
index 5723de69e..98573560f 100644
--- a/public/css/FilterWidget.css
+++ b/public/css/FilterWidget.css
@@ -1,8 +1,8 @@
 :root{
-	--filter-widget-border: var(--fhc-dark);
-	--filter-widget-color: var(--fhc-dark);
-	--filter-widget-primary: var(--fhc-primary);
-	--filter-widget-border-light: var(--fhc-border);
+	--filter-widget-border: var(--fhc-dark, black);
+	--filter-widget-color: var(--fhc-dark, black);
+	--filter-widget-primary: var(--fhc-primary, #428bca);
+	--filter-widget-border-light: var(--fhc-border, #ddd);
 }
 
 .filter-name-title {
diff --git a/public/css/components/FilterComponent.css b/public/css/components/FilterComponent.css
index b3df05a19..3edf989a6 100644
--- a/public/css/components/FilterComponent.css
+++ b/public/css/components/FilterComponent.css
@@ -1,7 +1,7 @@
 :root{
-	--fhc-filtercomponent-primary: var(--fhc-primary);
-	--fhc-filtercomponent-bg:var(--fhc-background);
-	--fhc-filtercomponent-border:var(--fhc-border);
+	--fhc-filtercomponent-primary: var(--fhc-primary, #428bca);
+	--fhc-filtercomponent-bg:var(--fhc-background, white);
+	--fhc-filtercomponent-border:var(--fhc-border, black);
 }
 
 .filter-header-title {
diff --git a/public/css/components/FormUnderline.css b/public/css/components/FormUnderline.css
index f41883265..0d1fd991f 100644
--- a/public/css/components/FormUnderline.css
+++ b/public/css/components/FormUnderline.css
@@ -1,5 +1,10 @@
 /* FORM UNDERLINE
 */
+:root {
+	--fhc-formunderline-border: var(--fhc-border, #dee2e6);
+	--fhc-formunderline-link: var(--fhc-link, initial);
+}
+
 .form-underline{
     display: flex;
     flex-direction: column;
@@ -9,12 +14,12 @@
   }
   
   a.form-underline-content{
-	color: var(--fhc-link);
+	color: var(--fhc-formunderline-link);
   }
   
   .form-underline .form-underline-content{
     border-width: 1px;
-    border-color: transparent transparent var(--fhc-border) transparent;
+    border-color: transparent transparent var(--fhc-formunderline-border) transparent;
     border-style: solid;
     padding-bottom: 0.25rem;
     padding-left: 0.5rem;
diff --git a/public/css/components/MyLv.css b/public/css/components/MyLv.css
index b7176fb35..267e2f45e 100644
--- a/public/css/components/MyLv.css
+++ b/public/css/components/MyLv.css
@@ -1,8 +1,8 @@
 :root{
-	--myLv-disabled: var(--fhc-disabled);
+	--fhc-myLv-disabled: var(--fhc-disabled, #565e647f);
 }
 
 .unavailable, .unavailable:hover{
-	color: var(--myLv-disabled) !important;
+	color: var(--fhc-myLv-disabled) !important;
 	cursor: default;
 }
diff --git a/public/css/components/NavigationComponent.css b/public/css/components/NavigationComponent.css
index e922d4812..4799e2f26 100644
--- a/public/css/components/NavigationComponent.css
+++ b/public/css/components/NavigationComponent.css
@@ -3,22 +3,22 @@
  */
 
  :root{
-	--nav-component-bg: var(--fhc-tertiary);
-	--nav-component-border: var(--fhc-border);
-	--nav-component-color: var(--fhc-text);
-	--nav-left-component-border: var(--fhc-border);
-	--nav-left-component-bg: var(--fhc-tertiary);
-	--nav-left-component-color: var(--fhc-primary);
-	--nav-left-component-hover: var(--fhc-secondary-highlight);
+	--fhc-nav-component-bg: var(--fhc-tertiary, #f8f8f8);
+	--fhc-nav-component-border: var(--fhc-border, #5e5e5e);
+	--fhc-nav-component-color: var(--fhc-text, #5e5e5e);
+	--fhc-nav-left-component-border: var(--fhc-border, #e7e7e7);
+	--fhc-nav-left-component-bg: var(--fhc-tertiary, #f8f8f8);
+	--fhc-nav-left-component-color: var(--fhc-primary, #23527c);
+	--fhc-nav-left-component-hover: var(--fhc-secondary-highlight, #eee);
  }
 
 .navbar-header {
-	background-color: var(--nav-component-bg);
+	background-color: var(--fhc-nav-component-bg);
 	padding-top: 0px;
 	padding-bottom: 0px;
 	padding-left: 10px;
 	border-style: solid;
-	border-color: var(--nav-component-border);
+	border-color: var(--fhc-nav-component-border);
 	border-width: 0 0 1px;
 }
 
@@ -26,7 +26,7 @@
 	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
 	font-size: 18px;
 	line-height: 1.42857143;
-	color: var(--nav-component-color) !important;
+	color: var(--fhc-nav-component-color) !important;
 	padding-top: 15px !important;
 	padding-right: 7px !important;
 	padding-left: 7px !important;
@@ -45,8 +45,8 @@
 	z-index: 1;
 	position: absolute;
 	width: 250px;
-	border-right: 1px solid ;
-	background-color:var(--nav-left-component-bg);
+	border-right: 1px solid var(--fhc-nav-left-component-border);
+	background-color:var(--fhc-nav-left-component-bg);
 }
 
 .navbar-left-side ul {
@@ -54,7 +54,7 @@
 }
 
 .navbar-left-side ul li {
-	border-bottom: 1px solid var(--nav-left-component-border);
+	border-bottom: 1px solid var(--fhc-nav-left-component-border);
 }
 
 .left-side-menu-second-level {
@@ -78,7 +78,7 @@
 	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
 	font-size: 14px;
 	line-height: 1.42857143;
-	color: var(--nav-left-component-color);
+	color: var(--fhc-nav-left-component-color);
 	padding-top: 10px !important;
 	padding-bottom: 10px !important;
 	padding-left: 7px !important;
@@ -87,7 +87,7 @@
 }
 
 .left-side-menu-link-entry:hover {
-	background-color: var(--nav-left-component-hover);
+	background-color: var(--fhc-nav-left-component-hover);
 }
 
 /*
diff --git a/public/css/components/Profil.css b/public/css/components/Profil.css
index de6adbee7..b1ac8d67a 100644
--- a/public/css/components/Profil.css
+++ b/public/css/components/Profil.css
@@ -1,14 +1,13 @@
 
 :root{
-	--profil-border: var(--fhc-border);
-	--profil-tabulator-shadow:var(--fhc-shadow-20);
+	--fhc-profil-border: var(--fhc-border, white);
+	--fhc-profil-tabulator-shadow: var(--fhc-shadow-20, rgba(0,0,0,0.1));
 }
 
-
 .image-lock{
   height:22px; 
   width:21px; 
-  background-color:var(--profil-border); 
+  background-color:var(--fhc-profil-border); 
   position:absolute;
   /* top: 1px is important, otherwise it goes over the border of the thumbnail*/ 
   top:1px; 
@@ -21,7 +20,7 @@
 
 .tabulator-collapsed-row{
     padding:15px;
-    background-color: var(--profil-tabulator-shadow);
+    background-color: var(--fhc-profil-tabulator-shadow);
 
 }
 
@@ -33,9 +32,6 @@
   padding:0 !important;
 }
 
-
-
-
 .btn-circle {
   width: 30px;
   height: 30px;
@@ -45,7 +41,3 @@
   font-size: 12px;
   line-height: 1.42857;
 }
-
-
-
-
diff --git a/public/css/components/Sprachen.css b/public/css/components/Sprachen.css
index 028b4f2f2..3175bbd1d 100644
--- a/public/css/components/Sprachen.css
+++ b/public/css/components/Sprachen.css
@@ -1,13 +1,21 @@
+
+:root {
+	--fhc-sprachen-color: var(--fhc-text, white);
+	--fhc-sprachen-background: var(--fhc-primary, #005585);
+	--fhc-sprachen-background-highlight: var(--fhc-primary-highlight, #00649c);
+}
+
 .sprachen-entry{
-	background-color: var(--fhc-primary);
+	color: var(--fhc-sprachen-color);
+	background-color: var(--fhc-sprachen-background);
 }
 
 .sprachen-entry:hover {
-	background-color: var(--fhc-primary);
+	background-color: var(--fhc-sprachen-background);
 }
 
 [selected="true"].sprachen-entry {
-	background-color: var(--fhc-primary-highlight);
+	background-color: var(--fhc-sprachen-background-highlight);
 }
 
 .sprachen-entry.btn {
diff --git a/public/css/components/calendar.css b/public/css/components/calendar.css
index 4d082fa5a..fe8841867 100644
--- a/public/css/components/calendar.css
+++ b/public/css/components/calendar.css
@@ -1,48 +1,50 @@
 :root{
-	--calendar-pane-height: calc(100vh - 220px);
+	--fhc-calendar-pane-height: calc(100vh - 220px);
 	
-	--calendar-primary: var(--fhc-primary);
-	--calendar-border: var(--fhc-border);
-	--calendar-border-highlight: var(--fhc-border-highlight);
-	--calendar-text: var(--fhc-text);
-	--calendar-text-light: var(--fhc-text);
-	--calendar-bg: var(--fhc-background);
-	--calendar-hour-indicator-bg: var(--fhc-background);
-	--calendar-week-page-header-background: var(--fhc-background);
-	--calendar-week-page-header-color: var(--fhc-text);
-	--calendar-week-page-header-border: var(--fhc-border);
-	--calendar-week-page-header-hover-background: var(--fhc-background-highlight);
-	--calendar-all-day-event-background: var(--fhc-background);
-	--calendar-past: var(--fhc-beige-10);
+	--fhc-calendar-primary: var(--fhc-primary, #006095);
+	--fhc-calendar-border: var(--fhc-border, #dee2e6);
+	--fhc-calendar-border-highlight: var(--fhc-border-highlight, #495057);
+	--fhc-calendar-text: var(--fhc-text, #212529);
+	--fhc-calendar-text-light: var(--fhc-text, #212529);
+	--fhc-calendar-background: var(--fhc-background, #fff);
+	--fhc-calendar-dark: var(--fhc-dark, #212529);
+	--fhc-calendar-hour-indicator-bg: var(--fhc-background, #fff);
+	--fhc-calendar-week-page-header-background: var(--fhc-background, #fff);
+	--fhc-calendar-week-page-header-color: var(--fhc-text, #212529);
+	--fhc-calendar-week-page-header-border: var(--fhc-border, #dee2e6);
+	--fhc-calendar-week-page-header-hover-background: var(--fhc-background-highlight, #d5dae0);
+	--fhc-calendar-all-day-event-background: var(--fhc-background, #fff);
+	--fhc-calendar-past: var(--fhc-beige-10, rgba(245, 233, 215, 0.5));
+	--fhc-calendar-box-shadow: var(--fhc-box-shadow, #dee2e6);
 }
 
 :root.dark{
-	--calendar-past: var(--fhc-beige-20);
+	--fhc-calendar-past: var(--fhc-beige-20, rgba(172, 153, 125, 0.5));
 }
 
 .fhc-calendar-pane {
-	height: var(--calendar-pane-height);
+	height: var(--fhc-calendar-pane-height);
 }
 
 .fhc-calendar-hour-indicator{
-	border-top: 1px solid var(--calendar-border);
+	border-top: 1px solid var(--fhc-calendar-border);
 }
 
 .fhc-calendar-hour-indicator span{
-	background-color: var(--calendar-hour-indicator-bg) !important;
+	background-color: var(--fhc-calendar-hour-indicator-bg) !important;
 }
 
 .fhc-calendar-week-page-header{
-	color: var(--calendar-text);
-	background-color: var(--calendar-week-page-header-background);
+	color: var(--fhc-calendar-text);
+	background-color: var(--fhc-calendar-week-page-header-background);
 }
 
 .fhc-calendar-week-page-header > div {
-	border-right: 1px solid var(--calendar-border);
+	border-right: 1px solid var(--fhc-calendar-border);
 }
 
 .fhc-calendar-week-page-header > div:hover{
-	background-color: var(--calendar-week-page-header-hover-background);
+	background-color: var(--fhc-calendar-week-page-header-hover-background);
 }
 
 .fhc-calendar-months .col-4,
@@ -104,7 +106,7 @@
 }
 
 .fhc-calendar-week-page .all-day-event-border{
-	box-shadow: 1px 1px 0 var(--fhc-box-shadow);
+	box-shadow: 1px 1px 0 var(--fhc-calendar-box-shadow);
 }
 
 .fhc-calendar-week-page .all-day-event {
@@ -120,7 +122,7 @@
 	grid-template-columns:repeat(7,1fr);
 	width:100%;
 	z-index:3;
-	background-color:var(--calendar-all-day-event-background);
+	background-color:var(--fhc-calendar-all-day-event-background);
 }
 
 .fhc-calendar-week-page .all-day-event-container::before {
@@ -130,12 +132,12 @@
 	bottom: 0;
 	left: -3em;
 	right: 100%;
-	background-color: var(--calendar-all-day-event-background);
-	box-shadow: 1px 1px 0 var(--fhc-box-shadow);
+	background-color: var(--fhc-calendar-all-day-event-background);
+	box-shadow: 1px 1px 0 var(--fhc-calendar-box-shadow);
 }
 
 .fhc-calendar-day-page .all-day-event-border {
-	box-shadow: 0 0 0 1px var(--fhc-box-shadow);
+	box-shadow: 0 0 0 1px var(--fhc-calendar-box-shadow);
 }
 
 .fhc-calendar-day-page .all-day-event {
@@ -151,13 +153,13 @@
 	grid-template-columns: 3em 1fr;
 	width: 100%;
 	z-index: 3;
-	background-color:var(--calendar-all-day-event-background);
-	box-shadow: 1px 1px 0 var(--fhc-box-shadow);
+	background-color:var(--fhc-calendar-all-day-event-background);
+	box-shadow: 1px 1px 0 var(--fhc-calendar-box-shadow);
 }
 
 /* grid hour lines of the Stundenplan use box-shadow instead of border because box-shadow renders consistently on different viewports*/
 .box-shadow-border{
-	box-shadow: 0 0 0 1px var(--calendar-border) !important;
+	box-shadow: 0 0 0 1px var(--fhc-calendar-border) !important;
 }
 
 .fhc-calendar-no-events-overlay{
@@ -172,7 +174,7 @@
 	margin:auto;
 	width: 100%;
 	height: 100%;
-	background-image: linear-gradient(120deg, var(--fhc-background), var(--fhc-dark) );
+	background-image: linear-gradient(120deg, var(--fhc-calendar-background), var(--fhc-calendar-dark) );
 	opacity: .7;
 }
 .fhc-calendar-day-page {
@@ -198,18 +200,18 @@
 }
 
 .fhc-calendar-month-page-day{
-	color: var(--calendar-text) !important;
+	color: var(--fhc-calendar-text) !important;
 }
 
 .fhc-calendar-month-page-day.fhc-calendar-past:not(.fhc-calendar-month-page-day-focusday) {
-	color: var(--fhc-text) !important;
+	color: var(--fhc-calendar-text) !important;
 }
 
 .fhc-calendar-lg .fhc-calendar-month-page-day,
 .fhc-calendar-lg .fhc-calendar-month-page-weekday,
 .fhc-calendar-md .fhc-calendar-month-page-day,
 .fhc-calendar-md .fhc-calendar-month-page-weekday {
-  border: solid 1px var(--calendar-border);
+  border: solid 1px var(--fhc-calendar-border);
 }
 .fhc-calendar-lg .fhc-calendar-month-page-day,
 .fhc-calendar-md .fhc-calendar-month-page-day {
@@ -219,7 +221,7 @@
 }
 .fhc-calendar-lg .fhc-calendar-month-page-day.active,
 .fhc-calendar-md .fhc-calendar-month-page-day.active {
-  border-color: var(--calendar-border-highlight);
+  border-color: var(--fhc-calendar-border-highlight);
 }
 /*.fhc-calendar-lg .fhc-calendar-month-page-day .events,*/
 /*.fhc-calendar-md .fhc-calendar-month-page-day .events {*/
@@ -264,8 +266,8 @@
 }
 
 .fhc-calendar-month-page-weekday:hover {
-	background-color:var(--calendar-primary);
-	color:var(--calendar-text-light);
+	background-color:var(--fhc-calendar-primary);
+	color:var(--fhc-calendar-text-light);
 	
 }
 
@@ -278,14 +280,14 @@
 
 
 .fhc-calendar-past {
-	background-color: var(--calendar-past);
-	border-color: var(--calendar-border);
+	background-color: var(--fhc-calendar-past);
+	border-color: var(--fhc-calendar-border);
 	opacity: 0.5;
 }
 
 .fhc-calendar-month-page-day-focusday {
-	border-color: var(--calendar-border-highlight) !important;
-	background-color: var(--calendar-bg);
+	border-color: var(--fhc-calendar-border-highlight) !important;
+	background-color: var(--fhc-calendar-background);
 	position: relative;
 	animation: dash-animation 2.5s linear infinite;
 }
@@ -317,20 +319,20 @@
 	bottom:0;
 	left:0;
 	right:0;
-	box-shadow: inset 0 0 0 2px var(--calendar-border) !important;
+	box-shadow: inset 0 0 0 2px var(--fhc-calendar-border) !important;
 	pointer-events: none;
 	z-index: 2;
 }
 
 .fhc-calendar-sm .fhc-calendar-month-page-day.active .no,
 .fhc-calendar-xs .fhc-calendar-month-page-day.active .no {
-  background-color: var(--calendar-primary);
+  background-color: var(--fhc-calendar-primary);
   border-radius: 50%;
   font-weight: bold;
 }
 .fhc-calendar-sm .fhc-calendar-month-page-day:not(.active):hover .no,
 .fhc-calendar-xs .fhc-calendar-month-page-day:not(.active):hover .no {
-  background-color: var(--calendar-primary);
+  background-color: var(--fhc-calendar-primary);
   border-radius: 50%;
 }
 /*.fhc-calendar-sm .fhc-calendar-month-page-day .no,*/
@@ -358,8 +360,8 @@
 }
 
 .selectedEvent {
-	background-color: var(--calendar-primary) !important;
-	color: var(--calendar-text-light);
+	background-color: var(--fhc-calendar-primary) !important;
+	color: var(--fhc-calendar-text-light);
 }
 
 .fhc-calendar-day-page .curTimeIndicator{
@@ -370,7 +372,7 @@
 	padding-left: 7rem;
 	margin-top: -1px;
 	z-index: 2;
-	border-color: var(--calendar-border)!important;
+	border-color: var(--fhc-calendar-border)!important;
 }
 
 .fhc-calendar-week-page .curTimeIndicator {
@@ -381,12 +383,12 @@
 	padding-left: 1rem;
 	margin-top: -1px;
 	z-index: 2;
-	border-color: var(--calendar-border) !important;
+	border-color: var(--fhc-calendar-border) !important;
 }
 
 .fhc-calendar-week-page .past::before{
 	content:"";
-	background-color: var(--calendar-past);
+	background-color: var(--fhc-calendar-past);
 	position: absolute;
 	pointer-events: none;
 	z-index: 2;
@@ -398,7 +400,7 @@
 }
 
 .fhc-calendar-week-page .overlay {
-	background-color: var(--calendar-past);
+	background-color: var(--fhc-calendar-past);
 	position: absolute;
 	pointer-events: none;
 	z-index: 2;
@@ -406,7 +408,7 @@
 }
 
 .fhc-calendar-day-page .overlay {
-	background-color: var(--calendar-past);
+	background-color: var(--fhc-calendar-past);
 	position: absolute;
 	pointer-events: none;
 	z-index: 2;
diff --git a/public/css/components/dashboard.css b/public/css/components/dashboard.css
index beb5b649c..78567be2b 100644
--- a/public/css/components/dashboard.css
+++ b/public/css/components/dashboard.css
@@ -2,8 +2,18 @@
 @import './dashboard/news.css';
 
 :root{
-	--dashboard-danger: var(--fhc-danger);
+	--fhc-dashboard-danger: var(--fhc-danger, #842029);
 	--fhc-dashboard-grid-size: 4;
+	--fhc-dashboard-link: var(--fhc-link, #0a57ca);
+	--fhc-dashboard-gridrow-background: var(--fhc-background, white);
+	--fhc-dashboard-gridrow-background-highlight: var(--fhc-background-highlight, #6c757d);
+	--fhc-dashboard-draggeditem-background: var(--fhc-background, white);
+	--fhc-dashboard-item-overlay-background: var(--fhc-background-highlight, rgba(0, 100, 156, 1));
+	--fhc-dashboard-item-overly-border-color: var(--fhc-border, lightgray);
+	--fhc-dashboard-denied-dragging-animation-color: var(--fhc-danger, red);
+	--fhc-dashboard-pin-pinned-hover-color: var(--fhc-fifth-highlight, rgb(153, 116, 116));
+	--fhc-dashboard-section-info-color: var(--fhc-primary, #00649c);
+	--fhc-dashboard-section-info-color-hover: var(--fhc-primary-highlight, #005585);
 }
 
 @media(max-width: 577px) {
@@ -13,7 +23,7 @@
 }
 
 .core-dashboard a{
-	color: var(--fhc-link);
+	color: var(--fhc-dashboard-link);
 }
 
 @media (max-width: 576px){
@@ -46,12 +56,12 @@
 	bottom:0;
 	left:50%;
 	transform:translate(-50%, 50%);
-	background-color:white;
+	background-color: var(--fhc-dashboard-gridrow-background);
 }
 
 .newGridRow:hover {
 	color:white;
-	background-color:#6c757d;
+	background-color: var(--fhc-dashboard-gridrow-background-highlight);
 }
 
 .empty-tile-hover:hover {
@@ -59,8 +69,8 @@
 }
 
 .alert-danger .form-check-input:checked {
-	border-color: var(--dashboard-danger);
-	background-color: var(--dashboard-danger);
+	border-color: var(--fhc-dashboard-danger);
+	background-color: var(--fhc-dashboard-danger);
 }
 
 :root {
@@ -124,7 +134,7 @@
 .draggedItem {
 	height: 100%;
 	width: 100%;
-	background-color: white;
+	background-color: var(--fhc-dashboard-draggeditem-background);
 	position: relative;
 }
 
@@ -135,13 +145,13 @@
 	left:0;
 	right:0;
 	bottom:0;
-	background-color:rgba(0, 100, 156);
-	border:4px dashed lightgray;
+	background-color:var(--fhc-dashboard-item-overlay-background);
+	border:4px dashed var(--fhc-dashboard-item-overly-border-color);
 	opacity: 0.5;
 }
 
 #deleteBookmark i{
-	color: var(--fhc-danger);
+	color: var(--fhc-dashboard-danger);
 }
 
 .pin:hover{
@@ -149,21 +159,21 @@
 }
 
 .pin[pinned]:hover{
-	color:rgb(153, 116, 116);
+	color: var(--fhc-dashboard-pin-pinned-hover-color);
 }
 
 .section-info{
-	color: #00649c;
+	color: var(--fhc-dashboard-section-info-color);
 	cursor:pointer;
 }
 
 .section-info:hover {
-	color: #005585;
+	color: var(--fhc-dashboard-section-info-color-hover);
 }
 
 .denied-dragging-animation {
 	animation: wiggle 0.5s linear;
-	color:red !important;
+	color: var(--fhc-dashboard-denied-dragging-animation-color) !important;
 }
 
 @keyframes wiggle {
diff --git a/public/css/components/dashboard/news.css b/public/css/components/dashboard/news.css
index d65b51592..ca584c235 100644
--- a/public/css/components/dashboard/news.css
+++ b/public/css/components/dashboard/news.css
@@ -1,10 +1,10 @@
 :root{
-    --news-widget-height: 1;
-	--news-widget-bg: var(--fhc-primary);
-	--news-widget-highlight-color: var(--fhc-primary-highlight);
-	--news-widget-border: var(--fhc-border);
-	--news-widget-border-highlight: var(--fhc-border-highlight);
-	--news-widget-text-light: var(--fhc-text);
+    --fhc-news-widget-height: 1;
+	--fhc-news-widget-bg: var(--fhc-primary);
+	--fhc-news-widget-highlight-color: var(--fhc-primary-highlight);
+	--fhc-news-widget-border: var(--fhc-border);
+	--fhc-news-widget-border-highlight: var(--fhc-border-highlight);
+	--fhc-news-widget-text-light: var(--fhc-text);
 }
 
 
@@ -53,26 +53,26 @@
 
 .fhc-news-menu-item {
     padding: 0.375rem;
-    color: var(--news-widget-text-light);
+    color: var(--fhc-news-widget-text-light);
     min-height: 5%;
     max-height: 30%;
     width: 100%;
     justify-content: space-between;
     align-items: center;
-    background-color: var(--news-widget-bg);
-    border: 1px solid var(--news-widget-border);
+    background-color: var(--fhc-news-widget-bg);
+    border: 1px solid var(--fhc-news-widget-border);
     cursor: pointer;
     transition: background-color 0.2s ease, border-color 0.2s ease; /* Smooth transition */
 }
 
 .fhc-news-menu-item:hover {
-    background-color: var(--news-widget-highlight-color);
-    border-color: var(--news-widget-border-highlight);
+    background-color: var(--fhc-news-widget-highlight-color);
+    border-color: var(--fhc-news-widget-border-highlight);
 }
 
 .fhc-news-menu-item.selected {
-    background-color: var(--news-widget-highlight-color);
-    border: 2px solid var(--news-widget-border-highlight);
+    background-color: var(--fhc-news-widget-highlight-color);
+    border: 2px solid var(--fhc-news-widget-border-highlight);
     
 }
 
diff --git a/public/css/components/searchbar/searchbar.css b/public/css/components/searchbar/searchbar.css
index 6aa84c716..603f2046a 100644
--- a/public/css/components/searchbar/searchbar.css
+++ b/public/css/components/searchbar/searchbar.css
@@ -6,20 +6,20 @@
 @import url(./switches.css);
 
 :root{
-	--searchbar-shadow: var(--fhc-shadow-40);
+	--searchbar-shadow: var(--fhc-shadow-40, #ced4da);
 }
 
 .searchbar_settings {
 	position: absolute; 
     z-index: 9999; 
-    background-color: var(--fhc-dark);
+    background-color: var(--fhc-dark, #343a40);
 }
 
 .searchbar_results {
     position: absolute; 
     z-index: 9998; 
-    background-color: var(--fhc-background); 
-    border: 1px solid var(--fhc-border);
+    background-color: var(--fhc-background, #fff); 
+    border: 1px solid var(--fhc-border, lightgrey);
     padding: .5rem;
     top: 100%;
     width: 100%;
@@ -29,12 +29,16 @@
 }
 
 .searchbar_results a{
-	color: var(--fhc-link);
+	color: var(--fhc-link, #0d6efd);
 }
-
+/*
 .searchbar_results a:not(a~i) {
 	color: inherit;
 }
+*/
+.searchbar_results a.btn {
+	color: var(--bs-btn-color, white);
+}
 
 .searchbar_results_scroller {
     overflow-y: auto;
@@ -42,7 +46,7 @@
 }
 
 .searchbar_result {
-    border-bottom: 1px solid var(--fhc-border);
+    border-bottom: 1px solid var(--fhc-border, lightgrey);
     margin-bottom: 1rem;
 }
 
diff --git a/public/css/components/searchbar/switches.css b/public/css/components/searchbar/switches.css
index 64da02ce8..c10d63d00 100644
--- a/public/css/components/searchbar/switches.css
+++ b/public/css/components/searchbar/switches.css
@@ -1,7 +1,7 @@
 :root{
-	--fhc-switches-checked-bg: var(--fhc-light);
-	--fhc-switches-unchecked-bg: var(--fhc-disabled);
-	--fhc-switches-shadow: var(--fhc-shadow-20);
+	--fhc-switches-checked-bg: var(--fhc-light, white);
+	--fhc-switches-unchecked-bg: var(--fhc-disabled, var(--bs-gray-600));
+	--fhc-switches-shadow: var(--fhc-shadow-20, rgba(108, 117, 125,.25));
 }
 
 .fhc-switches:checked  {
@@ -15,7 +15,7 @@
     background-color: var(--fhc-switches-unchecked-bg) !important;
     border-color: transparent;
     background-position: left center !important;
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%236b747a'/%3e%3c/svg%3e") !important;
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%238e99a3'/%3e%3c/svg%3e") !important;
 }
 
 .fhc-switches:focus  {
diff --git a/public/css/components/verticalsplit.css b/public/css/components/verticalsplit.css
index 1d5a56788..e0e2599e8 100644
--- a/public/css/components/verticalsplit.css
+++ b/public/css/components/verticalsplit.css
@@ -3,9 +3,9 @@
     Author     : bambi
 */
 :root {
-    --fhc-verticalsplit-vsplitter-bg-color: var(--fhc-background);
-    --fhc-verticalsplit-vsplitter-border-color: var(--fhc-border);
-    --fhc-verticalsplit-vsplitter-splitactions-color: var(--fhc-dark);
+    --fhc-verticalsplit-vsplitter-bg-color: var(--fhc-background, #eee);
+    --fhc-verticalsplit-vsplitter-border-color: var(--fhc-border, #eee);
+    --fhc-verticalsplit-vsplitter-splitactions-color: var(--fhc-dark, #000);
 }
 
 .verticalsplitted {