feat: restore custom light theme for CodeMirror, keep githubDark

Restore the previous custom light theme with original color scheme
while keeping the githubDark theme for dark mode.

Light theme colors:
- Background: #fff (white)
- Text: #2e3440 (dark gray)
- Gutters: #f7f7f7 (light gray)
- Keywords/strings: #5e81ac (muted blue)
- Variables: #008080 (teal)

Dark theme: githubDark (pre-built from @uiw/codemirror-theme-github)

Changes:
- DevfileViewer: custom light theme as extensions, githubDark as theme prop
- BasicViewer: custom light theme as extension, githubDark as theme prop
- Use useMemo to optimize light theme creation
- Conditionally apply themes based on isDarkTheme state

Assisted-by: Claude Sonnet 4.5
Signed-off-by: Oleksii Orel <oorel@redhat.com>

Author: olexii4

.image-tag

@@ -1 +1 @@
-pr-1452-03
+pr-1452-04

packages/dashboard-frontend/src/components/BasicViewer/index.tsx

@@ -10,9 +10,10 @@
  *   Red Hat, Inc. - initial API and implementation
  */
 
-import { githubDark, githubLight } from '@uiw/codemirror-theme-github';
+import { EditorView } from '@codemirror/view';
+import { githubDark } from '@uiw/codemirror-theme-github';
 import CodeMirror from '@uiw/react-codemirror';
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import styles from '@/components/BasicViewer/index.module.css';
 import { useTheme } from '@/contexts/ThemeContext';
@@ -22,17 +23,42 @@ export type Props = {
   id: string;
 };
 
+const createLightTheme = () => {
+  return EditorView.theme(
+    {
+      '&': {
+        color: '#2e3440',
+        backgroundColor: '#fff',
+      },
+      '.cm-activeLine': {
+        backgroundColor: 'inherit',
+      },
+      '.cm-gutters': {
+        backgroundColor: '#f7f7f7',
+        color: '#999',
+      },
+      '.cm-activeLineGutter': {
+        backgroundColor: '#f7f7f7',
+      },
+    },
+    { dark: false },
+  );
+};
+
 export const BasicViewer: React.FC<Props> = ({ value, id }) => {
   const { isDarkTheme } = useTheme();
 
+  const lightTheme = useMemo(() => createLightTheme(), []);
+
   return (
     <div className={styles.basicViewer}>
       <CodeMirror
         id={id}
         readOnly={true}
         basicSetup={false}
         value={value}
-        theme={isDarkTheme ? githubDark : githubLight}
+        theme={isDarkTheme ? githubDark : undefined}
+        extensions={isDarkTheme ? [] : [lightTheme]}
       />
     </div>
   );

packages/dashboard-frontend/src/components/DevfileViewer/index.tsx

@@ -11,9 +11,12 @@
  */
 
 import { yaml } from '@codemirror/lang-yaml';
-import { githubDark, githubLight } from '@uiw/codemirror-theme-github';
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { EditorView } from '@codemirror/view';
+import { githubDark } from '@uiw/codemirror-theme-github';
+import { tags as t } from '@lezer/highlight';
 import CodeMirror from '@uiw/react-codemirror';
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import styles from '@/components/DevfileViewer/index.module.css';
 import { useTheme } from '@/contexts/ThemeContext';
@@ -25,18 +28,59 @@ export type Props = {
   id: string;
 };
 
+const createLightTheme = () => {
+  return EditorView.theme(
+    {
+      '&': {
+        color: '#2e3440',
+        backgroundColor: '#fff',
+      },
+      '.cm-activeLine': {
+        backgroundColor: 'inherit',
+      },
+      '.cm-gutters': {
+        backgroundColor: '#f7f7f7',
+        color: '#999',
+      },
+      '.cm-activeLineGutter': {
+        backgroundColor: '#f7f7f7',
+      },
+    },
+    { dark: false },
+  );
+};
+
+const createLightHighlightStyle = () => {
+  return HighlightStyle.define([
+    { tag: t.keyword, color: '#5e81ac' },
+    { tag: [t.string], color: '#5e81ac' },
+    { tag: [t.variableName], color: '#008080' },
+    {
+      tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
+      color: '#008080',
+    },
+  ]);
+};
+
 export const DevfileViewer: React.FC<Props> = ({ isActive, isExpanded, value, id }) => {
   const { isDarkTheme } = useTheme();
 
+  const lightTheme = useMemo(() => createLightTheme(), []);
+  const lightHighlightStyle = useMemo(() => createLightHighlightStyle(), []);
+
   return (
     <div className={styles.devfileViewer}>
       <CodeMirror
         className={styles.codeMirror}
         readOnly={true}
         id={id}
         value={value}
-        theme={isDarkTheme ? githubDark : githubLight}
-        extensions={[yaml()]}
+        theme={isDarkTheme ? githubDark : undefined}
+        extensions={
+          isDarkTheme
+            ? [yaml()]
+            : [lightTheme, syntaxHighlighting(lightHighlightStyle), yaml()]
+        }
       />
     </div>
   );