diff --git a/src/components/Markdown/Markdown.css b/src/components/Markdown/Markdown.css index 902ba1f8ecd4..0f20908eab53 100644 --- a/src/components/Markdown/Markdown.css +++ b/src/components/Markdown/Markdown.css @@ -371,3 +371,85 @@ @apply mt-[1.5em]; } } + +.dark .markdown h1, +.dark .markdown h2, +.dark .markdown h3, +.dark .markdown h4, +.dark .markdown h5, +.dark .markdown h6 { + @apply text-dark-heading; +} + +.dark .markdown code, +.dark .markdown tt { + text-shadow: none; + @apply bg-dark-code-inline-bg; +} + +.dark .markdown blockquote { + @apply border-l-dark-section-border text-dark-muted; +} + +.dark .markdown blockquote.tip { + @apply bg-dark-aside-tip-bg text-dark-aside-tip-text; +} + +.dark .markdown blockquote.warning { + @apply bg-dark-aside-warning-bg text-dark-aside-warning-text; +} + +.dark .markdown blockquote.todo { + @apply bg-dark-aside-todo-bg text-dark-aside-todo-text; +} + +.dark .markdown hr { + @apply bg-dark-section-border; +} + +.dark .markdown th { + @apply bg-dark-bg border-dark-border; +} + +.dark .markdown tr, +.dark .markdown tr:last-child { + @apply border-dark-border; +} + +.dark .markdown tr:nth-child(2n) { + @apply bg-dark-surface; +} + +.dark .markdown td { + @apply border-dark-border; +} + +.dark .markdown pre { + @apply bg-dark-code-bg; +} + +.dark .markdown pre code { + @apply bg-transparent; +} + +.dark .markdown a code { + @apply text-dark-link; +} + +.dark .markdown a code:hover { + @apply text-dark-link-hover; +} + +.dark .markdown aside.tip, +.dark .markdown aside.warning, +.dark .markdown aside.preview, +.dark .markdown aside.todo { + @apply bg-dark-surface-2 text-white; +} + +.dark .markdown aside.tip > .tip__prefix, +.dark .markdown aside.warning > .warning__prefix, +.dark .markdown aside.preview > .preview__prefix, +.dark .markdown aside.todo > .todo__prefix { + @apply text-white; +} diff --git a/src/styles/dark.css b/src/styles/dark.css index 9bb6041dbdc6..2a596145734b 100644 --- a/src/styles/dark.css +++ b/src/styles/dark.css @@ -9,90 +9,6 @@ @apply bg-dark-surface; } - .markdown { - h1, - h2, - h3, - h4, - h5, - h6 { - @apply text-dark-heading; - } - - code, - tt { - text-shadow: none; - @apply bg-dark-code-inline-bg; - } - - blockquote { - @apply border-l-dark-section-border text-dark-muted; - } - - blockquote.tip { - @apply bg-dark-aside-tip-bg text-dark-aside-tip-text; - } - - blockquote.warning { - @apply bg-dark-aside-warning-bg text-dark-aside-warning-text; - } - - blockquote.todo { - @apply bg-dark-aside-todo-bg text-dark-aside-todo-text; - } - - hr { - @apply bg-dark-section-border; - } - - th { - @apply bg-dark-bg border-dark-border; - } - - tr, - tr:last-child { - @apply border-dark-border; - } - - tr:nth-child(2n) { - @apply bg-dark-surface; - } - - td { - @apply border-dark-border; - } - - pre { - @apply bg-dark-code-bg; - - code { - @apply bg-transparent; - } - } - - a code { - @apply text-dark-link; - - &:hover { - @apply text-dark-link-hover; - } - } - - aside.tip, - aside.warning, - aside.preview, - aside.todo { - @apply bg-dark-surface-2 text-white; - } - - aside.tip > .tip__prefix, - aside.warning > .warning__prefix, - aside.preview > .preview__prefix, - aside.todo > .todo__prefix { - @apply text-white; - } - } - .gitter__button { @apply bg-[#1c3b39]; }