theme ?

src/components/blockly/PBBlocklyWorkspace.tsx

@@ -5,6 +5,7 @@ import { PBCard } from "../PBCard";
 import { Box, PaperProps, Typography } from "@mui/material";
 import { useEffect, useState, useRef } from "react";
 import Blockly from "blockly/core"
+import { useThemeContext } from "../../theme/ThemeContext";
 
 /*
 collapse
@@ -47,19 +48,26 @@ const MyBlockly = ({ blockIds, categorized, sx, title, ...props }: PBBlocklyWork
   const [wasCategorized, setWasCategorized] = useState<Boolean | null>(null)
 
   const { t } = useTranslation("blocks")
+  const { blocklyTheme } = useThemeContext()
 
   const blocksWithCategories: BlockType[] = blockIds.map(getBlockFromId)
 
   const toolbox: Toolbox = categorized ? categorizedToolbox(t, blocksWithCategories) : uncategorizedToolbox(blocksWithCategories)
 
   setupBlocklyBlocks(t)
 
+  useEffect(() => {
+    if( workspace )
+      workspace.setTheme(blocklyTheme)
+  }, [blocklyTheme]);
+
   useEffect(() => {
     if (wrapperRef.current && workspace) {
       if (wasCategorized !== null && categorized !== wasCategorized) {
         workspace.dispose()
 
         setWorkspace(Blockly.inject(wrapperRef.current, {
+          theme: blocklyTheme,
           toolbox: toolbox,
           ...props.workspaceConfiguration
         }));
@@ -75,6 +83,7 @@ const MyBlockly = ({ blockIds, categorized, sx, title, ...props }: PBBlocklyWork
     if (wrapperRef.current && !workspace) {
       setWasCategorized(categorized)
       setWorkspace(Blockly.inject(wrapperRef.current, {
+        theme: blocklyTheme,
         toolbox: toolbox,
         ...props.workspaceConfiguration
       }));

src/theme/ThemeContext.tsx

@@ -3,6 +3,36 @@ import { createContext, FC, PropsWithChildren, useContext, useEffect, useMemo, u
 import { getDesignTokens } from "./theme";
 import { LocalStorage } from "../localStorage";
 import { Ember } from "../emberCommunication";
+import Blockly, { Theme as BlocklyTheme } from 'blockly/core'
+
+
+const BlocklyClassicTheme = Blockly.Theme.defineTheme('classicBlockly', {
+  base: Blockly.Themes.Classic,
+  name: "classicBlockly"
+})
+
+const BlocklyDarkTheme = Blockly.Theme.defineTheme('darkBlockly', {
+  base: Blockly.Themes.Classic,
+  componentStyles: {
+    workspaceBackgroundColour: '#1e1e1e',
+    toolboxBackgroundColour: '#333',
+    toolboxForegroundColour: '#fff',
+    flyoutBackgroundColour: '#252526',
+    flyoutForegroundColour: '#ccc',
+    flyoutOpacity: 1,
+    scrollbarColour: '#797979',
+    insertionMarkerColour: '#fff',
+    insertionMarkerOpacity: 0.3,
+    scrollbarOpacity: 0.4,
+    cursorColour: '#d0d0d0'
+  },
+  name: "darkBlockly"
+});
+
+export const setBlocklyTheme = ( dark: boolean ) => 
+  dark ? BlocklyDarkTheme : BlocklyClassicTheme 
+
+
 
 export type ThemeMode = 'light' | 'dark'
 
@@ -11,15 +41,17 @@ type ThemeContextType = {
     setDarkModeEnabled: (mode: boolean) => void;
     simpleReadModeEnabled: boolean;
     setSimpleReadModeEnabled: (mode: boolean) => void;
-    theme: Theme
+    theme: Theme;
+    blocklyTheme: BlocklyTheme;
 };
 
 export const ThemeContext = createContext<ThemeContextType>({
     darkModeEnabled: false,
     setDarkModeEnabled: () => { },
     simpleReadModeEnabled: false,
     setSimpleReadModeEnabled: () => { },
-    theme: createTheme({})
+    theme: createTheme({}),
+    blocklyTheme: setBlocklyTheme(false),
 });
 
 export const ThemeContextProvider: FC<PropsWithChildren> = ({ children }) => {
@@ -32,14 +64,20 @@ export const ThemeContextProvider: FC<PropsWithChildren> = ({ children }) => {
         [darkModeEnabled, simpleReadModeEnabled]
     );
 
+    const blocklyTheme = useMemo(     
+      () => setBlocklyTheme(darkModeEnabled),
+      [darkModeEnabled]
+  );
+
     useEffect(() =>{
         LocalStorage.saveDarkMode(darkModeEnabled)
         LocalStorage.saveSimpleReadMode(simpleReadModeEnabled)
         Ember.refreshIframe()
+
     }, [darkModeEnabled, simpleReadModeEnabled])
 
     return (
-        <ThemeContext.Provider value={{ darkModeEnabled, setDarkModeEnabled, simpleReadModeEnabled, setSimpleReadModeEnabled, theme }}>
+        <ThemeContext.Provider value={{ darkModeEnabled, setDarkModeEnabled, simpleReadModeEnabled, setSimpleReadModeEnabled, theme, blocklyTheme }}>
             {children}
         </ThemeContext.Provider>
     );