feat: dark app bar

Author: davay42

index.html

@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
   <title>Chromatone Spectrogram</title>
   <link rel="icon" type="image/svg+xml" href="/logo.svg">
-  <meta name="theme-color" content="#D3D3E8">
+  <meta name="theme-color" content="#222222">
   <meta name="application-name" content="Spectrogram">
   <meta name="author" content="Denis Starov">
   <meta name="creator" content="Chromatone">
@@ -36,7 +36,7 @@
   "short_name": "Spectrogram", 
   "description": "Visual time-frequency analysis for all",
   "background_color": "#000000",
-  "theme_color": "#D3D3E8",
+  "theme_color": "#222222",
   "display": "standalone",
   "orientation": "any",
   "start_url": "./",

src/App.vue

@@ -94,10 +94,16 @@ const startRecording = () => {
 
 const stopRecording = () => {
   recording.value = false;
-  const link = document.createElement('a');
-  link.download = 'canvas_recording.png';
-  link.href = offscreenCanvas.toDataURL();
-  link.click();
+
+  // const link = document.createElement('a');
+  // link.download = 'canvas_recording.png';
+  // link.href = offscreenCanvas.toDataURL();
+  // link.click();
+
+  offscreenCanvas.toBlob((blob) => {
+    const blobUrl = window.URL.createObjectURL(blob);
+    window.open(blobUrl, '_blank');
+  }, 'image/png');
 };
 
 let recTemp, recCtx