🎨 Ensure transparent backgrounds for all syntax highlighting elements in both light and dark modes
This commit is contained in:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user