Skip to content

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Apply dark theme to prisms #436

Closed
patrick91 opened this issue Nov 4, 2019 · 5 comments
Closed

Apply dark theme to prisms #436

patrick91 opened this issue Nov 4, 2019 · 5 comments

Comments

@patrick91
Copy link
Contributor

patrick91 commented Nov 4, 2019

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
Copy link
Member

jxnblk commented Nov 4, 2019

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
Copy link
Contributor Author

patrick91 commented Nov 5, 2019

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

@ahmedelq
Copy link

ahmedelq commented Feb 22, 2021

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
Copy link
Member

lachlanjc commented Feb 22, 2021

@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
Copy link

ahmedelq commented Feb 23, 2021

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

@system-ui system-ui locked and limited conversation to collaborators Feb 23, 2021

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants