[Fix]: Improve style issue in dark mode (#3917)

* [Fix]: Improve style issue in dark mode * [Fix]: divider border color
apache · Jul 26, 2024 · 4824016 · 4824016
1 parent c7b6b41
commit 4824016
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/streampark-console/streampark-console-webapp/src/components/OpenApi/src/index.tsx b/streampark-console/streampark-console-webapp/src/components/OpenApi/src/index.tsx
@@ -191,10 +191,10 @@ export default defineComponent({
       <>
         <Skeleton loading={fetchLoading.value} active>
           <div class="flex-none flex-shrink-0 ">
-            <div class="min-w-[12rem] flex min-h-9 flex-1 whitespace-nowrap rounded border dark:border-[#1f1f1f] border-[#f3f4f6]">
+            <div class="min-w-[12rem] flex min-h-9 flex-1 whitespace-nowrap rounded border dark:border-[#303030] border-[#f3f4f6]">
               {renderRequestMethod()}
               <div
-                class="flex flex-1 items-center text-[#111827] whitespace-nowrap rounded-r border-l border-[#f3f4f6] bg-[#f9fafb] dark:bg-[#1c1c1e] dark:border-[#1f1f1f] transition "
+                class="flex flex-1 items-center text-[#111827] whitespace-nowrap rounded-r border-l border-[#f3f4f6] bg-[#f9fafb] dark:bg-[#1c1c1e] dark:text-[#fff] dark:border-[#303030] transition "
                 style="padding-left:10px"
               >
                 {requestRef.value.url}

diff --git a/streampark-console/streampark-console-webapp/src/design/ant/index.less b/streampark-console/streampark-console-webapp/src/design/ant/index.less
@@ -89,3 +89,8 @@ div:not(.ant-modal-title)>.streampark-basic-title {
 .ant-card-body>.streampark-basic-title {
   display: table !important;
 }
+
+[data-theme="dark"] .ant-divider-horizontal.ant-divider-with-text::before,
+[data-theme="dark"] .ant-divider-horizontal.ant-divider-with-text::after {
+  border-top-color: inherit !important;
+}