Skip to content

Commit 3b95024

Browse files
FurtifFurtif
committed
dark mode json viewer restyle (force)
1 parent 24b8b2d commit 3b95024

1 file changed

Lines changed: 208 additions & 0 deletions

File tree

‎src/views/css/style.css‎

Lines changed: 208 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -230,4 +230,212 @@ table tr td.important {
230230
font-size: 12px !important;
231231
padding: 5px 10px !important;
232232
}
233+
}
234+
235+
/* ================================
236+
DARK MODE - JSON VIEWER COMPLETE RESTYLE
237+
================================ */
238+
239+
/* Main containers */
240+
.dark .method-data-incoming,
241+
.dark .method-data-outgoing {
242+
background-color: #0f0f1e !important;
243+
color: #f5f5f5 !important;
244+
border: 1px solid #333 !important;
245+
border-radius: 4px !important;
246+
padding: 12px !important;
247+
}
248+
249+
.dark pre {
250+
background-color: #0f0f1e !important;
251+
color: #f5f5f5 !important;
252+
border: 1px solid #333 !important;
253+
}
254+
255+
/* JSON Viewer Container */
256+
.dark .jv-container {
257+
background-color: #0f0f1e !important;
258+
color: #f5f5f5 !important;
259+
}
260+
261+
/* Reset all child elements */
262+
.dark .jv-container,
263+
.dark .jv-container * {
264+
background-color: transparent !important;
265+
}
266+
267+
/* Element text */
268+
.dark .jv-element {
269+
color: #f5f5f5 !important;
270+
}
271+
272+
/* Keys (property names) - Cyan */
273+
.dark .jv-key {
274+
color: #56d4dd !important;
275+
font-weight: 600 !important;
276+
}
277+
278+
/* String values - Green */
279+
.dark .jv-string {
280+
color: #81c784 !important;
281+
}
282+
283+
/* Number values - Orange/Yellow */
284+
.dark .jv-number {
285+
color: #ffb74d !important;
286+
}
287+
288+
/* Boolean values - Pink/Red */
289+
.dark .jv-boolean {
290+
color: #ff6b7a !important;
291+
font-weight: 600 !important;
292+
}
293+
294+
/* Null values - Gray */
295+
.dark .jv-null {
296+
color: #9e9e9e !important;
297+
font-style: italic !important;
298+
}
299+
300+
/* Object and Array brackets */
301+
.dark .jv-object,
302+
.dark .jv-array {
303+
color: #f5f5f5 !important;
304+
}
305+
306+
/* Punctuation (colons, commas, brackets) */
307+
.dark .jv-collon,
308+
.dark .jv-comma {
309+
color: #bdbdbd !important;
310+
}
311+
312+
/* Collapsed/Expandable objects */
313+
.dark .jv-button {
314+
background-color: transparent !important;
315+
color: #56d4dd !important;
316+
border: 1px solid #56d4dd !important;
317+
cursor: pointer !important;
318+
}
319+
320+
.dark .jv-button:hover {
321+
background-color: rgba(86, 212, 221, 0.2) !important;
322+
}
323+
324+
/* Indent guides */
325+
.dark .jv-indent {
326+
background-color: transparent !important;
327+
}
328+
329+
/* Property value pairs */
330+
.dark .jv-element-label {
331+
color: #b0bec5 !important;
332+
}
333+
334+
/* Expandable items count */
335+
.dark .jv-count {
336+
color: #81c784 !important;
337+
font-style: italic !important;
338+
}
339+
340+
/* Error messages */
341+
.dark .jv-error {
342+
color: #ff6b7a !important;
343+
background-color: rgba(255, 107, 122, 0.1) !important;
344+
}
345+
346+
/* ================================
347+
FORCE OVERRIDE - INLINE STYLES
348+
================================ */
349+
350+
/* Override ALL colors in dark mode JSON viewer */
351+
.dark .method-data-incoming *,
352+
.dark .method-data-outgoing * {
353+
color: inherit !important;
354+
background-color: transparent !important;
355+
}
356+
357+
/* Force all spans inside jv-container to not be blue */
358+
.dark .jv-container span {
359+
color: inherit;
360+
}
361+
362+
/* Brute force - override every text element */
363+
.dark .jv-container span,
364+
.dark .jv-container b,
365+
.dark .jv-container strong,
366+
.dark .jv-container em,
367+
.dark .jv-container i {
368+
color: #f5f5f5 !important;
369+
background: transparent !important;
370+
}
371+
372+
/* Specific styling for each type using class selectors */
373+
.dark span.jv-boolean {
374+
color: #ff6b7a !important;
375+
font-weight: 600 !important;
376+
}
377+
378+
.dark span.jv-key {
379+
color: #56d4dd !important;
380+
}
381+
382+
.dark span.jv-string {
383+
color: #81c784 !important;
384+
}
385+
386+
.dark span.jv-number {
387+
color: #ffb74d !important;
388+
}
389+
390+
.dark span.jv-null {
391+
color: #9e9e9e !important;
392+
}
393+
394+
/* Override inline color styles with attribute selectors */
395+
.dark [style*="color: rgb"],
396+
.dark [style*="color:#"],
397+
.dark [style*="color: #"] {
398+
color: #faf4f4 !important;
399+
}
400+
401+
/* Specific override for blue values that might appear */
402+
.dark [style*="2196F3"],
403+
.dark [style*="0066cc"] {
404+
color: #ff6b7a !important;
405+
}
406+
407+
/* Modal dark mode text */
408+
.dark .modal-body pre,
409+
.dark .modal-body .jv-container {
410+
background-color: #0f0f1e !important;
411+
color: #f5f5f5 !important;
412+
}
413+
414+
.dark .modal-body {
415+
background-color: var(--background-color) !important;
416+
color: var(--black-color) !important;
417+
}
418+
419+
.dark .modal-body pre {
420+
background-color: #0f0f1e !important;
421+
color: #f5f5f5 !important;
422+
}
423+
424+
.dark .modal-body pre * {
425+
color: inherit !important;
426+
background: transparent !important;
427+
}
428+
429+
/* Modal content dark mode */
430+
.dark .modal-content {
431+
background-color: var(--background-color) !important;
432+
border: 1px solid rgba(255, 255, 255, 0.2) !important;
433+
}
434+
435+
.dark .modal-header {
436+
border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
437+
}
438+
439+
.dark .modal-footer {
440+
border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
233441
}

0 commit comments

Comments
 (0)