Feat: dark mode for logs and annotations (#11575)

web/app/components/header/account-setting/model-provider-page/model-name/index.tsx

@@ -7,7 +7,7 @@ import { useLanguage } from '../hooks'
 import type { ModelItem } from '../declarations'
 import ModelBadge from '../model-badge'
 import FeatureIcon from '../model-selector/feature-icon'
-import classNames from '@/utils/classnames'
+import cn from '@/utils/classnames'
 
 type ModelNameProps = PropsWithChildren<{
   modelItem: ModelItem
@@ -37,12 +37,7 @@ const ModelName: FC<ModelNameProps> = ({
   if (!modelItem)
     return null
   return (
-    <div
-      className={`
-        flex items-center truncate text-[13px] font-medium text-gray-800
-        ${className}
-      `}
-    >
+    <div className={cn('flex items-center truncate text-components-input-text-filled system-sm-regular', className)}>
       <div
         className='truncate'
         title={modelItem.label[language] || modelItem.label.en_US}
@@ -51,14 +46,14 @@ const ModelName: FC<ModelNameProps> = ({
       </div>
       {
         showModelType && modelItem.model_type && (
-          <ModelBadge className={classNames('ml-1', modelTypeClassName)}>
+          <ModelBadge className={cn('ml-1', modelTypeClassName)}>
             {modelTypeFormat(modelItem.model_type)}
           </ModelBadge>
         )
       }
       {
         modelItem.model_properties.mode && showMode && (
-          <ModelBadge className={classNames('ml-1', modeClassName)}>
+          <ModelBadge className={cn('ml-1', modeClassName)}>
             {(modelItem.model_properties.mode as string).toLocaleUpperCase()}
           </ModelBadge>
         )