Fix Decap CMS preview pane dark mode text colors
Added specific rules for Preview pane elements to ensure rendered markdown is readable on dark background. Chronicler #66
This commit is contained in:
@@ -318,6 +318,57 @@
|
||||
background: var(--ff-frost);
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
PREVIEW PANE - Rendered Markdown
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
|
||||
[class*="Preview"],
|
||||
[class*="preview"],
|
||||
[class*="WidgetPreview"],
|
||||
[class*="PreviewPane"],
|
||||
[class*="frame-content"] {
|
||||
background: var(--ff-dark) !important;
|
||||
color: var(--ff-text) !important;
|
||||
}
|
||||
|
||||
[class*="Preview"] *,
|
||||
[class*="preview"] *,
|
||||
[class*="PreviewPane"] *,
|
||||
[class*="WidgetPreview"] *,
|
||||
[class*="frame-content"] * {
|
||||
color: var(--ff-text) !important;
|
||||
}
|
||||
|
||||
[class*="Preview"] h1,
|
||||
[class*="Preview"] h2,
|
||||
[class*="Preview"] h3,
|
||||
[class*="Preview"] h4,
|
||||
[class*="Preview"] h5,
|
||||
[class*="Preview"] h6 {
|
||||
color: var(--ff-frost) !important;
|
||||
}
|
||||
|
||||
[class*="Preview"] a {
|
||||
color: var(--ff-fire) !important;
|
||||
}
|
||||
|
||||
[class*="Preview"] code,
|
||||
[class*="Preview"] pre {
|
||||
background: var(--ff-dark-light) !important;
|
||||
color: var(--ff-frost) !important;
|
||||
}
|
||||
|
||||
[class*="Preview"] blockquote {
|
||||
border-left: 3px solid var(--ff-arcane) !important;
|
||||
color: var(--ff-text-dim) !important;
|
||||
}
|
||||
|
||||
/* iframe preview if Decap uses one */
|
||||
iframe[class*="preview"],
|
||||
iframe[class*="Preview"] {
|
||||
background: var(--ff-dark) !important;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
MISC
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
|
||||
Reference in New Issue
Block a user