change syntax highlighting style based on theme selection

src/extension.ts

@@ -30,7 +30,6 @@ import { ComponentsTreeDataProvider } from './componentsView';
 
 import fsx = require('fs-extra');
 
-
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 // this method is called when your extension is deactivated
 export function deactivate(): void {

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

@@ -14,6 +14,16 @@ import { Registry } from '../../odo/componentType';
 
 let panel: vscode.WebviewPanel;
 
+let themeKind: vscode.ColorThemeKind = vscode.window.activeColorTheme.kind;
+vscode.window.onDidChangeActiveColorTheme((editor: vscode.ColorTheme) => {
+    if (themeKind !== editor.kind) {
+        themeKind = editor.kind;
+        if (panel) {
+            panel.webview.postMessage({ action: 'setTheme', themeValue: themeKind });
+        }
+    }
+});
+
 async function devfileRegistryViewerMessageListener(event: any): Promise<any> {
     let starterProject = event.selectedProject;
     switch (event?.action) {
@@ -149,6 +159,7 @@ function getAllComponents(eventActionName: string, url?: string, error?: string)
                 action: eventActionName,
                 compDescriptions: Array.from(componentDescriptions),
                 registries: registries,
+                themeValue: themeKind,
                 errorMessage: error
             }
         );