ISPN-15105 Console black theme

src/app/AppLayout/AppLayout.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useContext } from 'react';
 
 import {
   Brand,
@@ -25,7 +25,8 @@ import {
   ToolbarGroup,
   ToolbarItem,
   Tooltip,
-  PageSidebarBody
+  PageSidebarBody,
+  Switch
 } from '@patternfly/react-core';
 import {
   Dropdown,
@@ -50,6 +51,7 @@ import { useConnectedUser } from '@app/services/userManagementHook';
 import { KeycloakService } from '@services/keycloakService';
 import { BarsIcon, ExternalLinkAltIcon, InfoCircleIcon, QuestionCircleIcon } from '@patternfly/react-icons';
 import { ConsoleACL } from '@services/securityService';
+import { ThemeContext } from '@app/providers/ThemeProvider';
 
 interface IAppLayout {
   init: string;
@@ -59,6 +61,7 @@ interface IAppLayout {
 const AppLayout: React.FunctionComponent<IAppLayout> = ({ init, children }) => {
   const { t } = useTranslation();
   const brandname = t('brandname.brandname');
+  const {theme,toggleTheme} = useContext(ThemeContext);
 
   const history = useHistory();
   const { connectedUser } = useConnectedUser();
@@ -161,6 +164,13 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ init, children }) => {
           align={{ default: 'alignRight' }}
           spacer={{ default: 'spacerNone', md: 'spacerMd' }}
         >
+          <Switch
+            id="simple-switch"
+            isChecked={theme === 'dark'}
+            onChange={toggleTheme}
+            ouiaId="BasicSwitch"
+            label=""
+          />
           <ToolbarItem>
             <Dropdown
               data-cy="aboutInfoQuestionMark"

src/app/Caches/Configuration/CacheConfiguration.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useContext} from 'react';
 import {
   Alert,
   AlertActionLink,
@@ -18,12 +18,12 @@ import {
 import { useTranslation } from 'react-i18next';
 import { useFetchConfigurationYAML, useFetchConfigurationXML } from '@app/services/configHook';
 import SyntaxHighlighter from 'react-syntax-highlighter';
-import { githubGist } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+import { ThemeContext } from '@app/providers/ThemeProvider';
 
 const CacheConfiguration = (props: { cacheName: string; editable: boolean; config: string }) => {
   const { t } = useTranslation();
   const encodingDocs = t('brandname.encoding-docs-link');
-
+  const {syntaxHighLighterTheme} = useContext(ThemeContext)
   const yamlConfig = useFetchConfigurationYAML(props.cacheName);
   const xmlConfig = useFetchConfigurationXML(props.cacheName);
 
@@ -68,7 +68,7 @@ const CacheConfiguration = (props: { cacheName: string; editable: boolean; confi
           <ClipboardCopy isReadOnly isCode variant={ClipboardCopyVariant.inline}>
             {config}
           </ClipboardCopy>
-          <SyntaxHighlighter wrapLines={false} style={githubGist} useInlineStyles={true} showLineNumbers={true}>
+          <SyntaxHighlighter wrapLines={false} style={syntaxHighLighterTheme} useInlineStyles={true} showLineNumbers={true}>
             {config}
           </SyntaxHighlighter>
         </CardBody>
@@ -78,7 +78,7 @@ const CacheConfiguration = (props: { cacheName: string; editable: boolean; confi
 
   return (
     <React.Fragment>
-      <Tabs defaultActiveKey={0} style={{ backgroundColor: 'white' }}>
+      <Tabs defaultActiveKey={0}>
         <Tab eventKey={0} title={<TabTitleText>JSON</TabTitleText>} tabContentId="tab1" tabContentRef={contentRef1} />
         <Tab eventKey={1} title={<TabTitleText>XML</TabTitleText>} tabContentId="tab2" tabContentRef={contentRef2} />
         <Tab eventKey={2} title={<TabTitleText>YAML</TabTitleText>} tabContentId="tab3" tabContentRef={contentRef3} />

src/app/Caches/Configuration/DetailConfigurations.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useContext } from 'react';
 import {
   Button,
   Bullseye,
@@ -28,13 +28,13 @@ import { Thead, Tr, Th, Tbody, Td, ExpandableRowContent } from '@patternfly/reac
 import { Table } from '@patternfly/react-table/deprecated';
 import { DataContainerBreadcrumb } from '@app/Common/DataContainerBreadcrumb';
 import SyntaxHighlighter from 'react-syntax-highlighter';
-import { githubGist } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 import { useTranslation } from 'react-i18next';
 import { SearchIcon, CubeIcon } from '@patternfly/react-icons';
 import { useFetchCacheTemplates } from '@app/services/cachesHook';
 import { TableErrorState } from '@app/Common/TableErrorState';
 import { onSearch } from '@app/utils/searchFilter';
 import { global_spacer_sm, global_spacer_md } from '@patternfly/react-tokens';
+import { ThemeContext } from '@app/providers/ThemeProvider';
 
 const DetailConfigurations: React.FunctionComponent<any> = (props) => {
   const { t } = useTranslation();
@@ -49,6 +49,8 @@ const DetailConfigurations: React.FunctionComponent<any> = (props) => {
     perPage: 10
   });
 
+  const {syntaxHighLighterTheme} = useContext(ThemeContext)
+
   useEffect(() => {
     setFilteredTemplates(cacheTemplates);
   }, [cacheTemplates]);
@@ -223,7 +225,7 @@ const DetailConfigurations: React.FunctionComponent<any> = (props) => {
                           <ExpandableRowContent data-cy={row.name + 'ConfigExpanded'}>
                             <SyntaxHighlighter
                               wrapLines={false}
-                              style={githubGist}
+                              style={syntaxHighLighterTheme}
                               useInlineStyles={true}
                               showLineNumbers={true}
                             >

src/app/Caches/Entries/CacheEntries.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useContext } from 'react';
 import {
   Bullseye,
   Button,
@@ -28,7 +28,6 @@ import { ActionsColumn, IAction, Table, Tbody, Td, Th, Thead, Tr } from '@patter
 import { FilterIcon, HelpIcon, PlusCircleIcon, SearchIcon } from '@patternfly/react-icons';
 import { global_spacer_md, global_spacer_sm } from '@patternfly/react-tokens';
 import SyntaxHighlighter from 'react-syntax-highlighter';
-import { githubGist } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 import displayUtils from '@services/displayUtils';
 import { useTranslation } from 'react-i18next';
 import { useCacheDetail, useCacheEntries } from '@app/services/cachesHook';
@@ -40,6 +39,7 @@ import { ContentType, EncodingType } from '@services/infinispanRefData';
 import { CreateOrUpdateEntryForm } from '@app/Caches/Entries/CreateOrUpdateEntryForm';
 import { ClearAllEntries } from '@app/Caches/Entries/ClearAllEntries';
 import { DeleteEntry } from '@app/Caches/Entries/DeleteEntry';
+import { ThemeContext } from '@app/providers/ThemeProvider';
 
 const CacheEntries = (props: { cacheName: string }) => {
   const { cacheEntries, totalEntriesCount, loadingEntries, errorEntries, infoEntries, reloadEntries, getByKey } =
@@ -64,6 +64,8 @@ const CacheEntries = (props: { cacheName: string }) => {
     perPage: 10
   });
 
+  const {syntaxHighLighterTheme} = useContext(ThemeContext)
+
   useEffect(() => {
     if (cache.encoding.key == EncodingType.Protobuf) {
       setSelectSearchOption(ContentType.string);
@@ -145,7 +147,7 @@ const CacheEntries = (props: { cacheName: string }) => {
       <SyntaxHighlighter
         language="json"
         lineProps={{ style: { wordBreak: 'break-all' } }}
-        style={githubGist}
+        style={syntaxHighLighterTheme}
         useInlineStyles={true}
         wrapLongLines={true}
       >

src/app/Caches/Query/QueryEntries.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect,useContext } from 'react';
 import {
   Bullseye,
   Button,
@@ -20,12 +20,12 @@ import {
 import { SearchIcon, ExclamationCircleIcon, HelpIcon } from '@patternfly/react-icons';
 import displayUtils from '../../../services/displayUtils';
 import SyntaxHighlighter from 'react-syntax-highlighter';
-import { githubGist } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 import { useTranslation } from 'react-i18next';
 import { ConsoleServices } from '@services/ConsoleServices';
 import { Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import { Table } from '@patternfly/react-table/deprecated';
 import { global_danger_color_200, global_spacer_md, global_spacer_sm } from '@patternfly/react-tokens';
+import { ThemeContext } from '@app/providers/ThemeProvider';
 
 const QueryEntries = (props: { cacheName: string; indexed: boolean; changeTab: () => void }) => {
   const [query, setQuery] = useState<string>('');
@@ -41,6 +41,9 @@ const QueryEntries = (props: { cacheName: string; indexed: boolean; changeTab: (
     total: 0
   });
 
+  const {syntaxHighLighterTheme} = useContext(ThemeContext)
+
+
   const columnNames = {
     value: 'Value'
   };
@@ -57,7 +60,7 @@ const QueryEntries = (props: { cacheName: string; indexed: boolean; changeTab: (
     return (
       <SyntaxHighlighter
         lineProps={{ style: { wordBreak: 'break-all' } }}
-        style={githubGist}
+        style={syntaxHighLighterTheme}
         useInlineStyles={true}
         wrapLongLines={true}
       >

src/app/Common/Health.tsx

@@ -1,13 +1,22 @@
-import React from 'react';
+import React,{useContext} from 'react';
 import { Flex, FlexItem, Text, TextContent } from '@patternfly/react-core';
 import { AlertIcon } from '@patternfly/react-core/dist/js/components/Alert/AlertIcon';
 import displayUtils from '@services/displayUtils';
 import { ComponentHealth } from '@services/infinispanRefData';
+import { ThemeContext } from '@app/providers/ThemeProvider';
+import { chart_global_label_Fill, global_Color_light_100 } from '@patternfly/react-tokens';
 
 const Health = (props: { health: string; displayIcon?: boolean; cacheName?: string }) => {
   const health = ComponentHealth[props.health];
   const displayIcon = props.displayIcon == undefined ? true : props.displayIcon;
-
+  const {theme} = useContext(ThemeContext); 
+
+  const getHealthLabelColor = ()=>{
+    const color = displayUtils.healthColor(health, false);
+    return (theme === 'dark' && color === chart_global_label_Fill.value) 
+          ? global_Color_light_100.value 
+          : color;
+  }
   return (
     <Flex>
       {displayIcon && (
@@ -28,7 +37,7 @@ const Health = (props: { health: string; displayIcon?: boolean; cacheName?: stri
           <Text
             data-cy={`health-${props.cacheName}`}
             style={{
-              color: displayUtils.healthColor(health, false)
+              color: getHealthLabelColor()
             }}
           >
             {displayUtils.healthLabel(health)}

src/app/Common/Status.tsx

@@ -20,7 +20,7 @@ const Status = (props: { status?: Status }) => {
       </FlexItem>
       <FlexItem>
         <TextContent>
-          <Text component={TextVariants.p} style={{ color: chart_global_label_Fill.value }}>
+          <Text component={TextVariants.p}>
             {status.name}
           </Text>
         </TextContent>

src/app/ProtoSchema/ProtobufSchemasDisplay.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useContext } from 'react';
 import {
   Alert,
   AlertVariant,
@@ -26,7 +26,6 @@ import { Table, Thead, Tr, Th, Tbody, Td, ExpandableRowContent, ActionsColumn, I
 import { DatabaseIcon, SearchIcon } from '@patternfly/react-icons';
 import { global_spacer_md, global_spacer_sm, global_spacer_xl } from '@patternfly/react-tokens';
 import SyntaxHighlighter from 'react-syntax-highlighter';
-import { githubGist } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 import { useApiAlert } from '@app/utils/useApiAlert';
 import { useTranslation } from 'react-i18next';
 import { ConsoleServices } from '@services/ConsoleServices';
@@ -38,6 +37,7 @@ import { EditSchema } from './EditSchema';
 import { useFetchProtobufSchemas } from '@app/services/protobufHooks';
 import { onSearch } from '@app/utils/searchFilter';
 import './ProtobufSchemasDisplay.css';
+import { ThemeContext } from '@app/providers/ThemeProvider';
 
 const ProtobufSchemasDisplay = (props: { setProtoSchemasCount: (number) => void; isVisible: boolean }) => {
   const { t } = useTranslation();
@@ -59,6 +59,7 @@ const ProtobufSchemasDisplay = (props: { setProtoSchemasCount: (number) => void;
     page: 1,
     perPage: 10
   });
+  const {syntaxHighLighterTheme} = useContext(ThemeContext)
 
   const isSchemaExpanded = (row) => expandedSchemaNames.includes(row.name);
 
@@ -217,7 +218,7 @@ const ProtobufSchemasDisplay = (props: { setProtoSchemasCount: (number) => void;
 
     return (
       <ExpandableRowContent>
-        <SyntaxHighlighter wrapLines={false} style={githubGist} useInlineStyles={true} showLineNumbers={true}>
+        <SyntaxHighlighter wrapLines={false} style={syntaxHighLighterTheme} useInlineStyles={true} showLineNumbers={true}>
           {schemasContent.get(name)}
         </SyntaxHighlighter>
       </ExpandableRowContent>

src/app/Welcome/Welcome.tsx

@@ -87,7 +87,6 @@ const Welcome = (props) => {
           }}
           component={'button'}
           className={'button'}
-          style={{ backgroundColor: global_BackgroundColor_100.value }}
         >
           <Text style={{ color: chart_color_blue_500.value }}>{goToTheConsole}</Text>
         </Button>

src/app/index.tsx

@@ -7,6 +7,7 @@ import '@app/app.css';
 import { KeycloakService } from '@services/keycloakService';
 import { ConsoleServices } from '@services/ConsoleServices';
 import { UserContextProvider } from '@app/providers/UserContextProvider';
+import { ThemeProvider } from './providers/ThemeProvider';
 
 const App = () => {
   const [init, setInit] = useState<
@@ -74,11 +75,13 @@ const App = () => {
   const load = () => {
     return (
       <Router basename="/console">
-        <UserContextProvider>
-          <AppLayout init={init}>
-            <AppRoutes init={init} />
-          </AppLayout>
-        </UserContextProvider>
+        <ThemeProvider>
+          <UserContextProvider>
+            <AppLayout init={init}>
+              <AppRoutes init={init} />
+            </AppLayout>
+          </UserContextProvider>
+        </ThemeProvider>
       </Router>
     );
   };

src/app/providers/ThemeProvider.tsx

@@ -0,0 +1,41 @@
+import React, { useEffect, useState } from 'react';
+import { getInitialTheme } from '@app/utils/themeUtils';
+import { githubGist, dracula } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+
+const initialState = {
+    theme : '',
+    toggleTheme : ()=>{},
+    syntaxHighLighterTheme : ''
+}
+
+export const ThemeContext = React.createContext(initialState);
+
+
+const ThemeProvider = ({children})=>{
+    const [theme,setTheme] = useState(getInitialTheme);
+    const syntaxHighLighterTheme = theme === 'dark'? dracula : githubGist;
+
+    useEffect(()=>{
+        if (theme === 'dark') {
+            document.documentElement.classList.add('pf-v5-theme-dark');
+        } else {
+            document.documentElement.classList.remove('pf-v5-theme-dark');
+        }
+
+        if(localStorage){
+            localStorage.setItem('theme',theme);
+        }
+    },[theme])
+
+    const toggleTheme = ()=>{
+        setTheme((previousTheme)=> previousTheme === 'light'?'dark':'light');
+    }
+    const themeState = {
+        theme,
+        toggleTheme,
+        syntaxHighLighterTheme 
+    }
+    return <ThemeContext.Provider value={themeState} >{children}</ThemeContext.Provider>
+}
+
+export {ThemeProvider}

src/app/utils/themeUtils.ts

@@ -0,0 +1,12 @@
+
+
+export const getInitialTheme  = () : string => {
+    // Get theme from local storage cookie
+    if(localStorage && localStorage.getItem('theme'))       
+        return localStorage.getItem('theme') || 'light';
+
+    // Check System preferred Theme
+    const prefersDarkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+    return prefersDarkTheme? 'dark' :'light';
+}