困った話
Next.jsで書いた僕のサイト。ダークモードに対応していないことがわかり、
各種テキストはdark:text-whiteで済みました。しかし...
ReactMarkdownのテキストカラーが変わらない！！
div.prose-lg > ReactMarkdownという構成だったので、
divにdark:text-whiteを適用しても色が変わらないという問題が発生しました。
ちょっと検索すると、prose-invertを組み合わせるといいらしいので、
やってみました。
<div className="prose-invert prose-p:dark:text-white prose-li:dark:text-white">
{...}
</div>
これで一件落着かと思いきや、リンクが青から白に上書きされていることに気づきました！
危ない危ない...
ということで、prose-a:dark:text-blue-500も追加。
結論
- ReactMarkdown、扱いがむずい
- バグの修正がバグを生むことって多いよね
最後まで読んでいただきありがとうございます！