How do I change the theme of the displayed content?

[B35000]

Hi, im using react-markdown to display markdown content and wanted to display content in a dark mode theme. Is there a general setting that i can use?

[remcohaszing]

react-markdown only renders the HTML. You can style it yourself with CSS, including dark mode support.

[B35000]

Thanks for responding! could you give me an example on how to accomplish this? The docs dont show how to add styling. Is it styled like any other component like this:

<Markdown style={{padding:'5px 10px 5px 10px', 'background-color':'#F1F1F1'}}>
 'Hello world'
</Markdown>

[ChristianMurphy]

There is Semantic HTML. Style the elements.
You can use GitHubs theme if you like it https://github.com/sindresorhus/github-markdown-css
If you're into tailwind use prose https://github.com/tailwindlabs/tailwindcss-typography

And if you want something custom for your app, write plain old CSS https://developer.mozilla.org/en-US/docs/Web/CSS

[B35000]

thanks so much for the response. For future reference, this is what worked for me:
From the example I set in the response

<Markdown components={{
 p: ({ node, ...props }) => <p style={{ color: '#F1F1F1' }} {...props} />
 h1: ({ node, ...props }) => <h1 style={{ color: '#F1F1F1' }} {...props} />
 h2: ({ node, ...props }) => <h2 style={{ color: '#F1F1F1' }} {...props} />
}}
>
 'Hello world'
</Markdown>

In this case for each element that is set to be rendered (I've only given the example of the 'p', 'h1' and 'h2' html elements)

[ChristianMurphy]

I'd recommend not overriding every HTML element with new react elements.

1. It breaks separation of concerns. Style should be in CSS and logic in JS
2. It makes styles incredibly difficult to override, inline styles have some of the highest selector precedence
3. It can be done more concisely with plain css.
4. Defining the components inline will force react to rerender everything if any content changes

You can do the same thing with a CSS file

p {
  color: #f1f1f1;
}

h1 {
  color: #f1f1f1;
}

h2 {
  color: #f1f1f1;
}

And if you need to scope the styles to only the markdown block wrap the content in a .markdown class and add that to the start of the selector