Add white/black Folio icon variants and theme-aware in-app icon

- Recolor the in-app glyph (Design B) to a solid white master and generate a
  black variant; the desktop/app icon set (build/icons) is now the white
  master at all sizes (verified bundled white in the AppImage/deb)
- In-app icon switches with the existing data-theme: black in Light mode
  (visible on the light panel) and white in Dark mode (visible on the
  near-black panel); the desktop/application icon stays white

esbuild.config.mjs

@@ -30,6 +30,10 @@ const copyAssets = {
         path.join("build", "icons", "128x128.png"),
         path.join("dist", "brand-icon.png")
       );
+      fs.copyFileSync(
+        path.join("build", "brand-icons", "128x128-black.png"),
+        path.join("dist", "brand-icon-black.png")
+      );
     });
   },
 };

src/renderer/index.css

@@ -323,11 +323,21 @@ html, body {
   color: #ffffff;
 }
 
-/* The brand logo is a dark glyph; on the near-black dark theme it would be
-   invisible. Render it white there (light theme keeps the dark logo). */
-:root[data-theme="dark-mode"] .brand-icon,
-:root[data-theme="dark-mode"] .welcome-brand {
-  filter: brightness(0) invert(1);
+/* The brand icon ships as two color variants of the same glyph: a black one
+   for Light mode (visible on the light panel) and a white one for Dark mode
+   (visible on the near-black panel). Toggle them with the existing data-theme
+   attribute so the switch is automatic and the shape never changes. */
+.brand-icon-dark,
+.welcome-brand-dark {
+  display: none;
+}
+:root[data-theme="dark-mode"] .brand-icon-light,
+:root[data-theme="dark-mode"] .welcome-brand-light {
+  display: none;
+}
+:root[data-theme="dark-mode"] .brand-icon-dark,
+:root[data-theme="dark-mode"] .welcome-brand-dark {
+  display: inline-block;
 }
 
 /* ---- welcome ---- */

src/renderer/index.html

@@ -12,7 +12,8 @@
       <aside class="sidebar">
         <div class="sidebar-header">
           <div class="sidebar-brand">
-            <img class="brand-icon" src="./brand-icon.png" alt="Folio" draggable="false" />
+            <img class="brand-icon brand-icon-light" src="./brand-icon-black.png" alt="Folio" draggable="false" />
+            <img class="brand-icon brand-icon-dark" src="./brand-icon.png" alt="Folio" draggable="false" />
             <span class="sidebar-title">Chapters</span>
           </div>
           <button class="icon-button" id="addChapterBtn" title="Add chapter">+</button>
@@ -40,7 +41,8 @@
       </aside>
       <main class="editor" id="editor">
         <div class="welcome" id="welcome">
-          <img class="welcome-brand" src="./brand-icon.png" alt="Folio" draggable="false" />
+          <img class="welcome-brand welcome-brand-light" src="./brand-icon-black.png" alt="Folio" draggable="false" />
+          <img class="welcome-brand welcome-brand-dark" src="./brand-icon.png" alt="Folio" draggable="false" />
           <h1 class="app-name">Folio</h1>
           <p class="app-tagline">Your stories, in folders you choose.</p>
           <div class="welcome-actions">