Blueprint colours for the starter app

index.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <meta name="theme-color" content="#22c7e2">
+  <meta name="theme-color" content="#0b2a4a">
   <title>My PyDevices App</title>
   <link rel="manifest" href="./manifest.json">
   <link rel="icon" href="./icon-192.png">

manifest.json

@@ -5,8 +5,8 @@
   "start_url": "./index.html",
   "scope": "./",
   "display": "standalone",
-  "background_color": "#080c10",
-  "theme_color": "#22c7e2",
+  "background_color": "#0b2a4a",
+  "theme_color": "#0b2a4a",
   "icons": [
     {"src": "./icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any"},
     {"src": "./icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable"}

style.css

@@ -1,16 +1,16 @@
 :root {
   color-scheme: dark;
   font-family: system-ui, sans-serif;
-  background: #080c10;
-  color: #dfeaf2;
+  background: #0b2a4a;
+  color: #e8f0f8;
 }
 
 body {
   margin: 0;
   min-height: 100vh;
   display: grid;
   place-items: center;
-  background: radial-gradient(circle at top, #16303a, #080c10 58%);
+  background: radial-gradient(circle at top, #1d4f80, #0b2a4a 58%);
 }
 
 main {
@@ -20,7 +20,7 @@ main {
 }
 
 .eyebrow {
-  color: #5edcf0;
+  color: #c4dc4c;
   font-weight: 700;
   letter-spacing: .08em;
   text-transform: uppercase;
@@ -33,7 +33,7 @@ canvas {
   max-width: 100%;
   height: auto;
   margin: 1.5rem auto;
-  border: 1px solid #2f4354;
+  border: 1px solid #2a4f76;
   border-radius: 14px;
   box-shadow: 0 18px 60px #0008;
   touch-action: none;
@@ -86,10 +86,10 @@ output {
   max-width: min(300px, calc(100vw - 24px));
   box-sizing: border-box;
   padding: .7rem .6rem .7rem .9rem;
-  border: 1px solid #2f4354;
+  border: 1px solid #2a4f76;
   border-radius: 12px;
-  background: #102028;
-  color: #dfeaf2;
+  background: #12355a;
+  color: #e8f0f8;
   box-shadow: 0 10px 30px #0009;
   font-size: .9rem;
   line-height: 1.35;
@@ -108,8 +108,8 @@ output {
   width: 12px;
   height: 12px;
   background: inherit;
-  border-left: 1px solid #2f4354;
-  border-top: 1px solid #2f4354;
+  border-left: 1px solid #2a4f76;
+  border-top: 1px solid #2a4f76;
   transform: rotate(45deg);
 }
 
@@ -124,7 +124,7 @@ output {
   padding: 0 .35rem;
   border: 0;
   background: none;
-  color: #8fa6b6;
+  color: #b4c8dc;
   font: inherit;
   font-size: 1.3rem;
   line-height: 1;

sw.js

@@ -3,7 +3,7 @@
 // VERSION whenever you change a file: the next visit installs a worker with a
 // new cache and the old one is deleted. While you are editing, a hard reload
 // skips the worker instead (see docs/pwa-guide.md, "Edits that don't show").
-const VERSION = '1';
+const VERSION = '2';
 const CACHE_NAME = 'pyscript-template-' + VERSION;
 const SHELL = [
   './',