feat(docs): Style logo and title with proper colors

- Add custom CSS for logo and title styling
- Make logo white in dark mode, black in light mode
- Set logo size to 28x28px via CSS
- Reduce gap between logo and title text
- Add logo to GitHub README header

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>

Author: ndbroadbent

README.md

@@ -1,4 +1,4 @@
-# Renamify
+# <img src="docs/src/assets/logo.svg" width="32" height="32" alt="Renamify logo" align="center"> Renamify
 
 Smart search & replace for code and files with case-aware transformations and built-in undo/redo.
 

docs/astro.config.mjs

@@ -16,6 +16,9 @@ export default defineConfig({
       logo: {
         src: "./src/assets/logo.svg",
       },
+      customCss: [
+        "./src/styles/custom.css",
+      ],
       editLink: {
         baseUrl: "https://github.com/DocSpring/renamify/edit/main/docs",
       },

docs/src/styles/custom.css

@@ -0,0 +1,44 @@
+/* Custom styles for Renamify docs */
+
+/* Logo styling - white in dark mode, black in light mode */
+:root {
+  --renamify-logo-color: #000000;
+}
+
+:root[data-theme="dark"] {
+  --renamify-logo-color: #ffffff;
+}
+
+/* Apply color to the logo SVG and control size */
+.site-title img,
+header .logo img,
+.sl-flex img[alt="Renamify"] {
+  filter: brightness(0) invert(0);
+  width: 28px;
+  height: 28px;
+}
+
+:root[data-theme="dark"] .site-title img,
+:root[data-theme="dark"] header .logo img,
+:root[data-theme="dark"] .sl-flex img[alt="Renamify"] {
+  filter: brightness(0) invert(1);
+}
+
+/* Alternative approach using stroke color directly */
+.site-title svg,
+header svg.logo {
+  stroke: var(--renamify-logo-color);
+  color: var(--renamify-logo-color);
+}
+
+/* Title text styling - matching the logo colors */
+.site-title,
+header .sl-flex a[href="/renamify/"] {
+  font-weight: 600;
+  color: var(--renamify-logo-color) !important;
+}
+
+/* Reduce gap between logo and title */
+.site-title {
+  gap: 0.8rem !important;
+}