Feat: Modify the style of the agent page bright theme #3221 (#9162)

### What problem does this PR solve?

Feat: Modify the style of the agent page bright theme #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/components/highlight-markdown/index.tsx

@@ -13,15 +13,16 @@ import remarkMath from 'remark-math';
 import 'katex/dist/katex.min.css'; // `rehype-katex` does not import the CSS for you
 
 import { preprocessLaTeX } from '@/utils/chat';
+import { useIsDarkTheme } from '../theme-provider';
 import styles from './index.less';
 
 const HightLightMarkdown = ({
   children,
-  dark = false,
 }: {
   children: string | null | undefined;
-  dark?: boolean;
 }) => {
+  const isDarkTheme = useIsDarkTheme();
+
   return (
     <Markdown
       remarkPlugins={[remarkGfm, remarkMath]}
@@ -37,7 +38,7 @@ const HightLightMarkdown = ({
                 {...rest}
                 PreTag="div"
                 language={match[1]}
-                style={dark ? oneDark : oneLight}
+                style={isDarkTheme ? oneDark : oneLight}
               >
                 {String(children).replace(/\n$/, '')}
               </SyntaxHighlighter>

web/src/components/next-message-item/index.less

@@ -24,7 +24,6 @@
   .messageText {
     .chunkText();
     .messageTextBase();
-    background-color: #e6f4ff;
     word-break: break-word;
   }
   .messageTextDark {

web/src/components/ui/button.tsx

@@ -16,7 +16,7 @@ const buttonVariants = cva(
         outline:
           'border border-text-sub-title-invert bg-transparent hover:bg-accent hover:text-accent-foreground',
         secondary:
-          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+          'bg-background-card text-secondary-foreground hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
         link: 'text-primary underline-offset-4 hover:underline',
         tertiary:

web/src/components/ui/dual-range-slider.tsx

@@ -33,7 +33,7 @@ const DualRangeSlider = React.forwardRef<
       </SliderPrimitive.Track>
       {initialValue.map((value, index) => (
         <React.Fragment key={index}>
-          <SliderPrimitive.Thumb className="relative block h-4 w-4 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer">
+          <SliderPrimitive.Thumb className="relative block h-4 w-4 rounded-full border-2 border-background-checked bg-white ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer">
             {label && (
               <span
                 className={cn(

web/src/components/ui/tabs.tsx

@@ -29,7 +29,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-colors-background-inverse-strong data-[state=active]:text-text-title data-[state=active]:shadow-sm',
+      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-text-title-invert data-[state=active]:text-text-title data-[state=active]:shadow-sm',
       className,
     )}
     {...props}