Fix/explore darkmode (#14751)

web/app/components/explore/sidebar/app-nav-item/index.tsx

@@ -3,7 +3,6 @@ import React, { useRef } from 'react'
 
 import { useRouter } from 'next/navigation'
 import { useHover } from 'ahooks'
-import s from './style.module.css'
 import cn from '@/utils/classnames'
 import ItemOperation from '@/app/components/explore/item-operation'
 import AppIcon from '@/app/components/base/app-icon'
@@ -46,10 +45,8 @@ export default function AppNavItem({
     <div
       ref={ref}
       key={id}
-      className={cn(
-        s.item,
-        isSelected ? s.active : 'hover:bg-gray-200',
-        'flex h-8 items-center justify-between mobile:justify-center px-2 mobile:px-1 rounded-lg text-sm font-normal',
+      className={cn('text-components-menu-item-text system-sm-medium flex h-8 items-center justify-between mobile:justify-center px-2 mobile:px-1 rounded-lg text-sm font-normal',
+        isSelected ? 'bg-state-base-active text-components-menu-item-text-active' : 'hover:bg-state-base-hover hover:text-components-menu-item-text-hover',
       )}
       onClick={() => {
         router.push(url) // use Link causes popup item always trigger jump. Can not be solved by e.stopPropagation().

web/app/components/explore/sidebar/app-nav-item/style.module.css

@@ -1,9 +0,0 @@
-/* .item:hover, */
-.item.active {
-  border: 0.5px solid #EAECF0;
-  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
-  border-radius: 8px;
-  background: #FFFFFF;
-  color: #344054;
-  font-weight: 500;
-}