🎨 Ensure transparent backgrounds for all syntax highlighting elements in both light and dark modes

This commit is contained in:
2026-01-29 04:56:48 +00:00
parent 4952bc7649
commit d755e77c44

View File

@@ -692,6 +692,15 @@ onMounted(async () => {
padding: 0 !important;
}
/* Override ALL possible highlight.js classes with transparent backgrounds */
.content-viewer:not(.dark-mode) .line * {
background: transparent !important;
}
.content-viewer.dark-mode .line * {
background: transparent !important;
}
/* Light mode syntax highlighting - high contrast colors */
.content-viewer:not(.dark-mode) .line pre code {
background-color: transparent !important;
@@ -701,32 +710,38 @@ onMounted(async () => {
.content-viewer:not(.dark-mode) .hljs {
background: transparent !important;
color: #24292e !important;
display: inline !important;
}
.content-viewer:not(.dark-mode) .hljs-attr,
.content-viewer:not(.dark-mode) .hljs-attribute {
color: #6f42c1 !important;
font-weight: 600;
background: transparent !important;
}
.content-viewer:not(.dark-mode) .hljs-string {
color: #032f62 !important;
font-weight: 500;
background: transparent !important;
}
.content-viewer:not(.dark-mode) .hljs-number {
color: #005a9c !important;
font-weight: 600;
background: transparent !important;
}
.content-viewer:not(.dark-mode) .hljs-literal {
color: #d73a49 !important;
font-weight: 600;
background: transparent !important;
}
.content-viewer:not(.dark-mode) .hljs-name {
color: #24292e !important;
font-weight: 600;
background: transparent !important;
}
/* Dark mode syntax highlighting */
@@ -738,23 +753,28 @@ onMounted(async () => {
.content-viewer.dark-mode .hljs {
background: transparent !important;
color: #e1e4e8 !important;
display: inline !important;
}
.content-viewer.dark-mode .hljs-attr,
.content-viewer.dark-mode .hljs-attribute {
color: #79b8ff !important;
background: transparent !important;
}
.content-viewer.dark-mode .hljs-string {
color: #85e89d !important;
background: transparent !important;
}
.content-viewer.dark-mode .hljs-number {
color: #79b8ff !important;
background: transparent !important;
}
.content-viewer.dark-mode .hljs-literal {
color: #f97583 !important;
background: transparent !important;
}
.line-wrap .line pre {