#58 - Listen to theme changes

Author: estruyf

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Change Log
 
+## [0.0.85] - 2025-03-xx
+
+- [#58](https://github.com/estruyf/vscode-demo-time/issues/58): Support theme changes in Shiki codeblocks on slides
+
 ## [0.0.84] - 2025-03-18
 
 - Fix in dispose check on the presenter webview

src/preview/Preview.ts

@@ -104,7 +104,8 @@ export class Preview {
       Preview.postRequestMessage(WebViewMessages.toVscode.getStyles, requestId, cssWebviewPath);
     } else if (command === WebViewMessages.toVscode.getTheme && requestId) {
       try {
-        const theme = await getTheme();
+        const themeName = payload || "";
+        const theme = await getTheme(themeName);
         Preview.postRequestMessage(WebViewMessages.toVscode.getTheme, requestId, theme);
       } catch (e) {
         // This can happen in a Dev Container where the theme is not available

src/preview/components/Markdown.tsx

@@ -25,11 +25,6 @@ export const Markdown: React.FunctionComponent<IMarkdownProps> = ({
     setMarkdown,
     matter
   } = useRemark({
-    rehypePlugins: [
-      [rehypePrettyCode, {
-        theme: vsCodeTheme ? vsCodeTheme : {},
-      }]
-    ],
     rehypeReactOptions: {
       components: {
         img: ({ node, src, ...props }) => {
@@ -52,7 +47,7 @@ export const Markdown: React.FunctionComponent<IMarkdownProps> = ({
     updateLayout(matter?.layout || "default");
 
     if (matter?.image) {
-      const img = transformImageUrl(webviewUrl || "", matter?.image)
+      const img = transformImageUrl(webviewUrl || "", matter?.image);
       updateBgStyles({
         color: 'white',
         backgroundImage: `url(${img})`,
@@ -67,9 +62,10 @@ export const Markdown: React.FunctionComponent<IMarkdownProps> = ({
 
   React.useEffect(() => {
     if (content) {
-      setMarkdown(twoColumnFormatting(content));
+      // Passing the theme here as it could be that the theme has been updated
+      setMarkdown(twoColumnFormatting(content), [[rehypePrettyCode, { theme: vsCodeTheme ? vsCodeTheme : {} }]]);
     }
-  }, [content]);
+  }, [content, vsCodeTheme]);
 
   return (
     <>

src/preview/components/MarkdownPreview.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react';
-import { messageHandler, Messenger } from '@estruyf/vscode/dist/client/webview';
+import { Messenger } from '@estruyf/vscode/dist/client/webview';
 import { SlideLayout, WebViewMessages } from '../../constants';
 import { Markdown } from './Markdown';
 import { EventData } from '@estruyf/vscode';
 import { useScale } from '../hooks/useScale';
 import { useFileContents } from '../hooks/useFileContents';
 import useCursor from '../hooks/useCursor';
 import { SlideControls } from './SlideControls';
+import useTheme from '../hooks/useTheme';
 
 export interface IMarkdownPreviewProps {
   fileUri: string;
@@ -18,14 +19,14 @@ export const MarkdownPreview: React.FunctionComponent<IMarkdownPreviewProps> = (
   webviewUrl
 }: React.PropsWithChildren<IMarkdownPreviewProps>) => {
   const { content, crntFilePath, getFileContents } = useFileContents();
-  const [vsCodeTheme, setVsCodeTheme] = React.useState<any | undefined>(undefined);
   const [theme, setTheme] = React.useState<string | undefined>(undefined);
   const [layout, setLayout] = React.useState<string | undefined>(undefined);
   const [bgStyles, setBgStyles] = React.useState<any | null>(null);
   const [showControls, setShowControls] = React.useState(false);
   const ref = React.useRef<HTMLDivElement>(null);
   const slideRef = React.useRef<HTMLDivElement>(null);
   const { cursorVisible, resetCursorTimeout } = useCursor();
+  const { vsCodeTheme } = useTheme();
   useScale(ref, slideRef);
 
   const messageListener = (message: MessageEvent<EventData<any>>) => {
@@ -68,24 +69,6 @@ export const MarkdownPreview: React.FunctionComponent<IMarkdownPreviewProps> = (
   React.useEffect(() => {
     Messenger.listen(messageListener);
 
-    messageHandler.request<any | null>(WebViewMessages.toVscode.getTheme).then((theme) => {
-      if (theme === null) {
-        // Check if light or dark theme
-        const elm = document.body.getAttribute(`data-vscode-theme-kind`);
-        if (elm === 'vscode-light') {
-          setVsCodeTheme("github-light");
-        } else if (elm === 'vscode-dark') {
-          setVsCodeTheme("github-dark");
-        } else if (elm === 'vscode-high-contrast') {
-          setVsCodeTheme("github-dark-high-contrast");
-        } else {
-          setVsCodeTheme("github-light-high-contrast");
-        }
-      } else {
-        setVsCodeTheme(theme);
-      }
-    });
-
     return () => {
       Messenger.unlisten(messageListener);
     };

src/preview/hooks/usePrevious.tsx

@@ -0,0 +1,11 @@
+import { useEffect, useRef } from 'react';
+
+export function usePrevious<T>(value: T): T | undefined {
+  const ref = useRef<T>();
+
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+
+  return ref.current;
+}

src/preview/hooks/useRemark.tsx

@@ -30,13 +30,13 @@ export const useRemark = ({
   remarkToRehypeOptions,
 }: UseRemarkOptions = {}): {
   markdown: null | ReactElement,
-  setMarkdown: (source: string) => void,
+  setMarkdown: (source: string, customPlugins?: PluggableList) => void,
   matter: null | any,
 } => {
   const [reactContent, setReactContent] = useState<null | ReactElement>(null);
   const [metadata, setMetadata] = useState<null | any>(null);
 
-  const setMarkdownSource = useCallback((source: string) => {
+  const setMarkdownSource = useCallback((source: string, customPlugins?: PluggableList) => {
     unified()
       .use(remarkParse, remarkParseOptions)
       .use(remarkToRehype, {
@@ -45,7 +45,7 @@ export const useRemark = ({
       })
       .use(rehypeRaw)
       .use(remarkPlugins)
-      .use(rehypePlugins)
+      .use([...rehypePlugins, ...(customPlugins || [])])
       .use(rehypeReact, {
         ...rehypeReactOptions,
         Fragment: jsxRuntime.Fragment,

src/preview/hooks/useTheme.tsx

@@ -0,0 +1,61 @@
+import { messageHandler } from '@estruyf/vscode/dist/client/webview';
+import { useState, useEffect } from 'react';
+import { WebViewMessages } from '../../constants';
+import { usePrevious } from './usePrevious';
+
+export default function useTheme(options?: any) {
+  const [theme, setTheme] = useState('');
+  const prevTheme = usePrevious(theme);
+  const [vsCodeTheme, setVsCodeTheme] = useState('');
+
+  const getThemeName = () => {
+    return document.body.getAttribute("data-vscode-theme-name") || '';
+  };
+
+  const mutationObserver = new MutationObserver((_, __) => {
+    setTheme(getThemeName());
+  });
+
+  const getVsCodeTheme = () => {
+
+    messageHandler.request<any | null>(WebViewMessages.toVscode.getTheme, getThemeName()).then((theme) => {
+      console.log('getVsCodeTheme', theme);
+      if (theme === null) {
+        // Check if light or dark theme
+        const elm = document.body.getAttribute(`data-vscode-theme-kind`);
+        if (elm === 'vscode-light') {
+          setVsCodeTheme("github-light");
+        } else if (elm === 'vscode-dark') {
+          setVsCodeTheme("github-dark");
+        } else if (elm === 'vscode-high-contrast') {
+          setVsCodeTheme("github-dark-high-contrast");
+        } else {
+          setVsCodeTheme("github-light-high-contrast");
+        }
+      } else {
+        setVsCodeTheme(theme);
+      }
+    });
+  };
+
+  useEffect(() => {
+    console.log('Theme changed', theme);
+    console.log('prevTheme changed', prevTheme);
+    if (theme !== prevTheme) {
+      getVsCodeTheme();
+    }
+  }, [theme, prevTheme]);
+
+  useEffect(() => {
+    mutationObserver.observe(document.body, { childList: false, attributes: true });
+    getVsCodeTheme();
+
+    return () => {
+      mutationObserver.disconnect();
+    };
+  }, []);
+
+  return {
+    vsCodeTheme
+  };
+}

src/utils/getTheme.ts

@@ -2,36 +2,38 @@ import { extensions, Uri, workspace } from "vscode";
 import { Theme } from "../models";
 import { readFile } from ".";
 
-export const getTheme = async () => {
-  let crntTheme = workspace.getConfiguration("workbench").get("colorTheme");
+export const getTheme = async (themeName?: string) => {
+  let crntTheme = workspace.getConfiguration("workbench").get("colorTheme") as string;
 
   // Get all the theme extensions
   const allExtensions = extensions.all.filter((e) => {
     const pkg = e.packageJSON;
     return pkg.contributes && pkg.contributes.themes && pkg.contributes.themes.length > 0;
   });
 
+  themeName = !themeName || themeName === "" ? crntTheme : themeName;
+
   // Get the theme extension that matches the active theme
   const themeExtension = allExtensions.find((e) => {
     const pkg = e.packageJSON;
-    return pkg.contributes.themes.find((theme: Theme) => theme.label === crntTheme || theme.id === crntTheme);
+    return pkg.contributes.themes.find((theme: Theme) => theme.label === themeName || theme.id === themeName);
   });
 
   if (!themeExtension) {
-    throw new Error(`Could not find theme extension for ${crntTheme}`);
+    throw new Error(`Could not find theme extension for ${themeName}`);
   }
 
   // Get the theme file
   const themeFile: Theme = themeExtension.packageJSON.contributes.themes.find(
-    (theme: Theme) => theme.label === crntTheme || theme.id === crntTheme
+    (theme: Theme) => theme.label === themeName || theme.id === themeName
   );
 
   const themePath = Uri.joinPath(themeExtension.extensionUri, themeFile.path);
   const fileContents = await readFile(themePath);
 
   const theme = JSON.parse(fileContents);
   if (!theme) {
-    throw new Error(`Could not find theme file for ${crntTheme}`);
+    throw new Error(`Could not find theme file for ${themeName}`);
   }
 
   if (theme.include) {