Add screenshot for improve install experience

app/public/manifest.webmanifest

@@ -12,6 +12,29 @@
   "start_url": "./",
   "categories": ["tools"],
   "edge_side_panel": {},
+  "screenshots": [
+    {
+      "src": "icons/ariton-screenshot-01.png",
+      "sizes": "1189x733",
+      "type": "image/png",
+      "form_factor": "wide",
+      "label": "Community Discovery screen"
+    },
+    {
+      "src": "icons/ariton-screenshot-02.png",
+      "sizes": "966x414",
+      "type": "image/png",
+      "form_factor": "wide",
+      "label": "Open standards"
+    },
+    {
+      "src": "icons/ariton-screenshot-03.png",
+      "sizes": "1298x644",
+      "type": "image/png",
+      "form_factor": "wide",
+      "label": "Freedom to Connect, Power to Own"
+    }
+  ],
   "icons": [
     {
       "src": "icons/icon-72x72.png",

app/src/index.html

@@ -23,6 +23,10 @@
   <link rel="manifest" href="manifest.webmanifest" />
   <meta name="theme-color" content="#63A002" />
 
+  <!-- figure out theme color for dark / light -->
+  <!--<meta name="theme-color" media="(prefers-color-scheme: light)" content="white">
+  <meta name="theme-color" media="(prefers-color-scheme: dark)"  content="black">-->
+
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>