change syntaxhighlighting style based on theme selection

Signed-off-by: msivasubramaniaan <msivasub@redhat.com>

Author: msivasubramaniaan

package.json

@@ -286,6 +286,7 @@
 		"onCommand:clusters.openshift.deployment.openConsole",
 		"onCommand:clusters.openshift.imagestream.openConsole",
 		"onCommand:openshift.componentTypesView.registry.openInView",
+        "onCommand:openshift.componentTypesView.registry.setTheme",
 		"onWalkthrough:openshiftWalkthrough"
 	],
 	"contributes": {

src/extension.ts

@@ -11,7 +11,9 @@ import {
     StatusBarAlignment,
     StatusBarItem,
     env,
-    QuickPickItemKind
+    QuickPickItemKind,
+    ColorTheme,
+    ColorThemeKind
 } from 'vscode';
 import path = require('path');
 import { startTelemetry } from './telemetry';
@@ -88,6 +90,14 @@ export async function activate(extensionContext: ExtensionContext): Promise<any>
     ];
     disposable.forEach((value) => extensionContext.subscriptions.push(value));
 
+    let themeKind:ColorThemeKind = window.activeColorTheme.kind;
+    window.onDidChangeActiveColorTheme((editor: ColorTheme) => {
+        if (themeKind !== editor.kind) {
+            themeKind = editor?.kind;
+            void commands.executeCommand('openshift.componentTypesView.registry.setTheme', themeKind);
+        }
+    });
+
     function statusBarFunctions() {
         return commands.registerCommand('openshift.openStatusBar', async () => {
             const selection = await window.showQuickPick(

src/webview/devfile-registry/app/cardItem.tsx

@@ -12,16 +12,16 @@ import { StarterProject } from '../../../odo/componentTypeDescription';
 import { StarterProjectDisplay } from './starterProjectDisplay';
 import { Badge, Backdrop, Button, Card, CardActions, Modal } from '@material-ui/core';
 import { FileCopy } from '@material-ui/icons';
-import { monokai } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 import { Tooltip, Typography } from '@mui/material';
+import { qtcreatorLight, monokai } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 
 export class CardItem extends React.Component<DevFileProps, {
     numOfCall: number,
     isExpanded: boolean,
     devFileYAML: string,
     selectedProject: StarterProject,
     copyClicked: boolean
-    hoverProject: null | StarterProject,
+    hoverProject: null | StarterProject
 }> {
 
     constructor(props: DevFileProps) {
@@ -246,22 +246,22 @@ export class CardItem extends React.Component<DevFileProps, {
                                     <Button
                                         id='tooltip-selector'
                                         component='span'
-                                        style={{ cursor: 'pointer' }}
+                                        style={{ cursor: 'pointer', backgroundColor: 'var(--vscode-button-background)' }}
                                         onClick={(): void => this.copyClicked(true)}
                                     >
                                         <FileCopy style={{ color: 'white' }} fontSize='small' />
                                     </Button>} />
                         </CardActions>
                     </CopyToClipboard>
                     <SyntaxHighlighter language='yaml' useInlineStyles
-                        style={monokai}
+                        style={this.props.themeKind <= 1 ? qtcreatorLight : monokai}
                         wrapLines
                         showLineNumbers
                         lineNumberStyle={{ marginLeft: '-1.5rem' }}
                         customStyle={{ marginLeft: '-1.5rem', backgroundColor: 'inherit' }}
                         codeTagProps={{
                             style: {
-                                fontFamily: 'inherit', color: 'inherit',
+                                fontFamily: 'inherit',
                                 fontStyle: 'inherit', fontWeight: 'inherit'
                             }
                         }}>

src/webview/devfile-registry/app/home.tsx

@@ -27,14 +27,16 @@ interface CompTypeDesc extends ComponentTypeDescription {
 
 interface HomePageProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
     compDescriptions: CompTypeDesc[];
+    themeKind: number;
 }
 
 export interface DefaultProps {
     analytics?: import('@segment/analytics-next').Analytics;
 }
 
 const HomeItem: React.FC<HomePageProps> = ({
-    compDescriptions
+    compDescriptions,
+    themeKind
 }: HomePageProps) => {
     const homeStyleClass = useHomeStyles();
     const cardItemStyle = useCardItemStyles();
@@ -45,7 +47,8 @@ const HomeItem: React.FC<HomePageProps> = ({
                 compDescriptions.map((compDescription: CompTypeDesc, key: number) => (
                     <ImageListItem key={`imageList-`+key}>
                         <CardItem key={key} compDescription={compDescription}
-                            cardItemStyle={cardItemStyle} projectDisplayStyle={projectDisplayStyle} hasGitLink={hasGitLink(compDescription)} />
+                        cardItemStyle={cardItemStyle} projectDisplayStyle={projectDisplayStyle} hasGitLink={hasGitLink(compDescription)}
+                        themeKind={themeKind} />
                     </ImageListItem>
                 ))
             }
@@ -59,6 +62,7 @@ export const Home: React.FC<DefaultProps> = ({ }) => {
     const [registries, setRegistries] = React.useState([]);
     const [searchValue, setSearchValue] = React.useState('');
     const [error, setError] = React.useState('');
+    const [themeKind, setThemeKind] = React.useState(0);
 
     React.useEffect(() => {
         return VSCodeMessage.onMessage((message) => {
@@ -81,6 +85,7 @@ export const Home: React.FC<DefaultProps> = ({ }) => {
                             }
                         });
                     }
+                    setThemeKind(message.data.themeValue);
                     setCompDescriptions(message.data.compDescriptions);
                     setRegistries(message.data.registries);
                     setFilteredcompDescriptions(getFilteredCompDesc(message.data.registries, message.data.compDescriptions, searchValue));
@@ -90,6 +95,8 @@ export const Home: React.FC<DefaultProps> = ({ }) => {
                 setFilteredcompDescriptions([]);
                 setCompDescriptions([]);
                 setSearchValue('');
+            } else if(message.data.action === 'setTheme') {
+                setThemeKind(message.data.themeValue);
             }
         });
     });
@@ -130,7 +137,7 @@ export const Home: React.FC<DefaultProps> = ({ }) => {
                                 }}
                             />
                         }
-                        <HomeItem compDescriptions={filteredcompDescriptions} />
+                        <HomeItem compDescriptions={filteredcompDescriptions} themeKind={themeKind} />
                         {error?.length > 0 ? <ErrorPage message={error} /> : null}
                     </>
                     :

src/webview/devfile-registry/app/wrapperCardItem.tsx

@@ -11,6 +11,7 @@ export interface DevFileProps extends React.AnchorHTMLAttributes<HTMLAnchorEleme
     compDescription: ComponentTypeDescription;
     hasGitLink: boolean;
     cardItemStyle: any;
+    themeKind: number;
     projectDisplayStyle: any
 }
 

src/webview/devfile-registry/registryViewLoader.ts

@@ -118,6 +118,13 @@ export default class RegistryViewLoader {
         await RegistryViewLoader.loadView(`Devfile Registry - ${context.name}`, context.url);
     }
 
+    @vsCommand('openshift.componentTypesView.registry.setTheme')
+    static async setTheme(kind: vscode.ColorThemeKind): Promise<void> {
+        if (panel) {
+            panel.webview.postMessage({ action: 'setTheme', themeValue: kind });
+        }
+    }
+
     @vsCommand('openshift.componentTypesView.registry.closeView')
     static async closeRegistryInWebview(): Promise<void> {
         panel?.dispose();
@@ -149,6 +156,7 @@ function getAllComponents(eventActionName: string, url?: string, error?: string)
                 action: eventActionName,
                 compDescriptions: Array.from(componentDescriptions),
                 registries: registries,
+                themeValue: vscode.window.activeColorTheme.kind,
                 errorMessage: error
             }
         );