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

🎨 Enhance dark mode and syntax highlighting styles for JSON viewer

Browse Source
This commit is contained in:
Greg Jacobs
2026-01-29 04:57:59 +00:00
parent d755e77c44
commit d75c52c93e
1 changed files with 123 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
code/websites/pokedex.online/src/components/gamemaster/JsonViewer.vue
View File

@@ -151,7 +151,7 @@ defineExpose({
.content-viewer { .content-viewer {
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 8px; border-radius: 8px;
background: #fafafa; background: #ffffff;
max-height: 70vh; max-height: 70vh;
overflow: hidden; overflow: hidden;
} }
@@ -170,6 +170,12 @@ defineExpose({
.lines-container { .lines-container {
max-height: 65vh; max-height: 65vh;
overflow-y: auto; overflow-y: auto;
background: #ffffff;
}
.content-viewer.dark-mode .scroller,
.content-viewer.dark-mode .lines-container {
background: #1e1e1e;
} }
.line { .line {
@@ -178,18 +184,36 @@ defineExpose({
padding: 2px 8px; padding: 2px 8px;
font-size: 13px; font-size: 13px;
cursor: pointer; cursor: pointer;
background: #ffffff !important;
}
.content-viewer.dark-mode .line {
background: #1e1e1e !important;
} }
.line.selected { .line.selected {
background: rgba(0, 123, 255, 0.15); background: rgba(102, 126, 234, 0.15) !important;
}
.content-viewer.dark-mode .line.selected {
background: rgba(102, 126, 234, 0.25) !important;
} }
.line.highlight-match { .line.highlight-match {
background: rgba(255, 234, 0, 0.2); background: rgba(255, 234, 0, 0.25) !important;
}
.content-viewer.dark-mode .line.highlight-match {
background: rgba(255, 234, 0, 0.15) !important;
} }
.line.current-result { .line.current-result {
outline: 1px solid #ff9800; outline: 2px solid #ff9800;
background: rgba(255, 193, 7, 0.3) !important;
}
.content-viewer.dark-mode .line.current-result {
background: rgba(255, 193, 7, 0.2) !important;
} }
.line-number { .line-number {
@@ -197,8 +221,103 @@ defineExpose({
text-align: right; text-align: right;
color: #999; color: #999;
user-select: none; user-select: none;
flex-shrink: 0;
} }
.content-viewer.dark-mode .line-number {
color: #666;
}
/* Force transparent backgrounds on all elements inside lines */
.line * {
background: transparent !important;
}
.line pre {
margin: 0;
background: transparent !important;
color: inherit;
}
.line pre code {
background: transparent !important;
color: inherit;
padding: 0 !important;
}
/* Light mode syntax highlighting */
.content-viewer:not(.dark-mode) .line pre code {
color: #24292e !important;
}
.content-viewer:not(.dark-mode) :deep(.hljs) {
background: transparent !important;
color: #24292e !important;
}
.content-viewer:not(.dark-mode) :deep(.hljs-attr),
.content-viewer:not(.dark-mode) :deep(.hljs-attribute) {
color: #6f42c1 !important;
background: transparent !important;
}
.content-viewer:not(.dark-mode) :deep(.hljs-string) {
color: #032f62 !important;
background: transparent !important;
}
.content-viewer:not(.dark-mode) :deep(.hljs-number) {
color: #005a9c !important;
background: transparent !important;
}
.content-viewer:not(.dark-mode) :deep(.hljs-literal) {
color: #d73a49 !important;
background: transparent !important;
}
/* Dark mode syntax highlighting */
.content-viewer.dark-mode :deep(.hljs) {
background: transparent !important;
color: #e1e4e8 !important;
}
.content-viewer.dark-mode :deep(.hljs-attr),
.content-viewer.dark-mode :deep(.hljs-attribute) {
color: #79b8ff !important;
background: transparent !important;
}
.content-viewer.dark-mode :deep(.hljs-string) {
color: #85e89d !important;
background: transparent !important;
}
.content-viewer.dark-mode :deep(.hljs-number) {
color: #79b8ff !important;
background: transparent !important;
}
.content-viewer.dark-mode :deep(.hljs-literal) {
color: #f97583 !important;
background: transparent !important;
}
.warning-banner {
background: #fff3cd;
border-top: 1px solid #ffc107;
color: #856404;
padding: 12px;
text-align: center;
font-weight: 600;
}
.content-viewer.dark-mode .warning-banner {
background: #3d3400;
color: #ffeb3b;
border-color: #ffc107;
}
</style>
.warning-banner { .warning-banner {
padding: 8px 10px; padding: 8px 10px;
font-size: 13px; font-size: 13px;