diff --git a/frontend/src/components/FinalMaskForm.tsx b/frontend/src/components/FinalMaskForm.tsx
index e55c5a17..c6afa002 100644
--- a/frontend/src/components/FinalMaskForm.tsx
+++ b/frontend/src/components/FinalMaskForm.tsx
@@ -138,7 +138,7 @@ export default function FinalMaskForm({ stream, protocol, onChange }: FinalMaskF
               <Divider style={{ margin: 0 }}>
                 TCP Mask {mIdx + 1}
                 <DeleteOutlined
-                  style={{ color: 'rgb(255, 77, 79)', cursor: 'pointer', marginLeft: 8 }}
+                  style={{ color: 'var(--ant-color-error)', cursor: 'pointer', marginLeft: 8 }}
                   onClick={() => {
                     stream.delTcpMask(mIdx);
                     notify();
@@ -238,7 +238,7 @@ export default function FinalMaskForm({ stream, protocol, onChange }: FinalMaskF
               <Divider style={{ margin: 0 }}>
                 UDP Mask {mIdx + 1}
                 <DeleteOutlined
-                  style={{ color: 'rgb(255, 77, 79)', cursor: 'pointer', marginLeft: 8 }}
+                  style={{ color: 'var(--ant-color-error)', cursor: 'pointer', marginLeft: 8 }}
                   onClick={() => {
                     stream.delUdpMask(mIdx);
                     notify();
@@ -403,7 +403,7 @@ function HeaderCustomGroups({
               <Divider style={{ margin: 0 }}>
                 {groupKey === 'clients' ? 'Clients' : 'Servers'} Group {gi + 1}
                 <DeleteOutlined
-                  style={{ color: 'rgb(255, 77, 79)', cursor: 'pointer', marginLeft: 8 }}
+                  style={{ color: 'var(--ant-color-error)', cursor: 'pointer', marginLeft: 8 }}
                   onClick={() => {
                     (settings[groupKey] as ItemRow[][]).splice(gi, 1);
                     onChange();
@@ -445,7 +445,7 @@ function UdpHeaderCustom({ mask, onChange }: { mask: MaskRow; onChange: () => vo
               <Divider style={{ margin: 0 }}>
                 {groupKey === 'client' ? 'Client' : 'Server'} {ci + 1}
                 <DeleteOutlined
-                  style={{ color: 'rgb(255, 77, 79)', cursor: 'pointer', marginLeft: 8 }}
+                  style={{ color: 'var(--ant-color-error)', cursor: 'pointer', marginLeft: 8 }}
                   onClick={() => {
                     (settings[groupKey] as ItemRow[]).splice(ci, 1);
                     onChange();
@@ -493,7 +493,7 @@ function NoiseItems({ mask, onChange }: { mask: MaskRow; onChange: () => void })
           <Divider style={{ margin: 0 }}>
             Noise {ni + 1}
             <DeleteOutlined
-              style={{ color: 'rgb(255, 77, 79)', cursor: 'pointer', marginLeft: 8 }}
+              style={{ color: 'var(--ant-color-error)', cursor: 'pointer', marginLeft: 8 }}
               onClick={() => {
                 (settings.noise as ItemRow[]).splice(ni, 1);
                 onChange();
diff --git a/frontend/src/components/JsonEditor.css b/frontend/src/components/JsonEditor.css
index cfff28d3..c449c0ab 100644
--- a/frontend/src/components/JsonEditor.css
+++ b/frontend/src/components/JsonEditor.css
@@ -12,5 +12,5 @@
 
 .json-editor-host:focus-within {
   border-color: var(--ant-color-primary);
-  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.1);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ant-color-primary) 10%, transparent);
 }
diff --git a/frontend/src/pages/nodes/NodeList.tsx b/frontend/src/pages/nodes/NodeList.tsx
index 8179a979..78f88963 100644
--- a/frontend/src/pages/nodes/NodeList.tsx
+++ b/frontend/src/pages/nodes/NodeList.tsx
@@ -196,7 +196,7 @@ export default function NodeList({
           <span>{t(`pages.nodes.statusValues.${record.status || 'unknown'}`)}</span>
           {record.lastError && (
             <Tooltip title={record.lastError}>
-              <ExclamationCircleOutlined style={{ color: '#faad14' }} />
+              <ExclamationCircleOutlined style={{ color: 'var(--ant-color-warning)' }} />
             </Tooltip>
           )}
         </Space>
@@ -378,7 +378,7 @@ export default function NodeList({
                   <span>{t(`pages.nodes.statusValues.${statsNode.status || 'unknown'}`)}</span>
                   {statsNode.lastError && (
                     <Tooltip title={statsNode.lastError}>
-                      <ExclamationCircleOutlined style={{ color: '#faad14' }} />
+                      <ExclamationCircleOutlined style={{ color: 'var(--ant-color-warning)' }} />
                     </Tooltip>
                   )}
                 </div>
diff --git a/frontend/src/pages/nodes/NodesPage.tsx b/frontend/src/pages/nodes/NodesPage.tsx
index 453c1cf5..632938ff 100644
--- a/frontend/src/pages/nodes/NodesPage.tsx
+++ b/frontend/src/pages/nodes/NodesPage.tsx
@@ -118,14 +118,14 @@ export default function NodesPage() {
                           <Statistic
                             title={t('pages.nodes.onlineNodes')}
                             value={String(totals.online)}
-                            prefix={<CheckCircleOutlined style={{ color: '#52c41a' }} />}
+                            prefix={<CheckCircleOutlined style={{ color: 'var(--ant-color-success)' }} />}
                           />
                         </Col>
                         <Col xs={12} sm={12} md={6}>
                           <Statistic
                             title={t('pages.nodes.offlineNodes')}
                             value={String(totals.offline)}
-                            prefix={<CloseCircleOutlined style={{ color: '#ff4d4f' }} />}
+                            prefix={<CloseCircleOutlined style={{ color: 'var(--ant-color-error)' }} />}
                           />
                         </Col>
                         <Col xs={12} sm={12} md={6}>
diff --git a/frontend/src/pages/xray/BasicsTab.tsx b/frontend/src/pages/xray/BasicsTab.tsx
index e8808145..b13d2f21 100644
--- a/frontend/src/pages/xray/BasicsTab.tsx
+++ b/frontend/src/pages/xray/BasicsTab.tsx
@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Alert, Button, Collapse, Input, Modal, Select, Space, Switch } from 'antd';
-import { ExclamationCircleFilled, CloudOutlined, ApiOutlined } from '@ant-design/icons';
+import { CloudOutlined, ApiOutlined } from '@ant-design/icons';
 
 import { OutboundDomainStrategies } from '@/models/outbound';
 import SettingListItem from '@/components/SettingListItem';
@@ -205,9 +205,9 @@ export default function BasicsTab({
         <>
           <Alert
             type="warning"
+            showIcon
             className="mb-12 hint-alert"
             title={t('pages.xray.generalConfigsDesc')}
-            icon={<ExclamationCircleFilled style={{ color: '#FFA031' }} />}
           />
           <SettingListItem
             title={t('pages.xray.FreedomStrategy')}
@@ -299,9 +299,9 @@ export default function BasicsTab({
         <>
           <Alert
             type="warning"
+            showIcon
             className="mb-12 hint-alert"
             title={t('pages.xray.logConfigsDesc')}
-            icon={<ExclamationCircleFilled style={{ color: '#FFA031' }} />}
           />
           <SettingListItem
             title={t('pages.xray.logLevel')}
@@ -376,9 +376,9 @@ export default function BasicsTab({
         <>
           <Alert
             type="warning"
+            showIcon
             className="mb-12 hint-alert"
             title={t('pages.xray.blockConnectionsConfigsDesc')}
-            icon={<ExclamationCircleFilled style={{ color: '#FFA031' }} />}
           />
 
           <SettingListItem
@@ -427,9 +427,9 @@ export default function BasicsTab({
 
           <Alert
             type="warning"
+            showIcon
             className="mb-12 hint-alert"
             title={t('pages.xray.directConnectionsConfigsDesc')}
-            icon={<ExclamationCircleFilled style={{ color: '#FFA031' }} />}
           />
 
           <SettingListItem