wip

app/static/css/app.css

@@ -1,22 +1,38 @@
 /* Custom styles for the app */
 :root {
-    --background-color: #f5f8fa;
-    --text-color: #333;
-    --card-bg: #fff;
-    --border-color: #e3e8ee;
-    --sidebar-bg: #f0f2f5;
-    --sidebar-hover-bg: #e0e5ee;
-    --highlight-color: #3b82f6;
+    /* Light mode (default) variables - Github inspired */
+    --background-color: #f6f8fa;
+    --text-color: #24292f;
+    --card-bg: #ffffff;
+    --border-color: #d0d7de;
+    --sidebar-bg: #f6f8fa;
+    --sidebar-hover-bg: #eaeef2;
+    --highlight-color: #0969da;
+
+    /* Markdown specific colors for light mode */
+    --markdown-bg: #ffffff;
+    --markdown-text: #24292f;
+    --markdown-code-bg: #f6f8fa;
+    --markdown-border: #d0d7de;
+    --markdown-table-header: #f6f8fa;
 }
 
 [data-bs-theme="dark"] {
-    --background-color: #1a2234;
-    --text-color: #e6e8eb;
-    --card-bg: #24304d;
-    --border-color: #374564;
-    --sidebar-bg: #151a27;
-    --sidebar-hover-bg: #1c2133;
-    --highlight-color: #3f8cff;
+    /* Dark mode variables - Github dark inspired */
+    --background-color: #0d1117;
+    --text-color: #c9d1d9;
+    --card-bg: #161b22;
+    --border-color: #30363d;
+    --sidebar-bg: #010409;
+    --sidebar-hover-bg: #161b22;
+    --highlight-color: #58a6ff;
+
+    /* Markdown specific colors for dark mode */
+    --markdown-bg: #0d1117;
+    --markdown-text: #c9d1d9;
+    --markdown-code-bg: #161b22;
+    --markdown-border: #30363d;
+    --markdown-table-header: #161b22;
 }
 
 body {
@@ -28,27 +44,31 @@ body {
 
 .markdown-body {
     padding: 1rem;
-    background-color: var(--card-bg);
-    border: 1px solid var(--border-color);
+    background-color: var(--markdown-bg);
+    color: var(--markdown-text);
+    border: 1px solid var(--markdown-border);
     border-radius: 4px;
 }
 
 .markdown-body h1 {
     font-size: 1.75rem;
     margin-top: 0;
+    color: var(--markdown-text);
 }
 
 .markdown-body h2 {
     font-size: 1.5rem;
+    color: var(--markdown-text);
 }
 
 .markdown-body h3 {
     font-size: 1.25rem;
+    color: var(--markdown-text);
 }
 
 .markdown-body pre {
-    background-color: #f6f8fa;
-    border-radius: 3px;
+    background-color: var(--markdown-code-bg);
+    border-radius: 6px;
     padding: 16px;
     overflow: auto;
 }
@@ -62,11 +82,11 @@ body {
 .markdown-body th,
 .markdown-body td {
     padding: 8px;
-    border: 1px solid #ddd;
+    border: 1px solid var(--markdown-border);
 }
 
 .markdown-body th {
-    background-color: #f8f9fa;
+    background-color: var(--markdown-table-header);
 }
 
 /* IP Grid for subnet visualization */