From 81d0964507988fad41073e537e358ebf9f09dbfa Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Mon, 3 Nov 2025 17:29:22 +0100
Subject: [PATCH] Use new styles from Figma for the color mode switch

---
 .../_design-system/pixelarticons/moon.svg     |  4 +-
 .../conf/_design-system/pixelarticons/sun.svg |  4 +-
 .../_design-system/pixelarticons/system.svg   |  6 ++-
 src/components/theme-switch.tsx               | 45 +++++++++++--------
 4 files changed, 33 insertions(+), 26 deletions(-)

diff --git a/src/app/conf/_design-system/pixelarticons/moon.svg b/src/app/conf/_design-system/pixelarticons/moon.svg
index c1529d535a..4407b845a4 100644
--- a/src/app/conf/_design-system/pixelarticons/moon.svg
+++ b/src/app/conf/_design-system/pixelarticons/moon.svg
@@ -1,7 +1,5 @@
 <svg viewBox="0 0 14 14" fill="currentColor">
   <path
-    fill-rule="evenodd"
-    clip-rule="evenodd"
-    d="M2.99992.333496h5.33333V1.66683H6.99992v1.33333H5.66658V1.66683H2.99992V.333496ZM1.66659 3.00016V1.66683h1.33333v1.33333H1.66659Zm0 6.66667H.333252V3.00016H1.66659v6.66667Zm1.33333 1.33337H1.66659V9.66683h1.33333v1.33337Zm1.33333 1.3333H2.99992v-1.3333h1.33333v1.3333Zm6.66665 0v1.3333H4.33325v-1.3333h6.66665Zm1.3334-1.3333v1.3333h-1.3334v-1.3333h1.3334Zm-1.3334-2.6667h1.3334v2.6667h1.3333V5.66683h-1.3333v1.33333h-1.3334V8.3335Zm-3.99998 0v1.33333h3.99998V8.3335H6.99992ZM5.66658 7.00016h1.33334V8.3335H5.66658V7.00016Zm0 0v-4H4.33325v4h1.33333Z"
+    d="M10.501 12.833H4.66797V11.667H10.501V12.833ZM4.66797 11.667H3.50098V10.5H4.66797V11.667ZM11.668 11.667H10.501V10.5H11.668V11.667ZM3.50098 10.5H2.33398V9.33301H3.50098V10.5ZM12.834 10.5H11.668V8.16699H10.501V7H11.668V5.83301H12.834V10.5ZM2.33398 9.33301H1.16797V3.5H2.33398V9.33301ZM10.501 9.33301H7.00098V8.16699H10.501V9.33301ZM7.00098 8.16699H5.83398V7H7.00098V8.16699ZM5.83398 7H4.66797V3.5H5.83398V7ZM3.50098 3.5H2.33398V2.33301H3.50098V3.5ZM8.16797 2.33301H7.00098V3.5H5.83398V2.33301H3.50098V1.16699H8.16797V2.33301Z"
   />
 </svg>
diff --git a/src/app/conf/_design-system/pixelarticons/sun.svg b/src/app/conf/_design-system/pixelarticons/sun.svg
index c2eb3aae94..5094c705ef 100644
--- a/src/app/conf/_design-system/pixelarticons/sun.svg
+++ b/src/app/conf/_design-system/pixelarticons/sun.svg
@@ -1,7 +1,7 @@
-<svg viewBox="0 0 16 16" fill="currentColor">
+<svg viewBox="0 0 14 14" fill="currentColor">
   <path
     fill-rule="evenodd"
     clip-rule="evenodd"
-    d="M8.66667 0H7.33333V2.66667H8.66667V0ZM0 7.33333V8.66667H2.66667V7.33333H0ZM13.3333 7.33333H16V8.66667H13.3333V7.33333ZM8.66667 16H7.33333V13.3333H8.66667V16ZM5.33333 4H10.6667V5.33333H5.33333V4ZM5.33333 10.6667H4V5.33333H5.33333V10.6667ZM5.33333 10.6667V12H10.6667V10.6667H12V5.33333H10.6667V10.6667H5.33333ZM13.3333 1.33333H14.6667V2.66667H13.3333V1.33333ZM13.3333 2.66667V4H12V2.66667H13.3333ZM14.6667 14.6667H13.3333V13.3333H14.6667V14.6667ZM13.3333 13.3333H12V12H13.3333V13.3333ZM2.66667 1.33333H1.33333V2.66667H2.66667V4H4V2.66667H2.66667V1.33333ZM1.33333 14.6667H2.66667V13.3333H4V12H2.66667V13.3333H1.33333V14.6667Z"
+    d="M7.58333 0H6.41667V2.33333H7.58333V0ZM0 6.41667V7.58333H2.33333V6.41667H0ZM11.6667 6.41667H14V7.58333H11.6667V6.41667ZM7.58333 14H6.41667V11.6667H7.58333V14ZM4.66667 3.5H9.33333V4.66667H4.66667V3.5ZM4.66667 9.33333H3.5V4.66667H4.66667V9.33333ZM4.66667 9.33333V10.5H9.33333V9.33333H10.5V4.66667H9.33333V9.33333H4.66667ZM11.6667 1.16667H12.8333V2.33333H11.6667V1.16667ZM11.6667 2.33333V3.5H10.5V2.33333H11.6667ZM12.8333 12.8333H11.6667V11.6667H12.8333V12.8333ZM11.6667 11.6667H10.5V10.5H11.6667V11.6667ZM2.33333 1.16667H1.16667V2.33333H2.33333V3.5H3.5V2.33333H2.33333V1.16667ZM1.16667 12.8333H2.33333V11.6667H3.5V10.5H2.33333V11.6667H1.16667V12.8333Z"
   />
 </svg>
diff --git a/src/app/conf/_design-system/pixelarticons/system.svg b/src/app/conf/_design-system/pixelarticons/system.svg
index 3121ba395c..694451553a 100644
--- a/src/app/conf/_design-system/pixelarticons/system.svg
+++ b/src/app/conf/_design-system/pixelarticons/system.svg
@@ -1,3 +1,5 @@
-<svg fill="currentColor" viewBox="0 0 24 24">
-  <path d="M4 4h18v14h-6v2H8v-2H2V4h2zm16 12V6H4v10h16z" />
+<svg viewBox="0 0 14 14" fill="currentColor">
+  <path
+    d="M12.834 2.33301V10.5H9.33398V11.667H4.66797V10.5H1.16797V2.33301H12.834ZM2.33398 3.5V9.33301H11.668V3.5H2.33398Z"
+  />
 </svg>
diff --git a/src/components/theme-switch.tsx b/src/components/theme-switch.tsx
index cddb11be3f..903a0b6a4b 100644
--- a/src/components/theme-switch.tsx
+++ b/src/components/theme-switch.tsx
@@ -9,6 +9,7 @@ import { useMounted } from "nextra/hooks"
 import MoonIcon from "@/app/conf/_design-system/pixelarticons/moon.svg?svgr"
 import SunIcon from "@/app/conf/_design-system/pixelarticons/sun.svg?svgr"
 import SystemIcon from "@/app/conf/_design-system/pixelarticons/system.svg?svgr"
+import CheckIcon from "@/app/conf/_design-system/pixelarticons/check.svg?svgr"
 
 const THEME_OPTIONS = ["light", "dark", "system"] as const
 export type ThemeOption = (typeof THEME_OPTIONS)[number]
@@ -49,41 +50,47 @@ export function ThemeSwitch({ lite, className }: ThemeSwitchProps) {
         aria-label="Change theme"
         title="Change theme"
         className={clsx(
-          "gql-focus-visible -m-2 flex cursor-pointer items-center gap-2 p-2 text-neu-800 transition-colors hover:bg-neu-50 hover:text-neu-900 focus-visible:!-outline-offset-2 dark:text-neu-700 dark:hover:bg-neu-50/50",
+          "gql-focus-visible relative cursor-pointer text-neu-800 transition-colors before:absolute before:-inset-2 hover:bg-neu-100 hover:text-neu-900 focus-visible:!-outline-offset-2 dark:text-neu-700 dark:hover:bg-neu-50/50",
           className,
         )}
       >
-        <ResolvedThemeIcon height="16" />
-        <Select.Value
-          className={clsx(
-            "text-sm capitalize leading-none",
-            lite ? "sr-only" : "text-neu-700",
-          )}
-        />
+        <div className="flex items-center gap-2 border border-transparent p-[5px] [[aria-expanded=true]>&]:border-neu-300 [[aria-expanded=true]>&]:bg-neu-0 [[aria-expanded=true]>&]:dark:border-neu-100">
+          <ResolvedThemeIcon height="16" />
+          <Select.Value
+            className={clsx(
+              "text-sm capitalize leading-none",
+              lite ? "sr-only" : "text-neu-800",
+            )}
+          />
+        </div>
       </Select.Trigger>
       <Select.Portal>
-        <Select.Positioner className="z-20 outline-none" sideOffset={4}>
-          <Select.Popup className="min-w-[var(--anchor-width)] border border-neu-200 bg-[rgb(var(--nextra-bg))] p-1 text-neu-900 shadow-md outline-none dark:border-neu-100">
+        <Select.Positioner
+          className="z-20 outline-none"
+          align="end"
+          sideOffset={4}
+        >
+          <Select.Popup className="w-[120px] min-w-[var(--anchor-width)] border border-neu-200 bg-[rgb(var(--nextra-bg))] bg-neu-0 text-neu-900 shadow-sm outline-none dark:border-neu-100">
             <Select.List>
               {THEME_OPTIONS.map(option => {
                 const Icon = OPTION_ICONS[option]
-                const isSystem = Icon === SystemIcon
                 return (
                   <Select.Item
                     key={option}
                     value={option}
-                    className="mt-px flex cursor-pointer items-center gap-2 px-3 py-1.5 text-neu-800 first:mt-0 focus-visible:outline-none focus-visible:ring-0 data-[highlighted]:bg-neu-100 data-[highlighted]:text-neu-900 data-[selected]:text-neu-600 dark:text-neu-700 dark:data-[highlighted]:bg-neu-50"
+                    style={{
+                      paddingBlock: lite ? "10px" : "9px",
+                    }}
+                    className="mt-px flex cursor-pointer items-center gap-2 px-2 text-xs text-neu-800 first:mt-0 focus-visible:outline-none focus-visible:ring-0 data-[highlighted]:bg-neu-100 data-[highlighted]:text-neu-900 dark:text-neu-700 dark:data-[highlighted]:bg-neu-50/50"
                   >
-                    <Icon
-                      height={
-                        // the icons are not fully proportional
-                        isSystem ? "18" : "16"
-                      }
-                      className={isSystem ? "-mr-0.5 -translate-x-px" : ""}
-                    />
+                    <Icon height={14} />
                     <Select.ItemText className="capitalize leading-none">
                       {option}
                     </Select.ItemText>
+                    <CheckIcon
+                      height={16}
+                      className="ml-auto hidden text-pri-base dark:text-pri-light [[data-selected]_&]:block"
+                    />
                   </Select.Item>
                 )
               })}