Skip to content

Make dark mode better #22

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Furtif merged 1 commit into from
Apr 1, 2026
+31 −145
Merged

Make dark mode better #22

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
176 changes: 31 additions & 145 deletions src/views/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -233,175 +233,61 @@ table tr td.important {
}

/* ================================
DARK MODE - JSON VIEWER COMPLETE RESTYLE
DARK MODE - JSON VIEWER RESTYLE
(jquery.json-viewer classes)
================================ */

/* Main containers */
/* Container background */
.dark pre.json-document,
.dark .method-data-incoming,
.dark .method-data-outgoing {
background-color: #0f0f1e !important;
color: #f5f5f5 !important;
border: 1px solid #333 !important;
border: 1px solid #2a2a3e !important;
border-radius: 4px !important;
padding: 12px !important;
}

.dark pre {
background-color: #0f0f1e !important;
color: #f5f5f5 !important;
border: 1px solid #333 !important;
}

/* JSON Viewer Container */
.dark .jv-container {
background-color: #0f0f1e !important;
color: #f5f5f5 !important;
}

/* Reset all child elements */
.dark .jv-container,
.dark .jv-container * {
background-color: transparent !important;
}

/* Element text */
.dark .jv-element {
color: #f5f5f5 !important;
}

/* Keys (property names) - Cyan */
.dark .jv-key {
color: #56d4dd !important;
font-weight: 600 !important;
}

/* String values - Green */
.dark .jv-string {
color: #81c784 !important;
}

/* Number values - Orange/Yellow */
.dark .jv-number {
color: #ffb74d !important;
}

/* Boolean values - Pink/Red */
.dark .jv-boolean {
color: #ff6b7a !important;
font-weight: 600 !important;
}

/* Null values - Gray */
.dark .jv-null {
color: #9e9e9e !important;
font-style: italic !important;
}

/* Object and Array brackets */
.dark .jv-object,
.dark .jv-array {
color: #f5f5f5 !important;
/* Keys — plain text inside list items, no class in the library */
.dark .json-document li {
color: #e5c07b !important;
}

/* Punctuation (colons, commas, brackets) */
.dark .jv-collon,
.dark .jv-comma {
color: #bdbdbd !important;
}

/* Collapsed/Expandable objects */
.dark .jv-button {
background-color: transparent !important;
color: #56d4dd !important;
border: 1px solid #56d4dd !important;
cursor: pointer !important;
}

.dark .jv-button:hover {
background-color: rgba(86, 212, 221, 0.2) !important;
}

/* Indent guides */
.dark .jv-indent {
background-color: transparent !important;
}

/* Property value pairs */
.dark .jv-element-label {
color: #b0bec5 !important;
}

/* Expandable items count */
.dark .jv-count {
color: #81c784 !important;
font-style: italic !important;
}

/* Error messages */
.dark .jv-error {
color: #ff6b7a !important;
background-color: rgba(255, 107, 122, 0.1) !important;
}

/* ================================
FORCE OVERRIDE - INLINE STYLES
================================ */

/* Override ALL colors in dark mode JSON viewer */
.dark .method-data-incoming *,
.dark .method-data-outgoing * {
color: inherit !important;
background-color: transparent !important;
}

/* Force all spans inside jv-container to not be blue */
.dark .jv-container span {
color: inherit;
}

/* Brute force - override every text element */
.dark .jv-container span,
.dark .jv-container b,
.dark .jv-container strong,
.dark .jv-container em,
.dark .jv-container i {
color: #f5f5f5 !important;
background: transparent !important;
/* Keys that wrap collapsable objects (anchor tag) */
.dark .json-document a.json-toggle {
color: #e5c07b !important;
}

/* Specific styling for each type using class selectors */
.dark span.jv-boolean {
color: #ff6b7a !important;
font-weight: 600 !important;
/* String values — soft mint green */
.dark .json-document .json-string {
color: #98c379 !important;
}

.dark span.jv-key {
color: #56d4dd !important;
/* Literal values: numbers, booleans, null — coral orange */
.dark .json-document .json-literal {
color: #f78c6c !important;
}

.dark span.jv-string {
color: #81c784 !important;
/* Indent guide lines */
.dark .json-document ul.json-dict,
.dark .json-document ol.json-array {
border-left-color: #2a2a3e !important;
}

.dark span.jv-number {
color: #ffb74d !important;
/* Collapsed item count placeholder */
.dark .json-document a.json-placeholder {
color: #6272a4 !important;
}

.dark span.jv-null {
color: #9e9e9e !important;
.dark .json-document a.json-placeholder:hover {
color: #89b4ca !important;
}

/* Override inline color styles with attribute selectors */
.dark [style*="color: rgb"],
.dark [style*="color:#"],
.dark [style*="color: #"] {
color: #faf4f4 !important;
/* Toggle arrow color */
.dark .json-document a.json-toggle:before {
color: #555577 !important;
}

/* Specific override for blue values that might appear */
.dark [style*="2196F3"],
.dark [style*="0066cc"] {
color: #ff6b7a !important;
.dark .json-document a.json-toggle:hover:before {
color: #e5c07b !important;
}

/* Modal dark mode text */
Expand Down
Loading