Prechádzať zdrojové kódy

fix: Dark theme: Consumers: theme colors issues

Tarun Samanta 2 rokov pred
rodič
commit
e0da2c2ce1

+ 4 - 1
kafka-ui-react-app/src/components/ConsumerGroups/Details/ResetOffsets/Form.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { useNavigate } from 'react-router-dom';
 import {
   ConsumerGroupDetails,
@@ -23,6 +23,7 @@ import useAppParams from 'lib/hooks/useAppParams';
 import { useResetConsumerGroupOffsetsMutation } from 'lib/hooks/api/consumers';
 import { FlexFieldset, StyledForm } from 'components/common/Form/Form.styled';
 import ControlledSelect from 'components/common/Select/ControlledSelect';
+import { ThemeModeContext } from 'components/contexts/ThemeModeContext';
 
 import * as S from './ResetOffsets.styled';
 
@@ -101,6 +102,7 @@ const Form: React.FC<FormProps> = ({ defaultValues, partitions, topics }) => {
     navigate('../');
   };
 
+  const { isDarkMode } = useContext(ThemeModeContext);
   return (
     <FormProvider {...methods}>
       <StyledForm onSubmit={handleSubmit(onSubmit)}>
@@ -120,6 +122,7 @@ const Form: React.FC<FormProps> = ({ defaultValues, partitions, topics }) => {
           <div>
             <InputLabel>Partitions</InputLabel>
             <MultiSelect
+              className={isDarkMode ? 'dark' : ''}
               options={partitionOptions}
               value={partitionsValue.map((p) => ({
                 value: p,

+ 20 - 0
kafka-ui-react-app/src/components/globalCss.ts

@@ -110,5 +110,25 @@ export default createGlobalStyle(
         opacity: 1;
       }
     }
+    .rmsc {
+      --rmsc-main: #4285f4;
+      --rmsc-hover: #f1f3f5;
+      --rmsc-selected: #e2e6ea;
+      --rmsc-border: #ccc;
+      --rmsc-gray: #aaa;
+      --rmsc-bg: #fff;
+      --rmsc-p: 10px; /* Spacing */
+      --rmsc-radius: 4px; /* Radius */
+      --rmsc-h: 38px; /* Height */
+    }
+    .rmsc.dark {
+      --rmsc-main: #4285f4;
+      --rmsc-hover: #0e0c0a;
+      --rmsc-selected: #1d1915;
+      --rmsc-border: #333333;
+      --rmsc-gray: #555555;
+      --rmsc-bg: #121212;
+      color: #fff;
+    }
   `
 );