feat: Dark theme fixes + enable theme on website + docs (#236)

* Made it possible for demos inherit website theme

* Made hero demo change theme automatically and adjusted dark bg color

* alternative way to pass darkmode (#239)

* alternative way to pass darkmode

* new isDark approached

* Updated theme shades

* Added dark mode sponsor logos

* Fixed dark mode sponsor logos

* Cleaned up sandbox dark mode implementation

* Added new features gifs

* Updated colors & styles

* Added dark mode switching to remaining demos

* Added dark mode screenshots

* Fixed theme switching in home page

* Adjusted features gifs

* Added collaboration gifs

* Fixed home page demo theme switching

* Adjusted styles

* Small fixes

---------

Co-authored-by: Matthew Lipski <[email protected]>

* fix package json

---------

Co-authored-by: Yousef <[email protected]>

Author: matthewlipski

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/config.ts

@@ -125,7 +125,7 @@ const METADATA_DEFAULT = {
 
 export default defineConfig({
   vite: {},
-  appearance: false,
+  appearance: true,
   srcDir: ".",
   outDir: "build",
 

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 [darkMode, setDarkMode] = useState(
-    document.documentElement.classList.contains("dark")
-  );
-
+export function ReactBlockNote(props: { theme: "light" | "dark" }) {
   const [doc, provider] = useMemo(() => {
     console.log("create");
     const doc = new Y.Doc();
@@ -54,24 +50,27 @@ export function ReactBlockNote() {
     return [doc, provider];
   }, []);
 
-  const editor = useBlockNote({
-    editorDOMAttributes: {
-      class: styles.editor,
-    },
-    theme: darkMode ? "dark" : "light",
-    collaboration: {
-      provider,
-      fragment: doc.getXmlFragment("blocknote"),
-      user: {
-        name: getRandomName(),
-        color: getRandomColor(),
+  const editor = useBlockNote(
+    {
+      editorDOMAttributes: {
+        class: styles.editor,
+      },
+      theme: props.theme,
+      collaboration: {
+        provider,
+        fragment: doc.getXmlFragment("blocknote"),
+        user: {
+          name: getRandomName(),
+          color: getRandomColor(),
+        },
       },
     },
-  });
+    [props.theme]
+  );
 
   useEffect(() => {
     let shownAlert = false;
-    const listener = (e: any) => {
+    const listener = () => {
       if (!shownAlert) {
         alert(
           "Text you enter in this demo is displayed publicly on the internet to show multiplayer features. Be kind :)"
@@ -85,25 +84,5 @@ export function ReactBlockNote() {
     };
   }, [editor?.domElement]);
 
-  useEffect(() => {
-    // Create the mutation observer
-    const observer = new MutationObserver((mutations) => {
-      for (const mutation of mutations) {
-        if (
-          mutation.type === "attributes" &&
-          mutation.attributeName === "class"
-        ) {
-          const hasDarkClass =
-            document.documentElement.classList.contains("dark");
-          setDarkMode(hasDarkClass);
-          // TODO: how to update the editor's theme?
-        }
-      }
-    });
-
-    // Set the observer to watch for changes on the <html> element
-    observer.observe(document.documentElement, { attributes: true });
-  }, []);
-
   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

@@ -27,7 +27,7 @@ import BlockNote from "@theme/components/Examples/BlockNote/BlockNote.vue";
       <div class="editor-wrapper">
         <ClientOnly><BlockNote /></ClientOnly>
       </div>
-      <div class="try-here-image"/>
+      <div class="try-here-image" />
     </div>
     <!-- features
 sponsors
@@ -100,7 +100,7 @@ header {
 .editor-wrapper {
   border-radius: 12px;
   box-shadow: inset 0 0 0 1px #c4d0d966, inset 0 -1px #ffffff1a,
-  inset 0 1px #84b9f61a;
+    inset 0 1px #84b9f61a;
   // background-image: radial-gradient(
   //   145% 110% at 46% 20%,
   //   #fdfeff 50%,
@@ -114,6 +114,10 @@ header {
   overflow-y: scroll;
 }
 
+html.dark .editor-wrapper {
+  background: #111418;
+}
+
 .try-here-image {
   position: relative;
   width: 250px;

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>