svelte-markdown
svelte-markdown copied to clipboard
How to change font color
I have a dark theme website right now, but when I try and use <Markdown source={markdownContent}/> everything is dark text on my dark background. If I try and add a tailwind class of text-gray-100, then it changes most of the text, but none of the heading or the code blocks. Any way to fix this?
Here is an example how to change the text color on the default text. You will need to adapt it to add the correct classes based on where you get the theme from:
<!-- $lib/Text.svelte -->
<span><slot /></span>
<style>
span {
color: red; /* Use a CSS var or add classes depending on some context instead */
}
</style>
Then configure it in the library:
<script>
import Text from '$lib/Text.svelte';
</script>
<SvelteMarkdown
source={"Hello world"}
renderers={{
text: Text
}}
/>