Cannot change theme when using Shadcn

[camilosasia]

I followed the steps outlined in Styling and Theming documentation to change the colors. However, I was unable to override the color variables as expected. The reason is because Shadcn variables are being redefined inside @blocknote/shadcn/style.css, and these variables aren't being assigned to the BlockNote variables.

In the meantime, I've created a new CSS file and copy the shadcn variables from my globals.css.

/* my-component.css */

.bn-container[data-color-scheme="light"] {
  --background: 0 0% 100%;
  --foreground: 20 14.3% 4.1%;
  /* ... */
}

.bn-container[data-color-scheme="dark"] {
  --background: 20 14.3% 4.1%;
  --foreground: 60 9.1% 97.8%;
  /* ... */
}

This way I'm still unable to override the BlockNote variables, but at least now is picking the colors defined in my Shadcn config.

[YousefED]

Hi,

There's a note on that page in the docs:

Themes are only available when using the default Mantine components. ShadCN / Ariakit components can be styled differently.

You can supply your own shadcn components for styling: https://www.blocknotejs.org/docs/advanced/shadcn#shadcn-customization