diff --git a/src/frontend/src/components/Pro/security/AssistantSetting.tsx b/src/frontend/src/components/Pro/security/AssistantSetting.tsx
index fa2068330..5c4d70bc6 100644
--- a/src/frontend/src/components/Pro/security/AssistantSetting.tsx
+++ b/src/frontend/src/components/Pro/security/AssistantSetting.tsx
@@ -80,7 +80,7 @@ export default function AssistantSetting({ id, type }) {
                                 {/* @ts-ignore */}
                                 {form.isCheck && <SettingIcon onClick={(e) => { e.stopPropagation(); setOpen(!open) }} className="w-[32px] h-[32px]" />}
                             </SheetTrigger>
-                            <SheetContent className="w-[500px] bg-background-login" onClick={(e) => e.stopPropagation()}>
+                            <SheetContent className="w-[500px]" onClick={(e) => e.stopPropagation()}>
                                 <SheetTitle className="font-[500] pl-3 pt-2">{t('build.contentSecuritySettings')}</SheetTitle>
                                 <FormSet data={form} onChange={handleFormChange} onSave={() => setOpen(false)} onCancel={() => setOpen(false)} />
                             </SheetContent>
diff --git a/src/frontend/src/components/Pro/security/FormSet.tsx b/src/frontend/src/components/Pro/security/FormSet.tsx
index 0b1c7c67b..d05f4a996 100644
--- a/src/frontend/src/components/Pro/security/FormSet.tsx
+++ b/src/frontend/src/components/Pro/security/FormSet.tsx
@@ -87,6 +87,7 @@ export default function FormSet({ data, onChange, onSave, onCancel }) {
                         onChange={(e) => setForm({ ...form, words: e.target.value })}
                         placeholder={t('build.useNewlineToSeparate')}></Textarea>
                     <input type="file" accept=".txt" id="fileUpload" className="hidden" onChange={handleUploadFile} />
+                    {/* @ts-ignore */}
                     <div className="flex items-center absolute right-1 top-1 cursor-pointer" onClick={() => document.querySelector('#fileUpload').click()}>
                         <UploadIcon id="ul" color="blue" className="w-3 h-3" />
                         <Label htmlFor="ul"><span className="text-xs text-primary cursor-pointer">{t('build.txtFile')}</span></Label>
@@ -102,8 +103,8 @@ export default function FormSet({ data, onChange, onSave, onCancel }) {
             </div>
         </div>
         <div className="absolute bottom-10 right-4 sapce-x-10 flex space-x-8">
-            <Button className="dark:bg-[#282828]" onClick={onCancel} variant="outline">{t('cancel')}</Button>
-            <Button className="text-slate-50" onClick={handleSave}>{t('save')}</Button>
+            <Button onClick={onCancel} variant="outline">{t('cancel')}</Button>
+            <Button onClick={handleSave}>{t('save')}</Button>
         </div>
     </>
 };
diff --git a/src/frontend/src/components/bs-comp/cardComponent/index.tsx b/src/frontend/src/components/bs-comp/cardComponent/index.tsx
index 6fa312ca9..396c12d4f 100644
--- a/src/frontend/src/components/bs-comp/cardComponent/index.tsx
+++ b/src/frontend/src/components/bs-comp/cardComponent/index.tsx
@@ -126,7 +126,7 @@ export default function CardComponent<T>({
 
 
   // 侧边弹窗列表（sheet）
-  if (type === 'sheet') return <Card className="group w-[320px] cursor-pointer bg-[#F7F9FC] dark:bg-[#282828] dark:hover:bg-[#414141] hover:bg-[#EDEFF6] hover:shadow-none relative" onClick={onClick}>
+  if (type === 'sheet') return <Card className="group w-[320px] cursor-pointer bg-[#F7F9FC] dark:bg-background-main dark:hover:bg-background-login hover:bg-[#EDEFF6] hover:shadow-none relative" onClick={onClick}>
     <CardHeader className="pb-2">
       <CardTitle className="truncate-doubleline">
         <div className="flex gap-2 pb-2 items-center">
diff --git a/src/frontend/src/components/bs-comp/sheets/SkillChatSheet.tsx b/src/frontend/src/components/bs-comp/sheets/SkillChatSheet.tsx
index 272c69545..ceb732e4c 100644
--- a/src/frontend/src/components/bs-comp/sheets/SkillChatSheet.tsx
+++ b/src/frontend/src/components/bs-comp/sheets/SkillChatSheet.tsx
@@ -43,7 +43,7 @@ export default function SkillChatSheet({ children, onSelect }) {
                     <SheetDescription>{t('chat.chooseSkillOrAssistant')}</SheetDescription>
                     <SearchInput value={keyword} placeholder={t('chat.search')} className="my-6" onChange={(e) => setKeyword(e.target.value)} />
                 </div>
-                <div className="flex-1 min-w-[696px] bg-[#fff] dark:bg-[#303134] p-5 pt-12 h-full flex flex-wrap gap-1.5 overflow-y-auto scrollbar-hide content-start">
+                <div className="flex-1 min-w-[696px] bg-[#fff] dark:bg-[#030712] p-5 pt-12 h-full flex flex-wrap gap-1.5 overflow-y-auto scrollbar-hide content-start">
                     {
                         options.length ? options.map((flow, i) => (
                             <CardComponent key={i}
diff --git a/src/frontend/src/components/bs-comp/sheets/SkillSheet.tsx b/src/frontend/src/components/bs-comp/sheets/SkillSheet.tsx
index 5d54c2b64..fac89866b 100644
--- a/src/frontend/src/components/bs-comp/sheets/SkillSheet.tsx
+++ b/src/frontend/src/components/bs-comp/sheets/SkillSheet.tsx
@@ -41,7 +41,7 @@ export default function SkillSheet({ select, children, onSelect }) {
   return (
     <Sheet>
       <SheetTrigger asChild>{children}</SheetTrigger>
-      <SheetContent className="bg-background-main sm:min-w-[966px]">
+      <SheetContent className="sm:min-w-[966px]">
         <div className="flex h-full" onClick={(e) => e.stopPropagation()}>
           <div className="w-fit p-6">
             <SheetTitle>{t("build.addSkill")}</SheetTitle>
@@ -55,7 +55,7 @@ export default function SkillSheet({ select, children, onSelect }) {
               {t("build.createSkill")}
             </Button>
           </div>
-          <div className="flex h-full min-w-[696px] flex-1 flex-wrap content-start gap-1.5 overflow-y-auto bg-background-login p-5 pt-12 scrollbar-hide">
+          <div className="flex h-full min-w-[696px] flex-1 flex-wrap content-start gap-1.5 overflow-y-auto p-5 pt-12 scrollbar-hide">
             {onlineFlows[0] ? (
               onlineFlows.map((flow, i) => (
                 <CardComponent
@@ -68,13 +68,13 @@ export default function SkillSheet({ select, children, onSelect }) {
                   footer={
                     <div className="flex justify-end">
                       {select.some((_) => _.id === flow.id) ? (
-                        <Button size="sm" className="h-6 text-slate-50" disabled>
+                        <Button size="sm" className="h-6" disabled>
                           {t("build.added")}
                         </Button>
                       ) : (
                         <Button
                           size="sm"
-                          className="h-6 text-slate-50"
+                          className="h-6"
                           onClick={() => onSelect(flow)}
                         >
                           {t("build.add")}
@@ -89,7 +89,7 @@ export default function SkillSheet({ select, children, onSelect }) {
                 <p className="mb-3 text-sm text-muted-foreground">
                   {t("build.empty")}
                 </p>
-                <Button className="w-[200px] text-slate-50" onClick={toCreateFlow}>
+                <Button className="w-[200px]" onClick={toCreateFlow}>
                   {t("build.createSkill")}
                 </Button>
               </div>
diff --git a/src/frontend/src/components/bs-comp/sheets/ToolsSheet.tsx b/src/frontend/src/components/bs-comp/sheets/ToolsSheet.tsx
index 4975fff9e..3ba7de0e1 100644
--- a/src/frontend/src/components/bs-comp/sheets/ToolsSheet.tsx
+++ b/src/frontend/src/components/bs-comp/sheets/ToolsSheet.tsx
@@ -35,13 +35,13 @@ export default function ToolsSheet({ select, onSelect, children }) {
             <SheetTrigger asChild>
                 {children}
             </SheetTrigger>
-            <SheetContent className="w-[1000px] sm:max-w-[1000px] bg-background-main">
+            <SheetContent className="w-[1000px] sm:max-w-[1000px]">
                 <div className="flex h-full" onClick={e => e.stopPropagation()}>
                     <div className="w-fit p-6">
                         <SheetTitle>{t('build.addTool')}</SheetTitle>
                         <SearchInput placeholder={t('build.search')} className="mt-6" onChange={(e) => setKeyword(e.target.value)} />
                         <Button
-                            className="mt-4 w-full text-slate-50"
+                            className="mt-4 w-full"
                             onClick={() => window.open(__APP_ENV__.BASE_URL + "/build/tools")}
                         >
                             {t('create')}{t("tools.createCustomTool")}
@@ -63,7 +63,7 @@ export default function ToolsSheet({ select, onSelect, children }) {
                             </div>
                         </div>
                     </div>
-                    <div className="flex-1 bg-background-login p-5 pt-12 h-full overflow-auto scrollbar-hide">
+                    <div className="flex-1 bg-background-main p-5 pt-12 h-full overflow-auto scrollbar-hide">
                         <Accordion type="single" collapsible className="w-full">
                             {
                                 options.length ? options.map(el => (
diff --git a/src/frontend/src/components/bs-ui/button/index.tsx b/src/frontend/src/components/bs-ui/button/index.tsx
index 02ce156bc..1009eb65b 100644
--- a/src/frontend/src/components/bs-ui/button/index.tsx
+++ b/src/frontend/src/components/bs-ui/button/index.tsx
@@ -91,7 +91,7 @@ const ButtonNumber = React.forwardRef<HTMLButtonElement, {
             setValue(updateValue)
             onChange?.(updateValue)
         }
-        return (<div className={cname("flex items-center border input-border bg-gray-50 rounded-md", className)}>
+        return (<div className={cname("flex items-center border input-border bg-gray-50 dark:bg-background-login rounded-md", className)}>
             <Button variant="ghost" size={size} disabled={value === min} onClick={valueReduce}>-</Button>
             <span className="min-w-10 block text-center">{value}</span>
             <Button variant="ghost" size={size} disabled={value === max} onClick={valueAdd}>+</Button>
diff --git a/src/frontend/src/layout/MainLayout.tsx b/src/frontend/src/layout/MainLayout.tsx
index 38b573b91..99723ec4f 100755
--- a/src/frontend/src/layout/MainLayout.tsx
+++ b/src/frontend/src/layout/MainLayout.tsx
@@ -73,7 +73,9 @@ export default function MainLayout() {
             <div className="flex justify-between h-[64px]">
                 <div className="flex h-9 my-[14px]">
                     <Link className="inline-block" to='/'>
+                        {/* @ts-ignore */}
                         <img src={__APP_ENV__.BASE_URL + '/login-logo-small.png'} className="w-[114px] h-9 ml-8 rounded dark:w-[124px] dark:pr-[10px] dark:hidden" alt="" />
+                        {/* @ts-ignore */}
                         <img src={__APP_ENV__.BASE_URL + '/logo-small-dark.png'} className="w-[114px] h-9 ml-8 rounded dark:w-[124px] dark:pr-[10px] dark:block hidden" alt="" />
                     </Link>
                 </div>
diff --git a/src/frontend/src/pages/FileLibPage/files.tsx b/src/frontend/src/pages/FileLibPage/files.tsx
index 4d206860a..a5c76017a 100755
--- a/src/frontend/src/pages/FileLibPage/files.tsx
+++ b/src/frontend/src/pages/FileLibPage/files.tsx
@@ -120,7 +120,7 @@ export default function FilesPage() {
         {loading && <div className="absolute w-full h-full top-0 left-0 flex justify-center items-center z-10 bg-[rgba(255,255,255,0.6)] dark:bg-blur-shared">
             <span className="loading loading-infinity loading-lg"></span>
         </div>}
-        <div className="h-full overflow-y-auto pb-10 bg-[#fff]">
+        <div className="h-full overflow-y-auto pb-10 bg-background-login">
             <div className="flex justify-between items-center mb-4">
                 <div className="flex items-center">
                     <ShadTooltip content="back" side="top">
diff --git a/src/frontend/src/pages/LogPage/index.tsx b/src/frontend/src/pages/LogPage/index.tsx
index 5f92e23c5..9227a42b3 100644
--- a/src/frontend/src/pages/LogPage/index.tsx
+++ b/src/frontend/src/pages/LogPage/index.tsx
@@ -127,10 +127,10 @@ export default function index() {
                 </Select>
             </div>
                 <div>
-                    <Button className="mr-3 px-6 dark:text-[#ECECEC]" onClick={handleSearch}>
+                    <Button className="mr-3 px-6" onClick={handleSearch}>
                         {t('log.searchButton')}
                     </Button>
-                    <Button variant="outline" className="px-6 dark:bg-[#282828]" onClick={handleReset}>
+                    <Button variant="outline" className="px-6" onClick={handleReset}>
                         {t('log.resetButton')}
                     </Button>
                 </div>
diff --git a/src/frontend/src/pages/SkillPage/components/CreateAssistant.tsx b/src/frontend/src/pages/SkillPage/components/CreateAssistant.tsx
index 7a8db6a83..ce9c13378 100644
--- a/src/frontend/src/pages/SkillPage/components/CreateAssistant.tsx
+++ b/src/frontend/src/pages/SkillPage/components/CreateAssistant.tsx
@@ -79,6 +79,7 @@ ${t('build.exampleTwo')}
             setLoading(true)
             const res = await captureAndAlertRequestErrorHoc(createAssistantsApi(formData.name, formData.roleAndTasks))
             if (res) {
+                //@ts-ignore
                 window.assistantCreate = true // 标记新建助手
                 navigate('/assistant/' + res.id)
             }
@@ -112,9 +113,9 @@ ${t('build.exampleTwo')}
         </div>
         <DialogFooter>
             <DialogClose>
-                <Button variant="outline" className="px-11 dark:bg-[#282828]" type="button" onClick={() => setFormData({ name: '', roleAndTasks: '' })}>{t('cancle')}</Button>
+                <Button variant="outline" className="px-11" type="button" onClick={() => setFormData({ name: '', roleAndTasks: '' })}>{t('cancle')}</Button>
             </DialogClose>
-            <Button disabled={loading} type="submit" className="px-11 text-slate-50" onClick={handleSubmit}>
+            <Button disabled={loading} type="submit" className="px-11" onClick={handleSubmit}>
                 {loading && <LoadIcon className="mr-2" />}
                 {t('build.create')}</Button>
         </DialogFooter>
diff --git a/src/frontend/src/pages/SkillPage/components/EditTool.tsx b/src/frontend/src/pages/SkillPage/components/EditTool.tsx
index 0f1123f44..737e75b6d 100644
--- a/src/frontend/src/pages/SkillPage/components/EditTool.tsx
+++ b/src/frontend/src/pages/SkillPage/components/EditTool.tsx
@@ -509,14 +509,14 @@ const EditTool = forwardRef((props: any, ref) => {
                         </div>
                     )}
                 </div>
-                <SheetFooter className="absolute bottom-0 right-0 w-full px-6 py-4 bg-background-login">
+                <SheetFooter className="absolute bottom-0 right-0 w-full px-6 py-4">
                     {delShow && <Button
                         size="sm"
                         variant="destructive"
                         className="absolute left-6"
                         onClick={handleDelete}
                     >{t('tools.delete')}</Button>}
-                    <Button size="sm" variant="outline" className="dark:bg-[#282828]" onClick={() => setEditShow(false)}>{t('tools.cancel')}</Button>
+                    <Button size="sm" variant="outline" onClick={() => setEditShow(false)}>{t('tools.cancel')}</Button>
                     <Button size="sm" className="text-[white]" onClick={handleSave}>{t('tools.save')}</Button>
                 </SheetFooter>
             </SheetContent>
diff --git a/src/frontend/src/pages/SkillPage/components/ToolItem.tsx b/src/frontend/src/pages/SkillPage/components/ToolItem.tsx
index dc395b5de..acd5f7b73 100644
--- a/src/frontend/src/pages/SkillPage/components/ToolItem.tsx
+++ b/src/frontend/src/pages/SkillPage/components/ToolItem.tsx
@@ -72,7 +72,7 @@ export default function ToolItem({
                                 {
                                     api.api_params.map(param => (
                                         <div>
-                                            <span className=" rounded-xl bg-gray-200 px-2 py-1 text-xs font-medium text-white">{param.name}</span>
+                                            <span className=" rounded-xl bg-gray-200 dark:bg-background-login px-2 py-1 text-xs font-medium text-white">{param.name}</span>
                                             {/* <span>{param.schema.type}</span> */}
                                         </div>
                                     ))
diff --git a/src/frontend/src/pages/SkillPage/components/editAssistant/AutoPromptDialog.tsx b/src/frontend/src/pages/SkillPage/components/editAssistant/AutoPromptDialog.tsx
index b70f64135..8cfbfc70f 100644
--- a/src/frontend/src/pages/SkillPage/components/editAssistant/AutoPromptDialog.tsx
+++ b/src/frontend/src/pages/SkillPage/components/editAssistant/AutoPromptDialog.tsx
@@ -178,7 +178,7 @@ export default function AutoPromptDialog({ onOpenChange }) {
                     <Textarea ref={areaRef} className="h-full" defaultValue={assistantState.prompt}
                         placeholder={t('prompt')}
                     ></Textarea>
-                    <Button className="group-hover:flex text-slate-50 hidden h-6 absolute bottom-4 right-4" disabled={LoadType.Prompt <= loading} size="sm" onClick={handleUsePropmt}>{t('build.use')}</Button>
+                    <Button className="group-hover:flex hidden h-6 absolute bottom-4 right-4" disabled={LoadType.Prompt <= loading} size="sm" onClick={handleUsePropmt}>{t('build.use')}</Button>
                 </div>
             </div>
             {/* 自动配置 */}
@@ -188,23 +188,23 @@ export default function AutoPromptDialog({ onOpenChange }) {
                 </div>
                 <div className="max-h-[660px] overflow-y-auto">
                     {/* 开场白 */}
-                    <div className="group relative pb-12 bg-gray-100 dark:bg-[#282828] mt-4 px-4 py-2 rounded-md">
+                    <div className="group relative pb-12 bg-gray-100 dark:bg-[#2A2B2E] mt-4 px-4 py-2 rounded-md">
                         <div className="text-md mb-2 font-medium leading-none flex">{t('build.openingRemarks')}{LoadType.GuideWord === loading && <LoadIcon className="ml-2 text-gray-600" />}</div>
-                        <Textarea ref={guideAreaRef} className="bg-transparent border-none bg-gray-50"></Textarea>
-                        <Button className="group-hover:flex text-slate-50 hidden h-6 absolute bottom-4 right-4" disabled={LoadType.GuideWord <= loading} size="sm" onClick={handleUseGuide}>{t('build.use')}</Button>
+                        <Textarea ref={guideAreaRef} className="bg-transparent border-none bg-gray-50 dark:bg-[#171717]"></Textarea>
+                        <Button className="group-hover:flex hidden h-6 absolute bottom-4 right-4" disabled={LoadType.GuideWord <= loading} size="sm" onClick={handleUseGuide}>{t('build.use')}</Button>
                     </div>
                     {/* 引导词 */}
-                    <div className="group relative pb-12 bg-gray-100 dark:bg-[#282828] mt-4 px-4 py-2 rounded-md">
+                    <div className="group relative pb-12 bg-gray-100 dark:bg-[#2A2B2E] mt-4 px-4 py-2 rounded-md">
                         <div className="text-md mb-2 font-medium leading-none flex">{t('build.guidingQuestions')}{LoadType.GuideQuestion === loading && <LoadIcon className="ml-2 text-gray-600" />}</div>
                         {
                             question.map(qs => (
-                                <p key={qs} className="text-sm text-muted-foreground bg-gray-50 px-2 py-1 rounded-xl mb-2">{qs}</p>
+                                <p key={qs} className="text-sm text-muted-foreground bg-gray-50 dark:bg-[#171717] px-2 py-1 rounded-xl mb-2">{qs}</p>
                             ))
                         }
-                        <Button className="group-hover:flex text-slate-50 hidden h-6 absolute bottom-4 right-4" disabled={LoadType.GuideQuestion <= loading} size="sm" onClick={handleUserQuestion}>{t('build.use')}</Button>
+                        <Button className="group-hover:flex hidden h-6 absolute bottom-4 right-4" disabled={LoadType.GuideQuestion <= loading} size="sm" onClick={handleUserQuestion}>{t('build.use')}</Button>
                     </div>
                     {/* 工具 */}
-                    <div className="group relative pb-10 bg-gray-100 dark:bg-[#282828] mt-4 px-4 py-2 rounded-md">
+                    <div className="group relative pb-10 bg-gray-100 dark:bg-[#2A2B2E] mt-4 px-4 py-2 rounded-md">
                         <div className="text-md mb-2 font-medium leading-none flex">{t('build.tools')}{LoadType.Tool === loading && <LoadIcon className="ml-2 text-gray-600" />}</div>
                         <div className="pt-1">
                             {
@@ -223,7 +223,7 @@ export default function AutoPromptDialog({ onOpenChange }) {
                         >{t('build.use')}</Button>
                     </div>
                     {/* 技能 */}
-                    <div className="group relative pb-10 bg-gray-100 dark:bg-[#282828] mt-4 px-4 py-2 rounded-md">
+                    <div className="group relative pb-10 bg-gray-100 dark:bg-[#2A2B2E] mt-4 px-4 py-2 rounded-md">
                         <div className="text-md mb-2 font-medium leading-none flex">{t('build.skill')}{LoadType.Flow === loading && <LoadIcon className="ml-2 text-gray-600" />}</div>
                         <div className="pt-1">
                             {
@@ -247,9 +247,9 @@ export default function AutoPromptDialog({ onOpenChange }) {
         </div>
         <DialogFooter>
             <DialogClose>
-                <Button variant="outline" className="px-11 dark:bg-[#282828]" type="button">{t('cancle')}</Button>
+                <Button variant="outline" className="px-11" type="button">{t('cancle')}</Button>
             </DialogClose>
-            <Button type="submit" className="px-11 text-slate-50" disabled={!!loading} onClick={handleUseAll}>{t('build.useAll')}</Button>
+            <Button type="submit" className="px-11" disabled={!!loading} onClick={handleUseAll}>{t('build.useAll')}</Button>
         </DialogFooter>
     </DialogContent>
 };
diff --git a/src/frontend/src/pages/SkillPage/components/editAssistant/EditAssistantDialog.tsx b/src/frontend/src/pages/SkillPage/components/editAssistant/EditAssistantDialog.tsx
index ca7be196e..55f63be50 100644
--- a/src/frontend/src/pages/SkillPage/components/editAssistant/EditAssistantDialog.tsx
+++ b/src/frontend/src/pages/SkillPage/components/editAssistant/EditAssistantDialog.tsx
@@ -94,9 +94,9 @@ export default function EditAssistantDialog({ name, desc, onSave }) {
         </div>
         <DialogFooter>
             <DialogClose>
-                <Button variant="outline" className="px-11 dark:bg-[#282828]" type="button">{t('build.cancel')}</Button>
+                <Button variant="outline" className="px-11" type="button">{t('build.cancel')}</Button>
             </DialogClose>
-            <Button type="submit" className="px-11 text-slate-50" onClick={handleSubmit}>{t('build.confirm')}</Button>
+            <Button type="submit" className="px-11" onClick={handleSubmit}>{t('build.confirm')}</Button>
         </DialogFooter>
     </DialogContent>
 };
diff --git a/src/frontend/src/pages/SkillPage/components/editAssistant/Header.tsx b/src/frontend/src/pages/SkillPage/components/editAssistant/Header.tsx
index b8415b9a3..f959e49da 100644
--- a/src/frontend/src/pages/SkillPage/components/editAssistant/Header.tsx
+++ b/src/frontend/src/pages/SkillPage/components/editAssistant/Header.tsx
@@ -31,9 +31,9 @@ export default function Header({ onSave, onLine }) {
         needSaveRef.current = true
     }
 
-    return <div className="flex justify-between items-center border-b px-4">
+    return <div className="flex justify-between bg-background-login items-center border-b px-4">
         <div className="flex items-center gap-2 py-4">
-            <Button variant="outline" className="dark:bg-[#282828]" size="icon" onClick={() => navigate(-1)}><ChevronLeftIcon className="h-4 w-4" /></Button>
+            <Button variant="outline" size="icon" onClick={() => navigate(-1)}><ChevronLeftIcon className="h-4 w-4" /></Button>
             <TitleIconBg id={assistantState.id} className="ml-4"><AssistantIcon /></TitleIconBg>
             <span className="bisheng-title">{assistantState.name}</span>
             {/* edit dialog */}
@@ -50,8 +50,8 @@ export default function Header({ onSave, onLine }) {
             </Dialog>
         </div>
         <div className="flex gap-4">
-            <Button variant="outline" className="px-10 dark:bg-[#282828]" type="button" onClick={onSave}>{t('build.save')}</Button>
-            <Button type="submit" className="px-10 text-slate-50" onClick={onLine}>{t('build.online')}</Button>
+            <Button variant="outline" className="px-10" type="button" onClick={onSave}>{t('build.save')}</Button>
+            <Button type="submit" className="px-10" onClick={onLine}>{t('build.online')}</Button>
         </div>
     </div>
 };
diff --git a/src/frontend/src/pages/SkillPage/components/editAssistant/Setting.tsx b/src/frontend/src/pages/SkillPage/components/editAssistant/Setting.tsx
index 59ed0167e..5c0138adc 100644
--- a/src/frontend/src/pages/SkillPage/components/editAssistant/Setting.tsx
+++ b/src/frontend/src/pages/SkillPage/components/editAssistant/Setting.tsx
@@ -211,7 +211,7 @@ export default function Setting() {
                 }
               >
                 <PlusIcon
-                  className="mr-2 text-primary hover:text-primary/80"
+                  className="mr-2 text-primary hover:text-primary/80 dark:text-slate-50"
                   onClick={(e) => e.stopPropagation()}
                 ></PlusIcon>
               </ToolsSheet>
@@ -271,7 +271,7 @@ export default function Setting() {
                 }
               >
                 <PlusIcon
-                  className="mr-2 text-primary hover:text-primary/80"
+                  className="mr-2 text-primary hover:text-primary/80 dark:text-slate-50"
                   onClick={(e) => e.stopPropagation()}
                 ></PlusIcon>
               </SkillSheet>
diff --git a/src/frontend/src/pages/SkillPage/l2Edit.tsx b/src/frontend/src/pages/SkillPage/l2Edit.tsx
index ffee4154e..301b02740 100644
--- a/src/frontend/src/pages/SkillPage/l2Edit.tsx
+++ b/src/frontend/src/pages/SkillPage/l2Edit.tsx
@@ -162,7 +162,7 @@ export default function l2Edit() {
         <div className="p-6 pb-48 h-full overflow-y-auto">
             <div className="flex justify-between w-full">
                 <ShadTooltip content={t('back')} side="right">
-                    <button className="extra-side-bar-buttons w-[36px] dark:bg-[#282828]" onClick={() => window.history.length < 3 ? navigate('/build/skills') : navigate(-1)}>
+                    <button className="extra-side-bar-buttons w-[36px]" onClick={() => window.history.length < 3 ? navigate('/build/skills') : navigate(-1)}>
                         <ArrowLeft strokeWidth={1.5} className="side-bar-button-size" />
                     </button>
                 </ShadTooltip>
@@ -247,10 +247,10 @@ export default function l2Edit() {
             {
                 isL2 ?
                     <div className="flex gap-4 w-[50%]">
-                        <Button disabled={loading} className="extra-side-bar-save-disable w-[70%] text-[white]" onClick={handleSave}>
+                        <Button disabled={loading} className="extra-side-bar-save-disable w-[70%]" onClick={handleSave}>
                             {t('save')}
                         </Button>
-                        <Button disabled={loading} className="w-[30%] dark:bg-[#282828]" variant="outline" onClick={() => handleJumpFlow()}>
+                        <Button disabled={loading} className="w-[30%]" variant="outline" onClick={() => handleJumpFlow()}>
                             {t('skills.advancedConfiguration')}
                         </Button>
                     </div>
diff --git a/src/frontend/src/pages/SystemPage/components/EditRole.tsx b/src/frontend/src/pages/SystemPage/components/EditRole.tsx
index bccb4db45..d0b636a4b 100644
--- a/src/frontend/src/pages/SystemPage/components/EditRole.tsx
+++ b/src/frontend/src/pages/SystemPage/components/EditRole.tsx
@@ -338,7 +338,7 @@ export default function EditRole({ id, name, groupId, onChange, onBeforeChange }
                 )}
             </SearchPanne>
         </div>
-        <div className="flex justify-center items-center absolute bottom-0 w-[600px] h-[8vh] gap-4 mt-[100px] bg-[white]">
+        <div className="flex justify-center items-center absolute bottom-0 w-[600px] h-[8vh] gap-4 mt-[100px] bg-background-login">
             <Button variant="outline" className="px-16" onClick={() => onChange()}>{t('cancel')}</Button>
             <Button className="px-16" onClick={handleSave}>{t('save')}</Button>
         </div>
diff --git a/src/frontend/src/pages/SystemPage/components/EditUserGroup.tsx b/src/frontend/src/pages/SystemPage/components/EditUserGroup.tsx
index 1cc0ffd8f..e3b2959d5 100644
--- a/src/frontend/src/pages/SystemPage/components/EditUserGroup.tsx
+++ b/src/frontend/src/pages/SystemPage/components/EditUserGroup.tsx
@@ -258,7 +258,7 @@ export default function EditUserGroup({ data, onBeforeChange, onChange }) {
                 ></FlowControl>
             </div>
         </>}
-        <div className="flex justify-center items-center absolute bottom-0 w-[630px] h-[8vh] gap-4 mt-[100px] bg-[white]">
+        <div className="flex justify-center items-center absolute bottom-0 w-[630px] h-[8vh] gap-4 mt-[100px] bg-background-login">
             <Button variant="outline" className="px-16" onClick={onChange}>{t('cancel')}</Button>
             <Button className="px-16" onClick={handleSave}>{t('save')}</Button>
         </div>