awatertrevi/xamarin-neo4j
1
0
Fork 0
mirror of https://github.com/awatertrevi/xamarin-neo4j.git synced 2026-09-22 09:05:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

Design: improve JSON view readability with app-consistent theme colors

Browse Source 
- Replace hardcoded VS Code-like muted colors with CSS variables
- Use app theme palette for backgrounds, text, strings, numbers, keys
- Add font-weight to keys, increase font size and line-height
- Increase bracket/comma opacity for better readability
- Dynamic theme switching via setTheme() updates all new variables

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Gerwin Kuijntjes
2026-04-02 11:51:18 +02:00
parent 35e81a8cb9
commit 9fde77ca67
2 changed files with 29 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
Xamarin.Neo4j/Xamarin.Neo4j/Xamarin.Neo4j/Pages/TablePage.xaml.cs
View File

@@ -76,12 +76,18 @@ namespace Xamarin.Neo4j.Pages
var isDark = Application.Current.RequestedTheme == AppTheme.Dark;
html = html.Replace("{{json}}", json);
html = html.Replace("{{backgroundColor}}", isDark ? "#1e1e1e" : "#ffffff");
html = html.Replace("{{textColor}}", isDark ? "#d4d4d4" : "#1a1a1a");
html = html.Replace("{{toolbarBg}}", isDark ? "#252526" : "#f5f5f5");
html = html.Replace("{{inputBg}}", isDark ? "#3c3c3c" : "#ffffff");
html = html.Replace("{{borderColor}}", isDark ? "#454545" : "#cccccc");
html = html.Replace("{{mutedColor}}", isDark ? "#808080" : "#8a8a8a");
html = html.Replace("{{backgroundColor}}", isDark ? "#0c0c0c" : "#f5f5f5");
html = html.Replace("{{textColor}}", isDark ? "#e2e2e2" : "#0c0c0c");
html = html.Replace("{{toolbarBg}}", isDark ? "#141414" : "#ffffff");
html = html.Replace("{{inputBg}}", isDark ? "#1a1a1a" : "#ffffff");
html = html.Replace("{{borderColor}}", isDark ? "#2a2a2a" : "#e0e0e0");
html = html.Replace("{{mutedColor}}", isDark ? "#868686" : "#868a92");
html = html.Replace("{{stringColor}}", isDark ? "#8BC34A" : "#2E7D32");
html = html.Replace("{{numberColor}}", isDark ? "#64B5F6" : "#1565C0");
html = html.Replace("{{boolColor}}", isDark ? "#FFB74D" : "#E65100");
html = html.Replace("{{nullColor}}", isDark ? "#868686" : "#868a92");
html = html.Replace("{{keyColor}}", isDark ? "#e2e2e2" : "#0c0c0c");
html = html.Replace("{{errorColor}}", isDark ? "#ff6b6b" : "#c62828");
return html;
}
}

28
Xamarin.Neo4j/Xamarin.Neo4j/Xamarin.Neo4j/Visualization/jsonview.html
View File

@@ -3,9 +3,9 @@
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<style>
:root{--bg:{{backgroundColor}};--fg:{{textColor}};--toolbar:{{toolbarBg}};--input:{{inputBg}};--border:{{borderColor}};--muted:{{mutedColor}}}
:root{--bg:{{backgroundColor}};--fg:{{textColor}};--toolbar:{{toolbarBg}};--input:{{inputBg}};--border:{{borderColor}};--muted:{{mutedColor}};--str:{{stringColor}};--num:{{numberColor}};--bool:{{boolColor}};--nul:{{nullColor}};--key:{{keyColor}};--err:{{errorColor}}}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body{font-family:'Courier New',monospace;font-size:13px;background:var(--bg);color:var(--fg);overscroll-behavior:none}
body{font-family:'Courier New',monospace;font-size:14px;line-height:1.5;background:var(--bg);color:var(--fg);overscroll-behavior:none}
#toolbar{position:sticky;top:0;z-index:10;background:var(--toolbar);padding:8px;display:flex;flex-direction:column;gap:6px;border-bottom:1px solid var(--border)}
#toolbar input{width:100%;padding:7px 10px;border:1px solid var(--border);border-radius:6px;background:var(--input);color:var(--fg);font-family:inherit;font-size:13px;outline:none;-webkit-appearance:none}
#toolbar-row2{display:flex;gap:6px;align-items:center}
@@ -14,8 +14,8 @@ body{font-family:'Courier New',monospace;font-size:13px;background:var(--bg);col
.tbtn:active{opacity:.7}
#status{font-size:11px;color:var(--muted);padding:0 2px;min-height:15px}
#output{padding:10px}
.s{color:#4CAF50}.n{color:#64B5F6}.b{color:#FFB74D}.nl{color:#90A4AE}.k{color:#EF9A9A}.e{color:#EF5350}
.br{color:var(--fg);opacity:.7}.cm{color:var(--fg);opacity:.4}
.s{color:var(--str)}.n{color:var(--num)}.b{color:var(--bool)}.nl{color:var(--nul)}.k{color:var(--key);font-weight:600}.e{color:var(--err)}
.br{color:var(--fg);opacity:.85}.cm{color:var(--fg);opacity:.5}
/* Block-based tree nodes */
.node,.knode{display:block}
.nhd{display:block;cursor:default}
@@ -154,13 +154,19 @@ function count(v){
function setTheme(isDark){
const r=document.documentElement.style;
r.setProperty('--bg',isDark?'#1e1e1e':'#ffffff');
r.setProperty('--fg',isDark?'#d4d4d4':'#1a1a1a');
r.setProperty('--toolbar',isDark?'#252526':'#f5f5f5');
r.setProperty('--input',isDark?'#3c3c3c':'#ffffff');
r.setProperty('--border',isDark?'#454545':'#cccccc');
r.setProperty('--muted',isDark?'#808080':'#8a8a8a');
document.body.style.background=isDark?'#1e1e1e':'#ffffff';
r.setProperty('--bg',isDark?'#0c0c0c':'#f5f5f5');
r.setProperty('--fg',isDark?'#e2e2e2':'#0c0c0c');
r.setProperty('--toolbar',isDark?'#141414':'#ffffff');
r.setProperty('--input',isDark?'#1a1a1a':'#ffffff');
r.setProperty('--border',isDark?'#2a2a2a':'#e0e0e0');
r.setProperty('--muted',isDark?'#868686':'#868a92');
r.setProperty('--str',isDark?'#8BC34A':'#2E7D32');
r.setProperty('--num',isDark?'#64B5F6':'#1565C0');
r.setProperty('--bool',isDark?'#FFB74D':'#E65100');
r.setProperty('--nul',isDark?'#868686':'#868a92');
r.setProperty('--key',isDark?'#e2e2e2':'#0c0c0c');
r.setProperty('--err',isDark?'#ff6b6b':'#c62828');
document.body.style.background=isDark?'#0c0c0c':'#f5f5f5';
}
document.getElementById('srch').addEventListener('input',function(){srch=this.value.trim().toLowerCase();render()});