dark mode with html.class dont working

[tarcisioandrade]

I'm using bright in a project where dark mode is done by adding the "dark" or "light" class to the html, but bright isn't following the project's theme. At the moment it only works if I add a data-theme.

[pomber]

I used Bright with html.light yesterday and it worked. Can you share how are you using it?

[tarcisioandrade]

I used Bright with html.light yesterday and it worked. Can you share how are you using it?

I did it according to the documentation:

import React from "react";
import { Code as BrightCode } from "bright";

type Props = {
  code: string;
  language?: string;
  filename?: string;
};

BrightCode.theme = {
  dark: "material-palenight",
  light: "material-lighter",
};

const Code = ({ code, language, filename }: Props) => {
  return (
    <BrightCode
      code={code}
      title={filename}
      lang={language}
      style={{ margin: "48px 0 80px 0" }}
      className="[&>pre]:xl:!px-4 xl:!ml-[-32px]"
    />
  );
};

export default Code;

now with data-theme it works fine

[pomber]

Try adding lightSelector to the theme object:

Code.theme = {
  dark: "material-palenight",
  light: "material-lighter",
  lightSelector: 'html.light'
}

[tarcisioandrade]

Try adding lightSelector to the theme object:

Code.theme = {
  dark: "material-palenight",
  light: "material-lighter",
  lightSelector: 'html.light'
}

OMG! It worked perfectly, and now I've realised that in the doc it shows this "lightSelector" property, but it was in a comment and I didn't notice it. Sorry for my stupidity and thanks for your help!