first

frontend/public/favicon/favicon.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+  <rect width="128" height="128" rx="24" fill="#272822"/>
+  <circle cx="64" cy="64" r="8" fill="#a6e22e"/>
+  <path d="M24 64c0-22.1 17.9-40 40-40" fill="none" stroke="#66d9ef" stroke-width="8" stroke-linecap="round"/>
+  <path d="M104 64c0-22.1-17.9-40-40-40" fill="none" stroke="#f92672" stroke-width="8" stroke-linecap="round"/>
+  <path d="M24 64c0 22.1 17.9 40 40 40" fill="none" stroke="#e6db74" stroke-width="8" stroke-linecap="round"/>
+  <path d="M104 64c0 22.1-17.9 40-40 40" fill="none" stroke="#ae81ff" stroke-width="8" stroke-linecap="round"/>
+</svg>

frontend/public/site.webmanifest

@@ -0,0 +1,12 @@
+{
+  "name": "MQTT Web Explorer",
+  "short_name": "MQTT Explorer",
+  "icons": [
+    {"src": "/favicon/favicon-16.png", "sizes": "16x16", "type": "image/png"},
+    {"src": "/favicon/favicon-32.png", "sizes": "32x32", "type": "image/png"},
+    {"src": "/favicon/apple-touch-icon.png", "sizes": "180x180", "type": "image/png"}
+  ],
+  "theme_color": "#272822",
+  "background_color": "#272822",
+  "display": "standalone"
+}

frontend/public/themes/theme-dark-monokai.css

@@ -0,0 +1,25 @@
+:root {
+  --bg-main: #272822;
+  --bg-panel: #1e1f1c;
+  --bg-code: #141411;
+  --border: #49483e;
+  --text-main: #f8f8f2;
+  --text-secondary: #e0e0d8;
+  --text-muted: #75715e;
+  --accent-blue: #66d9ef;
+  --accent-green: #a6e22e;
+  --accent-yellow: #e6db74;
+  --accent-orange: #fd971f;
+  --accent-red: #f92672;
+  --accent-purple: #ae81ff;
+  --json-key: #66d9ef;
+  --json-string: #e6db74;
+  --json-number: #a6e22e;
+  --json-boolean: #ae81ff;
+  --json-null: #f92672;
+  --tree-guide: #49483e;
+  --selected-bg: #3e3d32;
+  --hover-bg: #34342f;
+  --focus-ring: #66d9ef;
+  --icon: #f8f8f2;
+}

frontend/public/themes/theme-light.css

@@ -0,0 +1,25 @@
+:root {
+  --bg-main: #f8f9fa;
+  --bg-panel: #ffffff;
+  --bg-code: #e9ecef;
+  --border: #dee2e6;
+  --text-main: #212529;
+  --text-secondary: #343a40;
+  --text-muted: #6c757d;
+  --accent-blue: #007bff;
+  --accent-green: #28a745;
+  --accent-yellow: #ffc107;
+  --accent-orange: #fd7e14;
+  --accent-red: #dc3545;
+  --accent-purple: #6f42c1;
+  --json-key: #007bff;
+  --json-string: #ffc107;
+  --json-number: #28a745;
+  --json-boolean: #6f42c1;
+  --json-null: #dc3545;
+  --tree-guide: #dee2e6;
+  --selected-bg: #e9ecef;
+  --hover-bg: #f1f3f5;
+  --focus-ring: #007bff;
+  --icon: #212529;
+}