ISPN-15105 dark theme fixes

src/app/AppLayout/AppLayout.tsx

@@ -41,7 +41,7 @@ import { IAppRoute, routes } from '@app/routes';
 import { APIAlertProvider } from '@app/providers/APIAlertProvider';
 import { ActionResponseAlert } from '@app/Common/ActionResponseAlert';
 import { useHistory } from 'react-router';
-import { global_spacer_sm } from '@patternfly/react-tokens';
+import { global_Color_light_100, global_spacer_sm } from '@patternfly/react-tokens';
 import { About } from '@app/About/About';
 import { ErrorBoundary } from '@app/ErrorBoundary';
 import { BannerAlert } from '@app/Common/BannerAlert';
@@ -165,11 +165,12 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ init, children }) => {
           spacer={{ default: 'spacerNone', md: 'spacerMd' }}
         >
           <Switch
-            id="simple-switch"
+            id="darkThemeSwitch"
             isChecked={theme === 'dark'}
             onChange={toggleTheme}
-            ouiaId="BasicSwitch"
-            label=""
+            ouiaId="DarkThemeOuiaId"
+            label={t('layout.dark-theme')}
+            className="darkThemeSwitch"
           />
           <ToolbarItem>
             <Dropdown

src/app/Common/CacheTypeBadge.tsx

@@ -1,18 +1,17 @@
 import displayUtils from '@services/displayUtils';
 import { global_FontSize_md, global_FontSize_sm, global_spacer_sm, global_spacer_xs } from '@patternfly/react-tokens';
-import { Badge } from '@patternfly/react-core';
+import { Label } from '@patternfly/react-core';
 import React from 'react';
 import { CacheType } from '@services/infinispanRefData';
 
 const CacheTypeBadge = (props: { cacheType: string; small: boolean; cacheName: string }) => {
   const cacheTypeEnum = CacheType[props.cacheType];
 
   return (
-    <Badge
+    <Label
       data-cy={`type-${props.cacheName}`}
+      color={displayUtils.cacheTypeColor(cacheTypeEnum)}
       style={{
-        backgroundColor: displayUtils.cacheTypeLabelBackgroundColor(cacheTypeEnum),
-        color: displayUtils.cacheTypeLabelTextColor(cacheTypeEnum),
         fontSize: props.small ? global_FontSize_sm.value : global_FontSize_md.value,
         fontWeight: 'lighter',
         padding: global_spacer_xs.value,
@@ -21,7 +20,7 @@ const CacheTypeBadge = (props: { cacheType: string; small: boolean; cacheName: s
       }}
     >
       {props.cacheType}
-    </Badge>
+    </Label>
   );
 };
 export { CacheTypeBadge };

src/app/app.css

@@ -55,3 +55,7 @@ body,
 .role-icon {
   margin-right: var(--pf-v5-global--spacer--xs);
 }
+
+.darkThemeSwitch .pf-v5-c-switch__input:not(:checked) ~ .pf-v5-c-switch__label {
+  color: var(--pf-v5-global--Color--light-100);
+}

src/app/assets/languages/en.json

@@ -20,7 +20,8 @@
     "skip-to-content": "Skip to Content",
     "about-name": "About",
     "documentation-name": "Documentation",
-    "close-browser-message": "Close the browser or open an incognito window to log again."
+    "close-browser-message": "Close the browser or open an incognito window to log again.",
+    "dark-theme": "Dark theme"
   },
   "welcome-page": {
     "welcome-title": "Welcome to {{brandname}} Server",

src/app/providers/ThemeProvider.tsx

@@ -22,7 +22,7 @@ const ThemeProvider = ({children})=>{
             document.documentElement.classList.remove('pf-v5-theme-dark');
         }
 
-        if(localStorage){
+        if (localStorage) {
             localStorage.setItem('theme',theme);
         }
     },[theme])
@@ -33,9 +33,9 @@ const ThemeProvider = ({children})=>{
     const themeState = {
         theme,
         toggleTheme,
-        syntaxHighLighterTheme 
+        syntaxHighLighterTheme
     }
     return <ThemeContext.Provider value={themeState} >{children}</ThemeContext.Provider>
 }
 
-export {ThemeProvider}
+export {ThemeProvider}