Merge pull request #22 from SMEDjs/main

Make dark mode better

Author: Furtif

src/views/css/style.css

@@ -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 */