prism themes

SimiaCryptus · Nov 29, 2024 · 935fad6 · 935fad6
1 parent 4643c57
commit 935fad6
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 6 deletions.
diff --git a/webapp/chat-app/src/components/MessageList.tsx b/webapp/chat-app/src/components/MessageList.tsx
@@ -1,6 +1,7 @@
 import React, {useCallback} from 'react';
 import styled from 'styled-components';
 import {useSelector} from 'react-redux';
+import {useTheme} from '../hooks/useTheme';
 import {RootState} from '../store';
 import {logger} from '../utils/logger';
 import {Message} from '../types';
@@ -66,24 +67,35 @@ const MessageContent = styled.div`
         padding: 2px 8px;
         margin: 2px;
         border-radius: 4px;
-        background-color: rgba(0, 0, 0, 0.1);
+        background-color: ${({theme}) => theme.colors.surface};
+        color: ${({theme}) => theme.colors.text.primary};
 
         &:hover {
             opacity: 0.8;
-            background-color: rgba(0, 0, 0, 0.2);
+            background-color: ${({theme}) => theme.colors.primary};
+            color: ${({theme}) => theme.colors.background};
         }
     }
 
     .referenced-message {
         cursor: pointer;
         padding: 4px;
         margin: 4px 0;
-        border-left: 3px solid #ccc;
+        border-left: 3px solid ${({theme}) => theme.colors.border};
 
         &.expanded {
-            background-color: rgba(0, 0, 0, 0.05);
+            background-color: ${({theme}) => theme.colors.surface};
         }
     }
+    /* Style code blocks according to theme */
+    pre[class*="language-"] {
+        background: ${({theme}) => theme.colors.surface};
+        border: 1px solid ${({theme}) => theme.colors.border};
+    }
+    code[class*="language-"] {
+        color: ${({theme}) => theme.colors.text.primary};
+        text-shadow: none;
+    }
 `;
 
 const extractMessageAction = (target: HTMLElement): { messageId: string | undefined, action: string | undefined } => {
@@ -183,6 +195,7 @@ interface MessageListProps {
 }
 
 const MessageList: React.FC<MessageListProps> = ({messages: propMessages}) => {
+    const theme = useTheme();
     logger.component('MessageList', 'Rendering component', {hasPropMessages: !!propMessages});
     // Store tab states on mount
     React.useEffect(() => {
@@ -236,7 +249,12 @@ const MessageList: React.FC<MessageListProps> = ({messages: propMessages}) => {
 
     const processMessageContent = useCallback((content: string) => {
         logger.debug('Processing message content', {contentLength: content.length});
-        return expandMessageReferences(content, messages);
+        const processed = expandMessageReferences(content, messages);
+        // Re-highlight code blocks after theme change
+        requestAnimationFrame(() => {
+            Prism.highlightAll();
+        });
+        return processed;
     }, [messages]);
 
     React.useEffect(() => {

diff --git a/webapp/chat-app/src/styles/GlobalStyles.ts b/webapp/chat-app/src/styles/GlobalStyles.ts
@@ -19,6 +19,34 @@ const logThemeChange = (theme: DefaultTheme) => {
 };
 
 export const GlobalStyles = createGlobalStyle<{ theme: DefaultTheme }>`
+    /* Override Prism.js theme colors to match current theme */
+    .token.comment,
+    .token.prolog,
+    .token.doctype,
+    .token.cdata {
+        color: ${({theme}) => theme.colors.text.secondary};
+    }
+    .token.punctuation {
+        color: ${({theme}) => theme.colors.text.primary};
+    }
+    .token.property,
+    .token.tag,
+    .token.constant,
+    .token.symbol {
+        color: ${({theme}) => theme.colors.primary};
+    }
+    .token.boolean,
+    .token.number {
+        color: ${({theme}) => theme.colors.warning};
+    }
+    .token.selector,
+    .token.string {
+        color: ${({theme}) => theme.colors.success};
+    }
+    .token.operator,
+    .token.keyword {
+        color: ${({theme}) => theme.colors.info};
+    }
     /* Reset styles */
     * {
         margin: 0;

diff --git a/webapp/chat-app/src/themes/ThemeProvider.tsx b/webapp/chat-app/src/themes/ThemeProvider.tsx
@@ -2,13 +2,32 @@ import React, {useEffect, useRef} from 'react';
 import {ThemeProvider as StyledThemeProvider} from 'styled-components';
 import {useSelector} from 'react-redux';
 import {RootState} from '../store';
-import {logThemeChange, themes} from './themes';
+import {logThemeChange, themes, ThemeName} from './themes';
+import Prism from 'prismjs';
 
 interface ThemeProviderProps {
     children: React.ReactNode;
 }
 
 const LOG_PREFIX = '[ThemeProvider]';
+// Define Prism themes mapping to our theme names
+const prismThemes: Record<ThemeName, string> = {
+    main: 'prism',
+    night: 'prism-dark',
+    forest: 'prism-okaidia',
+    pony: 'prism-twilight',
+    alien: 'prism-tomorrow'
+};
+// Function to load Prism theme
+const loadPrismTheme = async (themeName: ThemeName) => {
+    const prismTheme = prismThemes[themeName] || 'prism';
+    try {
+        await import(`prismjs/themes/${prismTheme}.css`);
+        console.log(`${LOG_PREFIX} Loaded Prism theme: ${prismTheme}`);
+    } catch (error) {
+        console.warn(`${LOG_PREFIX} Failed to load Prism theme: ${prismTheme}`, error);
+    }
+};
 
 export const ThemeProvider: React.FC<ThemeProviderProps> = ({children}) => {
     const currentTheme = useSelector((state: RootState) => state.ui.theme);
@@ -28,6 +47,13 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({children}) => {
         document.body.className = `theme-${currentTheme}`;
         // Add transition class
         document.body.classList.add('theme-transition');
+        // Load and apply Prism theme
+        loadPrismTheme(currentTheme).then(() => {
+            // Re-highlight all code blocks with new theme
+            requestAnimationFrame(() => {
+                Prism.highlightAll();
+            });
+        });
         const timer = setTimeout(() => {
             document.body.classList.remove('theme-transition');
         }, 300);