Changing Themes Through Code

import "@blocknote/core/fonts/inter.css";import {  BlockNoteView,  darkDefaultTheme,  lightDefaultTheme,  Theme,} from "@blocknote/mantine";import "@blocknote/mantine/style.css";import { useCreateBlockNote } from "@blocknote/react";// Base themeconst lightRedTheme = {  colors: {    editor: {      text: "#222222",      background: "#ffeeee",    },    menu: {      text: "#ffffff",      background: "#9b0000",    },    tooltip: {      text: "#ffffff",      background: "#b00000",    },    hovered: {      text: "#ffffff",      background: "#b00000",    },    selected: {      text: "#ffffff",      background: "#c50000",    },    disabled: {      text: "#9b0000",      background: "#7d0000",    },    shadow: "#640000",    border: "#870000",    sideMenu: "#bababa",    highlights: lightDefaultTheme.colors!.highlights,  },  borderRadius: 4,  fontFamily: "Helvetica Neue, sans-serif",} satisfies Theme;// The theme for dark mode,// users the light theme defined above with a few changesconst darkRedTheme = {  ...lightRedTheme,  colors: {    ...lightRedTheme.colors,    editor: {      text: "#ffffff",      background: "#9b0000",    },    sideMenu: "#ffffff",    highlights: darkDefaultTheme.colors!.highlights,  },} satisfies Theme;// The combined "red theme",// we pass this to BlockNoteView and then the editor will automatically// switch between lightRedTheme / darkRedTheme based on the system themeconst redTheme = {  light: lightRedTheme,  dark: darkRedTheme,};export default function App() {  // Creates a new editor instance.  const editor = useCreateBlockNote({    initialContent: [      {        type: "paragraph",        content: "Welcome to this demo!",      },      {        type: "paragraph",        content: "Open up a menu or toolbar to see more of the red theme",      },      {        type: "paragraph",        content:          "Toggle light/dark mode in the page footer and see the theme change too",      },      {        type: "paragraph",      },    ],  });  // Renders the editor instance using a React component.  return <BlockNoteView editor={editor} theme={redTheme} />;}