web/index.html

@@ -4,7 +4,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
     <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data: blob:; connect-src 'self' ws: wss:; object-src 'none'; base-uri 'none'; frame-ancestors 'none'">
-    <meta name="theme-color" content="#007acc">
+    <meta name="theme-color" content="#15161a" media="(prefers-color-scheme: dark)">
+    <meta name="theme-color" content="#eceef4" media="(prefers-color-scheme: light)">
     <meta name="description" content="Remote macro control for your desktop">
 
     <!-- PWA / iOS specific -->
@@ -13,7 +14,7 @@
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
     <meta name="apple-mobile-web-app-title" content="MacroPad">
     <meta name="application-name" content="MacroPad">
-    <meta name="msapplication-TileColor" content="#007acc">
+    <meta name="msapplication-TileColor" content="#7c5cff">
     <meta name="msapplication-tap-highlight" content="no">
 
     <title>MacroPad</title>

web/manifest.json

@@ -6,9 +6,10 @@
     "start_url": "/",
     "scope": "/",
     "display": "standalone",
-    "background_color": "#2e2e2e",
-    "theme_color": "#007acc",
+    "background_color": "#15161a",
+    "theme_color": "#7c5cff",
     "orientation": "any",
+    "//": "Maskable icons ideally need ~10% transparent padding so they aren't cropped inside the platform safe zone; the current PNGs are reused as-is without new art.",
     "icons": [
         {
             "src": "/static/icons/icon-192.png",