alternative way to pass darkmode

packages/core/src/editor.module.css

@@ -56,13 +56,13 @@ Tippy popups that are appended to document.body directly
 }
 
 [data-theme="light"] {
-  background-color: #ffffff;
-  color: #444444;
+  background-color: #FFFFFF;
+  color: #3F3F3F;
 }
 
 [data-theme="dark"] {
-  background-color: #444444;
-  color: #dddddd;
+  background-color: #1F1F1F;
+  color: #CFCFCF;
 }
 
 .dragPreview {

packages/core/src/extensions/Blocks/nodes/Block.module.css

@@ -60,14 +60,14 @@ NESTED BLOCKS
   .blockGroup
   .blockGroup
   > .blockOuter:not([data-prev-depth-changed])::before {
-  border-left: 1px solid #cccccc;
+  border-left: 1px solid #AFAFAF;
 }
 
 [data-theme="dark"]
   .blockGroup
   .blockGroup
   > .blockOuter:not([data-prev-depth-changed])::before {
-  border-left: 1px solid #999999;
+  border-left: 1px solid #7F7F7F;
 }
 
 .blockGroup .blockGroup > .blockOuter[data-prev-depth-change="-2"]::before {
@@ -250,12 +250,12 @@ NESTED BLOCKS
 
 [data-theme="light"] .isEmpty .inlineContent:before,
 .isFilter .inlineContent:before {
-  color: #cccccc;
+  color: #CFCFCF;
 }
 
 [data-theme="dark"] .isEmpty .inlineContent:before,
 .isFilter .inlineContent:before {
-  color: #999999;
+  color: #7F7F7F;
 }
 
 /* TODO: would be nicer if defined from code */

packages/react/src/BlockNoteTheme.ts

@@ -15,15 +15,15 @@ type ColorScheme = [
 
 export const blockNoteColorScheme: ColorScheme = [
   "#FFFFFF",
-  "#EEEEEE",
-  "#DDDDDD",
-  "#CCCCCC",
-  "#999999",
-  "#666666",
-  "#444444",
-  "#333333",
-  "#222222",
-  "#111111",
+  "#EFEFEF",
+  "#CFCFCF",
+  "#AFAFAF",
+  "#7F7F7F",
+  "#3F3F3F",
+  "#1F1F1F",
+  "#161616",
+  "#0F0F0F",
+  "#000000",
 ];
 
 export const getBlockNoteTheme = (
@@ -41,7 +41,7 @@ export const getBlockNoteTheme = (
 
   const sideMenu = useDarkTheme
     ? blockNoteColorScheme[4]
-    : blockNoteColorScheme[3];
+    : blockNoteColorScheme[2];
 
   const primaryBackground = useDarkTheme
     ? blockNoteColorScheme[6]
@@ -52,7 +52,7 @@ export const getBlockNoteTheme = (
 
   const primaryText = useDarkTheme
     ? blockNoteColorScheme[2]
-    : blockNoteColorScheme[6];
+    : blockNoteColorScheme[5];
   const secondaryText = useDarkTheme
     ? blockNoteColorScheme[4]
     : blockNoteColorScheme[4];
@@ -62,11 +62,11 @@ export const getBlockNoteTheme = (
     : blockNoteColorScheme[1];
   const hoveredText = useDarkTheme
     ? blockNoteColorScheme[2]
-    : blockNoteColorScheme[6];
+    : blockNoteColorScheme[5];
 
   const selectedBackground = useDarkTheme
     ? blockNoteColorScheme[8]
-    : blockNoteColorScheme[6];
+    : blockNoteColorScheme[5];
   const selectedText = useDarkTheme
     ? blockNoteColorScheme[2]
     : blockNoteColorScheme[0];

packages/website/docs/.vitepress/theme/components/Examples/BlockNote/BlockNoteElement.vue

@@ -1,20 +1,20 @@
 <template>
-  <BasicPure></BasicPure>
+  <BasicPure :theme="isDark ? 'dark' : 'light'"></BasicPure>
 </template>
 <script>
 import { applyPureReactInVue } from "veaury";
 // This is a React component
 
 import { ReactBlockNote } from "./ReactBlockNote";
-import { ref } from "vue";
+import { useData } from "vitepress";
 
 export default {
   components: {
     BasicPure: applyPureReactInVue(ReactBlockNote),
   },
-  setup() {
+  data() {
     return {
-      // foo: ref("Hello!"),
+      isDark: useData().isDark,
     };
   },
 };

packages/website/docs/.vitepress/theme/components/Examples/BlockNote/ReactBlockNote.tsx

@@ -1,6 +1,6 @@
 import "@blocknote/core/style.css";
 import { BlockNoteView, useBlockNote } from "@blocknote/react";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo } from "react";
 import YPartyKitProvider from "y-partykit/provider";
 import * as Y from "yjs";
 import * as styles from "./ReactBlockNote.module.css";
@@ -38,11 +38,7 @@ const getRandomElement = (list: any[]) =>
 const getRandomColor = () => getRandomElement(colors);
 const getRandomName = () => getRandomElement(names);
 
-export function ReactBlockNote() {
-  const [theme, setTheme] = useState<"light" | "dark">(
-    document.lastElementChild!.className === "dark" ? "dark" : "light"
-  );
-
+export function ReactBlockNote(props: { theme: "light" | "dark" }) {
   const [doc, provider] = useMemo(() => {
     console.log("create");
     const doc = new Y.Doc();
@@ -59,7 +55,7 @@ export function ReactBlockNote() {
       editorDOMAttributes: {
         class: styles.editor,
       },
-      theme: theme,
+      theme: props.theme,
       collaboration: {
         provider,
         fragment: doc.getXmlFragment("blocknote"),
@@ -69,7 +65,7 @@ export function ReactBlockNote() {
         },
       },
     },
-    [theme]
+    [props.theme]
   );
 
   useEffect(() => {
@@ -88,20 +84,5 @@ export function ReactBlockNote() {
     };
   }, [editor?.domElement]);
 
-  useEffect(() => {
-    const toggleThemeButton = document.querySelector(`.appearance-action`)!;
-    const toggleTheme = () => {
-      setTheme(
-        document.lastElementChild!.className === "dark" ? "dark" : "light"
-      );
-    };
-
-    toggleThemeButton.addEventListener("click", toggleTheme);
-
-    return () => {
-      toggleThemeButton.removeEventListener("click", toggleTheme);
-    };
-  }, []);
-
   return <BlockNoteView editor={editor} />;
 }

packages/website/docs/.vitepress/theme/components/Features/FeaturesCard.vue

@@ -11,9 +11,9 @@ defineProps<{ feature: FeaturesCardData }>();
     <div
       class="feature-card"
       :style="{
-        backgroundImage: `url(${
-          isDark ? feature.bgImgDark : feature.bgImgLight
-        })`,
+        backgroundImage: `linear-gradient(to bottom, transparent 50%, ${
+          isDark ? '#111418' : 'white'
+        } 70%), url(${isDark ? feature.bgImgDark : feature.bgImgLight})`,
       }"
     >
       <h4>{{ feature.title }}</h4>
@@ -22,6 +22,9 @@ defineProps<{ feature: FeaturesCardData }>();
   </Card>
 </template>
 
+backgroundImage: `linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255,
+255, 255, 1)), url(${ isDark ? feature.bgImgDark : feature.bgImgLight })`
+
 <style scoped lang="scss">
 .feature-card {
   margin: 5px;
@@ -49,7 +52,7 @@ defineProps<{ feature: FeaturesCardData }>();
     font-weight: 600;
     font-size: 15px;
     line-height: 1.2;
-    background: white;
+    //background: white;
   }
 
   p {

packages/website/docs/.vitepress/theme/components/Hero/Hero.vue

@@ -115,7 +115,7 @@ header {
 }
 
 html.dark .editor-wrapper {
-  background: #444;
+  background: #111418;
 }
 
 .try-here-image {

packages/website/docs/.vitepress/theme/components/Home.vue

@@ -133,7 +133,7 @@ defineProps<{
         180deg,
         rgba(0, 0, 0, 0) 0%,
         rgba(0, 0, 0, 0) 400px,
-        rgb(0, 0, 0) 700px
+        rgb(7, 8, 11) 700px
       ),
       radial-gradient(circle at 15% 35%, #243148, rgba(34, 34, 34, 0) 25%),
       radial-gradient(circle at 85% 20%, #1c2e3c, rgba(34, 34, 34, 0) 25%), #222;

packages/website/docs/.vitepress/theme/components/Sandbox/Sandbox.vue

@@ -1,30 +1,35 @@
 <!-- MySandbox.vue -->
 <template>
   <!-- 'code-options' is a build-in prop, do not edit it -->
-  <ClientOnly>
-    <Sandbox
-      :rtl="rtl"
-      :template="'react-ts'"
-      :light-theme="lightTheme"
-      :dark-theme="darkTheme"
-      :options="{
-        ...props, // do not forget it
-        showLineNumbers: true,
-        editorWidthPercentage: 40,
-      }"
-      :custom-setup="{
-        ...props, // do not forget it
-        deps: { '@blocknote/react': 'latest' },
-      }"
-      :code-options="codeOptions"
-    >
-      <slot />
-    </Sandbox>
-  </ClientOnly>
+  <div>
+    <ClientOnly>
+      <Sandbox
+        :rtl="rtl"
+        :template="'react-ts'"
+        :light-theme="lightTheme"
+        :dark-theme="darkTheme"
+        :theme="isDark ? 'dark' : 'light'"
+        :options="{
+          ...props, // do not forget it
+          showLineNumbers: false,
+          editorWidthPercentage: 40,
+        }"
+        :custom-setup="{
+          ...props, // do not forget it
+          deps: { '@blocknote/react': 'latest', 'react-icons': 'latest' },
+        }"
+        :code-options="codeOptions"
+      >
+        <slot />
+      </Sandbox>
+    </ClientOnly>
+  </div>
 </template>
 
 <script setup lang="ts">
+import { useData } from "vitepress";
 import { Sandbox, sandboxProps } from "vitepress-plugin-sandpack";
 
+const { isDark } = useData();
 const props = defineProps(sandboxProps);
 </script>

packages/website/docs/data.ts

@@ -7,17 +7,17 @@ export interface Sponsors {
 export const sponsors: Sponsors[] = [
   {
     name: "Fermat",
-    imgDark: "/img/sponsors/typecell.svg",
+    imgDark: "/img/sponsors/typecell-dark.svg",
     imgLight: "/img/sponsors/typecell.svg",
   },
   {
     name: "NLNet",
-    imgDark: "/img/sponsors/fermat.png",
+    imgDark: "/img/sponsors/fermat-dark.png",
     imgLight: "/img/sponsors/fermat.png",
   },
   {
     name: "TypeCell",
-    imgDark: "/img/sponsors/nlnet.svg",
+    imgDark: "/img/sponsors/nlnet-dark.svg",
     imgLight: "/img/sponsors/nlnet.svg",
   },
 ];
@@ -33,44 +33,44 @@ export const featuresCardData: FeaturesCardData[] = [
   {
     title: "Animations",
     description: "",
-    bgImgDark: "/img/features/animations.gif",
+    bgImgDark: "/img/features/animations-dark.gif",
     bgImgLight: "/img/features/animations.gif",
   },
   {
     title: "Real-time collaboration",
     description: "",
-    bgImgDark: "/img/features/collaboration.gif",
+    bgImgDark: "/img/features/collaboration-dark.gif",
     bgImgLight: "/img/features/collaboration.gif",
   },
   {
     title: "Helpful placeholders",
     description: "",
-    bgImgDark: "/img/features/placeholders.gif",
+    bgImgDark: "/img/features/placeholders-dark.gif",
     bgImgLight: "/img/features/placeholders.gif",
   },
   {
     title: "Nesting & indentation",
     description: "",
-    bgImgDark: "/img/features/nesting.gif",
+    bgImgDark: "/img/features/nesting-dark.gif",
     bgImgLight: "/img/features/nesting.gif",
   },
   {
     title: "Drag and drop blocks",
     description: "",
-    bgImgDark: "/img/features/dragdrop.gif",
+    bgImgDark: "/img/features/dragdrop-dark.gif",
     bgImgLight: "/img/features/dragdrop.gif",
   },
   {
     title: "Customizable slash (/) menu",
     description: "",
-    bgImgDark: "/img/features/slashmenu.gif",
+    bgImgDark: "/img/features/slashmenu-dark.gif",
     bgImgLight: "/img/features/slashmenu.gif",
   },
   {
     title: "Format menu",
     description: "",
-    bgImgDark: "/img/features/selectmenu.gif",
-    bgImgLight: "/img/features/selectmenu.gif",
+    bgImgDark: "/img/features/formattingtoolbar-dark.gif",
+    bgImgLight: "/img/features/formattingtoolbar.gif",
   },
 ];