svelte-markdown icon indicating copy to clipboard operation
svelte-markdown copied to clipboard

How to change font color

Open StathisKap opened this issue 2 years ago • 1 comments

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?

StathisKap avatar Mar 23 '23 02:03 StathisKap

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
       }}
/>

khromov avatar Jul 09 '23 20:07 khromov