Apply dark theme to prisms

Hi there 👋 is there a way to change the theme for prism based on the color mode?

This is what I tried, but didn’t work:

import prismTheme from "@theme-ui/prism/presets/night-owl-light.json";
import prismThemeDark from "@theme-ui/prism/presets/night-owl.json";

export default {
  useColorSchemeMediaQuery: true,
  colors: {
    text: "#000",
    background: "#fff",

    modes: {
      dark: {
        text: "#fff",
        background: "#000",
        primary: "#0cf",
      },
    },
  },
  
  styles: {
    pre: {
      fontFamily: "monospace",
      overflowX: "auto",
      padding: 3,
      code: {
        color: "inherit",
      },
      ...prismTheme,
      mode: {
        dark: {
          ...prismThemeDark,
        },
      },
    },
  }
};

[lachlanjc]

@ahmedelq Here’s a link! https://dev.theme-ui.com/guides/syntax-highlighting/

You can’t change the CSS of a component in dark mode from your theme. However, you can set colors to use for syntax highlighting inside each color mode, then refer to that color name in your syntax highlighting code, & they will update with your color modes.

[patrick91]

Oh, this is cool! Sorry I didn’t notice 😃 Thanks a lot!