ISPN-15105 Console black theme

[himanshu608]

Closes: #396

Description

Feature to toggle between Dark/Light theme.

Light Theme:

Dark Theme:

How Has This Been Tested?

Tested manually on browser.

Test Impact

Only UI change.

Request review criteria:

Self checklist (all need to be checked):

• The developer has manually tested the changes and verified that the changes work.
• Commit message includes a reference to the corresponding JIRA issue (eg. commit message: "ISPN-1234 JIRA TITLE...").
• Commits have been squashed and self-contained units of work (e.g. 'WIP' and 'Implements feedback' style messages have been removed).
• Testing instructions have been added in the PR body (for PRs involving changes that are not immediately obvious).
• The developer has added tests or explained why testing cannot be added.
• Included any necessary screenshots or gifs if it was a UI change.

[karesti]

Hi, thanks for the contributions!!
:))

Please include in this PR only the changes of the commit for black theme. Otherwise is too hard for me to review

Concerning black theme:

1. There are a couple of components that don't apply the thème properly, and so the labels are not displayed:

Health in cluster page

Status in Data container

2. the fact that we reload the page (F5) makes the user loose the preferences of having the black theme. This is the way users use the console a lot. Would be useful to keep in a local cookie in the browser the preference for the black thème. We don't track connected users, the server is stateless, so we can't store this information somewhere else.

3. The cache detail tab is not well adapted. Probably something asking for "white" directly in the code

4. would be nice to see if we can use the highlighter

[karesti]

@himanshu608 are you still interested in finishing the task ? thanks! :)

[himanshu608]

@himanshu608 are you still interested in finishing the task ? thanks! :)

I was busy on some other projects. I will continue it now.

The 4th point : would be nice to see if we can use the highlighter.
Please elaborate it.

[karesti]

@himanshu608 the syntax highlight uses the github theme. we need to adapt it to use a dark theme when displaying entries when dark theme is chosen.

https://github.com/infinispan/infinispan-console/blob/main/src/app/Caches/Entries/CacheEntries.tsx#L125

[himanshu608]

@himanshu608 the syntax highlight uses the github theme. we need to adapt it to use a dark theme when displaying entries when dark theme is chosen.

https://github.com/infinispan/infinispan-console/blob/main/src/app/Caches/Entries/CacheEntries.tsx#L125

Okay got it.., and also.

1. We were setting style : backgroundColor : 'white' and color : 'white' for some components, I have removed it and it is adapting to the theme now.
2. For not loosing the preference by F5 refresh, we can store theme cookie in localStorage. I will include that in PR.
3. I am looking into the syntax highlighter theme, we are using react-syntax-highlighter and githubGist. style,

For SyntaxHighlighter, we can toggle theme by Implementing ThemeProvider and theme state Context,
If we go with toggling theme using context, what should we choose for dark theme instead of githubGist ??

[karesti]

@himanshu608 I don't have any strong opinon in which is the theme that adapts best since I did not find any theme with the exact grey background as patternfly black theme. Any dark theme should be better than the white gist theme

[himanshu608]

@karesti , I have created a new PR with commits related to these changes only,

1. In Health cluster Page, we are setting chart_global_label_Fill.value as default, I have checked PatternFly dark theme docs, they did not specify override for this global css variable.
2. The legend label color is fixed, #151515, That's why it is not adapting to the theme,
   I have tried different ways by using custom labelComponent also searched patternfly docs but no help, Even patternfly official docs website is not adapted for this. you can check out chard section and try toggling the dark theme and check the chard labels.