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/Create/CacheConfigEditor.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 
 import {
   Alert,
@@ -20,13 +20,15 @@ import { CubeIcon } from '@patternfly/react-icons';
 import { useTranslation } from 'react-i18next';
 import { ConsoleServices } from '@services/ConsoleServices';
 import { useApiAlert } from '@app/utils/useApiAlert';
+import { ThemeContext } from '@app/providers/ThemeProvider';
 
 const CacheConfigEditor = (props: {
   cmName: string;
   cacheEditor: CacheEditorStep;
   cacheEditorModifier: (CacheEditorStep) => void;
   setReviewConfig: (string) => void;
 }) => {
+  const {theme} = useContext(ThemeContext);
   const sampleConfig =
     '{\n' +
     '  "distributed-cache": {\n' +
@@ -127,6 +129,7 @@ const CacheConfigEditor = (props: {
           id="cache-config"
           language={Language.json}
           height="200px"
+          isDarkTheme={theme === 'dark'}
         />
         <Alert
           isInline

src/app/Caches/Create/Features/PersistentCacheConfigurator.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import {
   Alert,
   Button,
@@ -25,8 +25,10 @@ import { useCreateCache } from '@app/services/createCacheHook';
 import { FeatureCard } from '@app/Caches/Create/Features/FeatureCard';
 import { PopoverHelp } from '@app/Common/PopoverHelp';
 import { global_spacer_md } from '@patternfly/react-tokens';
+import { ThemeContext } from '@app/providers/ThemeProvider';
 
 const PersistentCacheConfigurator = () => {
+  const {theme} = useContext(ThemeContext);
   const { configuration, setConfiguration } = useCreateCache();
   const { t } = useTranslation();
   const brandname = t('brandname.brandname');
@@ -155,6 +157,7 @@ const PersistentCacheConfigurator = () => {
             onChange={changeAndValidate}
             language={Language.json}
             height={'sizeToFit'}
+            isDarkTheme={theme === 'dark'}
           />
           {displayValidationError()}
         </FormGroup>

src/app/Caches/Create/ReviewCacheConfig.tsx

@@ -1,14 +1,16 @@
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { Flex, Form, FormGroup, Text, TextContent, TextVariants } from '@patternfly/react-core';
 import { CodeEditor } from '@patternfly/react-code-editor';
 import { useTranslation } from 'react-i18next';
 import { CacheConfigUtils } from '@services/cacheConfigUtils';
 import { useCreateCache } from '@app/services/createCacheHook';
+import { ThemeContext } from '@app/providers/ThemeProvider';
 
 const ReviewCacheConfig = (props: { setReviewConfig: (string) => void }) => {
   const { configuration } = useCreateCache();
   const { t } = useTranslation();
   const [config, setConfig] = useState(CacheConfigUtils.createCacheConfigFromData(configuration));
+  const {theme} = useContext(ThemeContext);
 
   useEffect(() => {
     const jsonFormatConfig = CacheConfigUtils.createCacheConfigFromData(configuration);
@@ -30,6 +32,7 @@ const ReviewCacheConfig = (props: { setReviewConfig: (string) => void }) => {
           code={config}
           height="sizeToFit"
           isCopyEnabled
+          isDarkTheme={theme === 'dark'}
           copyButtonSuccessTooltipText={t('caches.create.review.copied-tooltip')}
           copyButtonToolTipText={t('caches.create.review.copy-tooltip')}
         />

src/app/Caches/DetailCache.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import {
   Alert,
   AlertActionLink,
@@ -54,10 +54,12 @@ import { useTranslation } from 'react-i18next';
 import { RebalancingCache } from '@app/Rebalancing/RebalancingCache';
 import { CacheConfigUtils } from '@services/cacheConfigUtils';
 import { EncodingType } from '@services/infinispanRefData';
+import { ThemeContext } from '@app/providers/ThemeProvider';
 
 const DetailCache = (props: { cacheName: string }) => {
   const cacheName = props.cacheName;
   const { t } = useTranslation();
+  const {theme} = useContext(ThemeContext);
   const brandname = t('brandname.brandname');
   const encodingDocs = t('brandname.encoding-docs-link');
   const { connectedUser } = useConnectedUser();
@@ -134,14 +136,15 @@ const DetailCache = (props: { cacheName: string }) => {
         </React.Fragment>
       );
     }
+
     return (
       <Tabs
         unmountOnExit
         isSecondary={false}
         activeKey={activeTabKey2}
         aria-label="Entries tab"
         component={TabsComponent.nav}
-        style={{ backgroundColor: global_BackgroundColor_100.value }}
+        style={theme === 'dark'? {} : { backgroundColor: global_BackgroundColor_100.value }}
         onSelect={(event, tabIndex) => setActiveTabKey2(tabIndex)}
       >
         <Tab

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);
@@ -147,7 +149,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>