From f2d1c13ea4b3e58733b6d2c05bbb6c1dd937fff0 Mon Sep 17 00:00:00 2001
From: shantoislamdev <222821332+shantoislamdev@users.noreply.github.com>
Date: Sat, 14 Mar 2026 06:24:09 +0000
Subject: [PATCH 1/2] refactor(docs): replace emoji theme toggle icons with
 consistent SVG icons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaced the inconsistent emoji icons (💻, 🌙, ☀️) in the `ThemeToggle` component of the `kilo-docs` package with custom SVG components (`SystemIcon`, `MoonIcon`, `SunIcon`) to ensure a consistent look and feel that matches other icons in the project. Adjusted the styling of the toggle button to apply `color` to the SVGs using `currentColor`.
---
 bun.lock                                      |  1 -
 packages/kilo-docs/components/ThemeToggle.tsx | 79 ++++++++++++++++---
 2 files changed, 69 insertions(+), 11 deletions(-)

diff --git a/bun.lock b/bun.lock
index a3a18be5fa..70c6e34c93 100644
--- a/bun.lock
+++ b/bun.lock
@@ -1,6 +1,5 @@
 {
   "lockfileVersion": 1,
-  "configVersion": 1,
   "workspaces": {
     "": {
       "name": "@kilocode/kilo",
diff --git a/packages/kilo-docs/components/ThemeToggle.tsx b/packages/kilo-docs/components/ThemeToggle.tsx
index 24a21c9cc9..2aa1aed470 100644
--- a/packages/kilo-docs/components/ThemeToggle.tsx
+++ b/packages/kilo-docs/components/ThemeToggle.tsx
@@ -58,19 +58,19 @@ export function ThemeToggle() {
   if (!mounted) {
     return (
       <button className="theme-toggle" aria-label="Toggle theme" style={{ width: "32px", height: "32px" }}>
-        <span style={{ opacity: 0 }}>🌙</span>
+        <span style={{ opacity: 0 }}><MoonIcon /></span>
       </button>
     )
   }
 
   const getIcon = () => {
     if (theme === "system") {
-      return "💻"
+      return <SystemIcon />
     }
     if (theme === "dark") {
-      return "🌙"
+      return <MoonIcon />
     }
-    return "☀️"
+    return <SunIcon />
   }
 
   const getLabel = () => {
@@ -86,7 +86,7 @@ export function ThemeToggle() {
   return (
     <>
       <button onClick={cycleTheme} className="theme-toggle" aria-label={getLabel()} title={getLabel()}>
-        <span>{getIcon()}</span>
+        {getIcon()}
       </button>
       <style jsx>{`
         .theme-toggle {
@@ -99,19 +99,78 @@ export function ThemeToggle() {
           border: 1px solid var(--border-color);
           border-radius: 6px;
           background: var(--bg-secondary);
+          color: var(--text-color);
           cursor: pointer;
-          font-size: 16px;
           transition:
             background-color 0.2s ease,
-            border-color 0.2s ease;
+            border-color 0.2s ease,
+            color 0.2s ease;
         }
         .theme-toggle:hover {
           background: var(--border-color);
         }
-        .theme-toggle span {
-          line-height: 1;
-        }
       `}</style>
     </>
   )
 }
+
+function SunIcon() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <circle cx="8" cy="8" r="3.5" />
+      <path d="M8 2.5V1" />
+      <path d="M8 15v-1.5" />
+      <path d="M11.889 4.111l.707-.707" />
+      <path d="M3.404 12.596l.707-.707" />
+      <path d="M13.5 8h1.5" />
+      <path d="M1 8h1.5" />
+      <path d="M11.889 11.889l.707.707" />
+      <path d="M3.404 3.404l.707.707" />
+    </svg>
+  )
+}
+
+function MoonIcon() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M13.5 10.605A6.5 6.5 0 0 1 5.395 2.5 6.501 6.501 0 0 0 13.5 10.605z" />
+    </svg>
+  )
+}
+
+function SystemIcon() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <rect x="2" y="3" width="12" height="8" rx="1" />
+      <path d="M5 13h6" />
+      <path d="M8 11v2" />
+    </svg>
+  )
+}

From cee892d639417f7ba93e4ff40b375a4f741924f9 Mon Sep 17 00:00:00 2001
From: shantoislamdev <222821332+shantoislamdev@users.noreply.github.com>
Date: Sat, 14 Mar 2026 07:04:02 +0000
Subject: [PATCH 2/2] chore: Update MoonIcon to match standard crescent outline

Updated the MoonIcon SVG path within packages/kilo-docs/components/ThemeToggle.tsx to use a standard crescent shape, addressing user feedback that the old moon icon didn't look right. Modified the viewBox to 16x16 and strokeWidth to 1.5 to ensure the visual weight maps cleanly when rendered at 16x16 pixels alongside the sun and system icons natively without requiring custom scaling.
---
 packages/kilo-docs/components/ThemeToggle.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/kilo-docs/components/ThemeToggle.tsx b/packages/kilo-docs/components/ThemeToggle.tsx
index 2aa1aed470..e73ae55955 100644
--- a/packages/kilo-docs/components/ThemeToggle.tsx
+++ b/packages/kilo-docs/components/ThemeToggle.tsx
@@ -151,7 +151,7 @@ function MoonIcon() {
       strokeLinecap="round"
       strokeLinejoin="round"
     >
-      <path d="M13.5 10.605A6.5 6.5 0 0 1 5.395 2.5 6.501 6.501 0 0 0 13.5 10.605z" />
+      <path d="M14 8.526A6 6 0 1 1 7.473 2 4.666 4.666 0 0 0 14 8.526z" />
     </svg>
   )
 }