fragginwagon/memory-infrastructure-palace
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Greg Jacobs
2026-01-29 04:56:48 +00:00
parent 4952bc7649
commit d755e77c44
1 changed files with 20 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
code/websites/pokedex.online/src/views/GamemasterExplorer.vue
View File

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