UI: Implement a dark theme (#2996)

---------

Co-authored-by: davitbejanyan <dbejanyan@provectus.com>
Co-authored-by: Mgrdich <mgotm13@gmail.com>
Co-authored-by: Roman Zabaluev <rzabaluev@provectus.com>
Co-authored-by: VladSenyuta <vlad.senyuta@gmail.com>
Co-authored-by: Vlad Senyuta <66071557+VladSenyuta@users.noreply.github.com>
Co-authored-by: Oleg Shur <workshur@gmail.com>

kafka-ui-e2e-checks/src/main/java/com/provectus/kafka/ui/models/Schema.java

@@ -16,18 +16,18 @@ public class Schema {
     public static Schema createSchemaAvro() {
         return new Schema().setName("schema_avro-" + randomAlphabetic(5))
                 .setType(SchemaType.AVRO)
-                .setValuePath(System.getProperty("user.dir") + "/src/main/resources/testData/schema_avro_value.json");
+                .setValuePath(System.getProperty("user.dir") + "/src/main/resources/testData/schemas/schema_avro_value.json");
     }
 
     public static Schema createSchemaJson() {
         return new Schema().setName("schema_json-" + randomAlphabetic(5))
                 .setType(SchemaType.JSON)
-                .setValuePath(System.getProperty("user.dir") + "/src/main/resources/testData/schema_Json_Value.json");
+                .setValuePath(System.getProperty("user.dir") + "/src/main/resources/testData/schemas/schema_json_Value.json");
     }
 
     public static Schema createSchemaProtobuf() {
         return new Schema().setName("schema_protobuf-" + randomAlphabetic(5))
                 .setType(SchemaType.PROTOBUF)
-                .setValuePath(System.getProperty("user.dir") + "/src/main/resources/testData/schema_protobuf_value.txt");
+                .setValuePath(System.getProperty("user.dir") + "/src/main/resources/testData/schemas/schema_protobuf_value.txt");
     }
 }

kafka-ui-e2e-checks/src/main/java/com/provectus/kafka/ui/pages/BasePage.java

@@ -3,8 +3,11 @@ package com.provectus.kafka.ui.pages;
 import com.codeborne.selenide.Condition;
 import com.codeborne.selenide.ElementsCollection;
 import com.codeborne.selenide.SelenideElement;
+import com.codeborne.selenide.WebDriverRunner;
 import com.provectus.kafka.ui.utilities.WebUtils;
 import lombok.extern.slf4j.Slf4j;
+import org.openqa.selenium.Keys;
+import org.openqa.selenium.interactions.Actions;
 
 import java.time.Duration;
 
@@ -34,7 +37,7 @@ public abstract class BasePage extends WebUtils {
     protected void waitUntilSpinnerDisappear() {
         log.debug("\nwaitUntilSpinnerDisappear");
         if (isVisible(loadingSpinner)) {
-            loadingSpinner.shouldBe(Condition.disappear, Duration.ofSeconds(30));
+            loadingSpinner.shouldBe(Condition.disappear, Duration.ofSeconds(60));
         }
     }
 
@@ -42,6 +45,16 @@ public abstract class BasePage extends WebUtils {
         clickByJavaScript(submitBtn);
     }
 
+    protected void setJsonInputValue(SelenideElement jsonInput, String jsonConfig) {
+        sendKeysByActions(jsonInput, jsonConfig.replace("  ", ""));
+        new Actions(WebDriverRunner.getWebDriver())
+                .keyDown(Keys.SHIFT)
+                .sendKeys(Keys.PAGE_DOWN)
+                .keyUp(Keys.SHIFT)
+                .sendKeys(Keys.DELETE)
+                .perform();
+    }
+
     protected SelenideElement getTableElement(String elementName) {
         log.debug("\ngetTableElement: {}", elementName);
         return $x(String.format(tableElementNameLocator, elementName));

kafka-ui-e2e-checks/src/main/java/com/provectus/kafka/ui/pages/connectors/ConnectorCreateForm.java

@@ -21,11 +21,22 @@ public class ConnectorCreateForm extends BasePage {
     }
 
     @Step
-    public ConnectorCreateForm setConnectorDetails(String connectName, String configJson) {
+    public ConnectorCreateForm setName(String connectName) {
         nameField.shouldBe(Condition.enabled).setValue(connectName);
+        return this;
+    }
+
+    @Step
+    public ConnectorCreateForm setConfig(String configJson) {
         configField.shouldBe(Condition.enabled).click();
-        contentTextArea.setValue(configJson);
-        nameField.shouldBe(Condition.enabled).click();
+        setJsonInputValue(contentTextArea, configJson);
+        return this;
+    }
+
+    @Step
+    public ConnectorCreateForm setConnectorDetails(String connectName, String configJson) {
+        setName(connectName);
+        setConfig(configJson);
         return this;
     }
 

kafka-ui-e2e-checks/src/main/java/com/provectus/kafka/ui/pages/schemas/SchemaCreateForm.java

@@ -2,16 +2,20 @@ package com.provectus.kafka.ui.pages.schemas;
 
 import com.codeborne.selenide.Condition;
 import com.codeborne.selenide.SelenideElement;
+import com.codeborne.selenide.WebDriverRunner;
 import com.provectus.kafka.ui.api.model.CompatibilityLevel;
 import com.provectus.kafka.ui.api.model.SchemaType;
 import com.provectus.kafka.ui.pages.BasePage;
 import io.qameta.allure.Step;
+import org.openqa.selenium.Keys;
+import org.openqa.selenium.interactions.Actions;
 
 import java.util.List;
 import java.util.stream.Collectors;
 import java.util.stream.Stream;
 
 import static com.codeborne.selenide.Selenide.*;
+import static org.openqa.selenium.By.id;
 
 public class SchemaCreateForm extends BasePage {
 
@@ -23,7 +27,8 @@ public class SchemaCreateForm extends BasePage {
     protected SelenideElement compatibilityLevelList = $x("//ul[@name='compatibilityLevel']");
     protected SelenideElement newSchemaTextArea = $x("//div[@id='newSchema']");
     protected SelenideElement latestSchemaTextArea = $x("//div[@id='latestSchema']");
-    protected SelenideElement schemaVersionDdl = $$x("//ul[@role='listbox']/li[text()='Version 2']").first();
+    protected SelenideElement leftVersionDdl = $(id("left-select"));
+    protected SelenideElement rightVersionDdl = $(id("right-select"));
     protected List<SelenideElement> visibleMarkers = $$x("//div[@class='ace_scroller']//div[contains(@class,'codeMarker')]");
     protected List<SelenideElement> elementsCompareVersionDdl = $$x("//ul[@role='listbox']/ul/li");
     protected String ddlElementLocator = "//li[@value='%s']";
@@ -68,8 +73,14 @@ public class SchemaCreateForm extends BasePage {
     }
 
     @Step
-    public SchemaCreateForm openSchemaVersionDdl() {
-        schemaVersionDdl.shouldBe(Condition.enabled).click();
+    public SchemaCreateForm openLeftVersionDdl() {
+        leftVersionDdl.shouldBe(Condition.enabled).click();
+        return this;
+    }
+
+    @Step
+    public SchemaCreateForm openRightVersionDdl() {
+        rightVersionDdl.shouldBe(Condition.enabled).click();
         return this;
     }
 
@@ -92,8 +103,15 @@ public class SchemaCreateForm extends BasePage {
     @Step
     public SchemaCreateForm setNewSchemaValue(String configJson) {
         newSchemaTextArea.shouldBe(Condition.visible).click();
-        clearByKeyboard(newSchemaInput);
-        newSchemaInput.setValue(configJson);
+        newSchemaInput.shouldBe(Condition.enabled);
+        new Actions(WebDriverRunner.getWebDriver())
+                .sendKeys(Keys.PAGE_UP)
+                .keyDown(Keys.SHIFT)
+                .sendKeys(Keys.PAGE_DOWN)
+                .keyUp(Keys.SHIFT)
+                .sendKeys(Keys.DELETE)
+                .perform();
+        setJsonInputValue(newSchemaInput, configJson);
         return this;
     }
 

kafka-ui-e2e-checks/src/main/java/com/provectus/kafka/ui/pages/topics/ProduceMessagePanel.java

@@ -49,7 +49,7 @@ public class ProduceMessagePanel extends BasePage {
 
     @Step
     public ProduceMessagePanel submitProduceMessage() {
-        submitBtn.shouldBe(Condition.enabled).click();
+        clickByActions(submitBtn);
         submitBtn.shouldBe(Condition.disappear);
         refresh();
         return this;

kafka-ui-e2e-checks/src/main/java/com/provectus/kafka/ui/settings/drivers/LocalWebDriver.java

@@ -14,54 +14,55 @@ import org.openqa.selenium.chrome.ChromeOptions;
 
 public abstract class LocalWebDriver {
 
-  private static org.openqa.selenium.WebDriver getWebDriver() {
-    try {
-      return WebDriverRunner.getWebDriver();
-    } catch (IllegalStateException ex) {
-      Configuration.headless = false;
-      Configuration.browser = "chrome";
-      Configuration.browserSize = "1920x1080";
-      /**screenshots and savePageSource config is needed for local debug
-       * optionally can be set as 'false' to not duplicate Allure report
-       */
-      Configuration.screenshots = true;
-      Configuration.savePageSource = true;
-      Configuration.pageLoadTimeout = 120000;
-      Configuration.browserCapabilities = new ChromeOptions()
-          .addArguments("--lang=en_US");
-      open();
-      return WebDriverRunner.getWebDriver();
+    private static org.openqa.selenium.WebDriver getWebDriver() {
+        try {
+            return WebDriverRunner.getWebDriver();
+        } catch (IllegalStateException ex) {
+            Configuration.headless = false;
+            Configuration.browser = "chrome";
+            Configuration.browserSize = "1920x1080";
+            /**screenshots and savePageSource config is needed for local debug
+             * optionally can be set as 'false' to not duplicate Allure report
+             */
+            Configuration.screenshots = true;
+            Configuration.savePageSource = true;
+            Configuration.pageLoadTimeout = 120000;
+            Configuration.browserCapabilities = new ChromeOptions()
+                    .addArguments("--remote-allow-origins=*")
+                    .addArguments("--lang=en_US");
+            open();
+            return WebDriverRunner.getWebDriver();
+        }
     }
-  }
 
-  @Step
-  public static void openUrl(String url) {
-    if (!getWebDriver().getCurrentUrl().equals(url)) {
-      getWebDriver().get(url);
+    @Step
+    public static void openUrl(String url) {
+        if (!getWebDriver().getCurrentUrl().equals(url)) {
+            getWebDriver().get(url);
+        }
     }
-  }
 
-  @Step
-  public static void browserInit() {
-    getWebDriver();
-  }
+    @Step
+    public static void browserInit() {
+        getWebDriver();
+    }
 
-  @Step
-  public static void browserClear() {
-    clearBrowserLocalStorage();
-    clearBrowserCookies();
-    refresh();
-  }
+    @Step
+    public static void browserClear() {
+        clearBrowserLocalStorage();
+        clearBrowserCookies();
+        refresh();
+    }
 
-  @Step
-  public static void browserQuit() {
-    getWebDriver().quit();
-  }
+    @Step
+    public static void browserQuit() {
+        getWebDriver().quit();
+    }
 
-  @Step
-  public static void loggerSetup() {
-    SelenideLogger.addListener("AllureSelenide", new AllureSelenide()
-        .screenshots(true)
-        .savePageSource(false));
-  }
+    @Step
+    public static void loggerSetup() {
+        SelenideLogger.addListener("AllureSelenide", new AllureSelenide()
+                .screenshots(true)
+                .savePageSource(false));
+    }
 }

kafka-ui-e2e-checks/src/main/java/com/provectus/kafka/ui/settings/listeners/QaseResultListener.java

@@ -39,9 +39,9 @@ public class QaseResultListener extends TestListenerAdapter implements ITestList
     }
 
     @Override
-    public void onTestStart(ITestResult result) {
+    public void onTestStart(ITestResult tr) {
         getQaseTestCaseListener().onTestCaseStarted();
-        super.onTestStart(result);
+        super.onTestStart(tr);
     }
 
     @Override

kafka-ui-e2e-checks/src/main/java/com/provectus/kafka/ui/utilities/WebUtils.java

@@ -21,6 +21,15 @@ public class WebUtils {
                 .perform();
     }
 
+    public static void sendKeysByActions(SelenideElement element, String keys) {
+        log.debug("\nsendKeysByActions: {} \nsend keys '{}'", element.getSearchCriteria(), keys);
+        element.shouldBe(Condition.enabled);
+        new Actions(WebDriverRunner.getWebDriver())
+                .moveToElement(element)
+                .sendKeys(element, keys)
+                .perform();
+    }
+
     public static void clickByJavaScript(SelenideElement element) {
         log.debug("\nclickByJavaScript: {}", element.getSearchCriteria());
         element.shouldBe(Condition.enabled);

kafka-ui-e2e-checks/src/main/resources/testData/schema_avro_for_update.json → kafka-ui-e2e-checks/src/main/resources/testData/schemas/schema_avro_for_update.json

@@ -5,19 +5,12 @@
   "fields": [
     {
       "name": "text",
-      "type": [
-        "null",
-        "string"
-      ],
+      "type": "string",
       "default": null
     },
     {
       "name": "value",
-      "type": [
-        "null",
-        "string",
-        "long"
-      ],
+      "type": "string",
       "default": null
     }
   ]

kafka-ui-e2e-checks/src/test/java/com/provectus/kafka/ui/smokeSuite/connectors/ConnectorsTest.java

@@ -21,7 +21,7 @@ public class ConnectorsTest extends BaseTest {
     private static final String CONNECT_NAME = "first";
     private static final List<Topic> TOPIC_LIST = new ArrayList<>();
     private static final List<Connector> CONNECTOR_LIST = new ArrayList<>();
-    private static final String MESSAGE_CONTENT = "message_content_create_topic.json";
+    private static final String MESSAGE_CONTENT = "testData/topics/message_content_create_topic.json";
     private static final String MESSAGE_KEY = " ";
     private static final Topic TOPIC_FOR_CREATE = new Topic()
             .setName("topic_for_create_connector-" + randomAlphabetic(5))
@@ -34,10 +34,10 @@ public class ConnectorsTest extends BaseTest {
             .setMessageContent(MESSAGE_CONTENT).setMessageKey(MESSAGE_KEY);
     private static final Connector CONNECTOR_FOR_DELETE = new Connector()
             .setName("sink_postgres_activities_e2e_checks_for_delete-" + randomAlphabetic(5))
-            .setConfig(getResourceAsString("delete_connector_config.json"));
+            .setConfig(getResourceAsString("testData/connectors/delete_connector_config.json"));
     private static final Connector CONNECTOR_FOR_UPDATE = new Connector()
             .setName("sink_postgres_activities_e2e_checks_for_update-" + randomAlphabetic(5))
-            .setConfig(getResourceAsString("config_for_create_connector_via_api.json"));
+            .setConfig(getResourceAsString("testData/connectors/config_for_create_connector_via_api.json"));
 
     @BeforeClass(alwaysRun = true)
     public void beforeClass() {
@@ -56,7 +56,7 @@ public class ConnectorsTest extends BaseTest {
     public void createConnector() {
         Connector connectorForCreate = new Connector()
                 .setName("sink_postgres_activities_e2e_checks-" + randomAlphabetic(5))
-                .setConfig(getResourceAsString("config_for_create_connector.json"));
+                .setConfig(getResourceAsString("testData/connectors/config_for_create_connector.json"));
         navigateToConnectors();
         kafkaConnectList
                 .clickCreateConnectorBtn();

kafka-ui-e2e-checks/src/test/java/com/provectus/kafka/ui/smokeSuite/schemas/SchemasTest.java

@@ -57,7 +57,7 @@ public class SchemasTest extends BaseTest {
     @QaseId(186)
     @Test(priority = 2)
     public void updateSchemaAvro() {
-        AVRO_API.setValuePath(System.getProperty("user.dir") + "/src/main/resources/testData/schema_avro_for_update.json");
+        AVRO_API.setValuePath(System.getProperty("user.dir") + "/src/main/resources/testData/schemas/schema_avro_for_update.json");
         navigateToSchemaRegistryAndOpenDetails(AVRO_API.getName());
         schemaDetails
                 .openEditSchema();
@@ -74,7 +74,8 @@ public class SchemasTest extends BaseTest {
                 .clickSubmitButton();
         schemaDetails
                 .waitUntilScreenReady();
-        Assert.assertEquals(CompatibilityLevel.CompatibilityEnum.NONE.toString(), schemaDetails.getCompatibility(), "getCompatibility()");
+        Assert.assertEquals(schemaDetails.getCompatibility(), CompatibilityLevel.CompatibilityEnum.NONE.toString(),
+                "getCompatibility()");
     }
 
     @QaseId(44)
@@ -88,12 +89,12 @@ public class SchemasTest extends BaseTest {
                 .openCompareVersionMenu();
         int versionsNumberFromDdl = schemaCreateForm
                 .waitUntilScreenReady()
-                .openSchemaVersionDdl()
+                .openLeftVersionDdl()
                 .getVersionsNumberFromList();
-        Assert.assertEquals(latestVersion, versionsNumberFromDdl, "Versions number is not matched");
+        Assert.assertEquals(versionsNumberFromDdl, latestVersion, "Versions number is not matched");
         schemaCreateForm
                 .selectVersionFromDropDown(1);
-        Assert.assertEquals(53, schemaCreateForm.getMarkedLinesNumber(), "getAllMarkedLines()");
+        Assert.assertEquals(schemaCreateForm.getMarkedLinesNumber(), 42, "getAllMarkedLines()");
     }
 
     @QaseId(187)

kafka-ui-e2e-checks/src/test/java/com/provectus/kafka/ui/smokeSuite/topics/MessagesTest.java

@@ -32,7 +32,7 @@ public class MessagesTest extends BaseTest {
             .setMessageKey(randomAlphabetic(5))
             .setMessageContent(randomAlphabetic(10));
     private static final Topic TOPIC_TO_CLEAR_AND_PURGE_MESSAGES = new Topic()
-            .setName("topic-to-clear-and-purge-messages-attribute-" + randomAlphabetic(5))
+            .setName("topic-to-clear-and-purge-messages-" + randomAlphabetic(5))
             .setMessageKey(randomAlphabetic(5))
             .setMessageContent(randomAlphabetic(10));
     private static final Topic TOPIC_FOR_CHECK_FILTERS = new Topic()

kafka-ui-react-app/src/components/App.tsx

@@ -11,7 +11,7 @@ import PageLoader from 'components/common/PageLoader/PageLoader';
 import Dashboard from 'components/Dashboard/Dashboard';
 import ClusterPage from 'components/ClusterPage/ClusterPage';
 import { ThemeProvider } from 'styled-components';
-import theme from 'theme/theme';
+import { theme, darkTheme } from 'theme/theme';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { showServerError } from 'lib/errorHandling';
 import { Toaster } from 'react-hot-toast';
@@ -39,16 +39,18 @@ const queryClient = new QueryClient({
   },
 });
 const App: React.FC = () => {
+  const [isDarkMode, setDarkMode] = React.useState<boolean>(false);
+
   return (
     <QueryClientProvider client={queryClient}>
-      <ThemeProvider theme={theme}>
-        <Suspense fallback={<PageLoader />}>
-          <GlobalSettingsProvider>
+      <GlobalSettingsProvider>
+        <ThemeProvider theme={isDarkMode ? darkTheme : theme}>
+          <Suspense fallback={<PageLoader />}>
             <UserInfoRolesAccessProvider>
               <ConfirmContextProvider>
                 <GlobalCSS />
                 <S.Layout>
-                  <PageContainer>
+                  <PageContainer setDarkMode={setDarkMode}>
                     <Routes>
                       {['/', '/ui', '/ui/clusters'].map((path) => (
                         <Route
@@ -83,9 +85,9 @@ const App: React.FC = () => {
                 <ConfirmationModal />
               </ConfirmContextProvider>
             </UserInfoRolesAccessProvider>
-          </GlobalSettingsProvider>
-        </Suspense>
-      </ThemeProvider>
+          </Suspense>
+        </ThemeProvider>
+      </GlobalSettingsProvider>
     </QueryClientProvider>
   );
 };

kafka-ui-react-app/src/components/Connect/Details/Actions/Action.styled.ts

@@ -15,8 +15,8 @@ export const RestartButton = styled.div`
   border-radius: 4px;
   display: flex;
   -webkit-align-items: center;
-  background: #e8e8fc;
-  color: #171a1c;
+  background: ${({ theme }) => theme.button.primary.backgroundColor.normal};
+  color: ${({ theme }) => theme.button.primary.color.normal};
   font-size: 14px;
   font-weight: 500;
   height: 32px;

kafka-ui-react-app/src/components/Connect/List/TopicsCell.tsx

@@ -27,7 +27,7 @@ const TopicsCell: React.FC<CellContext<FullConnectorInfo, unknown>> = ({
   return (
     <S.TagsWrapper>
       {topics?.map((t) => (
-        <Tag key={t} color="gray">
+        <Tag key={t} color="green">
           <span
             role="link"
             onClick={(e) => navigateToTopic(e, t)}

kafka-ui-react-app/src/components/ConsumerGroups/Details/TopicContents/TopicContent.styled.ts

@@ -1,16 +1,17 @@
 import styled, { css } from 'styled-components';
 
 export const TopicContentWrapper = styled.tr`
-  background-color: ${({ theme }) =>
-    theme.consumerTopicContent.backgroundColor};
+  background-color: ${({ theme }) => theme.default.backgroundColor};
   & > td {
     padding: 16px !important;
+    background-color: ${({ theme }) =>
+      theme.consumerTopicContent.td.backgroundColor};
   }
 `;
 
 export const ContentBox = styled.div(
   ({ theme }) => css`
-    background-color: ${theme.menu.backgroundColor.normal};
+    background-color: ${theme.default.backgroundColor};
     padding: 20px;
     border-radius: 8px;
   `

kafka-ui-react-app/src/components/Dashboard/Dashboard.styled.ts

@@ -5,4 +5,5 @@ export const Toolbar = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
+  color: ${({ theme }) => theme.default.color.normal};
 `;

kafka-ui-react-app/src/components/ErrorPage/ErrorPage.styled.ts

@@ -11,7 +11,7 @@ export const Wrapper = styled.div`
 
 export const Number = styled.div`
   font-size: 100px;
-  color: ${({ theme }) => theme.errorPage.text};
+  color: ${({ theme }) => theme.default.color.normal};
   line-height: initial;
 `;
 

kafka-ui-react-app/src/components/KsqlDb/Query/QueryForm/QueryForm.styled.ts

@@ -19,6 +19,7 @@ export const KSQLInputsWrapper = styled.div`
 export const KSQLInputHeader = styled.div`
   display: flex;
   justify-content: space-between;
+  color: ${({ theme }) => theme.default.color.normal};
 `;
 
 export const KSQLButtons = styled.div`
@@ -31,6 +32,7 @@ export const StreamPropertiesContainer = styled.label`
   flex-direction: column;
   gap: 10px;
   width: 50%;
+  color: ${({ theme }) => theme.default.color.normal};
 `;
 
 export const InputsContainer = styled.div`
@@ -49,9 +51,18 @@ export const StreamPropertiesInputWrapper = styled.div`
     width: 100%;
     height: 40px;
     border: 1px solid grey;
+    &:focus {
+      outline: none;
+      border-color: ${({ theme }) => theme.input.borderColor.focus};
+      &::placeholder {
+        color: transparent;
+      }
+    }
     border-radius: 4px;
     font-size: 16px;
     padding-left: 15px;
+    background-color: ${({ theme }) => theme.input.backgroundColor.normal};
+    color: ${({ theme }) => theme.input.color.normal};
   }
 `;
 
@@ -73,8 +84,28 @@ export const SQLEditor = styled(BaseSQLEditor)(
     css`
       background: ${readOnly && theme.ksqlDb.query.editor.readonly.background};
       .ace-cursor {
-        ${readOnly && theme.ksqlDb.query.editor.readonly.cursor}
+        ${readOnly && `background: ${theme.default.transparentColor} `}
+      }
+
+      .ace_content {
+        background-color: ${theme.default.backgroundColor};
+        color: ${theme.default.color.normal};
+      }
+      .ace_line {
+        background-color: ${theme.ksqlDb.query.editor.activeLine
+          .backgroundColor};
       }
+      .ace_gutter-cell {
+        background-color: ${theme.ksqlDb.query.editor.cell.backgroundColor};
+      }
+      .ace_gutter-layer {
+        background-color: ${theme.ksqlDb.query.editor.layer.backgroundColor};
+        color: ${theme.default.color.normal};
+      }
+      .ace_cursor {
+        color: ${theme.ksqlDb.query.editor.cursor};
+      }
+
       .ace_print-margin {
         display: none;
       }

kafka-ui-react-app/src/components/KsqlDb/Query/QueryForm/QueryForm.tsx

@@ -146,6 +146,7 @@ const QueryForm: React.FC<Props> = ({
                         placeholder="Key"
                         aria-label="key"
                         type="text"
+                        autoComplete="off"
                       />
                     )}
                   />
@@ -166,6 +167,7 @@ const QueryForm: React.FC<Props> = ({
                         placeholder="Value"
                         aria-label="value"
                         type="text"
+                        autoComplete="off"
                       />
                     )}
                   />

kafka-ui-react-app/src/components/Nav/ClusterTab/ClusterTab.styled.ts

@@ -36,6 +36,7 @@ export const Title = styled.div`
   max-width: 110px;
   overflow: hidden;
   text-overflow: ellipsis;
+  color: ${({ theme }) => theme.menu.titleColor};
 `;
 
 export const StatusIconWrapper = styled.svg.attrs({

kafka-ui-react-app/src/components/Nav/ClusterTab/__tests__/ClusterTab.styled.spec.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from 'lib/testHelpers';
-import theme from 'theme/theme';
+import { theme } from 'theme/theme';
 import { screen } from '@testing-library/react';
 import * as S from 'components/Nav/ClusterTab/ClusterTab.styled';
 import { ServerStatus } from 'generated-sources';

kafka-ui-react-app/src/components/NavBar/NavBar.styled.ts

@@ -28,11 +28,11 @@ export const NavbarBrand = styled.div`
 `;
 
 export const SocialLink = styled.a(
-  ({ theme: { layout, icons } }) => css`
+  ({ theme: { icons } }) => css`
     display: block;
     margin-top: 5px;
     cursor: pointer;
-    fill: ${layout.socialLink.color};
+    fill: ${icons.discord.normal};
 
     &:hover {
       ${DiscordIcon} {
@@ -60,7 +60,7 @@ export const NavbarSocial = styled.div`
   display: flex;
   align-items: center;
   gap: 10px;
-  margin: 10px;
+  margin: 5px 10px 5px;
 `;
 
 export const NavbarItem = styled.div`
@@ -138,7 +138,10 @@ export const Hyperlink = styled(Link)(
     font-weight: bold;
     font-size: 12px;
     line-height: 16px;
-    color: ${theme.menu.color.active};
+    color: ${theme.default.color.normal};
+    &:hover {
+      color: ${theme.default.color.normal};
+    }
     text-decoration: none;
     word-break: break-word;
     cursor: pointer;

kafka-ui-react-app/src/components/NavBar/NavBar.tsx

@@ -1,17 +1,92 @@
 import React from 'react';
+import Select from 'components/common/Select/Select';
 import Logo from 'components/common/Logo/Logo';
 import Version from 'components/Version/Version';
 import GitIcon from 'components/common/Icons/GitIcon';
 import DiscordIcon from 'components/common/Icons/DiscordIcon';
+import AutoIcon from 'components/common/Icons/AutoIcon';
+import SunIcon from 'components/common/Icons/SunIcon';
+import MoonIcon from 'components/common/Icons/MoonIcon';
 
-import * as S from './NavBar.styled';
 import UserInfo from './UserInfo/UserInfo';
+import * as S from './NavBar.styled';
 
 interface Props {
   onBurgerClick: () => void;
+  setDarkMode: (value: boolean) => void;
 }
 
-const NavBar: React.FC<Props> = ({ onBurgerClick }) => {
+type ThemeDropDownValue = 'auto_theme' | 'light_theme' | 'dark_theme';
+
+const options = [
+  {
+    label: (
+      <>
+        <AutoIcon />
+        <div>Auto theme</div>
+      </>
+    ),
+    value: 'auto_theme',
+  },
+  {
+    label: (
+      <>
+        <SunIcon />
+        <div>Light theme</div>
+      </>
+    ),
+    value: 'light_theme',
+  },
+  {
+    label: (
+      <>
+        <MoonIcon />
+        <div>Dark theme</div>
+      </>
+    ),
+    value: 'dark_theme',
+  },
+];
+
+const NavBar: React.FC<Props> = ({ onBurgerClick, setDarkMode }) => {
+  const matchDark = window.matchMedia('(prefers-color-scheme: dark)');
+  const [themeMode, setThemeMode] = React.useState<ThemeDropDownValue>();
+
+  React.useLayoutEffect(() => {
+    const mode = localStorage.getItem('mode');
+    if (mode) {
+      setThemeMode(mode as ThemeDropDownValue);
+      if (mode === 'auto_theme') {
+        setDarkMode(matchDark.matches);
+      } else if (mode === 'light_theme') {
+        setDarkMode(false);
+      } else if (mode === 'dark_theme') {
+        setDarkMode(true);
+      }
+    } else {
+      setThemeMode('auto_theme');
+    }
+  }, []);
+
+  React.useEffect(() => {
+    if (themeMode === 'auto_theme') {
+      setDarkMode(matchDark.matches);
+      matchDark.addListener((e) => {
+        setDarkMode(e.matches);
+      });
+    }
+  }, [matchDark, themeMode]);
+
+  const onChangeThemeMode = (value: string | number) => {
+    setThemeMode(value as ThemeDropDownValue);
+    localStorage.setItem('mode', value as string);
+    if (value === 'light_theme') {
+      setDarkMode(false);
+    } else if (value === 'dark_theme') {
+      setDarkMode(true);
+    }
+  };
+
   return (
     <S.Navbar role="navigation" aria-label="Page Header">
       <S.NavbarBrand>
@@ -39,6 +114,12 @@ const NavBar: React.FC<Props> = ({ onBurgerClick }) => {
         </S.NavbarBrand>
       </S.NavbarBrand>
       <S.NavbarSocial>
+        <Select
+          options={options}
+          value={themeMode}
+          onChange={onChangeThemeMode}
+          isThemeMode
+        />
         <S.SocialLink
           href="https://github.com/provectus/kafka-ui"
           target="_blank"

kafka-ui-react-app/src/components/NavBar/UserInfo/UserInfo.tsx

@@ -2,14 +2,12 @@ import React from 'react';
 import { Dropdown, DropdownItem } from 'components/common/Dropdown';
 import UserIcon from 'components/common/Icons/UserIcon';
 import DropdownArrowIcon from 'components/common/Icons/DropdownArrowIcon';
-import { useTheme } from 'styled-components';
 import { useUserInfo } from 'lib/hooks/useUserInfo';
 
 import * as S from './UserInfo.styled';
 
 const UserInfo = () => {
   const { username } = useUserInfo();
-  const theme = useTheme();
 
   return username ? (
     <Dropdown
@@ -17,11 +15,7 @@ const UserInfo = () => {
         <S.Wrapper>
           <UserIcon />
           <S.Text>{username}</S.Text>
-          <DropdownArrowIcon
-            isOpen={false}
-            style={{}}
-            color={theme.button.primary.invertedColors.normal}
-          />
+          <DropdownArrowIcon isOpen={false} />
         </S.Wrapper>
       }
     >

kafka-ui-react-app/src/components/NavBar/__tests__/NavBar.spec.tsx

@@ -12,7 +12,15 @@ jest.mock('components/NavBar/UserInfo/UserInfo', () => () => (
 
 describe('NavBar', () => {
   beforeEach(() => {
-    render(<NavBar onBurgerClick={jest.fn()} />);
+    Object.defineProperty(window, 'matchMedia', {
+      writable: true,
+      value: jest.fn().mockImplementation(() => ({
+        matches: false,
+        addListener: jest.fn(),
+      })),
+    });
+
+    render(<NavBar onBurgerClick={jest.fn()} setDarkMode={jest.fn()} />);
   });
 
   it('correctly renders header', () => {

kafka-ui-react-app/src/components/PageContainer/PageContainer.tsx

@@ -5,7 +5,9 @@ import * as S from 'components/PageContainer/PageContainer.styled';
 import Nav from 'components/Nav/Nav';
 import useBoolean from 'lib/hooks/useBoolean';
 
-const PageContainer: React.FC<PropsWithChildren<unknown>> = ({ children }) => {
+const PageContainer: React.FC<
+  PropsWithChildren<{ setDarkMode: (value: boolean) => void }>
+> = ({ children, setDarkMode }) => {
   const {
     value: isSidebarVisible,
     toggle,
@@ -19,7 +21,7 @@ const PageContainer: React.FC<PropsWithChildren<unknown>> = ({ children }) => {
 
   return (
     <>
-      <NavBar onBurgerClick={toggle} />
+      <NavBar onBurgerClick={toggle} setDarkMode={setDarkMode} />
       <S.Container>
         <S.Sidebar aria-label="Sidebar" $visible={isSidebarVisible}>
           <Nav />

kafka-ui-react-app/src/components/PageContainer/__tests__/PageContainer.spec.tsx

@@ -19,9 +19,16 @@ describe('Page Container', () => {
     (useClusters as jest.Mock).mockImplementation(() => ({
       isSuccess: false,
     }));
+    Object.defineProperty(window, 'matchMedia', {
+      writable: true,
+      value: jest.fn().mockImplementation(() => ({
+        matches: false,
+        addListener: jest.fn(),
+      })),
+    });
 
     render(
-      <PageContainer>
+      <PageContainer setDarkMode={jest.fn()}>
         <div>child</div>
       </PageContainer>
     );

kafka-ui-react-app/src/components/Schemas/Details/LatestVersion/LatestVersionItem.styled.tsx

@@ -1,11 +1,10 @@
 import Heading from 'components/common/heading/Heading.styled';
 import React from 'react';
 import styled from 'styled-components';
-import theme from 'theme/theme';
 
 export const Wrapper = styled.div`
   width: 100%;
-  background-color: ${theme.layout.stuffColor};
+  background-color: ${({ theme }) => theme.layout.stuffColor};
   padding: 16px;
   display: flex;
   justify-content: center;
@@ -14,7 +13,7 @@ export const Wrapper = styled.div`
   max-height: 700px;
 
   & > * {
-    background-color: ${theme.panelColor};
+    background-color: ${({ theme }) => theme.default.backgroundColor};
     padding: 24px;
     overflow-y: scroll;
   }
@@ -33,12 +32,16 @@ export const Wrapper = styled.div`
       gap: 16px;
       padding-bottom: 16px;
     }
+
+    p {
+      color: ${({ theme }) => theme.schema.backgroundColor.p};
+    }
   }
 `;
 
 export const MetaDataLabel = styled((props) => (
   <Heading level={4} {...props} />
 ))`
-  color: ${theme.lastestVersionItem.metaDataLabel.color};
+  color: ${({ theme }) => theme.lastestVersionItem.metaDataLabel.color};
   width: 110px;
 `;

kafka-ui-react-app/src/components/Schemas/Diff/Diff.styled.ts

@@ -8,12 +8,37 @@ export const DiffWrapper = styled.div`
   flex-shrink: 1;
   min-height: min-content;
   padding-top: 1.5rem !important;
-  &
-    .ace_editor
-    > .ace_scroller
-    > .ace_content
-    > .ace_marker-layer
-    > .codeMarker {
+
+  .ace_content {
+    background-color: ${({ theme }) => theme.default.backgroundColor};
+    color: ${({ theme }) => theme.default.color.normal};
+  }
+  .ace_line {
+    background-color: ${({ theme }) => theme.default.backgroundColor};
+  }
+  .ace_gutter-cell {
+    background-color: ${({ theme }) =>
+      theme.ksqlDb.query.editor.cell.backgroundColor};
+  }
+  .ace_gutter-layer {
+    background-color: ${({ theme }) =>
+      theme.ksqlDb.query.editor.layer.backgroundColor};
+    color: ${({ theme }) => theme.default.color.normal};
+  }
+  .ace_cursor {
+    color: ${({ theme }) => theme.ksqlDb.query.editor.cursor};
+  }
+
+  .ace_print-margin {
+    display: none;
+  }
+  .ace_variable {
+    color: ${({ theme }) => theme.ksqlDb.query.editor.variable};
+  }
+  .ace_string {
+    color: ${({ theme }) => theme.ksqlDb.query.editor.aceString};
+  }
+  > .codeMarker {
     background: ${({ theme }) => theme.icons.warningIcon};
     position: absolute;
     z-index: 20;

kafka-ui-react-app/src/components/Schemas/Edit/Edit.styled.ts

@@ -2,7 +2,7 @@ import styled, { css } from 'styled-components';
 
 export const EditWrapper = styled.div`
   padding: 16px;
-  padding-top: 0px;
+  padding-top: 0;
   & > form {
     display: flex;
     flex-direction: column;
@@ -44,6 +44,7 @@ export const EditorContainer = styled.div(
       font-size: 16px;
       line-height: 24px;
       padding-bottom: 16px;
+      color: ${theme.heading.h4};
     }
   `
 );

kafka-ui-react-app/src/components/Schemas/List/GlobalSchemaSelector/GlobalSchemaSelector.styled.ts

@@ -4,4 +4,7 @@ export const Wrapper = styled.div`
   display: flex;
   gap: 5px;
   align-items: center;
+  & > div {
+    color: ${({ theme }) => theme.select.label};
+  }
 `;

kafka-ui-react-app/src/components/Topics/Topic/Edit/DangerZone/DangerZone.styled.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 export const Wrapper = styled.div`
   margin-top: 16px;
   padding: 16px;
-  border-top: 1px solid ${({ theme }) => theme.dangerZone.borderColor};
+  border: 1px solid ${({ theme }) => theme.dangerZone.borderColor};
   box-sizing: border-box;
   width: 768px;
 

kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/Filters.styled.ts

@@ -48,18 +48,24 @@ export const SeekTypeSelectorWrapper = styled.div`
 
 export const OffsetSelector = styled(Input)`
   border-radius: 0 4px 4px 0 !important;
-  border-left: none;
+  &::placeholder {
+    color: ${({ theme }) => theme.input.color.normal};
+  }
 `;
 
 export const DatePickerInput = styled(DatePicker)`
   height: 32px;
-  border: 1px ${(props) => props.theme.select.borderColor.normal} solid;
+  border: 1px ${({ theme }) => theme.select.borderColor.normal} solid;
   border-left: none;
   border-radius: 0 4px 4px 0;
   font-size: 14px;
   width: 100%;
   padding-left: 12px;
-  color: ${(props) => props.theme.select.color.normal};
+  background-color: ${({ theme }) => theme.input.backgroundColor.normal};
+  color: ${({ theme }) => theme.input.color.normal};
+  &::placeholder {
+    color: ${({ theme }) => theme.input.color.normal};
+  }
 
   background-image: url('data:image/svg+xml,%3Csvg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M1 1L5 5L9 1" stroke="%23454F54"/%3E%3C/svg%3E%0A') !important;
   background-repeat: no-repeat !important;
@@ -83,7 +89,10 @@ export const FiltersMetrics = styled.div`
   padding-top: 16px;
   padding-bottom: 16px;
 `;
-
+export const Message = styled.div`
+  font-size: 14px;
+  color: ${({ theme }) => theme.metrics.filters.color.normal};
+`;
 export const Metric = styled.div`
   color: ${({ theme }) => theme.metrics.filters.color.normal};
   font-size: 12px;
@@ -168,6 +177,7 @@ export const FilterTitle = styled.h3`
   display: flex;
   align-items: center;
   justify-content: space-between;
+  color: ${({ theme }) => theme.modal.color};
   &:after {
     content: '';
     width: calc(100% + 32px);
@@ -176,7 +186,7 @@ export const FilterTitle = styled.h3`
     top: 40px;
     left: -16px;
     display: inline-block;
-    background-color: #f1f2f3;
+    background-color: ${({ theme }) => theme.modal.border.top};
   }
 `;
 
@@ -184,9 +194,12 @@ export const CreatedFilter = styled.p`
   margin: 25px 0 10px;
   font-size: 14px;
   line-height: 20px;
-  color: ${({ theme }) => theme.list.meta.color};
+  color: ${({ theme }) => theme.savedFilter.color};
 `;
 
+export const NoSavedFilter = styled.p`
+  color: ${({ theme }) => theme.savedFilter.color};
+`;
 export const SavedFiltersContainer = styled.div`
   overflow-y: auto;
   height: 195px;
@@ -197,6 +210,7 @@ export const SavedFiltersContainer = styled.div`
 export const SavedFilterName = styled.div`
   font-size: 14px;
   line-height: 20px;
+  color: ${({ theme }) => theme.savedFilter.filterName};
 `;
 
 export const FilterButtonWrapper = styled.div`
@@ -214,7 +228,7 @@ export const FilterButtonWrapper = styled.div`
     top: 0;
     left: -16px;
     display: inline-block;
-    background-color: #f1f2f3;
+    background-color: ${({ theme }) => theme.modal.border.bottom};
   }
 `;
 
@@ -242,7 +256,7 @@ export const FilterOptions = styled.div`
   display: none;
   width: 50px;
   justify-content: space-between;
-  color: ${({ theme }) => theme.editFilterText.color};
+  color: ${({ theme }) => theme.editFilter.textColor};
 `;
 
 export const SavedFilter = styled.div.attrs({
@@ -254,28 +268,28 @@ export const SavedFilter = styled.div.attrs({
   height: 32px;
   align-items: center;
   cursor: pointer;
-  border-top: 1px solid #f1f2f3;
+  border-top: 1px solid ${({ theme }) => theme.panelColor.borderTop};
   &:hover ${FilterOptions} {
     display: flex;
   }
   &:hover {
     background: ${({ theme }) => theme.layout.stuffColor};
   }
-  background: ${(props) =>
-    props.selected ? props.theme.layout.stuffColor : props.theme.panelColor};
+  background: ${({ selected, theme }) =>
+    selected ? theme.layout.stuffColor : theme.modal.backgroundColor};
 `;
 
 export const ActiveSmartFilter = styled.div`
   border-radius: 4px;
   min-width: 115px;
   height: 24px;
-  background: ${({ theme }) => theme.layout.stuffColor};
+  background: ${({ theme }) => theme.savedFilter.backgroundColor};
   font-size: 14px;
   line-height: 20px;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  color: ${({ theme }) => theme.input.label.color};
+  color: ${({ theme }) => theme.savedFilter.color};
   padding: 16px 8px;
 `;
 
@@ -294,7 +308,7 @@ export const MessageLoading = styled.div.attrs({
 })<MessageLoadingProps>`
   color: ${({ theme }) => theme.heading.h3.color};
   font-size: ${({ theme }) => theme.heading.h3.fontSize};
-  display: ${(props) => (props.isLive ? 'flex' : 'none')};
+  display: ${({ isLive }) => (isLive ? 'flex' : 'none')};
   justify-content: space-around;
   width: 250px;
 `;
@@ -306,7 +320,7 @@ export const StopLoading = styled.div`
 `;
 
 export const MessageLoadingSpinner = styled.div<MessageLoadingSpinnerProps>`
-  display: ${(props) => (props.isFetching ? 'block' : 'none')};
+  display: ${({ isFetching }) => (isFetching ? 'block' : 'none')};
   border: 3px solid ${({ theme }) => theme.pageLoader.borderColor};
   border-bottom: 3px solid ${({ theme }) => theme.pageLoader.borderBottomColor};
   border-radius: 50%;
@@ -335,7 +349,7 @@ export const SavedFiltersTextContainer = styled.div.attrs({
 
 const textStyle = css`
   font-size: 14px;
-  color: ${({ theme }) => theme.editFilterText.color};
+  color: ${({ theme }) => theme.editFilter.textColor};
   font-weight: 500;
 `;
 
@@ -354,3 +368,9 @@ export const SeekTypeSelect = styled(Select)`
   border-bottom-right-radius: 0;
   user-select: none;
 `;
+
+export const Serdes = styled.div`
+  display: flex;
+  gap: 24px;
+  padding: 8px 0;
+`;

kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/Filters.tsx

@@ -517,7 +517,7 @@ const Filters: React.FC<FiltersProps> = ({
       <S.ActiveSmartFilterWrapper>
         <Search placeholder="Search" disabled={isTailing} />
 
-        <Button buttonType="primary" buttonSize="M" onClick={toggle}>
+        <Button buttonType="secondary" buttonSize="M" onClick={toggle}>
           <PlusIcon />
           Add Filters
         </Button>
@@ -542,11 +542,11 @@ const Filters: React.FC<FiltersProps> = ({
         />
       )}
       <S.FiltersMetrics>
-        <p style={{ fontSize: 14 }}>
+        <S.Message>
           {seekDirection !== SeekDirection.TAILING &&
             isFetching &&
             phaseMessage}
-        </p>
+        </S.Message>
         <S.MessageLoading isLive={isTailing}>
           <S.MessageLoadingSpinner isFetching={isFetching} />
           Loading messages.

kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/SavedFilters.tsx

@@ -63,7 +63,9 @@ const SavedFilters: FC<Props> = ({
       </S.BackToCustomText>
       <S.SavedFiltersContainer>
         <S.CreatedFilter>Saved filters</S.CreatedFilter>
-        {filters.length === 0 && <p>No saved filter(s)</p>}
+        {filters.length === 0 && (
+          <S.NoSavedFilter>No saved filter(s)</S.NoSavedFilter>
+        )}
         {filters.map((filter, index) => (
           <S.SavedFilter
             key={Symbol(filter.name).toString()}

kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/__tests__/Filters.styled.spec.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { render } from 'lib/testHelpers';
 import * as S from 'components/Topics/Topic/Messages/Filters/Filters.styled';
 import { screen } from '@testing-library/react';
-import theme from 'theme/theme';
+import { theme } from 'theme/theme';
 
 describe('Filters Styled components', () => {
   describe('MessageLoading component', () => {

kafka-ui-react-app/src/components/Topics/Topic/Messages/MessageContent/MessageContent.styled.ts

@@ -22,7 +22,7 @@ export const Section = styled.div`
 `;
 
 export const ContentBox = styled.div`
-  background-color: white;
+  background-color: ${({ theme }) => theme.topicMetaData.backgroundColor};
   padding: 24px;
   border-radius: 8px 0 0 8px;
   flex-grow: 3;
@@ -37,7 +37,7 @@ export const ContentBox = styled.div`
 `;
 
 export const MetadataWrapper = styled.div`
-  background-color: white;
+  background-color: ${({ theme }) => theme.topicMetaData.backgroundColor};
   padding: 24px;
   border-radius: 0 8px 8px 0;
   flex-grow: 1;
@@ -89,7 +89,7 @@ export const Tab = styled.button<{ $active?: boolean }>(
       border-radius: 0 4px 4px 0;
     }
     &:not(:last-child) {
-      border-right: 0px;
+      border-right: 0;
     }
   `
 );

kafka-ui-react-app/src/components/Topics/Topic/Messages/MessageContent/__tests__/MessageContent.spec.tsx

@@ -8,7 +8,7 @@ import MessageContent, {
 import { TopicMessageTimestampTypeEnum } from 'generated-sources';
 import userEvent from '@testing-library/user-event';
 import { render } from 'lib/testHelpers';
-import theme from 'theme/theme';
+import { theme } from 'theme/theme';
 
 const setupWrapper = (props?: Partial<MessageContentProps>) => {
   return (

kafka-ui-react-app/src/components/Topics/Topic/Messages/PreviewModal.styled.ts

@@ -33,4 +33,5 @@ export const Field = styled.div`
   white-space: nowrap;
   overflow: hidden;
   margin-right: 5px;
+  color: ${({ theme }) => theme.modal.color};
 `;

kafka-ui-react-app/src/components/Topics/Topic/Overview/__test__/Overview.spec.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { screen } from '@testing-library/react';
 import { render, WithRoute } from 'lib/testHelpers';
 import Overview from 'components/Topics/Topic/Overview/Overview';
-import theme from 'theme/theme';
+import { theme } from 'theme/theme';
 import { CleanUpPolicy, Topic } from 'generated-sources';
 import ClusterContext from 'components/contexts/ClusterContext';
 import userEvent from '@testing-library/user-event';

kafka-ui-react-app/src/components/Topics/Topic/Statistics/Metrics.tsx

@@ -53,7 +53,7 @@ const Metrics: React.FC = () => {
             await cancelTopicAnalysis.mutateAsync();
             setIsAnalyzing(true);
           }}
-          buttonType="primary"
+          buttonType="secondary"
           buttonSize="M"
           permission={{
             resource: ResourceType.TOPIC,

kafka-ui-react-app/src/components/Topics/shared/Form/TopicForm.styled.ts

@@ -13,6 +13,7 @@ export const NameField = styled.div`
 
 export const CustomParamsHeading = styled.h4`
   font-weight: 500;
+  color: ${({ theme }) => theme.heading.h4};
 `;
 
 export const Label = styled.div`
@@ -29,12 +30,10 @@ export const Label = styled.div`
 export const Button = styled.button<{ isActive: boolean }>`
   background-color: ${({ theme, ...props }) =>
     props.isActive
-      ? theme.button.secondary.invertedColors.normal
-      : theme.button.secondary.backgroundColor.normal};
+      ? theme.chips.backgroundColor.active
+      : theme.chips.backgroundColor.normal};
   color: ${({ theme, ...props }) =>
-    props.isActive
-      ? theme.button.secondary.isActiveColor
-      : theme.button.primary.color};
+    props.isActive ? theme.chips.color.active : theme.chips.color.normal};
   height: 24px;
   padding: 0 5px;
   min-width: 51px;

kafka-ui-react-app/src/components/Topics/shared/Form/TopicForm.tsx

@@ -97,6 +97,7 @@ const TopicForm: React.FC<Props> = ({
                 name="name"
                 placeholder="Topic Name"
                 defaultValue={topicName}
+                autoComplete="off"
               />
               <FormError>
                 <ErrorMessage errors={errors} name="name" />
@@ -251,7 +252,7 @@ const TopicForm: React.FC<Props> = ({
         <S.ButtonWrapper>
           <Button
             type="button"
-            buttonType="primary"
+            buttonType="secondary"
             buttonSize="L"
             onClick={onCancel}
           >

kafka-ui-react-app/src/components/Topics/shared/Form/__tests__/TimeToRetainBtn.spec.tsx

@@ -5,7 +5,7 @@ import TimeToRetainBtn, {
   Props,
 } from 'components/Topics/shared/Form/TimeToRetainBtn';
 import { useForm, FormProvider } from 'react-hook-form';
-import theme from 'theme/theme';
+import { theme } from 'theme/theme';
 import userEvent from '@testing-library/user-event';
 
 describe('TimeToRetainBtn', () => {
@@ -42,7 +42,7 @@ describe('TimeToRetainBtn', () => {
     it('should test the non active state of the button and its styling', () => {
       const buttonElement = screen.getByRole('button');
       expect(buttonElement).toHaveStyle(
-        `background-color:${theme.button.secondary.backgroundColor.normal}`
+        `background-color:${theme.chips.backgroundColor.normal}`
       );
       expect(buttonElement).toHaveStyle(`border:none`);
     });
@@ -50,7 +50,7 @@ describe('TimeToRetainBtn', () => {
       const buttonElement = screen.getByRole('button');
       await userEvent.click(buttonElement);
       expect(buttonElement).toHaveStyle(
-        `background-color:${theme.button.secondary.invertedColors.normal}`
+        `background-color:${theme.chips.backgroundColor.active}`
       );
       expect(buttonElement).toHaveStyle(`border:none`);
     });

kafka-ui-react-app/src/components/Topics/shared/Form/__tests__/TopicForm.styled.spec.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { render } from 'lib/testHelpers';
 import * as S from 'components/Topics/shared/Form/TopicForm.styled';
 import { screen } from '@testing-library/react';
-import theme from 'theme/theme';
+import { theme } from 'theme/theme';
 
 describe('TopicForm styled components', () => {
   describe('Button', () => {
@@ -11,7 +11,7 @@ describe('TopicForm styled components', () => {
       const button = screen.getByRole('button');
       expect(button).toHaveStyle({
         border: `none`,
-        backgroundColor: theme.button.secondary.invertedColors.normal,
+        backgroundColor: theme.chips.backgroundColor.active,
       });
     });
 
@@ -20,7 +20,7 @@ describe('TopicForm styled components', () => {
       const button = screen.getByRole('button');
       expect(button).toHaveStyle({
         border: `none`,
-        backgroundColor: theme.button.secondary.backgroundColor.normal,
+        backgroundColor: theme.chips.backgroundColor.normal,
       });
     });
   });

kafka-ui-react-app/src/components/Version/Version.styled.ts

@@ -2,22 +2,22 @@ import styled, { css } from 'styled-components';
 
 export const Wrapper = styled.div`
   display: flex;
-  align-items: center;
+  align-items: baseline;
 `;
 
 const textStyle = css`
   font-family: Inter, sans-serif;
   font-style: normal;
   font-weight: normal;
-  font-size: 12px;
-  line-height: 16px;
+  font-size: 14px;
+  line-height: 20px;
 `;
 
 export const CurrentVersion = styled.span(
   ({ theme }) => css`
-    ${textStyle}
+    ${textStyle};
     color: ${theme.version.currentVersion.color};
-    margin-right: 0.25rem;
+    margin-left: 0.25rem;
   `
 );
 
@@ -25,13 +25,13 @@ export const OutdatedWarning = styled.span`
   ${textStyle}
 `;
 
-export const SymbolWrapper = styled.span(
+export const CurrentCommitLink = styled.a(
   ({ theme }) => css`
-    ${textStyle}
-    color: ${theme.version.symbolWrapper.color};
+    ${textStyle};
+    color: ${theme.version.commitLink.color};
+    margin-left: 0.25rem;
+    &:hover {
+      color: ${theme.version.commitLink.color};
+    }
   `
 );
-
-export const CurrentCommitLink = styled.a`
-  ${textStyle}
-`;

kafka-ui-react-app/src/components/Version/Version.tsx

@@ -27,8 +27,6 @@ const Version: React.FC = () => {
 
   return (
     <S.Wrapper>
-      <S.CurrentVersion>{currentVersion}</S.CurrentVersion>
-
       {!!outdated && (
         <S.OutdatedWarning
           title={`Your app version is outdated. Current latest version is ${latestTag}`}
@@ -38,8 +36,7 @@ const Version: React.FC = () => {
       )}
 
       {commit && (
-        <>
-          <S.SymbolWrapper>&#40;</S.SymbolWrapper>
+        <div>
           <S.CurrentCommitLink
             title="Current commit"
             target="__blank"
@@ -47,9 +44,9 @@ const Version: React.FC = () => {
           >
             {commit}
           </S.CurrentCommitLink>
-          <S.SymbolWrapper>&#41;</S.SymbolWrapper>
-        </>
+        </div>
       )}
+      <S.CurrentVersion>{currentVersion}</S.CurrentVersion>
     </S.Wrapper>
   );
 };

kafka-ui-react-app/src/components/__tests__/App.spec.tsx

@@ -9,6 +9,8 @@ jest.mock('components/Nav/Nav', () => () => <div>Navigation</div>);
 
 jest.mock('components/Version/Version', () => () => <div>Version</div>);
 
+jest.mock('components/NavBar/NavBar', () => () => <div>NavBar</div>);
+
 jest.mock('lib/hooks/api/roles', () => ({
   useGetUserInfo: jest.fn(),
 }));
@@ -33,4 +35,8 @@ describe('App', () => {
   it('Renders navigation', async () => {
     expect(screen.getByText('Navigation')).toBeInTheDocument();
   });
+
+  it('Renders NavBar', async () => {
+    expect(screen.getByText('NavBar')).toBeInTheDocument();
+  });
 });

kafka-ui-react-app/src/components/common/Button/Button.styled.ts

@@ -16,52 +16,58 @@ const StyledButton = styled.button<ButtonProps>`
   border-radius: 4px;
   white-space: nowrap;
 
-  background: ${(props) =>
-    props.isInverted
+  background: ${({ isInverted, buttonType, theme }) =>
+    isInverted
       ? 'transparent'
-      : props.theme.button[props.buttonType].backgroundColor.normal};
-  color: ${(props) =>
-    props.isInverted
-      ? props.theme.button[props.buttonType].invertedColors.normal
-      : props.theme.button[props.buttonType].color};
-  font-size: ${(props) => props.theme.button.fontSize[props.buttonSize]};
+      : theme.button[buttonType].backgroundColor.normal};
+  color: ${({ isInverted, buttonType, theme }) =>
+    isInverted
+      ? theme.button[buttonType].invertedColors.normal
+      : theme.button[buttonType].color.normal};
+  font-size: ${({ theme, buttonSize }) => theme.button.fontSize[buttonSize]};
   font-weight: 500;
-  height: ${(props) => props.theme.button.height[props.buttonSize]};
+  height: ${({ theme, buttonSize }) => theme.button.height[buttonSize]};
 
   &:hover:enabled {
-    background: ${(props) =>
-      props.isInverted
+    background: ${({ isInverted, buttonType, theme }) =>
+      isInverted
         ? 'transparent'
-        : props.theme.button[props.buttonType].backgroundColor.hover};
-    color: ${(props) =>
-      props.isInverted
-        ? props.theme.button[props.buttonType].invertedColors.hover
-        : props.theme.button[props.buttonType].color};
+        : theme.button[buttonType].backgroundColor.hover};
+    color: ${({ isInverted, buttonType, theme }) =>
+      isInverted
+        ? theme.button[buttonType].invertedColors.hover
+        : theme.button[buttonType].color};
     cursor: pointer;
   }
   &:active:enabled {
-    background: ${(props) =>
-      props.isInverted
+    background: ${({ isInverted, buttonType, theme }) =>
+      isInverted
         ? 'transparent'
-        : props.theme.button[props.buttonType].backgroundColor.active};
-    color: ${(props) =>
-      props.isInverted
-        ? props.theme.button[props.buttonType].invertedColors.active
-        : props.theme.button[props.buttonType].color};
+        : theme.button[buttonType].backgroundColor.active};
+    color: ${({ isInverted, buttonType, theme }) =>
+      isInverted
+        ? theme.button[buttonType].invertedColors.active
+        : theme.button[buttonType].color};
   }
   &:disabled {
     opacity: 0.5;
     cursor: not-allowed;
+    background: ${({ buttonType, theme }) =>
+      theme.button[buttonType].backgroundColor.disabled};
+    color: ${({ buttonType, theme }) =>
+      theme.button[buttonType].color.disabled};
   }
 
   & a {
-    color: ${(props) => props.theme.button.primary.color};
+    color: ${({ theme }) => theme.button.primary.color};
   }
 
-  & :first-of-type {
-    svg {
-      margin-right: 7px;
-    }
+  & svg {
+    margin-right: 7px;
+    fill: ${({ theme, disabled, buttonType }) =>
+      disabled
+        ? theme.button[buttonType].color.disabled
+        : theme.button[buttonType].color.normal};
   }
 `;
 

kafka-ui-react-app/src/components/common/Button/__tests__/Button.spec.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Button } from 'components/common/Button/Button';
 import { screen } from '@testing-library/react';
 import { render } from 'lib/testHelpers';
-import theme from 'theme/theme';
+import { theme } from 'theme/theme';
 
 describe('Button', () => {
   it('renders small primary Button', () => {
@@ -10,7 +10,7 @@ describe('Button', () => {
     expect(screen.getByRole('button')).toBeInTheDocument();
     expect(screen.getByRole('button')).toHaveStyleRule(
       'color',
-      theme.button.primary.color
+      theme.button.primary.color.normal
     );
     expect(screen.getByRole('button')).toHaveStyleRule(
       'font-size',
@@ -23,7 +23,7 @@ describe('Button', () => {
     expect(screen.getByRole('button')).toBeInTheDocument();
     expect(screen.getByRole('button')).toHaveStyleRule(
       'color',
-      theme.button.secondary.color
+      theme.button.secondary.color.normal
     );
     expect(screen.getByRole('button')).toHaveStyleRule(
       'font-size',
@@ -36,7 +36,7 @@ describe('Button', () => {
     expect(screen.getByRole('button')).toBeInTheDocument();
     expect(screen.getByRole('button')).toHaveStyleRule(
       'color',
-      theme.button.secondary.color
+      theme.button.secondary.color.normal
     );
   });
 

kafka-ui-react-app/src/components/common/ConfirmationModal/ConfirmationModal.styled.tsx

@@ -26,14 +26,14 @@ export const Overlay = styled.div(
 );
 
 export const Modal = styled.div(
-  ({ theme: { modal } }) => css`
+  ({ theme: { modal, confirmModal } }) => css`
     position: absolute;
     display: flex;
     flex-direction: column;
     width: 560px;
     border-radius: 8px;
 
-    background-color: ${modal.backgroundColor};
+    background-color: ${confirmModal.backgroundColor};
     filter: drop-shadow(0px 4px 16px ${modal.shadow});
   `
 );
@@ -43,6 +43,7 @@ export const Header = styled.div`
   text-align: start;
   padding: 16px;
   width: 100%;
+  color: ${({ theme }) => theme.modal.color};
 `;
 
 export const Content = styled.div(
@@ -51,6 +52,7 @@ export const Content = styled.div(
     width: 100%;
     border-top: 1px solid ${modal.border.top};
     border-bottom: 1px solid ${modal.border.bottom};
+    color: ${modal.contentColor};
   `
 );
 

kafka-ui-react-app/src/components/common/ControlPanel/ControlPanel.styled.ts

@@ -7,10 +7,11 @@ interface Props {
 export const ControlPanelWrapper = styled.div<Props>`
   display: flex;
   align-items: center;
-  padding: 0px 16px;
-  margin: 0px 0px 16px;
+  padding: 0 16px;
+  margin: 0 0 16px;
   width: 100%;
   gap: 16px;
+  color: ${({ theme }) => theme.default.color.normal};
   & > *:first-child {
     width: ${(props) => (props.hasInput ? '38%' : 'auto')};
   }

kafka-ui-react-app/src/components/common/Dropdown/Dropdown.styled.ts

@@ -70,7 +70,7 @@ export const DropdownButton = styled.button`
 `;
 
 export const DangerItem = styled.div`
-  color: ${({ theme: { dropdown } }) => dropdown.item.color.danger};
+  color: ${({ theme: { dropdown } }) => dropdown.item.color.normal};
 `;
 
 export const DropdownItemHint = styled.div`
@@ -84,4 +84,5 @@ export const Wrapper = styled.div`
   display: inline-flex;
   align-items: center;
   justify-content: end;
+  color: ${({ theme: { dropdown } }) => dropdown.item.color.normal};
 `;

kafka-ui-react-app/src/components/common/Editor/Editor.tsx

@@ -43,5 +43,37 @@ Editor.displayName = 'Editor';
 export default styled(Editor)`
   &.ace-tomorrow {
     background: transparent;
+    .ace_gutter {
+      background-color: ${({ theme }) =>
+        theme.ksqlDb.query.editor.layer.backgroundColor};
+    }
+    .ace_gutter-active-line {
+      background-color: ${({ theme }) =>
+        theme.ksqlDb.query.editor.cell.backgroundColor};
+      color: ${({ theme }) => theme.default.color.normal};
+    }
+    .ace_line {
+      background-color: ${({ theme }) => theme.default.backgroundColor};
+      color: ${({ theme }) => theme.default.color.normal};
+    }
+    .ace_cursor {
+      color: ${({ theme }) => theme.ksqlDb.query.editor.cursor};
+    }
+    .ace_active-line {
+      background-color: ${({ theme }) =>
+        theme.ksqlDb.query.editor.cell.backgroundColor};
+    }
+    .ace_gutter-cell {
+      color: ${({ theme }) => theme.default.color.normal};
+    }
+    .ace_variable {
+      color: ${({ theme }) => theme.ksqlDb.query.editor.variable};
+    }
+    .ace_string {
+      color: ${({ theme }) => theme.ksqlDb.query.editor.aceString};
+    }
+    .ace_print-margin {
+      display: none;
+    }
   }
 `;

kafka-ui-react-app/src/components/common/EditorViewer/EditorViewer.styled.ts

@@ -1,6 +1,13 @@
 import styled from 'styled-components';
 
 export const Wrapper = styled.div`
-  background-color: ${({ theme }) => theme.viewer.wrapper};
+  background-color: ${({ theme }) => theme.viewer.wrapper.backgroundColor};
   padding: 8px 16px;
+  .ace_active-line {
+    background-color: ${({ theme }) =>
+      theme.viewer.wrapper.backgroundColor} !important;
+  }
+  .ace_line {
+    color: ${({ theme }) => theme.viewer.wrapper.color} !important;
+  }
 `;

kafka-ui-react-app/src/components/common/Icons/ArrowDownIcon.tsx

@@ -1,15 +1,20 @@
 import React from 'react';
+import { useTheme } from 'styled-components';
 
-const ArrowDownIcon: React.FC = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 384 512"
-    width="10"
-    height="10"
-  >
-    {/* Font Awesome Pro 6.1.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. */}
-    <path d="M374.6 310.6l-160 160C208.4 476.9 200.2 480 192 480s-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 370.8V64c0-17.69 14.33-31.1 31.1-31.1S224 46.31 224 64v306.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0S387.1 298.1 374.6 310.6z" />
-  </svg>
-);
+const ArrowDownIcon: React.FC = () => {
+  const theme = useTheme();
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 384 512"
+      width="10"
+      height="10"
+      fill={theme.icons.arrowDownIcon}
+    >
+      {/* Font Awesome Pro 6.1.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. */}
+      <path d="M374.6 310.6l-160 160C208.4 476.9 200.2 480 192 480s-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 370.8V64c0-17.69 14.33-31.1 31.1-31.1S224 46.31 224 64v306.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0S387.1 298.1 374.6 310.6z" />
+    </svg>
+  );
+};
 
 export default ArrowDownIcon;

kafka-ui-react-app/src/components/common/Icons/AutoIcon.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { useTheme } from 'styled-components';
+
+const AutoIcon: React.FC = () => {
+  const theme = useTheme();
+  return (
+    <svg
+      width="14"
+      height="15"
+      viewBox="0 0 14 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7.92385 8.49072L7.03019 5.8418H6.97336L6.07796 8.49072H7.92385Z"
+        fill={theme.icons.autoIcon}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7 14.7422C10.866 14.7422 14 11.6082 14 7.74219C14 3.87619 10.866 0.742188 7 0.742188C3.13401 0.742188 0 3.87619 0 7.74219C0 11.6082 3.13401 14.7422 7 14.7422ZM3.5 11.2422H5.14789L5.68745 9.646H8.3136L8.85211 11.2422H10.5L7.99264 4.24219H6.01091L3.5 11.2422Z"
+        fill={theme.icons.autoIcon}
+      />
+    </svg>
+  );
+};
+
+export default AutoIcon;

kafka-ui-react-app/src/components/common/Icons/CancelIcon.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
+import { useTheme } from 'styled-components';
 
 const CancelIcon: React.FC = () => {
+  const theme = useTheme();
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -17,7 +19,7 @@ const CancelIcon: React.FC = () => {
         data-name="layer1"
         d="M53.122 48.88L36.243 32l16.878-16.878a3 3 0 0 0-4.242-4.242L32 27.758l-16.878-16.88a3 3 0 0 0-4.243 4.243l16.878 16.88-16.88 16.88a3 3 0 0 0 4.243 4.241L32 36.243l16.878 16.88a3 3 0 0 0 4.244-4.243z"
         fill="none"
-        stroke="#202020"
+        stroke={theme.icons.cancelIcon}
         strokeMiterlimit="10"
         strokeWidth="2"
         strokeLinejoin="round"

kafka-ui-react-app/src/components/common/Icons/CheckmarkIcon.tsx

@@ -16,7 +16,7 @@ const CheckmarkIcon: FC = () => {
       <path
         data-name="layer1"
         fill="none"
-        stroke="#202020"
+        stroke="#FFFFFF"
         strokeMiterlimit="10"
         strokeWidth="2"
         d="M2 30l21 22 39-40"

kafka-ui-react-app/src/components/common/Icons/ClockIcon.tsx

@@ -1,15 +1,20 @@
 import React from 'react';
+import { useTheme } from 'styled-components';
 
-const ClockIcon: React.FC = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 512 512"
-    width={10}
-    height={10}
-  >
-    {/* Font Awesome Pro 6.1.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. */}
-    <path d="M232 120C232 106.7 242.7 96 256 96C269.3 96 280 106.7 280 120V243.2L365.3 300C376.3 307.4 379.3 322.3 371.1 333.3C364.6 344.3 349.7 347.3 338.7 339.1L242.7 275.1C236 271.5 232 264 232 255.1L232 120zM256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0zM48 256C48 370.9 141.1 464 256 464C370.9 464 464 370.9 464 256C464 141.1 370.9 48 256 48C141.1 48 48 141.1 48 256z" />
-  </svg>
-);
+const ClockIcon: React.FC = () => {
+  const theme = useTheme();
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512"
+      width={10}
+      height={10}
+      fill={theme.icons.clockIcon}
+    >
+      {/* Font Awesome Pro 6.1.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. */}
+      <path d="M232 120C232 106.7 242.7 96 256 96C269.3 96 280 106.7 280 120V243.2L365.3 300C376.3 307.4 379.3 322.3 371.1 333.3C364.6 344.3 349.7 347.3 338.7 339.1L242.7 275.1C236 271.5 232 264 232 255.1L232 120zM256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0zM48 256C48 370.9 141.1 464 256 464C370.9 464 464 370.9 464 256C464 141.1 370.9 48 256 48C141.1 48 48 141.1 48 256z" />
+    </svg>
+  );
+};
 
 export default ClockIcon;

kafka-ui-react-app/src/components/common/Icons/DeleteIcon.tsx

@@ -7,7 +7,7 @@ const DeleteIcon: React.FC = () => {
     <svg
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 448 512"
-      fill={theme.icons.deleteIcon}
+      fill={theme.editFilter.deleteIconColor}
       width="14"
       height="14"
     >

kafka-ui-react-app/src/components/common/Icons/DropdownArrowIcon.tsx

@@ -7,21 +7,21 @@ interface Props {
   color?: string;
 }
 
-const DropdownArrowIcon: React.FC<Props> = ({ isOpen, style, color }) => {
+const DropdownArrowIcon: React.FC<Props> = ({ isOpen }) => {
   const theme = useTheme();
 
   return (
     <svg
-      width="24"
-      height="24"
-      fill="none"
-      style={style || { position: 'absolute', right: '5px' }}
+      width="10"
+      height="5"
+      viewBox="0 0 10 5"
+      fill="currentColor"
       stroke="currentColor"
-      strokeWidth="2"
-      color={color || theme.icons.dropdownArrowIcon}
+      xmlns="http://www.w3.org/2000/svg"
+      color={theme.icons.dropdownArrowIcon}
       transform={isOpen ? 'rotate(180)' : ''}
     >
-      <path d="M6 9L12 15 18 9" />
+      <path d="M0.646447 0.146447C0.841709 -0.0488155 1.15829 -0.0488155 1.35355 0.146447L5 3.79289L8.64645 0.146447C8.84171 -0.0488155 9.15829 -0.0488155 9.35355 0.146447C9.54882 0.341709 9.54882 0.658291 9.35355 0.853553L5.35355 4.85355C5.15829 5.04882 4.84171 5.04882 4.64645 4.85355L0.646447 0.853553C0.451184 0.658291 0.451184 0.341709 0.646447 0.146447Z" />
     </svg>
   );
 };

kafka-ui-react-app/src/components/common/Icons/EditIcon.tsx

@@ -1,6 +1,8 @@
 import React, { FC } from 'react';
+import { useTheme } from 'styled-components';
 
 const EditIcon: FC = () => {
+  const theme = useTheme();
   return (
     <svg
       viewBox="0 0 64 64"
@@ -17,7 +19,7 @@ const EditIcon: FC = () => {
         d="M54.368 17.674l6.275-6.267-8.026-8.025-6.274 6.267"
         strokeWidth="2"
         strokeMiterlimit="10"
-        stroke="#202020"
+        stroke={theme.icons.editIcon}
         fill="none"
         data-name="layer2"
         strokeLinejoin="round"
@@ -27,7 +29,7 @@ const EditIcon: FC = () => {
         d="M17.766 54.236l36.602-36.562-8.025-8.025L9.74 46.211 3.357 60.618l14.409-6.382zM9.74 46.211l8.026 8.025"
         strokeWidth="2"
         strokeMiterlimit="10"
-        stroke="#202020"
+        stroke={theme.icons.editIcon}
         fill="none"
         data-name="layer1"
         strokeLinejoin="round"

kafka-ui-react-app/src/components/common/Icons/FileIcon.tsx

@@ -1,15 +1,20 @@
 import React from 'react';
+import { useTheme } from 'styled-components';
 
-const FileIcon: React.FC = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 384 512"
-    width="10"
-    height="10"
-  >
-    {/* Font Awesome Pro 6.1.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. */}
-    <path d="M365.3 93.38l-74.63-74.64C278.6 6.742 262.3 0 245.4 0L64-.0001c-35.35 0-64 28.65-64 64l.0065 384c0 35.34 28.65 64 64 64H320c35.2 0 64-28.8 64-64V138.6C384 121.7 377.3 105.4 365.3 93.38zM336 448c0 8.836-7.164 16-16 16H64.02c-8.838 0-16-7.164-16-16L48 64.13c0-8.836 7.164-16 16-16h160L224 128c0 17.67 14.33 32 32 32h79.1V448zM96 280C96 293.3 106.8 304 120 304h144C277.3 304 288 293.3 288 280S277.3 256 264 256h-144C106.8 256 96 266.8 96 280zM264 352h-144C106.8 352 96 362.8 96 376s10.75 24 24 24h144c13.25 0 24-10.75 24-24S277.3 352 264 352z" />
-  </svg>
-);
+const FileIcon: React.FC = () => {
+  const theme = useTheme();
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 384 512"
+      width="10"
+      height="10"
+      fill={theme.icons.fileIcon}
+    >
+      {/* Font Awesome Pro 6.1.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. */}
+      <path d="M365.3 93.38l-74.63-74.64C278.6 6.742 262.3 0 245.4 0L64-.0001c-35.35 0-64 28.65-64 64l.0065 384c0 35.34 28.65 64 64 64H320c35.2 0 64-28.8 64-64V138.6C384 121.7 377.3 105.4 365.3 93.38zM336 448c0 8.836-7.164 16-16 16H64.02c-8.838 0-16-7.164-16-16L48 64.13c0-8.836 7.164-16 16-16h160L224 128c0 17.67 14.33 32 32 32h79.1V448zM96 280C96 293.3 106.8 304 120 304h144C277.3 304 288 293.3 288 280S277.3 256 264 256h-144C106.8 256 96 266.8 96 280zM264 352h-144C106.8 352 96 362.8 96 376s10.75 24 24 24h144c13.25 0 24-10.75 24-24S277.3 352 264 352z" />
+    </svg>
+  );
+};
 
 export default FileIcon;

kafka-ui-react-app/src/components/common/Icons/InfoIcon.tsx

@@ -1,50 +1,29 @@
 import React from 'react';
+import { useTheme } from 'styled-components';
 
 const InfoIcon: React.FC = () => {
+  const theme = useTheme();
   return (
     <svg
+      width="14"
+      height="15"
+      viewBox="0 0 14 15"
+      fill="red"
       xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 64 64"
-      width="12"
-      height="12"
-      aria-labelledby="title"
-      aria-describedby="desc"
-      role="img"
     >
-      <desc>A line styled icon from Orion Icon Library.</desc>
-      <circle
-        data-name="layer2"
-        cx="32"
-        cy="32"
-        r="30"
-        fill="none"
-        stroke="#202020"
-        strokeMiterlimit="10"
-        strokeWidth="2"
-        strokeLinejoin="round"
-        strokeLinecap="round"
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7 1.81911C3.72878 1.81911 1.07692 4.47096 1.07692 7.74219C1.07692 11.0134 3.72878 13.6653 7 13.6653C10.2712 13.6653 12.9231 11.0134 12.9231 7.74219C12.9231 4.47096 10.2712 1.81911 7 1.81911ZM0 7.74219C0 3.87619 3.13401 0.742188 7 0.742188C10.866 0.742188 14 3.87619 14 7.74219C14 11.6082 10.866 14.7422 7 14.7422C3.13401 14.7422 0 11.6082 0 7.74219Z"
+        fill={theme.icons.infoIcon}
       />
       <path
-        data-name="layer1"
-        fill="none"
-        stroke="#202020"
-        strokeMiterlimit="10"
-        strokeWidth="2"
-        d="M28 26h4v22m-4 .008h8"
-        strokeLinejoin="round"
-        strokeLinecap="round"
+        d="M6 4.74219C6 4.1899 6.44772 3.74219 7 3.74219C7.55228 3.74219 8 4.1899 8 4.74219V7.74219C8 8.29447 7.55228 8.74219 7 8.74219C6.44772 8.74219 6 8.29447 6 7.74219V4.74219Z"
+        fill={theme.icons.infoIcon}
       />
-      <circle
-        data-name="layer1"
-        cx="31"
-        cy="19"
-        r="2"
-        fill="none"
-        stroke="#202020"
-        strokeMiterlimit="10"
-        strokeWidth="2"
-        strokeLinejoin="round"
-        strokeLinecap="round"
+      <path
+        d="M6 11.2422C6 10.6899 6.44772 10.2422 7 10.2422C7.55228 10.2422 8 10.6899 8 11.2422C8 11.7945 7.55228 12.2422 7 12.2422C6.44772 12.2422 6 11.7945 6 11.2422Z"
+        fill={theme.icons.infoIcon}
       />
     </svg>
   );

kafka-ui-react-app/src/components/common/Icons/MessageToggleIcon.styled.ts

@@ -1,10 +1,19 @@
 import styled from 'styled-components';
 
-export const Svg = styled.svg`
+type Props = {
+  isOpen?: boolean;
+};
+export const Svg = styled.svg<Props>`
   & > path {
-    fill: ${({ theme }) => theme.icons.messageToggleIcon.normal};
+    fill: ${({ theme, isOpen }) =>
+      isOpen
+        ? theme.icons.messageToggleIcon.active
+        : theme.icons.messageToggleIcon.normal};
     &:hover {
       fill: ${({ theme }) => theme.icons.messageToggleIcon.hover};
     }
+    &:active {
+      fill: ${({ theme }) => theme.icons.messageToggleIcon.active};
+    }
   }
 `;

kafka-ui-react-app/src/components/common/Icons/MessageToggleIcon.tsx

@@ -9,6 +9,7 @@ const MessageToggleIcon: React.FC<Props> = ({ isOpen }) => {
   if (isOpen) {
     return (
       <S.Svg
+        isOpen={isOpen}
         width="16"
         height="16"
         viewBox="0 0 16 16"

kafka-ui-react-app/src/components/common/Icons/MoonIcon.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { useTheme } from 'styled-components';
+
+const MoonIcon: React.FC = () => {
+  const theme = useTheme();
+  return (
+    <svg
+      width="11"
+      height="11.99"
+      viewBox="0 0 12 12"
+      fill={theme.icons.moonIcon}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M11.6624 9.31544C11.5535 9.32132 11.4438 9.3243 11.3334 9.3243C8.01971 9.3243 5.33342 6.63801 5.33342 3.3243C5.33342 2.09476 5.70325 0.951604 6.33775 0C3.17705 0.170804 0.666748 2.78781 0.666748 5.99113C0.666748 9.30484 3.35304 11.9911 6.66675 11.9911C8.75092 11.9911 10.5869 10.9285 11.6624 9.31544Z"
+        fill={theme.icons.moonIcon}
+      />
+    </svg>
+  );
+};
+
+export default MoonIcon;

kafka-ui-react-app/src/components/common/Icons/SavedIcon.tsx

@@ -9,7 +9,7 @@ const SavedIcon: FC = () => {
       width="18"
       height="20"
       viewBox="0 0 18 20"
-      fill="none"
+      fill={theme.icons.savedIcon}
       xmlns="http://www.w3.org/2000/svg"
     >
       <path

kafka-ui-react-app/src/components/common/Icons/SunIcon.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { useTheme } from 'styled-components';
+
+const SunIcon: React.FC = () => {
+  const theme = useTheme();
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill={theme.icons.sunIcon}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M11.4545 7C11.4545 9.46018 9.46018 11.4545 7 11.4545C4.53982 11.4545 2.54545 9.46018 2.54545 7C2.54545 4.53982 4.53982 2.54545 7 2.54545C9.46018 2.54545 11.4545 4.53982 11.4545 7Z"
+        fill={theme.icons.sunIcon}
+      />
+      <path
+        d="M7.63636 0.636364C7.63636 0.987818 7.35145 1.27273 7 1.27273C6.64855 1.27273 6.36364 0.987818 6.36364 0.636364C6.36364 0.28491 6.64855 0 7 0C7.35145 0 7.63636 0.28491 7.63636 0.636364Z"
+        fill={theme.icons.sunIcon}
+      />
+      <path
+        d="M7.63636 13.3636C7.63636 13.7151 7.35145 14 7 14C6.64855 14 6.36364 13.7151 6.36364 13.3636C6.36364 13.0122 6.64855 12.7273 7 12.7273C7.35145 12.7273 7.63636 13.0122 7.63636 13.3636Z"
+        fill={theme.icons.sunIcon}
+      />
+      <path
+        d="M13.3636 7.63636C13.0122 7.63636 12.7273 7.35145 12.7273 7C12.7273 6.64855 13.0122 6.36364 13.3636 6.36364C13.7151 6.36364 14 6.64855 14 7C14 7.35145 13.7151 7.63636 13.3636 7.63636Z"
+        fill={theme.icons.sunIcon}
+      />
+      <path
+        d="M0.636364 7.63636C0.28491 7.63636 -1.53625e-08 7.35145 0 7C1.53625e-08 6.64855 0.28491 6.36364 0.636364 6.36364C0.987818 6.36364 1.27273 6.64855 1.27273 7C1.27273 7.35145 0.987818 7.63636 0.636364 7.63636Z"
+        fill={theme.icons.sunIcon}
+      />
+      <path
+        d="M11.9497 2.95018C11.7012 3.19869 11.2983 3.19869 11.0498 2.95018C10.8013 2.70166 10.8013 2.29874 11.0498 2.05022C11.2983 1.80171 11.7012 1.80171 11.9497 2.05022C12.1983 2.29874 12.1983 2.70166 11.9497 2.95018Z"
+        fill={theme.icons.sunIcon}
+      />
+      <path
+        d="M2.95021 11.9497C2.70169 12.1982 2.29877 12.1982 2.05025 11.9497C1.80174 11.7012 1.80174 11.2983 2.05025 11.0498C2.29877 10.8012 2.70169 10.8012 2.95021 11.0498C3.19872 11.2983 3.19872 11.7012 2.95021 11.9497Z"
+        fill={theme.icons.sunIcon}
+      />
+      <path
+        d="M11.0498 11.9497C10.8013 11.7012 10.8013 11.2983 11.0498 11.0498C11.2983 10.8012 11.7012 10.8012 11.9497 11.0498C12.1983 11.2983 12.1983 11.7012 11.9497 11.9497C11.7012 12.1982 11.2983 12.1982 11.0498 11.9497Z"
+        fill={theme.icons.sunIcon}
+      />
+      <path
+        d="M2.05025 2.95018C1.80174 2.70166 1.80174 2.29874 2.05025 2.05022C2.29877 1.80171 2.70169 1.80171 2.95021 2.05022C3.19872 2.29874 3.19872 2.70166 2.95021 2.95018C2.70169 3.19869 2.29877 3.19869 2.05025 2.95018Z"
+        fill={theme.icons.sunIcon}
+      />
+    </svg>
+  );
+};
+
+export default SunIcon;

kafka-ui-react-app/src/components/common/Icons/WarningIcon.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled, { useTheme } from 'styled-components';
+import styled from 'styled-components';
 
 const WarningIconContainer = styled.span`
   align-items: center;
@@ -10,27 +10,21 @@ const WarningIconContainer = styled.span`
 `;
 
 const WarningIcon: React.FC = () => {
-  const theme = useTheme();
-
   return (
     <WarningIconContainer>
       <svg
+        width="14"
+        height="13"
+        viewBox="0 0 14 13"
+        fill="none"
         xmlns="http://www.w3.org/2000/svg"
-        version="1.0"
-        width="18px"
-        height="16px"
-        viewBox="0 0 1280.000000 1126.000000"
-        preserveAspectRatio="xMidYMid meet"
       >
-        <g
-          transform="translate(0.000000,1126.000000) scale(0.100000,-0.100000)"
-          fill={theme.icons.warningIcon}
-          stroke="none"
-        >
-          <path d="M6201 11240 c-41 -10 -113 -37 -160 -61 -70 -35 -105 -62 -187 -144 -61 -60 -124 -134 -157 -185 -85 -132 -681 -1182 -2962 -5215 -793 -1402 -1714 -3032 -2047 -3620 -333 -589 -617 -1098 -631 -1131 -79 -187 -72 -394 19 -559 15 -28 64 -86 108 -130 91 -90 177 -139 306 -175 l76 -20 5879 2 5880 3 81 27 c363 124 494 499 304 878 -21 43 -899 1580 -1951 3417 -1052 1836 -2308 4029 -2791 4873 -484 844 -909 1580 -946 1635 -118 177 -268 311 -419 373 -125 52 -272 64 -402 32z m1607 -3410 c793 -1383 2019 -3523 2724 -4755 l1283 -2240 -2712 -3 c-1492 -1 -3934 -1 -5427 0 l-2715 3 1666 2945 c3188 5637 3725 6583 3734 6572 4 -4 655 -1139 1447 -2522z" />
-          <path d="M6290 7874 c-14 -3 -61 -14 -104 -25 -390 -98 -706 -474 -706 -837 0 -46 22 -254 50 -461 27 -207 113 -857 190 -1446 201 -1535 199 -1517 216 -1581 42 -165 141 -297 271 -361 67 -33 86 -38 168 -41 152 -7 246 30 348 136 99 105 144 224 176 464 11 84 61 462 111 841 49 378 131 996 180 1375 50 378 100 756 111 840 24 182 25 305 4 387 -82 323 -360 599 -693 686 -75 20 -266 33 -322 23z" />
-          <path d="M6322 2739 c-345 -44 -594 -371 -552 -726 20 -166 86 -301 204 -410 114 -107 237 -160 391 -170 187 -11 336 47 475 187 134 134 192 273 193 465 1 116 -13 183 -58 280 -120 261 -379 409 -653 374z" />
-        </g>
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M8.09265 1.06679C7.60703 0.250524 6.39297 0.250524 5.90735 1.06679L0.170916 10.7089C-0.314707 11.5252 0.292322 12.5455 1.26357 12.5455H12.7364C13.7077 12.5455 14.3147 11.5252 13.8291 10.7089L8.09265 1.06679ZM6 5.00006C6 4.44778 6.44772 4.00006 7 4.00006C7.55228 4.00006 8 4.44778 8 5.00006V7.00006C8 7.55235 7.55228 8.00006 7 8.00006C6.44772 8.00006 6 7.55235 6 7.00006V5.00006ZM6 10.0001C6 9.44778 6.44772 9.00006 7 9.00006C7.55228 9.00006 8 9.44778 8 10.0001C8 10.5523 7.55228 11.0001 7 11.0001C6.44772 11.0001 6 10.5523 6 10.0001Z"
+          fill="#F2C94C"
+        />
       </svg>
     </WarningIconContainer>
   );

kafka-ui-react-app/src/components/common/Input/Input.styled.ts

@@ -13,7 +13,11 @@ const INPUT_SIZES = {
 
 export const Wrapper = styled.div`
   position: relative;
-
+  &:hover {
+    svg:first-child {
+      fill: ${({ theme }) => theme.input.icon.hover};
+    }
+  }
   svg:first-child {
     position: absolute;
     top: 8px;
@@ -29,8 +33,10 @@ export const Wrapper = styled.div`
 
 export const Input = styled.input<InputProps>(
   ({ theme: { input }, inputSize, search }) => css`
+    background-color: ${input.backgroundColor.normal};
     border: 1px ${input.borderColor.normal} solid;
     border-radius: 4px;
+    color: ${input.color.normal};
     height: ${inputSize && INPUT_SIZES[inputSize]
       ? INPUT_SIZES[inputSize]
       : '40px'};
@@ -55,6 +61,7 @@ export const Input = styled.input<InputProps>(
     &:disabled {
       color: ${input.color.disabled};
       border-color: ${input.borderColor.disabled};
+      background-color: ${input.backgroundColor.disabled};
       cursor: not-allowed;
     }
     &:read-only {
@@ -79,5 +86,5 @@ export const FormError = styled.p`
 export const InputHint = styled.p`
   font-size: 0.85rem;
   margin-top: 0.25rem;
-  color: ${({ theme }) => theme.text.secondary};
+  color: ${({ theme }) => theme.clusterConfigForm.inputHintText.secondary};
 `;

kafka-ui-react-app/src/components/common/Metrics/Metrics.styled.tsx

@@ -10,7 +10,7 @@ export const Wrapper = styled.div`
 `;
 
 export const IndicatorWrapper = styled.div`
-  background-color: ${({ theme }) => theme.metrics.indicator.backgroundColor};
+  background-color: ${({ theme }) => theme.default.backgroundColor};
   height: 68px;
   width: fit-content;
   min-width: 150px;
@@ -21,6 +21,7 @@ export const IndicatorWrapper = styled.div`
   padding: 12px 16px;
   box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.08);
   flex-grow: 1;
+  color: ${({ theme }) => theme.default.color.normal};
 `;
 
 export const IndicatorTitle = styled.div`
@@ -39,12 +40,14 @@ export const IndicatorsWrapper = styled.div`
   border-radius: 8px;
   overflow: auto;
   box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.08);
+  color: ${({ theme }) => theme.metrics.wrapper};
 `;
 
 export const SectionTitle = styled.h5`
   font-weight: 500;
   margin: 0 0 0.5rem 16px;
   font-size: 100%;
+  color: ${({ theme }) => theme.metrics.sectionTitle};
 `;
 
 export const LightText = styled.span`

kafka-ui-react-app/src/components/common/Metrics/__tests__/Indicator.spec.tsx

@@ -3,7 +3,7 @@ import { Indicator } from 'components/common/Metrics';
 import { screen } from '@testing-library/react';
 import { render } from 'lib/testHelpers';
 import { Props } from 'components/common/Metrics/Indicator';
-import theme from 'theme/theme';
+import { theme } from 'theme/theme';
 
 const title = 'Test Title';
 const label = 'Test Label';

kafka-ui-react-app/src/components/common/Metrics/__tests__/Section.spec.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Section } from 'components/common/Metrics';
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
+import { render } from 'lib/testHelpers';
 
 const child = 'Child';
 const title = 'Test Title';

kafka-ui-react-app/src/components/common/MultiSelect/MultiSelect.styled.ts

@@ -5,8 +5,37 @@ const MultiSelect = styled(ReactMultiSelect)<{ minWidth?: string }>`
   min-width: ${({ minWidth }) => minWidth || '200px;'};
   height: 32px;
   font-size: 14px;
+  .search input {
+    color: ${({ theme }) => theme.input.color.normal};
+    background-color: ${(props) =>
+      props.theme.input.backgroundColor.normal} !important;
+  }
+  .select-item {
+    color: ${({ theme }) => theme.select.color.normal};
+    background-color: ${({ theme }) =>
+      theme.select.backgroundColor.normal} !important;
+
+    &:active {
+      background-color: ${({ theme }) =>
+        theme.select.backgroundColor.active} !important;
+    }
+  }
 
+  .select-item.selected {
+    background-color: ${({ theme }) =>
+      theme.select.backgroundColor.active} !important;
+  }
+  .options li {
+    background-color: ${({ theme }) =>
+      theme.select.backgroundColor.normal} !important;
+  }
   & > .dropdown-container {
+    background-color: ${({ theme }) =>
+      theme.input.backgroundColor.normal} !important;
+    border-color: ${({ theme }) => theme.select.borderColor.normal} !important;
+    &:hover {
+      border-color: ${({ theme }) => theme.select.borderColor.hover} !important;
+    }
     height: 32px;
     * {
       cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
@@ -15,7 +44,9 @@ const MultiSelect = styled(ReactMultiSelect)<{ minWidth?: string }>`
     & > .dropdown-heading {
       height: 32px;
       color: ${({ disabled, theme }) =>
-        disabled ? theme.select.color.disabled : theme.select.color.active};
+        disabled
+          ? theme.select.color.disabled
+          : theme.select.color.active} !important;
       & > .clear-selected-button {
         display: none;
       }

kafka-ui-react-app/src/components/common/Navigation/Navbar.styled.ts

@@ -14,23 +14,21 @@ const Navbar = styled.nav`
     font-weight: 500;
     font-size: 14px;
     white-space: nowrap;
-    color: ${(props) => props.theme.primaryTab.color.normal};
-    border-bottom: 1px ${(props) => props.theme.primaryTab.borderColor.normal}
-      solid;
+    color: ${({ theme }) => theme.primaryTab.color.normal};
+    border-bottom: 1px ${({ theme }) => theme.default.transparentColor} solid;
     &.is-active {
-      border-bottom: 1px ${(props) => props.theme.primaryTab.borderColor.active}
+      border-bottom: 1px ${({ theme }) => theme.primaryTab.borderColor.active}
         solid;
-      color: ${(props) => props.theme.primaryTab.color.active};
+      color: ${({ theme }) => theme.primaryTab.color.active};
     }
     &.is-disabled {
       color: ${(props) => props.theme.primaryTab.color.disabled};
-      border-bottom: 1px ${(props) => props.theme.primaryTab.borderColor.normal};
+      border-bottom: 1px ${({ theme }) => theme.default.transparentColor};
       cursor: not-allowed;
     }
     &:hover:not(.is-active, .is-disabled) {
-      border-bottom: 1px ${(props) => props.theme.primaryTab.borderColor.hover}
-        solid;
-      color: ${(props) => props.theme.primaryTab.color.hover};
+      border-bottom: 1px ${({ theme }) => theme.default.transparentColor} solid;
+      color: ${({ theme }) => theme.primaryTab.color.hover};
     }
   }
 `;

kafka-ui-react-app/src/components/common/NewTable/ExpanderCell.tsx

@@ -3,31 +3,34 @@ import React from 'react';
 
 import * as S from './Table.styled';
 
-const ExpanderCell: React.FC<CellContext<unknown, unknown>> = ({ row }) => (
-  <S.ExpaderButton
-    width="16"
-    height="20"
-    viewBox="0 -2 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    role="button"
-    aria-label="Expand row"
-    $disabled={!row.getCanExpand()}
-  >
-    {row.getIsExpanded() ? (
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M14 16C15.1046 16 16 15.1046 16 14L16 2C16 0.895431 15.1046 -7.8281e-08 14 -1.74846e-07L2 -1.22392e-06C0.895432 -1.32048e-06 1.32048e-06 0.895429 1.22392e-06 2L1.74846e-07 14C7.8281e-08 15.1046 0.895431 16 2 16L14 16ZM5 7C4.44772 7 4 7.44771 4 8C4 8.55228 4.44772 9 5 9L11 9C11.5523 9 12 8.55228 12 8C12 7.44772 11.5523 7 11 7L5 7Z"
-      />
-    ) : (
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M0 2C0 0.895431 0.895431 0 2 0H14C15.1046 0 16 0.895431 16 2V14C16 15.1046 15.1046 16 14 16H2C0.895431 16 0 15.1046 0 14V2ZM8 4C8.55229 4 9 4.44772 9 5V7H11C11.5523 7 12 7.44772 12 8C12 8.55229 11.5523 9 11 9H9V11C9 11.5523 8.55229 12 8 12C7.44772 12 7 11.5523 7 11V9H5C4.44772 9 4 8.55228 4 8C4 7.44771 4.44772 7 5 7H7V5C7 4.44772 7.44772 4 8 4Z"
-      />
-    )}
-  </S.ExpaderButton>
-);
+const ExpanderCell: React.FC<CellContext<unknown, unknown>> = ({ row }) => {
+  return (
+    <S.ExpaderButton
+      width="16"
+      height="20"
+      viewBox="0 -2 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      role="button"
+      aria-label="Expand row"
+      $disabled={!row.getCanExpand()}
+      getIsExpanded={row.getIsExpanded()}
+    >
+      {row.getIsExpanded() ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M14 16C15.1046 16 16 15.1046 16 14L16 2C16 0.895431 15.1046 -7.8281e-08 14 -1.74846e-07L2 -1.22392e-06C0.895432 -1.32048e-06 1.32048e-06 0.895429 1.22392e-06 2L1.74846e-07 14C7.8281e-08 15.1046 0.895431 16 2 16L14 16ZM5 7C4.44772 7 4 7.44771 4 8C4 8.55228 4.44772 9 5 9L11 9C11.5523 9 12 8.55228 12 8C12 7.44772 11.5523 7 11 7L5 7Z"
+        />
+      ) : (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M0 2C0 0.895431 0.895431 0 2 0H14C15.1046 0 16 0.895431 16 2V14C16 15.1046 15.1046 16 14 16H2C0.895431 16 0 15.1046 0 14V2ZM8 4C8.55229 4 9 4.44772 9 5V7H11C11.5523 7 12 7.44772 12 8C12 8.55229 11.5523 9 11 9H9V11C9 11.5523 8.55229 12 8 12C7.44772 12 7 11.5523 7 11V9H5C4.44772 9 4 8.55228 4 8C4 7.44771 4.44772 7 5 7H7V5C7 4.44772 7.44772 4 8 4Z"
+        />
+      )}
+    </S.ExpaderButton>
+  );
+};
 
 export default ExpanderCell;

kafka-ui-react-app/src/components/common/NewTable/Table.styled.ts

@@ -1,14 +1,21 @@
 import styled, { css } from 'styled-components';
 
-export const ExpaderButton = styled.svg<{ $disabled: boolean }>(
-  ({ theme: { table }, $disabled }) => css`
+export const ExpaderButton = styled.svg<{
+  $disabled: boolean;
+  getIsExpanded: boolean;
+}>(
+  ({ theme: { table }, $disabled, getIsExpanded }) => css`
     & > path {
-      fill: ${table.expander[$disabled ? 'disabled' : 'normal']};
+      fill: ${table.expander[
+        ($disabled && 'disabled') || (getIsExpanded && 'active') || 'normal'
+      ]};
     }
-
     &:hover > path {
       fill: ${table.expander[$disabled ? 'disabled' : 'hover']};
     }
+    &:active > path {
+      fill: ${table.expander[$disabled ? 'disabled' : 'active']};
+    }
   `
 );
 
@@ -138,7 +145,7 @@ export const Table = styled.table(
   width: 100%;
 
   td {
-    border-top: 1px #f1f2f3 solid;
+    border-top: 1px ${table.td.borderTop} solid;
     font-size: 14px;
     font-weight: 400;
     padding: 8px 8px 8px 24px;
@@ -147,7 +154,7 @@ export const Table = styled.table(
     word-wrap: break-word;
 
     & a {
-      color: ${table.link.color.normal};
+      color: ${table.td.color.normal};
       font-weight: 500;
       max-width: 450px;
       white-space: nowrap;
@@ -162,6 +169,10 @@ export const Table = styled.table(
       &:active {
         color: ${table.link.color.active};
       }
+      &:button {
+      color: ${table.link.color.active};
+      }
+
     }
   }
 `
@@ -192,6 +203,7 @@ export const GoToPage = styled.label`
   flex-wrap: nowrap;
   gap: 8px;
   margin-left: 8px;
+  color: ${({ theme }) => theme.table.pagination.info};
 `;
 
 export const PageInfo = styled.div`
@@ -202,6 +214,7 @@ export const PageInfo = styled.div`
   flex-wrap: nowrap;
   white-space: nowrap;
   margin-left: 16px;
+  color: ${({ theme }) => theme.table.pagination.info};
 `;
 
 export const Ellipsis = styled.div`

kafka-ui-react-app/src/components/common/ProgressBar/ProgressBar.styled.ts

@@ -2,7 +2,7 @@ import styled, { css } from 'styled-components';
 
 export const Wrapper = styled.div`
   height: 10px;
-  width: '100%';
+  width: 100%;
   min-width: 200px;
   background-color: ${({ theme }) => theme.progressBar.backgroundColor};
   border-radius: 5px;
@@ -16,7 +16,7 @@ export const Filler = styled.div<{ completed: number }>(
     width: ${completed}%;
     background-color: ${progressBar.compleatedColor};
     border-radius: 5px;
-    text-align: 'right';
+    text-align: right;
     transition: width 1.2s linear;
   `
 );

kafka-ui-react-app/src/components/common/PropertiesList/PropertiesList.styled.tsx

@@ -12,11 +12,6 @@ export const List = styled.div`
 export const Label = styled.div`
   font-size: 14px;
   font-weight: 500;
-  color: ${({ theme }) => theme.list.label.color};
+  color: ${({ theme }) => theme.default.color.normal};
   white-space: nowrap;
 `;
-
-export const SubText = styled.div`
-  color: ${({ theme }) => theme.list.meta.color};
-  font-size: 12px;
-`;

kafka-ui-react-app/src/components/common/Select/Select.styled.ts

@@ -5,6 +5,7 @@ interface Props {
   isLive?: boolean;
   minWidth?: string;
   disabled?: boolean;
+  isThemeMode?: boolean;
 }
 
 interface OptionProps {
@@ -15,55 +16,78 @@ export const Select = styled.ul<Props>`
   position: relative;
   list-style: none;
   display: flex;
-  gap: ${(props) => (props.isLive ? '5px' : '0')};
+  gap: 6px;
   align-items: center;
+  justify-content: space-between;
   height: ${(props) => (props.selectSize === 'M' ? '32px' : '40px')};
   border: 1px
-    ${({ theme, disabled }) =>
-      disabled
-        ? theme.select.borderColor.disabled
-        : theme.select.borderColor.normal}
+    ${({ theme, disabled, isThemeMode }) => {
+      if (isThemeMode) {
+        return 'none';
+      }
+      if (disabled) {
+        return theme.select.borderColor.disabled;
+      }
+
+      return theme.select.borderColor.normal;
+    }}
     solid;
   border-radius: 4px;
   font-size: 14px;
   width: fit-content;
   padding-left: 16px;
-  padding-right: 16px;
+  padding-right: 12px;
   color: ${({ theme, disabled }) =>
     disabled ? theme.select.color.disabled : theme.select.color.normal};
   min-width: ${({ minWidth }) => minWidth || 'auto'};
   cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
-  &:hover:enabled {
-    color: ${(props) => props.theme.select.color.hover};
-    border-color: ${(props) => props.theme.select.borderColor.hover};
+  &:hover {
+    color: ${({ theme, disabled }) =>
+      disabled ? theme.select.color.disabled : theme.select.color.hover};
+    border-color: ${({ theme, disabled }) =>
+      disabled
+        ? theme.select.borderColor.disabled
+        : theme.select.borderColor.hover};
   }
   &:focus {
     outline: none;
-    color: ${(props) => props.theme.select.color.active};
-    border-color: ${(props) => props.theme.select.borderColor.active};
+    color: ${({ theme }) => theme.select.color.active};
+    border-color: ${({ theme }) => theme.select.borderColor.active};
   }
   &:disabled {
-    color: ${(props) => props.theme.select.color.disabled};
-    border-color: ${(props) => props.theme.select.borderColor.disabled};
+    color: ${({ theme }) => theme.select.color.disabled};
+    border-color: ${({ theme }) => theme.select.borderColor.disabled};
   }
 `;
 
+export const SelectedOptionWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
 export const OptionList = styled.ul`
   position: absolute;
   top: 100%;
   left: 0;
   max-height: 228px;
   margin-top: 4px;
-  background-color: ${(props) => props.theme.select.backgroundColor.normal};
-  border: 1px ${(props) => props.theme.select.borderColor.normal} solid;
+  background-color: ${({ theme }) => theme.select.backgroundColor.normal};
+  border: 1px ${({ theme }) => theme.select.borderColor.normal} solid;
   border-radius: 4px;
   font-size: 14px;
   line-height: 18px;
-  color: ${(props) => props.theme.select.color.normal};
+  color: ${({ theme }) => theme.select.color.normal};
   overflow-y: auto;
   z-index: 10;
   max-width: 300px;
   min-width: 100%;
+  align-items: center;
+  & div {
+    white-space: nowrap;
+  }
   &::-webkit-scrollbar {
     -webkit-appearance: none;
     width: 7px;
@@ -71,8 +95,8 @@ export const OptionList = styled.ul`
 
   &::-webkit-scrollbar-thumb {
     border-radius: 4px;
-    background-color: ${(props) =>
-      props.theme.select.optionList.scrollbar.backgroundColor};
+    background-color: ${({ theme }) =>
+      theme.select.optionList.scrollbar.backgroundColor};
   }
 
   &::-webkit-scrollbar:horizontal {
@@ -82,28 +106,36 @@ export const OptionList = styled.ul`
 
 export const Option = styled.li<OptionProps>`
   display: flex;
+  align-items: center;
   list-style: none;
   padding: 10px 12px;
   transition: all 0.2s ease-in-out;
   cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
   gap: 5px;
-  color: ${(props) =>
-    props.theme.select.color[props.disabled ? 'disabled' : 'normal']};
+  color: ${({ theme, disabled }) =>
+    theme.select.color[disabled ? 'disabled' : 'normal']};
 
   &:hover {
-    background-color: ${(props) =>
-      props.theme.select.backgroundColor[props.disabled ? 'normal' : 'hover']};
+    background-color: ${({ theme, disabled }) =>
+      theme.select.backgroundColor[disabled ? 'normal' : 'hover']};
   }
 
   &:active {
-    background-color: ${(props) => props.theme.select.backgroundColor.active};
+    background-color: ${({ theme }) => theme.select.backgroundColor.active};
   }
 `;
 
-export const SelectedOption = styled.li`
-  padding-right: 16px;
+export const SelectedOption = styled.li<{ isThemeMode?: boolean }>`
+  display: flex;
+  padding-right: ${({ isThemeMode }) => (isThemeMode ? '' : '16px')};
   list-style-position: inside;
   white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  & svg {
+    path {
+      fill: ${({ theme }) => theme.defaultIconColor};
+    }
+  }
+  & div {
+    display: none;
+  }
 `;

kafka-ui-react-app/src/components/common/Select/Select.tsx

@@ -17,10 +17,11 @@ export interface SelectProps {
   placeholder?: string;
   disabled?: boolean;
   onChange?: (option: string | number) => void;
+  isThemeMode?: boolean;
 }
 
 export interface SelectOption {
-  label: string | number;
+  label: string | number | React.ReactElement;
   value: string | number;
   disabled?: boolean;
   isLive?: boolean;
@@ -35,6 +36,7 @@ const Select: React.FC<SelectProps> = ({
   isLive,
   disabled = false,
   onChange,
+  isThemeMode,
   ...props
 }) => {
   const [selectedOption, setSelectedOption] = useState(value);
@@ -73,14 +75,21 @@ const Select: React.FC<SelectProps> = ({
         disabled={disabled}
         onClick={showOptionsHandler}
         onKeyDown={showOptionsHandler}
+        isThemeMode={isThemeMode}
         {...props}
       >
-        {isLive && <LiveIcon />}
-        <S.SelectedOption role="option" tabIndex={0}>
-          {options.find(
-            (option) => option.value === (defaultValue || selectedOption)
-          )?.label || placeholder}
-        </S.SelectedOption>
+        <S.SelectedOptionWrapper>
+          {isLive && <LiveIcon />}
+          <S.SelectedOption
+            role="option"
+            tabIndex={0}
+            isThemeMode={isThemeMode}
+          >
+            {options.find(
+              (option) => option.value === (defaultValue || selectedOption)
+            )?.label || placeholder}
+          </S.SelectedOption>
+        </S.SelectedOptionWrapper>
         {showOptions && (
           <S.OptionList>
             {options?.map((option) => (

kafka-ui-react-app/src/components/common/SlidingSidebar/SlidingSidebar.styled.ts

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 export const Wrapper = styled.div<{ $open?: boolean }>(
   ({ theme, $open }) => `
-  background-color: ${theme.layout.backgroundColor};
+  background-color: ${theme.default.backgroundColor};
   position: fixed;
   top: ${theme.layout.navBarHeight};
   bottom: 0;
@@ -24,7 +24,7 @@ export const Wrapper = styled.div<{ $open?: boolean }>(
 
 export const Content = styled.div<{ $open?: boolean }>(
   ({ theme }) => `
-  background-color: ${theme.layout.backgroundColor};
+  background-color: ${theme.default.backgroundColor};
   overflow-y: auto;
   position: absolute;
   top: 65px;

kafka-ui-react-app/src/components/common/Switch/Switch.styled.ts

@@ -1,21 +1,41 @@
 import styled from 'styled-components';
 
-export const StyledLabel = styled.label`
+interface Props {
+  isCheckedIcon?: boolean;
+}
+
+export const StyledLabel = styled.label<Props>`
   position: relative;
   display: inline-block;
-  width: 34px;
+  width: ${({ isCheckedIcon }) => (isCheckedIcon ? '40px' : '34px')};
   height: 20px;
   margin-right: 8px;
 `;
-
-export const StyledSlider = styled.span`
+export const CheckedIcon = styled.span`
+  position: absolute;
+  top: 1px;
+  left: 24px;
+  z-index: 10;
+  cursor: pointer;
+`;
+export const UnCheckedIcon = styled.span`
+  position: absolute;
+  top: 2px;
+  right: 23px;
+  z-index: 10;
+  cursor: pointer;
+`;
+export const StyledSlider = styled.span<Props>`
   position: absolute;
   cursor: pointer;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: ${({ theme }) => theme.switch.unchecked};
+  background-color: ${({ isCheckedIcon, theme }) =>
+    isCheckedIcon
+      ? theme.switch.checkedIcon.backgroundColor
+      : theme.switch.unchecked};
   transition: 0.4s;
   border-radius: 20px;
 
@@ -29,16 +49,20 @@ export const StyledSlider = styled.span`
     background-color: ${({ theme }) => theme.switch.circle};
     transition: 0.4s;
     border-radius: 50%;
+    z-index: 11;
   }
 `;
 
-export const StyledInput = styled.input`
+export const StyledInput = styled.input<Props>`
   opacity: 0;
   width: 0;
   height: 0;
 
   &:checked + ${StyledSlider} {
-    background-color: ${({ theme }) => theme.switch.checked};
+    background-color: ${({ isCheckedIcon, theme }) =>
+      isCheckedIcon
+        ? theme.switch.checkedIcon.backgroundColor
+        : theme.switch.checked};
   }
 
   &:focus + ${StyledSlider} {
@@ -46,6 +70,8 @@ export const StyledInput = styled.input`
   }
 
   :checked + ${StyledSlider}:before {
-    transform: translateX(14px);
+    transform: translateX(
+      ${({ isCheckedIcon }) => (isCheckedIcon ? '20px' : '14px')}
+    );
   }
 `;

kafka-ui-react-app/src/components/common/Switch/Switch.tsx

@@ -2,22 +2,34 @@ import React from 'react';
 
 import * as S from './Switch.styled';
 
-interface SwitchProps {
+export interface SwitchProps {
   onChange(): void;
   checked: boolean;
   name: string;
+  checkedIcon?: React.ReactNode;
+  unCheckedIcon?: React.ReactNode;
+  bgCustomColor?: string;
 }
-
-const Switch: React.FC<SwitchProps> = ({ name, checked, onChange }) => {
+const Switch: React.FC<SwitchProps> = ({
+  name,
+  checked,
+  onChange,
+  checkedIcon,
+  unCheckedIcon,
+}) => {
+  const isCheckedIcon = !!(checkedIcon || unCheckedIcon);
   return (
-    <S.StyledLabel>
+    <S.StyledLabel isCheckedIcon={isCheckedIcon}>
       <S.StyledInput
         name={name}
         type="checkbox"
         onChange={onChange}
         checked={checked}
+        isCheckedIcon={isCheckedIcon}
       />
-      <S.StyledSlider />
+      <S.StyledSlider isCheckedIcon={isCheckedIcon} />
+      {checkedIcon && <S.CheckedIcon>{checkedIcon}</S.CheckedIcon>}
+      {unCheckedIcon && <S.UnCheckedIcon>{unCheckedIcon}</S.UnCheckedIcon>}
     </S.StyledLabel>
   );
 };

kafka-ui-react-app/src/components/common/Tag/Tag.styled.tsx

@@ -9,8 +9,8 @@ export const Tag = styled.span.attrs({ role: 'widget' })<Props>`
   border-radius: 16px;
   height: 20px;
   line-height: 20px;
-  background-color: ${(props) => props.theme.tag.backgroundColor[props.color]};
-  color: ${(props) => props.theme.tag.color};
+  background-color: ${({ theme, color }) => theme.tag.backgroundColor[color]};
+  color: ${({ theme }) => theme.tag.color};
   font-size: 12px;
   display: inline-block;
   padding-left: 0.75em;

kafka-ui-react-app/src/components/common/Textbox/Textarea.styled.ts

@@ -7,6 +7,8 @@ export const Textarea = styled.textarea(
     width: 100%;
     padding: 12px;
     padding-top: 6px;
+    color: ${({ theme }) => theme.default.color.normal};
+    background-color: ${({ theme }) => theme.schema.backgroundColor.textarea};
     &::placeholder {
       color: ${textArea.color.placeholder.normal};
       font-size: 14px;

kafka-ui-react-app/src/components/common/table/Table/Table.styled.ts

@@ -8,7 +8,7 @@ export const Table = styled.table<Props>`
   width: ${(props) => (props.isFullwidth ? '100%' : 'auto')};
 
   & td {
-    border-top: 1px #f1f2f3 solid;
+    border-top: 1px ${({ theme }) => theme.table.td.borderTop} solid;
     font-size: 14px;
     font-weight: 400;
     padding: 8px 8px 8px 24px;

kafka-ui-react-app/src/components/common/table/Table/TableKeyLink.styled.ts

@@ -15,6 +15,9 @@ const tableLinkMixin = css(
       color: ${theme.table.link.color.active};
     }
   }
+   tr {
+  background-color: red;
+  }
 `
 );
 

kafka-ui-react-app/src/components/common/table/TableHeaderCell/TableHeaderCell.styled.ts

@@ -74,7 +74,7 @@ export const Title = styled.span<TitleProps>(
     font-style: normal;
     font-weight: 400;
     line-height: 16px;
-    letter-spacing: 0em;
+    letter-spacing: 0;
     text-align: left;
     display: inline-block;
     justify-content: start;
@@ -97,11 +97,11 @@ export const Preview = styled.span`
   font-style: normal;
   font-weight: 400;
   line-height: 16px;
-  letter-spacing: 0em;
+  letter-spacing: 0;
   text-align: left;
-  background: ${(props) => props.theme.table.th.backgroundColor.normal};
+  background: ${({ theme }) => theme.table.th.backgroundColor.normal};
   font-size: 14px;
-  color: ${(props) => props.theme.table.th.previewColor.normal};
+  color: ${({ theme }) => theme.table.th.previewColor.normal};
   cursor: pointer;
 `;