Apply dark theme to prisms

[patrick91]

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,
        },
      },
    },
  }
};

[jxnblk]

The only prism preset/theme that currently supports color modes is the theme-ui one (https://theme-ui.com/prism/#theme-ui-colors) — you can probably take a look at how that works and extend or create your own prism theme that does exactly what you want. The other built-in prism themes have hard-coded values since they weren't created with Theme UI in mind

[patrick91]

Oh, this is cool! Sorry I didn't notice :) Thanks a lot!

[ahmedelq]

The only prism preset/theme that currently supports color modes is the theme-ui one (https://theme-ui.com/prism/#theme-ui-colors) — you can probably take a look at how that works and extend or create your own prism theme that does exactly what you want. The other built-in prism themes have hard-coded values since they weren't created with Theme UI in mind

The link is broken... Any other way to switch prisms presets without using theme-ui?

[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.

[ahmedelq]

Thank you for your help.
Would love to see a feature that changes CSS as well not only colors.