fix: fix broken style becasue of the updates and improve light style

src/style.css

@@ -23,6 +23,24 @@ body[data-time-format="24"] span[data-time-format="24"] {
     box-shadow: 0 0 0 1px #6f6e77;
 }
 
+html {
+    --ce-menu-primary: var(--popover-surface-primary, #fff);
+    --ce-menu-secondary: var(--popover-surface-secondary, #ececec);
+    --ce-border-light: var(--border-light, rgba(0, 0, 0, .1));
+}
+
+.dark {
+    --ce-menu-primary: var(--popover-surface-primary, #2f2f2f);
+}
+
+.bg-menu {
+    background-color: var(--ce-menu-primary);
+}
+
+.border-menu {
+    border-color: var(--ce-border-light);
+}
+
 .menu-item {
     height: 46px;
 }

src/styles/missing-tailwind.css

@@ -7,8 +7,7 @@
 }
 
 .bg-blue-600 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(28 100 242/var(--tw-bg-opacity));
+    background-color: rgb(28 100 242);
 }
 
 .border-\[\#6f6e77\] {
@@ -20,19 +19,21 @@
 }
 
 .dark .dark\:bg-white\/5 {
-    --tw-bg-opacity: 1;
     background-color: rgb(255 255 255 / 5%);
 }
 
+.dark .dark\:text-gray-200 {
+    color: rgb(229 231 235 / 1);
+}
+
+.dark .dark\:text-gray-300 {
+    color: rgb(209 213 219 / 1);
+}
+
 .dark .dark\:border-gray-\[\#86858d\] {
     border-color: #86858d;
 }
 
-
-.fill-current {
-    fill: currentColor;
-}
-
 .gap-x-1 {
     column-gap: 0.25rem;
 }
@@ -45,10 +46,6 @@
     height: 1rem;
 }
 
-.h-5 {
-    height: 1.25rem;
-}
-
 .ml-3 {
     margin-left: 0.75rem;
 }

src/ui/Divider.tsx

@@ -1 +1 @@
-export const Divider = () => <div className="border-b border-white/20"></div>
+export const Divider = () => <div className="h-px bg-token-border-light"></div>

src/ui/Menu.tsx

@@ -98,9 +98,14 @@ function MenuInner({ container }: { container: HTMLDivElement }) {
                     forceMount={open || settingOpen || exportOpen}
                 >
                     <HoverCard.Content
-                        className={isMobile
-                            ? 'grid grid-cols-2 gap-x-1 px-1.5 pt-2 rounded bg-gray-900 shadow-md transition-opacity duration-200 animate-slideUp'
-                            : 'grid grid-cols-2 gap-x-1 px-1.5 py-2 pb-0 rounded-md bg-gray-900 shadow-md transition-opacity duration-200 animate-fadeIn'}
+                        className={`
+                        grid grid-cols-2
+                        bg-menu
+                        border border-menu
+                        transition-opacity duration-200 shadow-md
+                        ${isMobile
+                            ? 'gap-x-1 px-1.5 pt-2 rounded animate-slideUp'
+                            : 'gap-x-1 px-1.5 py-2 pb-0 rounded-md animate-fadeIn'}`}
                         style={{
                             width: isMobile ? 316 : 268,
                             left: -6,
@@ -165,7 +170,17 @@ function MenuInner({ container }: { container: HTMLDivElement }) {
                             </div>
                         </ExportDialog>
 
-                        {!isMobile && <HoverCard.Arrow width="16" height="8" className="text-gray-900 fill-current" />}
+                        {!isMobile && (
+                            <HoverCard.Arrow
+                                width="16"
+                                height="8"
+                                style={{
+                                    'fill': 'var(--ce-menu-primary)',
+                                    'stroke': 'var(--ce-border-light)',
+                                    'stoke-width': '2px',
+                                }}
+                            />
+                        )}
                     </HoverCard.Content>
                 </Portal>
             </HoverCard.Root>

src/ui/MenuItem.tsx

@@ -42,7 +42,14 @@ export const MenuItem: FC<MenuItemProps> = ({ text, successText, disabled = fals
 
     return (
         <div
-            className={`menu-item flex py-3 px-3 items-center gap-3 rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer text-sm mb-2 flex-shrink-0 border border-white/20 ${className}`}
+            className={`
+            menu-item
+            flex flex-shrink-0 py-3 px-3 items-center gap-3 rounded-lg mb-2
+            bg-menu hover:bg-gray-500/10
+            transition-colors duration-200
+            text-black dark:text-white text-sm
+            cursor-pointer
+            border border-menu ${className}`}
             onClick={handleClick}
             onTouchStart={handleClick}
             disabled={disabled}

src/ui/Toggle.tsx

@@ -16,11 +16,11 @@ export function Toggle({ label, checked = true, onCheckedUpdate }: ToggleProps)
                 checked={checked}
                 onChange={onCheckedUpdate}
                 data-state={checked ? 'checked' : 'unchecked'}
-                className="bg-gray-200 radix-state-checked:bg-green-600 relative h-6 w-[42px] cursor-pointer rounded-full shrink-0"
+                className="bg-gray-200 radix-state-checked:bg-green-600 relative h-[20px] w-[32px] cursor-pointer rounded-full shrink-0"
             >
                 <span
                     data-state={checked ? 'checked' : 'unchecked'}
-                    className="block h-5 w-5 rounded-full translate-x-0.5 transition-transform duration-100 will-change-transform radix-state-checked:translate-x-[19px] bg-white shadow-[0_1px_2px_rgba(0,0,0,0.45)]"
+                    className="block h-[16px] w-[16px] rounded-full translate-x-0.5 transition-transform duration-100 will-change-transform radix-state-checked:translate-x-[14px] bg-white shadow-[0_1px_2px_rgba(0,0,0,0.45)]"
                 >
                 </span>
             </Switch>