theme(high contrast theme): adds the high contrast color theme changes and some little modifications to the general cis.css styles

application/config/theme.php

@@ -8,4 +8,4 @@ if (! defined('BASEPATH')) exit('No direct script access allowed');
 $config['theme_name']='default';
 $config['theme_css']= "public/css/theme/default.css";
 $config['theme_logo']= "public/images/logo_fh-complete_300x46.png";
-$config['theme_modes']=['light','dark'];
+$config['theme_modes']=['light','dark','contrast'];

public/css/Cis4/Cis.css

@@ -41,6 +41,10 @@ html {
 	color: var(--fhc-primary-highlight) !important;
 }
 
+.fhc-primary-text{
+	color: var(--fhc-light) !important;
+}
+
 .fhc-body-bg{
 	background-color:var(--fhc-background) !important;
 }
@@ -50,21 +54,29 @@ html {
 }
 
 .fhc-secondary-bg{
-	background-color: var(--fhc-tertiary) !important;
-}
-
-.fhc-secondary-color {
-	color: var(--fhc-tertiary) !important;
-}
-
-.fhc-tertiary-bg{
 	background-color: var(--fhc-secondary) !important;
 }
 
-.fhc-tertiary-color {
+.fhc-secondary-color {
 	color: var(--fhc-secondary) !important;
 }
 
+.fhc-secondary-text{
+	color: var(--fhc-secondary-text) !important;
+}
+
+.fhc-tertiary-bg{
+	background-color: var(--fhc-tertiary) !important;
+}
+
+.fhc-tertiary-color {
+	color: var(--fhc-tertiary) !important;
+}
+
+.fhc-tertiary-text{
+	color: var(--fhc-tertiary-text) !important;
+}
+
 .fhc-fourth-bg {
 	background-color: var(--fhc-fourth) !important;
 }
@@ -73,6 +85,10 @@ html {
 	color: var(--fhc-fourth) !important;
 }
 
+.fhc-fourth-text {
+	color: var(--fhc-fourth-text) !important;
+}
+
 .fhc-fifth-bg {
 	background-color: var(--fhc-fifth) !important;
 }
@@ -81,6 +97,10 @@ html {
 	color: var(--fhc-fifth) !important;
 }
 
+.fhc-fifth-text {
+	color: var(--fhc-fifth-text) !important;
+}
+
 .fhc-body{
 	color:var(--fhc-text);
 	background-color: var(--fhc-background);
@@ -127,22 +147,22 @@ html {
 	--fhc-cis-menu-lvl-1-color-hover: var(--fhc-light);
 
 	--fhc-cis-menu-lvl-2-bg: var(--fhc-secondary);
-	--fhc-cis-menu-lvl-2-color: var(--fhc-text);
+	--fhc-cis-menu-lvl-2-color: var(--fhc-secondary-text);
 	--fhc-cis-menu-lvl-2-bg-hover: var(--fhc-secondary-highlight);
 	--fhc-cis-menu-lvl-2-color-hover: var(--fhc-text);
 
 	--fhc-cis-menu-lvl-3-bg: var(--fhc-tertiary);
-	--fhc-cis-menu-lvl-3-color: var(--fhc-text);
+	--fhc-cis-menu-lvl-3-color: var(--fhc-secondary-text);
 	--fhc-cis-menu-lvl-3-bg-hover: var(--fhc-tertiary-highlight);
 	--fhc-cis-menu-lvl-3-color-hover: var(--fhc-text);
 
 	--fhc-cis-menu-lvl-4-bg: var(--fhc-fourth);
-	--fhc-cis-menu-lvl-4-color: var(--fhc-text);
+	--fhc-cis-menu-lvl-4-color: var(--fhc-secondary-text);
 	--fhc-cis-menu-lvl-4-bg-hover: var(--fhc-fourth-highlight);
 	--fhc-cis-menu-lvl-4-color-hover: var(--fhc-text);
 
 	--fhc-cis-menu-lvl-5-bg: var(--fhc-fifth);
-	--fhc-cis-menu-lvl-5-color: var(--fhc-text);
+	--fhc-cis-menu-lvl-5-color: var(--fhc-secondary-text);
 	--fhc-cis-menu-lvl-5-bg-hover: var(--fhc-fifth-highlight);
 	--fhc-cis-menu-lvl-5-color-hover: var(--fhc-text);
 	--fhc-cis-grade-positive: var(--fhc-success);

public/js/components/Cis/Menu.js

@@ -144,7 +144,7 @@ export default {
 		<div id="nav-main-sticky">
 			<div id="nav-main-toggle" class="position-static d-none d-lg-block ">
 				<button :aria-label="menuCollapseAriaLabel"  type="button" @click="menuOpen = !menuOpen"  class="btn text-light rounded-0 p-1 d-flex align-items-center" data-bs-toggle="collapse" data-bs-target=".nav-menu-collapse" aria-expanded="true" aria-controls="nav-sprachen nav-main-menu">
-					<i aria-hidden="true" class="fa fa-arrow-circle-left fhc-text"></i>
+					<i aria-hidden="true" class="fa fa-arrow-circle-left fhc-secondary-text"></i>
 				</button>
 			</div>
 			<div class="offcanvas-body p-0">

public/js/components/Cis/ThemeSwitch.js

@@ -27,6 +27,7 @@ export default {
 	<button id="themeSwitch" :aria-label="$p.t('global','switchTheme',[nextTheme])" @click="switchTheme(nextTheme)" class="fhc-primary-highlight-bg align-self-center btn btn-secondary rounded-5">
 		<i v-if="theme == 'light'" class="fa-solid fa-sun " aria-hidden="true"></i>
 		<i v-else-if="theme == 'dark'" class="fa-solid fa-moon " aria-hidden="true"></i>
+		<i v-else-if="theme == 'contrast'" class="fa-solid fa-circle-half-stroke " aria-hidden="true"></i>
 		<!--<i v-else-if="theme == 'purple'" class="fa-solid fa-wine-bottle" aria-hidden="true"></i>-->
 	</button>
 	`