From 1e2d2bfd20b0c19074576ecb9709f581e3c235c0 Mon Sep 17 00:00:00 2001
From: FalkWolsky <fw@falkwolsky.com>
Date: Tue, 21 May 2024 14:22:02 +0200
Subject: [PATCH 01/57] WIP - Changing the Theme Detail View

---
 .../src/pages/setting/theme/detail/index.tsx  | 290 +++++++++++-------
 .../pages/setting/theme/styledComponents.tsx  |   4 +-
 2 files changed, 173 insertions(+), 121 deletions(-)

diff --git a/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx b/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
index 7c36196cd..500a15e55 100644
--- a/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
+++ b/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
@@ -32,6 +32,7 @@ import { HeaderBack } from "pages/setting/permission/styledComponents";
 import dsl from "./previewDsl";
 import chartDsl from "./chartPreviewDsl";
 import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
+import { Collapse, CollapseProps } from 'antd';
 
 const CodeEditor = lazy(
   () => import("base/codeEditor/codeEditor")
@@ -148,7 +149,166 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
     history.push(THEME_SETTING);
   };
 
+
+
   render() {
+
+    const themeSettings: CollapseProps['items'] = [
+      {
+        key: '1',
+        label: 'Colors',
+        children: 
+          <div className="common">
+            <div>
+              <DetailTitle>{trans("theme.mainColor")}</DetailTitle>
+              <ColorPicker
+                colorKey="primary"
+                name={trans("themeDetail.primary")}
+                desc={trans("themeDetail.primaryDesc")}
+                color={this.state.theme.primary}
+                configChange={(params) => this.configChange(params)}
+              />
+            </div>
+            <ColorPicker
+              colorKey="canvas"
+              name={trans("themeDetail.canvas")}
+              desc={trans("themeDetail.canvasDesc")}
+              color={this.state.theme.canvas}
+              configChange={(params) => this.configChange(params)}
+            />
+            <ColorPicker
+              colorKey="primarySurface"
+              name={trans("themeDetail.primarySurface")}
+              desc={trans("themeDetail.primarySurfaceDesc")}
+              color={this.state.theme.primarySurface}
+              configChange={(params) => this.configChange(params)}
+            />
+            <div>
+              <DetailTitle>{trans("theme.text")}</DetailTitle>
+              <ColorPicker
+                colorKey="textLight"
+                name={trans("themeDetail.textLight")}
+                desc={trans("themeDetail.textLightDesc")}
+                color={this.state.theme.textLight}
+                configChange={(params) => this.configChange(params)}
+              />
+            </div>
+            <ColorPicker
+              colorKey="textDark"
+              name={trans("themeDetail.textDark")}
+              desc={trans("themeDetail.textDarkDesc")}
+              color={this.state.theme.textDark}
+              configChange={(params) => this.configChange(params)}
+            />
+            
+          </div>
+      },
+      {
+        key: '2',
+        label: 'Text & Fonts',
+        children: <p>to define...</p>,
+      },
+      {
+        key: '3',
+        label: 'Layout',
+        children: 
+          <div className="common">
+            <div>
+              <DetailTitle>{trans("themeDetail.borderRadius")}</DetailTitle>
+              <ColorPicker
+                colorKey="borderRadius"
+                name={trans("themeDetail.borderRadius")}
+                desc={trans("themeDetail.borderRadiusDesc")}
+                radius={this.state.theme.borderRadius}
+                configChange={(params) => this.configChange(params)}
+              />
+            </div>
+            <div>
+              <DetailTitle>{trans("themeDetail.margin")}</DetailTitle>
+              <ColorPicker
+                colorKey="margin"
+                name={trans("themeDetail.margin")}
+                desc={trans("themeDetail.marginDesc")}
+                margin={this.state.theme.margin}
+                configChange={(params) => {
+                  this.configChange(params);
+                }}
+              />
+            </div>
+            <div>
+              <DetailTitle>{trans("themeDetail.padding")}</DetailTitle>
+              <ColorPicker
+                colorKey="padding"
+                name={trans("themeDetail.padding")}
+                desc={trans("themeDetail.paddingDesc")}
+                padding={this.state.theme.padding}
+                configChange={(params) => {
+                  this.configChange(params);
+                }}
+              />
+            </div>
+            <div>
+              <DetailTitle>{trans("themeDetail.gridColumns")}</DetailTitle>
+              <ColorPicker
+                colorKey="gridColumns"
+                name={trans("themeDetail.gridColumns")}
+                desc={trans("themeDetail.gridColumnsDesc")}
+                gridColumns={this.state.theme.gridColumns}
+                configChange={(params) => {
+                  this.configChange(params);
+                }}
+              />
+            </div>
+          </div>,
+      },
+      {
+        key: '4',
+        label: 'Components',
+        children: <p>to define...</p>,
+      },
+      {
+        key: '5',
+        label: 'Theme Preview',
+        children: <PreviewApp style={{marginTop: '3px'}} theme={this.state.theme} dsl={dsl} />,
+      },
+      {
+        key: '6',
+        label: 'eCharts Definition',
+        children: 
+          <div className="chart">
+            {/* <DetailTitle>{trans("themeDetail.chart")}</DetailTitle> */}
+            <ChartDesc>
+              {trans("themeDetail.chartDesc")}
+              <a target="_blank" href="https://echarts.apache.org/en/theme-builder.html" rel="noreferrer">
+                {" "}
+                {trans("themeDetail.echartsJson")}
+              </a>
+            </ChartDesc>
+            <ChartInput>
+            <div className="code-editor">
+              <CodeEditor
+                value={this.state.theme.chart || ""}
+                onChange={(value) => this.configChange({
+                  colorKey: "chart",
+                  chart: value.doc.toString() ? value.doc.toString() : undefined,
+                })}
+                styleName="higher"
+                codeType="Function"
+                showLineNum
+                bordered
+              />
+              </div>
+            </ChartInput>
+          </div>,
+      },
+      {
+        key: '7',
+        label: 'eCharts Definition Preview',
+        children: <PreviewApp style={{ height: "600px", margin: "20px 0 8px 0" }} theme={this.state.theme} dsl={chartDsl} />,
+      },
+      
+    ];
+
     return (
       <>
         <Prompt
@@ -199,128 +359,20 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
             </HeaderBack>
           </Header>
           <DetailContent>
-            <div className="common">
-              <div>
-                <DetailTitle>{trans("theme.mainColor")}</DetailTitle>
-                <ColorPicker
-                  colorKey="primary"
-                  name={trans("themeDetail.primary")}
-                  desc={trans("themeDetail.primaryDesc")}
-                  color={this.state.theme.primary}
-                  configChange={(params) => this.configChange(params)}
-                />
-              </div>
-              <ColorPicker
-                colorKey="canvas"
-                name={trans("themeDetail.canvas")}
-                desc={trans("themeDetail.canvasDesc")}
-                color={this.state.theme.canvas}
-                configChange={(params) => this.configChange(params)}
-              />
-              <ColorPicker
-                colorKey="primarySurface"
-                name={trans("themeDetail.primarySurface")}
-                desc={trans("themeDetail.primarySurfaceDesc")}
-                color={this.state.theme.primarySurface}
-                configChange={(params) => this.configChange(params)}
-              />
-              <div>
-                <DetailTitle>{trans("theme.text")}</DetailTitle>
-                <ColorPicker
-                  colorKey="textLight"
-                  name={trans("themeDetail.textLight")}
-                  desc={trans("themeDetail.textLightDesc")}
-                  color={this.state.theme.textLight}
-                  configChange={(params) => this.configChange(params)}
-                />
-              </div>
-              <ColorPicker
-                colorKey="textDark"
-                name={trans("themeDetail.textDark")}
-                desc={trans("themeDetail.textDarkDesc")}
-                color={this.state.theme.textDark}
-                configChange={(params) => this.configChange(params)}
-              />
-              <div>
-                <DetailTitle>{trans("themeDetail.borderRadius")}</DetailTitle>
-                <ColorPicker
-                  colorKey="borderRadius"
-                  name={trans("themeDetail.borderRadius")}
-                  desc={trans("themeDetail.borderRadiusDesc")}
-                  radius={this.state.theme.borderRadius}
-                  configChange={(params) => this.configChange(params)}
-                />
-              </div>
-            </div>
-            <div className="common">
-              <div>
-                <DetailTitle>{trans("themeDetail.margin")}</DetailTitle>
-                <ColorPicker
-                  colorKey="margin"
-                  name={trans("themeDetail.margin")}
-                  desc={trans("themeDetail.marginDesc")}
-                  margin={this.state.theme.margin}
-                  configChange={(params) => {
-                    this.configChange(params);
-                  }}
-                />
-              </div>
-              <div>
-                <DetailTitle>{trans("themeDetail.padding")}</DetailTitle>
-                <ColorPicker
-                  colorKey="padding"
-                  name={trans("themeDetail.padding")}
-                  desc={trans("themeDetail.paddingDesc")}
-                  padding={this.state.theme.padding}
-                  configChange={(params) => {
-                    this.configChange(params);
-                  }}
-                />
-              </div>
-              <div>
-                <DetailTitle>{trans("themeDetail.gridColumns")}</DetailTitle>
-                <ColorPicker
-                  colorKey="gridColumns"
-                  name={trans("themeDetail.gridColumns")}
-                  desc={trans("themeDetail.gridColumnsDesc")}
-                  gridColumns={this.state.theme.gridColumns}
-                  configChange={(params) => {
-                    this.configChange(params);
-                  }}
-                />
-              </div>
-            </div>
-            <PreviewApp style={{marginTop: '3px'}} theme={this.state.theme} dsl={dsl} />
-            <div className="chart">
-              <DetailTitle>{trans("themeDetail.chart")}</DetailTitle>
-              <ChartDesc>
-                {trans("themeDetail.chartDesc")}
-                <a target="_blank" href="https://echarts.apache.org/en/theme-builder.html" rel="noreferrer">
-                  {" "}
-                  {trans("themeDetail.echartsJson")}
-                </a>
-              </ChartDesc>
-              <ChartInput>
-              <div className="code-editor">
-                <CodeEditor
-                  value={this.state.theme.chart || ""}
-                  onChange={(value) => this.configChange({
-                    colorKey: "chart",
-                    chart: value.doc.toString() ? value.doc.toString() : undefined,
-                  })}
-                  styleName="higher"
-                  codeType="Function"
-                  showLineNum
-                  bordered
-                />
-                </div>
-              </ChartInput>
-            </div>
-            <PreviewApp
+
+          <Collapse items={themeSettings} defaultActiveKey={['1']} />
+
+            
+            
+            {/* <PreviewApp style={{marginTop: '3px'}} theme={this.state.theme} dsl={dsl} /> */}
+            
+
+            {/* <PreviewApp
               style={{ height: "346px", margin: "20px 0 8px 0" }}
               theme={this.state.theme}
               dsl={chartDsl}
-            />
+                /> */}
+
           </DetailContent>
           <Footer ref={this.footerRef} className="no-bottom">
             <ResetButton
diff --git a/client/packages/lowcoder/src/pages/setting/theme/styledComponents.tsx b/client/packages/lowcoder/src/pages/setting/theme/styledComponents.tsx
index 4974c3fee..3278ce921 100644
--- a/client/packages/lowcoder/src/pages/setting/theme/styledComponents.tsx
+++ b/client/packages/lowcoder/src/pages/setting/theme/styledComponents.tsx
@@ -82,7 +82,7 @@ export const ColumnName = styled(InlineFlexAlignCenter)`
 `;
 
 export const DetailContent = styled.div`
-  max-width: 672px;
+  max-width: 95%;
   margin-left: 24px;
   padding-bottom: 80px;
   .common {
@@ -126,7 +126,7 @@ export const Footer = styled.div`
   bottom: 0;
   width: calc(100vw - 492px);
   background-color: #fff;
-  z-index: 1;
+  z-index: 1000;
   margin-right: 10px;
   &.no-bottom {
     box-shadow: 0 -6px 10px -6px rgba(0, 0, 0, 0.1);

From c29cdbbcaba9aa7bd5902405f5ad6e0364818ce1 Mon Sep 17 00:00:00 2001
From: FalkWolsky <fw@falkwolsky.com>
Date: Thu, 23 May 2024 23:12:59 +0200
Subject: [PATCH 02/57] WIP - Changing the Theme Detail View 2

---
 .../packages/lowcoder/src/i18n/locales/en.ts  |   5 +-
 .../src/pages/setting/theme/detail/index.tsx  | 464 +++++++++++-------
 2 files changed, 300 insertions(+), 169 deletions(-)

diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
index acf9fd4f2..a364dcf7f 100644
--- a/client/packages/lowcoder/src/i18n/locales/en.ts
+++ b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -2491,7 +2491,10 @@ export const en = {
     "goList": "Back to the List",
     "saveBtn": "Save",
     "mainColor": "Main Colors",
-    "text": "Text Colors",
+    "text": "Text & Fonts",
+    "layout" : "Layout Settings",
+    "components" : "Component Templates",
+    "charts" : "eCharts Definition",
     "defaultTheme": "Default",
     "yellow": "Yellow",
     "green": "Green",
diff --git a/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx b/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
index 500a15e55..468c0b688 100644
--- a/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
+++ b/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
@@ -1,4 +1,5 @@
 import { InputRef } from "antd/es/input";
+import styled from "styled-components";
 import {
   CommonSettingResponseData,
   SetCommonSettingPayload,
@@ -25,6 +26,13 @@ import {
   Footer,
   Header,
 } from "../styledComponents";
+import {
+  ColorPickerCompIcon,
+  TextSizeIcon,
+  PageLayoutCompIcon,
+  ShapesCompIcon,
+  ChartCompIcon,
+} from "lowcoder-design";
 import PreviewApp from "../../../../components/PreviewApp";
 import { trans } from "i18n";
 import { Prompt } from "react-router";
@@ -32,7 +40,26 @@ import { HeaderBack } from "pages/setting/permission/styledComponents";
 import dsl from "./previewDsl";
 import chartDsl from "./chartPreviewDsl";
 import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
-import { Collapse, CollapseProps } from 'antd';
+import { Card, Collapse, CollapseProps, Divider, Flex, List, Tooltip } from 'antd';
+
+const ThemeSettingsView = styled.div`
+  font-size: 14px;
+  color: #8b8fa3;
+  flex-grow: 1;
+  padding-top: 0px;
+  padding-left: 0px;
+  max-width: 100%;
+`;
+
+const StyleThemeSettingsCover = styled.div`
+    display: flex;
+    flex-direction: row;
+    background: rgb(131,58,180);
+    background: linear-gradient(34deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
+    padding: 15px;
+    height: 80px;
+    border-radius:10px 10px 0 0;
+`;
 
 const CodeEditor = lazy(
   () => import("base/codeEditor/codeEditor")
@@ -149,164 +176,108 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
     history.push(THEME_SETTING);
   };
 
-
-
   render() {
 
-    const themeSettings: CollapseProps['items'] = [
+    const colorSettings = [
       {
-        key: '1',
-        label: 'Colors',
-        children: 
-          <div className="common">
-            <div>
-              <DetailTitle>{trans("theme.mainColor")}</DetailTitle>
-              <ColorPicker
-                colorKey="primary"
-                name={trans("themeDetail.primary")}
-                desc={trans("themeDetail.primaryDesc")}
-                color={this.state.theme.primary}
-                configChange={(params) => this.configChange(params)}
-              />
-            </div>
-            <ColorPicker
-              colorKey="canvas"
-              name={trans("themeDetail.canvas")}
-              desc={trans("themeDetail.canvasDesc")}
-              color={this.state.theme.canvas}
-              configChange={(params) => this.configChange(params)}
-            />
-            <ColorPicker
-              colorKey="primarySurface"
-              name={trans("themeDetail.primarySurface")}
-              desc={trans("themeDetail.primarySurfaceDesc")}
-              color={this.state.theme.primarySurface}
-              configChange={(params) => this.configChange(params)}
-            />
-            <div>
-              <DetailTitle>{trans("theme.text")}</DetailTitle>
-              <ColorPicker
-                colorKey="textLight"
-                name={trans("themeDetail.textLight")}
-                desc={trans("themeDetail.textLightDesc")}
-                color={this.state.theme.textLight}
-                configChange={(params) => this.configChange(params)}
-              />
-            </div>
-            <ColorPicker
-              colorKey="textDark"
-              name={trans("themeDetail.textDark")}
-              desc={trans("themeDetail.textDarkDesc")}
-              color={this.state.theme.textDark}
-              configChange={(params) => this.configChange(params)}
-            />
-            
-          </div>
+        key: 'primary',
+        title: trans('theme.mainColor'),
+        items: [
+          {
+            settingsKey: 'primary',
+            name: trans('themeDetail.primary'),
+            desc: trans('themeDetail.primaryDesc'),
+            color: this.state.theme.primary,
+          }
+        ]
       },
       {
-        key: '2',
-        label: 'Text & Fonts',
-        children: <p>to define...</p>,
+        items: [
+          {
+            settingsKey: 'canvas',
+            name: trans('themeDetail.canvas'),
+            desc: trans('themeDetail.canvasDesc'),
+            color: this.state.theme.canvas,
+          },
+          {
+            settingsKey: 'primarySurface',
+            name: trans('themeDetail.primarySurface'),
+            desc: trans('themeDetail.primarySurfaceDesc'),
+            color: this.state.theme.primarySurface,
+          }
+        ]
       },
       {
-        key: '3',
-        label: 'Layout',
-        children: 
-          <div className="common">
-            <div>
-              <DetailTitle>{trans("themeDetail.borderRadius")}</DetailTitle>
-              <ColorPicker
-                colorKey="borderRadius"
-                name={trans("themeDetail.borderRadius")}
-                desc={trans("themeDetail.borderRadiusDesc")}
-                radius={this.state.theme.borderRadius}
-                configChange={(params) => this.configChange(params)}
-              />
-            </div>
-            <div>
-              <DetailTitle>{trans("themeDetail.margin")}</DetailTitle>
-              <ColorPicker
-                colorKey="margin"
-                name={trans("themeDetail.margin")}
-                desc={trans("themeDetail.marginDesc")}
-                margin={this.state.theme.margin}
-                configChange={(params) => {
-                  this.configChange(params);
-                }}
-              />
-            </div>
-            <div>
-              <DetailTitle>{trans("themeDetail.padding")}</DetailTitle>
-              <ColorPicker
-                colorKey="padding"
-                name={trans("themeDetail.padding")}
-                desc={trans("themeDetail.paddingDesc")}
-                padding={this.state.theme.padding}
-                configChange={(params) => {
-                  this.configChange(params);
-                }}
-              />
-            </div>
-            <div>
-              <DetailTitle>{trans("themeDetail.gridColumns")}</DetailTitle>
-              <ColorPicker
-                colorKey="gridColumns"
-                name={trans("themeDetail.gridColumns")}
-                desc={trans("themeDetail.gridColumnsDesc")}
-                gridColumns={this.state.theme.gridColumns}
-                configChange={(params) => {
-                  this.configChange(params);
-                }}
-              />
-            </div>
-          </div>,
-      },
+        key: 'text',
+        title: trans('theme.text'),
+        items: [
+          {
+            settingsKey: 'textLight',
+            name: trans('themeDetail.textLight'),
+            desc: trans('themeDetail.textLightDesc'),
+            color: this.state.theme.textLight,
+          },
+          {
+            settingsKey: 'textDark',
+            name: trans('themeDetail.textDark'),
+            desc: trans('themeDetail.textDarkDesc'),
+            color: this.state.theme.textDark,
+          }
+        ]
+      }
+    ];
+
+    // const fontSettings = [];
+
+    const layoutSettings = [
       {
-        key: '4',
-        label: 'Components',
-        children: <p>to define...</p>,
+        title: trans('themeDetail.borderRadius'),
+        items: [
+          {
+            settingsKey: 'borderRadius',
+            name: trans('themeDetail.borderRadius'),
+            desc: trans('themeDetail.borderRadiusDesc'),
+            type: "radius",
+            value: this.state.theme.borderRadius,
+          }
+        ]
       },
       {
-        key: '5',
-        label: 'Theme Preview',
-        children: <PreviewApp style={{marginTop: '3px'}} theme={this.state.theme} dsl={dsl} />,
+        title: trans('themeDetail.margin'),
+        items: [
+          {
+            settingsKey: 'margin',
+            name: trans('themeDetail.margin'),
+            desc: trans('themeDetail.marginDesc'),
+            type: "margin",
+            value: this.state.theme.margin,
+          }
+        ]
       },
       {
-        key: '6',
-        label: 'eCharts Definition',
-        children: 
-          <div className="chart">
-            {/* <DetailTitle>{trans("themeDetail.chart")}</DetailTitle> */}
-            <ChartDesc>
-              {trans("themeDetail.chartDesc")}
-              <a target="_blank" href="https://echarts.apache.org/en/theme-builder.html" rel="noreferrer">
-                {" "}
-                {trans("themeDetail.echartsJson")}
-              </a>
-            </ChartDesc>
-            <ChartInput>
-            <div className="code-editor">
-              <CodeEditor
-                value={this.state.theme.chart || ""}
-                onChange={(value) => this.configChange({
-                  colorKey: "chart",
-                  chart: value.doc.toString() ? value.doc.toString() : undefined,
-                })}
-                styleName="higher"
-                codeType="Function"
-                showLineNum
-                bordered
-              />
-              </div>
-            </ChartInput>
-          </div>,
+        title: trans('themeDetail.padding'),
+        items: [
+          {
+            settingsKey: 'padding',
+            name: trans('themeDetail.padding'),
+            desc: trans('themeDetail.paddingDesc'),
+            type: "padding",
+            value: this.state.theme.padding,
+          }
+        ]
       },
       {
-        key: '7',
-        label: 'eCharts Definition Preview',
-        children: <PreviewApp style={{ height: "600px", margin: "20px 0 8px 0" }} theme={this.state.theme} dsl={chartDsl} />,
-      },
-      
+        title: trans('themeDetail.gridColumns'),
+        items: [
+          {
+            settingsKey: 'gridColumns',
+            name: trans('themeDetail.gridColumns'),
+            desc: trans('themeDetail.gridColumnsDesc'),
+            type: "gridColumns",
+            value: this.state.theme.gridColumns,
+          }
+        ]
+      }
     ];
 
     return (
@@ -338,19 +309,8 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
           }}
           when={!this.isThemeNotChange()}
         ></Prompt>
-        <DetailContainer
-          onScroll={(e) => {
-            if (
-              e.currentTarget.scrollTop + e.currentTarget.clientHeight >=
-              e.currentTarget.scrollHeight - 2
-            ) {
-              // scroll to the bottom
-              this.footerRef.current && this.footerRef.current.classList.remove("no-bottom");
-            } else {
-              this.footerRef.current && this.footerRef.current.classList.add("no-bottom");
-            }
-          }}
-        >
+
+        <DetailContainer>
           <Header>
             <HeaderBack>
               <span onClick={() => this.goList()}>{trans("settings.theme")}</span>
@@ -358,22 +318,190 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
               <span>{this.state.name}</span>
             </HeaderBack>
           </Header>
+
           <DetailContent>
 
-          <Collapse items={themeSettings} defaultActiveKey={['1']} />
+            <ThemeSettingsView>
+              <StyleThemeSettingsCover>
+                <ColorPickerCompIcon width={"36px"} style={{marginRight : "10px"}}/> <h2 style={{color: "#ffffff", marginTop : "8px"}}> {trans("theme.mainColor")}</h2>
+              </StyleThemeSettingsCover>
+              <Card style={{ marginBottom: "20px", minHeight : "200px" }}>
+                <Flex gap={"middle"}>
+                  <List
+                    bordered
+                    dataSource={colorSettings}
+                    renderItem={(item) => (
+                      <>
+                        {item.title && (
+                            <List.Item>
+                              <DetailTitle>{item.title}</DetailTitle>
+                            </List.Item>
+        
+                        )}
+                        {item.items.map((colorItem) => (
+                          <Tooltip title={colorItem.desc} placement="right">
+                            <List.Item key={colorItem.settingsKey}>
+                              <ColorPicker
+                                colorKey={colorItem.settingsKey}
+                                name={colorItem.name}
+                                // desc={colorItem.desc}
+                                color={colorItem.color}
+                                configChange={(params) => {
+                                  this.configChange(params);
+                                }}
+                              />
+                          </List.Item>
+                          </Tooltip>
+                        ))}
+                      </>
+                    )}
+                  />
+                  <Divider type="vertical" style={{height: "610px"}}/>
+                  <PreviewApp style={{marginTop: '3px', height: "620px", width: "100%"}} theme={this.state.theme} dsl={dsl} />
+                </Flex>
+              </Card>  
+              
+            </ThemeSettingsView>
+
+            <ThemeSettingsView>
+              <StyleThemeSettingsCover>
+                <TextSizeIcon width={"36px"} style={{marginRight : "10px"}}/> <h2 style={{color: "#ffffff", marginTop : "8px"}}> {trans("theme.text")}</h2>
+              </StyleThemeSettingsCover>
+              <Card style={{ marginBottom: "20px", minHeight : "200px" }}>
+                
+              <Flex gap={"middle"}>
+                  {/* here we need to place the Font Configuration */}
+                  <Divider type="vertical" style={{height: "610px"}}/>
+                  <PreviewApp style={{marginTop: '3px', height: "620px", width: "100%"}} theme={this.state.theme} dsl={dsl} />
+                </Flex>
+              </Card>  
+              
+            </ThemeSettingsView>
 
-            
-            
-            {/* <PreviewApp style={{marginTop: '3px'}} theme={this.state.theme} dsl={dsl} /> */}
-            
+            <ThemeSettingsView>
+              <StyleThemeSettingsCover>
+                <PageLayoutCompIcon width={"36px"} style={{marginRight : "10px"}}/> <h2 style={{color: "#ffffff", marginTop : "8px"}}> {trans("theme.layout")}</h2>
+              </StyleThemeSettingsCover>
+              <Card style={{ marginBottom: "20px", minHeight : "200px" }}>
+                
+                <Flex gap={"middle"}>
+                  <List
+                    bordered
+                    dataSource={layoutSettings}
+                    renderItem={(item) => (
+                      <>
+                        {item.title && (
+                            <List.Item>
+                              <DetailTitle>{item.title}</DetailTitle>
+                            </List.Item>
+                        )}
+                        {item.items.map((layoutSettingsItem) => (
+                          <Tooltip title={layoutSettingsItem.desc} placement="right">
+                            <List.Item key={layoutSettingsItem.settingsKey}>
+                              {layoutSettingsItem.type == "radius" && 
+                                <ColorPicker
+                                  colorKey={layoutSettingsItem.settingsKey}
+                                  name={layoutSettingsItem.name}
+                                  radius={layoutSettingsItem.value}
+                                  configChange={(params) => {
+                                    this.configChange(params);
+                                  }}
+                                />
+                              }
+                              {layoutSettingsItem.type == "margin" && 
+                                <ColorPicker
+                                  colorKey={layoutSettingsItem.settingsKey}
+                                  name={layoutSettingsItem.name}
+                                  margin={layoutSettingsItem.value}
+                                  configChange={(params) => {
+                                    this.configChange(params);
+                                  }}
+                                />
+                              }
+                              {layoutSettingsItem.type == "padding" && 
+                                <ColorPicker
+                                  colorKey={layoutSettingsItem.settingsKey}
+                                  name={layoutSettingsItem.name}
+                                  padding={layoutSettingsItem.value}
+                                  configChange={(params) => {
+                                    this.configChange(params);
+                                  }}
+                                />
+                              }
+                              {layoutSettingsItem.type == "gridColumns" && 
+                                <ColorPicker
+                                  colorKey={layoutSettingsItem.settingsKey}
+                                  name={layoutSettingsItem.name}
+                                  gridColumns={layoutSettingsItem.value}
+                                  configChange={(params) => {
+                                    this.configChange(params);
+                                  }}
+                                />
+                              }
+                          </List.Item>
+                          </Tooltip>
+                        ))}
+                      </>
+                    )}
+                  />
+                  <Divider type="vertical" style={{height: "610px"}}/>
+                  <PreviewApp style={{marginTop: '3px', height: "620px", width: "100%"}} theme={this.state.theme} dsl={dsl} />
+                </Flex>
 
-            {/* <PreviewApp
-              style={{ height: "346px", margin: "20px 0 8px 0" }}
-              theme={this.state.theme}
-              dsl={chartDsl}
-                /> */}
+              </Card>  
+              
+            </ThemeSettingsView>
+
+            <ThemeSettingsView>
+              <StyleThemeSettingsCover>
+                <ShapesCompIcon width={"36px"} style={{marginRight : "10px"}}/> <h2 style={{color: "#ffffff", marginTop : "8px"}}> {trans("theme.components")}</h2>
+              </StyleThemeSettingsCover>
+              <Card style={{ marginBottom: "20px", minHeight : "200px" }}>
+                
+                <Divider />
+
+              </Card>  
+              
+            </ThemeSettingsView>
+
+            <ThemeSettingsView>
+              <StyleThemeSettingsCover>
+                <ChartCompIcon width={"36px"} style={{marginRight : "10px"}}/> <h2 style={{color: "#ffffff", marginTop : "8px"}}> {trans("theme.charts")}</h2>
+              </StyleThemeSettingsCover>
+              <Card style={{ marginBottom: "20px", minHeight : "200px" }}>
+                <ChartDesc>
+                  {trans("themeDetail.chartDesc")}
+                  <a target="_blank" href="https://echarts.apache.org/en/theme-builder.html" rel="noreferrer">
+                    {" "}
+                    {trans("themeDetail.echartsJson")}
+                  </a>
+                </ChartDesc>
+                <Flex gap={"middle"}>
+                  <ChartInput>
+                    <div className="code-editor" style={{height: "380px", width:"100%", minWidth:"300px"}}>
+                      <CodeEditor
+                        value={this.state.theme.chart || ""}
+                        onChange={(value) => this.configChange({
+                          colorKey: "chart",
+                          chart: value.doc.toString() ? value.doc.toString() : undefined,
+                        })}
+                        styleName="window"
+                        codeType="Function"
+                        showLineNum
+                        bordered
+                      />
+                    </div>
+                  </ChartInput>
+                  <Divider type="vertical" style={{height: "370px"}}/>
+                  <PreviewApp style={{ height: "380px", width: "100%", margin: "0" }} theme={this.state.theme} dsl={chartDsl} />
+                </Flex>
+
+              </Card>  
+              
+            </ThemeSettingsView>
 
           </DetailContent>
+
           <Footer ref={this.footerRef} className="no-bottom">
             <ResetButton
               icon={<ResetIcon />}

From 3a9450938a466ccb9878a1c25607fe0b1f5b9b52 Mon Sep 17 00:00:00 2001
From: FalkWolsky <fw@falkwolsky.com>
Date: Thu, 23 May 2024 23:15:48 +0200
Subject: [PATCH 03/57] WIP - Changing the Theme Detail View 3

---
 .../lowcoder/src/pages/setting/theme/detail/index.tsx         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx b/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
index 468c0b688..04c0964f3 100644
--- a/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
+++ b/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
@@ -54,8 +54,8 @@ const ThemeSettingsView = styled.div`
 const StyleThemeSettingsCover = styled.div`
     display: flex;
     flex-direction: row;
-    background: rgb(131,58,180);
-    background: linear-gradient(34deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
+    background: rgb(2,0,36);
+background: linear-gradient(34deg, rgba(2,0,36,1) 0%, rgba(102,9,121,1) 35%, rgba(0,255,181,1) 100%);
     padding: 15px;
     height: 80px;
     border-radius:10px 10px 0 0;

From b19b824f6213d231788d1de77ef2391d23f406be Mon Sep 17 00:00:00 2001
From: FalkWolsky <fw@falkwolsky.com>
Date: Sun, 26 May 2024 00:07:31 +0200
Subject: [PATCH 04/57] Theme Settings extended and Components Display set up.

---
 .../lowcoder/src/api/commonSettingApi.ts      |  46 +-
 .../lowcoder/src/components/ColorPicker.tsx   | 254 -----------
 .../src/components/ThemeSettingsSelector.tsx  | 402 ++++++++++++++++++
 .../comps/controls/styleControlConstants.tsx  |   3 +
 .../packages/lowcoder/src/i18n/locales/en.ts  |  66 +--
 .../src/pages/editor/LeftLayersContent.tsx    |  14 +-
 .../pages/setting/theme/ThemeCompPanel.tsx    | 207 +++++++++
 .../src/pages/setting/theme/detail/index.tsx  | 145 +++++--
 .../pages/setting/theme/styledComponents.tsx  |  25 +-
 9 files changed, 812 insertions(+), 350 deletions(-)
 delete mode 100644 client/packages/lowcoder/src/components/ColorPicker.tsx
 create mode 100644 client/packages/lowcoder/src/components/ThemeSettingsSelector.tsx
 create mode 100644 client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx

diff --git a/client/packages/lowcoder/src/api/commonSettingApi.ts b/client/packages/lowcoder/src/api/commonSettingApi.ts
index 135794440..965605ed7 100644
--- a/client/packages/lowcoder/src/api/commonSettingApi.ts
+++ b/client/packages/lowcoder/src/api/commonSettingApi.ts
@@ -43,11 +43,15 @@ export interface ThemeDetail {
   canvas: string; // app bg-color
   primarySurface: string; // comp bg-color
   borderRadius: string;
+  borderColor?: string;
+  borderWidth?: string;
+  borderStyle?: string;
   chart?: string;
   margin?: string;
   padding?: string;
   gridColumns?: string; //Added By Aqib Mirza
   textSize?: string;
+  fontFamily?: string;
   animation?: string;
   animationDelay?: string;
   animationDuration?: string;
@@ -59,27 +63,20 @@ export interface ThemeDetail {
 
 export function getThemeDetailName(key: keyof ThemeDetail) {
   switch (key) {
-    case "primary":
-      return trans("themeDetail.primary");
-    case "textDark":
-      return trans("themeDetail.textDark");
-    case "textLight":
-      return trans("themeDetail.textLight");
-    case "canvas":
-      return trans("themeDetail.canvas");
-    case "primarySurface":
-      return trans("themeDetail.primarySurface");
-    case "borderRadius":
-      return trans("themeDetail.borderRadius");
-    case "margin":	
-      return trans("style.margin");	
-    case "padding":	
-      return trans("style.padding");
-    //Added By Aqib Mirza
-    case "gridColumns":
-      return trans("themeDetail.gridColumns");
-    case "textSize":
-      return trans("style.textSize");
+    case "primary": return trans("themeDetail.primary");
+    case "textDark": return trans("themeDetail.textDark");
+    case "textLight": return trans("themeDetail.textLight");
+    case "canvas": return trans("themeDetail.canvas");
+    case "primarySurface": return trans("themeDetail.primarySurface");
+    case "borderRadius": return trans("themeDetail.borderRadius");
+    case "borderColor": return trans("themeDetail.borderColor");
+    case "borderWidth": return trans("themeDetail.borderWidth");
+    case "borderStyle": return trans("themeDetail.borderStyle");
+    case "fontFamily": return trans("themeDetail.fontFamily");
+    case "margin": return trans("style.margin");	
+    case "padding":	return trans("style.padding");
+    case "gridColumns": return trans("themeDetail.gridColumns");
+    case "textSize": return trans("style.textSize");
   }
   return "";
 }
@@ -91,9 +88,14 @@ export function isThemeColorKey(key: string) {
     case "textLight":
     case "canvas":
     case "primarySurface":
+    case "borderRadius":
+    case "borderColor":
+    case "borderWidth":
+    case "borderStyle":
+    case "fontFamily":
     case "margin":	
     case "padding":
-    case "gridColumns": //Added By Aqib Mirza
+    case "gridColumns":
     case "textSize":
       return true;
   }
diff --git a/client/packages/lowcoder/src/components/ColorPicker.tsx b/client/packages/lowcoder/src/components/ColorPicker.tsx
deleted file mode 100644
index b461672e2..000000000
--- a/client/packages/lowcoder/src/components/ColorPicker.tsx
+++ /dev/null
@@ -1,254 +0,0 @@
-import _ from "lodash";
-import { useEffect, useState } from "react";
-import { ConfigItem, Radius, Margin, Padding, GridColumns } from "../pages/setting/theme/styledComponents";
-import { isValidColor, toHex } from "components/colorSelect/colorUtils";
-import { ColorSelect } from "components/colorSelect";
-import { TacoInput } from "components/tacoInput";
-import { TableCellsIcon as GridIcon } from "lowcoder-design/src/icons"; //Added By Aqib Mirza
-
-import { ExpandIcon, CompressIcon } from "lowcoder-design/src/icons";
-
-export type configChangeParams = {
-  colorKey: string;
-  color?: string;
-  radius?: string;
-  chart?: string;
-  margin?: string;	
-  padding?: string;
-  gridColumns?: string; //Added By Aqib Mirza
-};
-
-type ColorConfigProps = {
-  className?: string;
-  colorKey: string;
-  name?: string;
-  desc?: string;
-  color?: string;
-  radius?: string;
-  configChange: (params: configChangeParams) => void;
-  showVarName?: boolean;
-  margin?: string;	
-  padding?: string;
-  gridColumns?: string; //Added By Aqib Mirza
-};
-
-export default function ColorPicker(props: ColorConfigProps) {
-  const {
-    colorKey,
-    name,
-    desc,
-    color: defaultColor,
-    radius: defaultRadius,
-    configChange,
-    showVarName = true,
-    margin: defaultMargin,	
-    padding: defaultPadding,
-    gridColumns: defaultGridColumns, //Added By Aqib Mirza
-  } = props;
-  const configChangeWithDebounce = _.debounce(configChange, 0);
-  const [color, setColor] = useState(defaultColor);
-  const [radius, setRadius] = useState(defaultRadius);
-
-  const [margin, setMargin] = useState(defaultMargin);	
-  const [padding, setPadding] = useState(defaultPadding);
-  const [gridColumns, setGridColumns] = useState(defaultGridColumns); //Added By Aqib Mirza
-
-  const varName = `(${colorKey})`;
-
-  const colorInputBlur = () => {
-    if (!color || !isValidColor(color)) {
-      setColor(defaultColor);
-    } else {
-      setColor(toHex(color));
-      configChange({ colorKey, color: toHex(color) });
-    }
-  };
-
-  const radiusInputBlur = (radius: string) => {
-    let result = "";
-    if (!radius || Number(radius) === 0) {
-      result = "0";
-    } else if (/^[0-9]+$/.test(radius)) {
-      result = Number(radius) + "px";
-    } else if (/^[0-9]+(px|%)$/.test(radius)) {
-      result = radius;
-    } else {
-      result = "0";
-    }
-    setRadius(result);
-    configChange({ colorKey, radius: result });
-  };
-
-  const marginInputBlur = (margin: string) => {	
-    let result = "";	
-    if (!margin || Number(margin) === 0) {	
-      result = "0";	
-    } else if (/^[0-9]+$/.test(margin)) {	
-      result = Number(margin) + "px";	
-    } else if (/^[0-9]+(px|%)$/.test(margin)) {	
-      result = margin;	
-    } else {	
-      result = "3px";	
-    }	
-    setMargin(result);	
-    configChange({ colorKey, margin: result });	
-  };	
-  const paddingInputBlur = (padding: string) => {	
-    let result = "";	
-    if (!padding || Number(padding) === 0) {	
-      result = "0";	
-    } else if (/^[0-9]+$/.test(padding)) {	
-      result = Number(padding) + "px";	
-    } else if (/^[0-9]+(px|%)$/.test(padding)) {	
-      result = padding;	
-    } else {	
-      result = "3px";	
-    }	
-    setPadding(result);	
-    configChange({ colorKey, padding: result });	
-  };
-
-  //Added By Aqib Mirza
-
-  const gridColumnsInputBlur = (gridColumns: string) => {
-    let result = "";
-    if (!gridColumns) {
-      result = "0";
-    } else {
-      result = gridColumns;
-    }
-    setGridColumns(result);
-    configChange({ colorKey, gridColumns: result });
-  };
-
-  /////////////////////
-
-  useEffect(() => {
-    if (color && isValidColor(color)) {
-      configChangeWithDebounce({ colorKey, color });
-    }
-  }, [color]);
-
-  // reset
-  useEffect(() => {
-    setColor(defaultColor);
-  }, [defaultColor]);
-
-  useEffect(() => {
-    setRadius(defaultRadius);
-  }, [defaultRadius]);
-
-  useEffect(() => {	
-    setMargin(defaultMargin);	
-  }, [defaultMargin]);	
-
-  useEffect(() => {	
-    setPadding(defaultPadding);	
-  }, [defaultPadding]);
-  // Added By Aqib Mirza
-  useEffect(() => {
-    setGridColumns(defaultGridColumns);
-  }, [defaultGridColumns]);
-  //////////////////////
-
-  return (
-    <ConfigItem className={props.className}>
-      <div className="text-desc">
-        <div className="name">
-          {name} {showVarName && <span>{varName}</span>}
-        </div>
-        <div className="desc">{desc}</div>
-      </div>
-      {colorKey !== "borderRadius" &&	
-        colorKey !== "margin" &&	
-        colorKey !== "padding" && 
-      colorKey !== "gridColumns" && (
-        <div className="config-input">
-          <ColorSelect
-            changeColor={_.debounce(setColor, 500, {
-              leading: true,
-              trailing: true,
-            })}
-            color={color!}
-            trigger="hover"
-          />
-          <TacoInput
-            value={color}
-            onChange={(e) => setColor(e.target.value)}
-            onBlur={colorInputBlur}
-            onKeyUp={(e) => e.nativeEvent.key === "Enter" && colorInputBlur()}
-          />
-        </div>
-      )} 
-      {colorKey === "borderRadius" && (
-        <div className="config-input">
-          <Radius $radius={defaultRadius || "0"}>
-            <div>
-              <div />
-            </div>
-          </Radius>
-          <TacoInput
-            value={radius}
-            onChange={(e) => setRadius(e.target.value)}
-            onBlur={(e) => radiusInputBlur(e.target.value)}
-            onKeyUp={(e) => e.nativeEvent.key === "Enter" && radiusInputBlur(e.currentTarget.value)}
-          />
-        </div>
-      )}
-      {colorKey === "margin" && (	
-        <div className="config-input">	
-          <Margin $margin={defaultMargin || "4px"}>	
-            <div>	
-              <ExpandIcon title="" />	
-            </div>	
-          </Margin>	
-          <TacoInput	
-            value={margin}	
-            onChange={(e) => setMargin(e.target.value)}	
-            onBlur={(e) => marginInputBlur(e.target.value)}	
-            onKeyUp={(e) =>	
-              e.nativeEvent.key === "Enter" &&	
-              marginInputBlur(e.currentTarget.value)	
-            }	
-          />	
-        </div>	
-      )}	
-      {colorKey === "padding" && (	
-        <div className="config-input">	
-          <Padding $padding={defaultPadding || "4px"}>	
-            <div>	
-              <CompressIcon title="" />	
-            </div>	
-          </Padding>	
-          <TacoInput	
-            value={padding}	
-            onChange={(e) => setPadding(e.target.value)}	
-            onBlur={(e) => paddingInputBlur(e.target.value)}	
-            onKeyUp={(e) =>	
-              e.nativeEvent.key === "Enter" &&	
-              paddingInputBlur(e.currentTarget.value)	
-            }	
-          />	
-        </div>
-        )}
-      {colorKey === "gridColumns" && (
-        <div className="config-input">
-          <GridColumns $gridColumns={defaultGridColumns || "24"}>
-            <div>
-              <GridIcon title="" />
-            </div>
-          </GridColumns>
-          <TacoInput
-            value={gridColumns}
-            onChange={(e) => setGridColumns(e.target.value)}
-            onBlur={(e) => gridColumnsInputBlur(e.target.value)}
-            onKeyUp={(e) =>
-              e.nativeEvent.key === "Enter" &&
-              gridColumnsInputBlur(e.currentTarget.value)
-            }
-          />
-        </div>
-      )}
-    </ConfigItem>
-  );
-}
diff --git a/client/packages/lowcoder/src/components/ThemeSettingsSelector.tsx b/client/packages/lowcoder/src/components/ThemeSettingsSelector.tsx
new file mode 100644
index 000000000..f3d81a540
--- /dev/null
+++ b/client/packages/lowcoder/src/components/ThemeSettingsSelector.tsx
@@ -0,0 +1,402 @@
+import _ from "lodash";
+import { useEffect, useState } from "react";
+import { ConfigItem, Radius, Margin, Padding, GridColumns, BorderWidth, BorderStyle } from "../pages/setting/theme/styledComponents";
+import { isValidColor, toHex } from "components/colorSelect/colorUtils";
+import { ColorSelect } from "components/colorSelect";
+import { TacoInput } from "components/tacoInput";
+import { Slider } from "antd";
+import { 
+  ExpandIcon, 
+  CompressIcon,
+  BorderRadiusIcon,
+  BorderWidthIcon,
+  BorderStyleIcon,
+  TableCellsIcon,
+ } from "lowcoder-design/src/icons";
+
+export type configChangeParams = {
+  themeSettingKey: string;
+  color?: string;
+  radius?: string;
+  chart?: string;
+  margin?: string;  
+  padding?: string;
+  gridColumns?: string; // Added By Aqib Mirza
+  borderStyle?: string;
+  borderColor?: string;
+  borderWidth?: string;
+  fontFamily?: string;
+};
+
+type ColorConfigProps = {
+  className?: string;
+  themeSettingKey: string;
+  name?: string;
+  desc?: string;
+  color?: string;
+  
+  configChange: (params: configChangeParams) => void;
+  showVarName?: boolean;
+  radius?: string;
+  borderStyle?: string;
+  borderWidth?: string;
+  borderColor?: string;
+  fontFamily?: string;
+  margin?: string;  
+  padding?: string;
+  gridColumns?: string; // Added By Aqib Mirza
+};
+
+export default function ThemeSettingsSelector(props: ColorConfigProps) {
+  const {
+    themeSettingKey,
+    name,
+    desc,
+    color: defaultColor,
+    radius: defaultRadius,
+    configChange,
+    showVarName = true,
+    margin: defaultMargin,  
+    padding: defaultPadding,
+    gridColumns: defaultGridColumns,
+    borderStyle: defaultBorderStyle,
+    borderWidth: defaultBorderWidth,
+    borderColor: defaultBorderColor,
+    fontFamily: defaultFontFamily
+  } = props;
+  
+  const configChangeWithDebounce = _.debounce(configChange, 0);
+  const [color, setColor] = useState(defaultColor);
+  const [radius, setRadius] = useState(defaultRadius);
+  const [margin, setMargin] = useState(defaultMargin);  
+  const [padding, setPadding] = useState(defaultPadding);
+  const [gridColumns, setGridColumns] = useState(defaultGridColumns); 
+  const [borderStyle, setBorderStyle] = useState(defaultBorderStyle);
+  const [borderWidth, setBorderWidth] = useState(defaultBorderWidth);
+  const [borderColor, setBorderColor] = useState(defaultBorderColor);
+  const [fontFamily, setFontFamily] = useState(defaultFontFamily);
+
+  const varName = `(${themeSettingKey})`;
+
+  const colorInputBlur = () => {
+    if (!color || !isValidColor(color)) {
+      setColor(defaultColor);
+    } else {
+      setColor(toHex(color));
+      configChange({ themeSettingKey, color: toHex(color) });
+    }
+  };
+
+  const radiusInputBlur = (radius: string) => {
+    let result = "";
+    if (!radius || Number(radius) === 0) {
+      result = "0";
+    } else if (/^[0-9]+$/.test(radius)) {
+      result = Number(radius) + "px";
+    } else if (/^[0-9]+(px|%)$/.test(radius)) {
+      result = radius;
+    } else {
+      result = "0";
+    }
+    setRadius(result);
+    configChange({ themeSettingKey, radius: result });
+  };
+
+  const marginInputBlur = (margin: string) => {  
+    let result = "";  
+    if (!margin || Number(margin) === 0) {  
+      result = "0";  
+    } else if (/^[0-9]+$/.test(margin)) {  
+      result = Number(margin) + "px";  
+    } else if (/^[0-9]+(px|%)$/.test(margin)) {  
+      result = margin;  
+    } else {  
+      result = "3px";  
+    }  
+    setMargin(result);  
+    configChange({ themeSettingKey, margin: result });  
+  };
+
+  const paddingInputBlur = (padding: string) => {  
+    let result = "";  
+    if (!padding || Number(padding) === 0) {  
+      result = "0";  
+    } else if (/^[0-9]+$/.test(padding)) {  
+      result = Number(padding) + "px";  
+    } else if (/^[0-9]+(px|%)$/.test(padding)) {  
+      result = padding;  
+    } else {  
+      result = "3px";  
+    }  
+    setPadding(result);  
+    configChange({ themeSettingKey, padding: result });  
+  };
+
+  const gridColumnsInputBlur = (gridColumns: string) => {
+    let result = "";
+    if (!gridColumns) {
+      result = "24";
+    } else {
+      result = gridColumns;
+    }
+    setGridColumns(result);
+    configChange({ themeSettingKey, gridColumns: result });
+  };
+
+  const borderStyleInputBlur = (borderStyle: string) => {
+    let result = "";
+    if (!borderStyle) {
+      result = "solid";
+    } else {
+      result = borderStyle;
+    }
+    setBorderStyle(result);
+    configChange({ themeSettingKey, borderStyle: result });
+  };
+
+  const borderWidthInputBlur = (borderWidth: string) => {
+    let result = "";  
+    if (!borderWidth || Number(borderWidth) === 0) {  
+      result = "0";  
+    } else if (/^[0-9]+$/.test(borderWidth)) {  
+      result = Number(borderWidth) + "px";  
+    } else if (/^[0-9]+(px|%)$/.test(borderWidth)) {  
+      result = borderWidth;  
+    } else {  
+      result = "1px";  
+    }  
+    setBorderWidth(borderWidth);
+    configChange({ themeSettingKey, borderWidth: result });
+  };
+
+  const borderColorInputBlur = (borderColor: string) => {
+    setBorderColor(borderColor);
+    configChange({ themeSettingKey, borderColor });
+  };
+
+  const fontFamilyInputBlur = (fontFamily: string) => {
+    let result = "";
+    if (!fontFamily) {
+      result = "Roboto, sans-serif";
+    } else {
+      result = fontFamily;
+    }
+    setFontFamily(result);
+    configChange({ themeSettingKey, fontFamily: result });
+  };
+
+
+  useEffect(() => {
+    if (color && isValidColor(color)) {
+      configChangeWithDebounce({ themeSettingKey, color });
+    }
+  }, [color]);
+
+  useEffect(() => {
+    setColor(defaultColor);
+  }, [defaultColor]);
+
+  useEffect(() => {
+    setRadius(defaultRadius);
+  }, [defaultRadius]);
+
+  useEffect(() => {  
+    setMargin(defaultMargin);  
+  }, [defaultMargin]);  
+
+  useEffect(() => {  
+    setPadding(defaultPadding);  
+  }, [defaultPadding]);
+
+  useEffect(() => {
+    setGridColumns(defaultGridColumns);
+  }, [defaultGridColumns]);
+
+  useEffect(() => {
+    setBorderStyle(defaultBorderStyle);
+  }, [defaultBorderStyle]);
+
+  useEffect(() => {
+    setBorderWidth(defaultBorderWidth);
+  }, [defaultBorderWidth]);
+
+  useEffect(() => {
+    setBorderColor(defaultBorderColor);
+  }, [defaultBorderColor]);
+
+  useEffect(() => {
+    setFontFamily(defaultFontFamily);
+  }, [defaultFontFamily]);
+
+  return (
+    <ConfigItem className={props.className}>
+      <div className="text-desc">
+        <div className="name">
+          {name} {showVarName && <span>{varName}</span>}
+        </div>
+        <div className="desc">{desc}</div>
+      </div>
+      
+      {themeSettingKey !== "borderRadius" &&  
+        themeSettingKey !== "margin" &&  
+        themeSettingKey !== "padding" && 
+        themeSettingKey !== "gridColumns" &&
+        themeSettingKey !== "borderStyle" &&
+        themeSettingKey !== "borderWidth" &&
+        themeSettingKey !== "fontFamily" && (
+        <div className="config-input">
+          <ColorSelect
+            changeColor={_.debounce(setColor, 500, {
+              leading: true,
+              trailing: true,
+            })}
+            color={color!}
+            trigger="hover"
+          />
+          <TacoInput
+            value={color}
+            onChange={(e) => setColor(e.target.value)}
+            onBlur={colorInputBlur}
+            onKeyUp={(e) => e.nativeEvent.key === "Enter" && colorInputBlur()}
+          />
+        </div>
+      )}
+
+      {/* // border Styles */}
+
+      {/* {themeSettingKey === "borderColor" && (
+        <div className="config-input">
+          <ColorSelect
+            changeColor={_.debounce(setBorderColor, 500, {
+              leading: true,
+              trailing: true,
+            })}
+            color={borderColor!}
+            trigger="hover"
+          />
+          <TacoInput
+            value={borderColor}
+            onChange={(e) => setBorderColor(e.target.value)}
+            onBlur={(e) => borderColorInputBlur(e.target.value)}
+            onKeyUp={(e) => e.nativeEvent.key === "Enter" && borderColorInputBlur(e.currentTarget.value)}
+          />
+        </div>
+      )} */}
+      {themeSettingKey === "borderRadius" && (
+        <div className="config-input">
+          <Radius $radius={defaultRadius || "0"}>
+            <div>
+              <BorderRadiusIcon style={{width: "16px", margin: "-2px 0 2px -2px", padding: "0px"}}/>
+            </div>
+          </Radius>
+          <TacoInput
+            value={radius}
+            onChange={(e) => setRadius(e.target.value)}
+            onBlur={(e) => radiusInputBlur(e.target.value)}
+            onKeyUp={(e) => e.nativeEvent.key === "Enter" && radiusInputBlur(e.currentTarget.value)}
+          />
+        </div>
+      )}
+       {themeSettingKey === "borderStyle" && (
+        <div className="config-input">
+          <BorderStyle $borderStyle={defaultBorderStyle || "solid"}>
+            <div>
+              <BorderStyleIcon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>
+            </div>
+          </BorderStyle>
+          <TacoInput
+            value={borderStyle}
+            onChange={(e) => setBorderStyle(e.target.value)}
+            onBlur={(e) => borderStyleInputBlur(e.target.value)}
+            onKeyUp={(e) => e.nativeEvent.key === "Enter" && borderStyleInputBlur(e.currentTarget.value)}
+          />
+        </div>
+      )}
+      {themeSettingKey === "borderWidth" && (
+        <div className="config-input">
+          <BorderWidth $borderWidth={defaultBorderWidth || "1px"}>
+            <div>
+              <BorderWidthIcon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>
+            </div>
+          </BorderWidth>
+          <TacoInput
+            value={borderWidth}
+            onChange={(e) => setBorderWidth(e.target.value)}
+            onBlur={(e) => borderWidthInputBlur(e.target.value)}
+            onKeyUp={(e) => e.nativeEvent.key === "Enter" && borderWidthInputBlur(e.currentTarget.value)}
+          />
+        </div>
+      )}
+
+      {themeSettingKey === "margin" && (  
+        <div className="config-input">  
+          <Margin $margin={defaultMargin || "4px"}>  
+            <div>  
+              <ExpandIcon title="" />  
+            </div>  
+          </Margin>  
+          <TacoInput  
+            value={margin}  
+            onChange={(e) => setMargin(e.target.value)}  
+            onBlur={(e) => marginInputBlur(e.target.value)}  
+            onKeyUp={(e) =>  
+              e.nativeEvent.key === "Enter" &&  
+              marginInputBlur(e.currentTarget.value)  
+            }  
+          />  
+        </div>
+      )}  
+
+      {themeSettingKey === "padding" && (  
+        <div className="config-input">  
+          <Padding $padding={defaultPadding || "4px"}>  
+            <div>  
+              <CompressIcon title="" />
+            </div>  
+          </Padding>  
+          <TacoInput  
+            value={padding}  
+            onChange={(e) => setPadding(e.target.value)}  
+            onBlur={(e) => paddingInputBlur(e.target.value)}  
+            onKeyUp={(e) =>  
+              e.nativeEvent.key === "Enter" &&  
+              paddingInputBlur(e.currentTarget.value)  
+            }  
+          />  
+        </div>
+      )}
+
+      {themeSettingKey === "gridColumns" && (
+        <div className="config-input">
+          <GridColumns $gridColumns={defaultGridColumns || "24"}>
+            <div>
+              <TableCellsIcon title="" />
+            </div>
+          </GridColumns>
+
+          <Slider 
+            style={{ width: "90%", margin: "8px 5% 0 5%"}}
+            min={8}  // Define the minimum value for the slider
+            max={48} // Define the maximum value for the slider
+            value={parseInt(gridColumns || "24")}
+            onChange={(value) => setGridColumns(value.toString())}
+            onAfterChange={(value) => gridColumnsInputBlur(value.toString())}
+          />
+        </div>
+      )}
+
+     
+
+      {themeSettingKey === "fontFamily" && (
+        <div className="config-input">
+          <TacoInput
+            value={fontFamily}
+            onChange={(e) => setFontFamily(e.target.value)}
+            onBlur={(e) => fontFamilyInputBlur(e.target.value)}
+            onKeyUp={(e) => e.nativeEvent.key === "Enter" && fontFamilyInputBlur(e.currentTarget.value)}
+          />
+        </div>
+      )}
+    </ConfigItem>
+  );
+}
diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
index 7d7a71e2b..9c602be50 100644
--- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
+++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -231,7 +231,10 @@ export const defaultTheme: ThemeDetail = {
   textLight: "#FFFFFF",
   canvas: "#F5F5F6",
   primarySurface: "#FFFFFF",
+  borderColor: "#D7D9E0",
   borderRadius: "4px",
+  borderWidth: "1px",
+  borderStyle: "solid",
   margin: "3px",
   padding: "3px",
   gridColumns: "24",
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
index a364dcf7f..7860c3f8c 100644
--- a/client/packages/lowcoder/src/i18n/locales/en.ts
+++ b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -446,31 +446,7 @@ export const en = {
     "refresh": "Refresh",
     "refreshDesc": "Triggers on Refresh",
   },
-  "themeDetail": {
-    "primary": "Brand Color",
-    "primaryDesc": "Default primary color used by most components",
-    "textDark": "Dark Text Color",
-    "textDarkDesc": "Used when the background color is light",
-    "textLight": "Light Text Color",
-    "textLightDesc": "Used when the background color is dark",
-    "canvas": "Canvas Color",
-    "canvasDesc": "Default background color of the app",
-    "primarySurface": "Container Color",
-    "primarySurfaceDesc": "Default background color for components like tables",
-    "borderRadius": "Border Radius",
-    "borderRadiusDesc": "Default border radius used by most components",
-    "chart": "Chart Style",
-    "chartDesc": "Input for Echarts",
-    "echartsJson": "Theme JSON",
-    "margin": "Margin",
-    "marginDesc": "Default margin typically used for most components",
-    "padding": "Padding",
-    "paddingDesc": "Default padding typically used for most components",
-    "containerHeaderPadding": "Header Padding",
-    "containerheaderpaddingDesc": "Default header padding typically used for most components",
-    "gridColumns": "Grid Columns",
-    "gridColumnsDesc": "Default number of columns typically used for most containers"
-  },
+
 
   // fourth part
 
@@ -2491,8 +2467,9 @@ export const en = {
     "goList": "Back to the List",
     "saveBtn": "Save",
     "mainColor": "Main Colors",
-    "text": "Text & Fonts",
+    "text": "Text Colors",
     "layout" : "Layout Settings",
+    "fonts" : "Font Settings",
     "components" : "Component Templates",
     "charts" : "eCharts Definition",
     "defaultTheme": "Default",
@@ -2533,6 +2510,43 @@ export const en = {
     "chartQuery": "Query",
     "chartBuy": "Buy"
   },
+  "themeDetail": {
+    "primary": "Brand Color",
+    "primaryDesc": "Default primary color used by most components",
+    "textDark": "Dark Text Color",
+    "textDarkDesc": "Used when the background color is light",
+    "textLight": "Light Text Color",
+    "textLightDesc": "Used when the background color is dark",
+    "canvas": "Canvas Color",
+    "canvasDesc": "Default background color of the app",
+    "primarySurface": "Container Color",
+    "primarySurfaceDesc": "Default background color for components like tables",
+    "borders": "Border Styles",
+    "spacing": "Spacing Styles",
+    "font": "Font Styles",
+    "fonts" : "Fonts",
+    "borderRadius": "Border Radius",
+    "borderRadiusDesc": "Default border radius used by most components",
+    "borderColor": "Border Color",
+    "borderColorDesc": "Default border color used by most components",
+    "borderWidth": "Border Width",
+    "borderWidthDesc": "Default border width used by most components",
+    "borderStyle": "Border Style",
+    "borderStyleDesc": "Default border style used by most components",
+    "fontFamily": "Font Family",
+    "fontFamilyDesc": "Default font family used by most components",
+    "chart": "Chart Style",
+    "chartDesc": "Input for Echarts",
+    "echartsJson": "Theme JSON",
+    "margin": "Margin",
+    "marginDesc": "Default margin typically used for most components",
+    "padding": "Padding",
+    "paddingDesc": "Default padding typically used for most components",
+    "containerHeaderPadding": "Header Padding",
+    "containerheaderpaddingDesc": "Default header padding typically used for most components",
+    "gridColumns": "Canvas Grid Columns",
+    "gridColumnsDesc": "Default number of columns typically used for most containers"
+  },
   "pluginSetting": {
     "title": "Plugins",
     "npmPluginTitle": "npm Plugins",
diff --git a/client/packages/lowcoder/src/pages/editor/LeftLayersContent.tsx b/client/packages/lowcoder/src/pages/editor/LeftLayersContent.tsx
index 9b103cd83..29cf7cb1b 100644
--- a/client/packages/lowcoder/src/pages/editor/LeftLayersContent.tsx
+++ b/client/packages/lowcoder/src/pages/editor/LeftLayersContent.tsx
@@ -40,7 +40,7 @@ import {
 } from "util/localStorageUtil";
 import { default as DownOutlined } from "@ant-design/icons/DownOutlined";
 import type { ItemType } from "antd/es/menu/hooks/useItems";
-import ColorPicker from "components/ColorPicker";
+import ThemeSettingsSelector from "components/ThemeSettingsSelector";
 
 export type DisabledCollisionStatus = "true" | "false"; // "true" means collision is not enabled - Layering works, "false" means collision is enabled - Layering does not work
 export type ToggleCollisionStatus = (collisionStatus?: DisabledCollisionStatus) => void;
@@ -566,20 +566,20 @@ export const LeftLayersContent = (props: LeftLayersContentProps) => {
               Apply Action
             </Button>
             <br/>
-            <ColorPicker
-                colorKey={"background"}
+            <ThemeSettingsSelector
+                themeSettingKey={"background"}
                 name={trans("componentDoc.styleBackgroundColor")}
                 color={"#ffffff"}
                 configChange={(params) => handleColorChange(params.color, "style.background")}
             />
-            <ColorPicker
-                colorKey={"border"}
+            <ThemeSettingsSelector
+                themeSettingKey={"border"}
                 name={trans("componentDoc.styleBorderColor")}
                 color={"#ffffff"}
                 configChange={(params) => handleColorChange(params.color, "style.border")}
             />
-            <ColorPicker
-                colorKey={"text"}
+            <ThemeSettingsSelector
+                themeSettingKey={"text"}
                 name={trans("style.textColor")}
                 color={"#ffffff"}
                 configChange={(params) => handleColorChange(params.color, "style.text")}
diff --git a/client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx b/client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx
new file mode 100644
index 000000000..31e370a25
--- /dev/null
+++ b/client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx
@@ -0,0 +1,207 @@
+import {
+  uiCompCategoryNames,
+  UICompCategory,
+  UICompManifest,
+  uiCompRegistry,
+} from "comps/uiCompRegistry";
+import { isEmpty } from "lodash";
+import { language } from "i18n";
+import {
+  CompIconDiv,
+  EmptyCompContent,
+  RightPanelContentWrapper,
+} from "pages/editor/right/styledComponent";
+import { tableDragClassName } from "pages/tutorials/tutorialsConstant";
+import React, { useContext, useEffect, useMemo, useState } from "react";
+import styled from "styled-components";
+import {
+  BaseSection,
+  PropertySectionContext,
+  PropertySectionContextType,
+  PropertySectionState,
+  labelCss,
+} from "lowcoder-design";
+import { Input } from "antd";
+
+const CompDiv = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 64px;
+  margin-top: 4px;
+`;
+
+const CompNameLabel = styled.div`
+  ${labelCss};
+  line-height: 15px;
+  display: table;
+  margin: 3px auto 0;
+  color: #333333;
+  text-align: center;
+  word-break: keep-all;
+`;
+
+const CompEnNameLabel = styled.span`
+  ${labelCss};
+  line-height: 14px;
+  font-size: 12px;
+  display: table;
+  margin: 4px auto auto;
+  color: #8b8fa3;
+  text-align: center;
+  word-spacing: 99px;
+`;
+
+const HovDiv = styled.div`
+  display: inline-block;
+  border-radius: 4px;
+
+  &:hover + ${CompNameLabel} {
+    color: #315efb;
+  }
+`;
+
+const IconContain = (props: { Icon: React.FunctionComponent<React.SVGProps<SVGSVGElement>> }) => {
+  const { Icon } = props;
+  return (
+    <CompIconDiv $w={64} $h={64}>
+      <Icon />
+    </CompIconDiv>
+  );
+};
+const InsertContain = styled.div`
+  width: 224px; /* Adjusted width to fit 3 components in a row */
+  display: flex;
+  flex-wrap: wrap;
+  padding: 4px 0 0 0;
+  box-sizing: border-box;
+  gap: 8px;
+`;
+
+const SectionWrapper = styled.div`
+  .section-header {
+    margin-left: 0;
+  }
+  &:not(:last-child){
+    border-bottom: 1px solid #e1e3eb;
+  }
+`;
+
+const stateCompName = 'UICompSections';
+const initialState: PropertySectionState = { [stateCompName]: {}};
+Object.keys(uiCompCategoryNames).forEach((cat) => {
+  const key = uiCompCategoryNames[cat as UICompCategory];
+  initialState[stateCompName][key] = key === uiCompCategoryNames.dashboards
+})
+
+export const ThemeCompPanel = () => {
+  const [searchValue, setSearchValue] = useState("");
+  const [propertySectionState, setPropertySectionState] = useState<PropertySectionState>(initialState);
+  const [searchedPropertySectionState, setSearchedPropertySectionState] = useState<PropertySectionState>({});
+
+  const categories = useMemo(() => {
+    const cats: Record<string, [string, UICompManifest][]> = Object.fromEntries(
+      Object.keys(uiCompCategoryNames).map((cat) => [cat, []])
+    );
+    Object.entries(uiCompRegistry).forEach(([name, manifest]) => {
+      manifest.categories.forEach((cat) => {
+        cats[cat].push([name, manifest]);
+      });
+    });
+    return cats;
+  }, []);
+
+  const propertySectionContextValue = useMemo<PropertySectionContextType>(() => {
+    const state = searchValue
+      ? searchedPropertySectionState
+      : propertySectionState;
+    const setStateFn = searchValue
+      ? setSearchedPropertySectionState
+      : setPropertySectionState;
+
+    return {
+      compName: stateCompName,
+      state,
+      toggle: (compName: string, sectionName: string) => {
+        setStateFn((oldState) => {
+          const nextSectionState: PropertySectionState = { ...oldState };
+          const compState = nextSectionState[compName] || {};
+          compState[sectionName] = compState[sectionName] === false;
+          nextSectionState[compName] = compState;
+          return nextSectionState;
+        });
+      },
+    };
+  }, [searchValue, propertySectionState, searchedPropertySectionState]);
+
+  useEffect(() => {
+    if(!searchValue) {
+      setSearchedPropertySectionState({})
+    }
+  }, [searchValue])
+
+  const compList = useMemo(
+    () =>
+      Object.entries(categories)
+        .map(([key, value], index) => {
+          let infos = value;
+          if (!isEmpty(searchValue)) {
+            const searchString = searchValue.trim().toLocaleLowerCase();
+            infos = infos.filter((info) =>
+              info[1].keywords.toLowerCase().includes(searchString.toLowerCase())
+            );
+          }
+
+          if (isEmpty(infos)) {
+            return null;
+          }
+
+          return (
+            <SectionWrapper key={index}>
+              <BaseSection 
+                style={{ whiteSpace: "normal", overflow: "hidden"}}
+                noMargin
+                width={210}
+                name={uiCompCategoryNames[key as UICompCategory]}
+              >
+                <InsertContain>
+                  {infos.map((info) => (
+                    <CompDiv key={info[0]} className={info[0] === "table" ? tableDragClassName : ""}>
+                      <HovDiv>
+                        <IconContain Icon={info[1].icon}></IconContain>
+                      </HovDiv>
+                      <CompNameLabel>{info[1].name}</CompNameLabel>
+                      {language !== "en" && <CompEnNameLabel>{info[1].enName}</CompEnNameLabel>}
+                    </CompDiv>
+                  ))}
+                </InsertContain>
+              </BaseSection>
+            </SectionWrapper>
+          );
+        })
+        .filter((t) => t != null),
+    [categories, searchValue]
+  );
+
+  if(!compList.length) return (
+    <RightPanelContentWrapper>
+      <EmptyCompContent />
+    </RightPanelContentWrapper>
+  )
+
+  return (
+    <RightPanelContentWrapper>
+      <Input.Search
+        placeholder="Search components"
+        value={searchValue}
+        onChange={(e) => setSearchValue(e.target.value)}
+        style={{ marginBottom: 16 }}
+      />
+      <PropertySectionContext.Provider
+        value={propertySectionContextValue}
+      >
+        {compList}
+      </PropertySectionContext.Provider>
+    </RightPanelContentWrapper>
+  );
+};
diff --git a/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx b/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
index 04c0964f3..b9f7c0897 100644
--- a/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
+++ b/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
@@ -8,7 +8,7 @@ import {
 } from "api/commonSettingApi";
 import history from "util/history";
 import { BASE_URL, THEME_SETTING } from "constants/routesURL";
-import ColorPicker, { configChangeParams } from "../../../../components/ColorPicker";
+import ThemeSettingsSelector, { configChangeParams } from "../../../../components/ThemeSettingsSelector";
 import React, { lazy } from "react";
 import { connect } from "react-redux";
 import { fetchCommonSettings, setCommonSettings } from "redux/reduxActions/commonSettingsActions";
@@ -32,6 +32,7 @@ import {
   PageLayoutCompIcon,
   ShapesCompIcon,
   ChartCompIcon,
+  
 } from "lowcoder-design";
 import PreviewApp from "../../../../components/PreviewApp";
 import { trans } from "i18n";
@@ -42,6 +43,8 @@ import chartDsl from "./chartPreviewDsl";
 import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
 import { Card, Collapse, CollapseProps, Divider, Flex, List, Tooltip } from 'antd';
 
+import { ThemeCompPanel } from "pages/setting/theme/ThemeCompPanel";
+
 const ThemeSettingsView = styled.div`
   font-size: 14px;
   color: #8b8fa3;
@@ -160,7 +163,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
     this.setState({
       theme: {
         ...this.state.theme,
-        [params.colorKey]: params.color || params.radius || params.chart || params.margin || params.padding  || params.gridColumns,
+        [params.themeSettingKey]: params.color || params.radius || params.chart || params.margin || params.padding  || params.gridColumns,
       },
     });
   }
@@ -188,11 +191,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
             name: trans('themeDetail.primary'),
             desc: trans('themeDetail.primaryDesc'),
             color: this.state.theme.primary,
-          }
-        ]
-      },
-      {
-        items: [
+          },
           {
             settingsKey: 'canvas',
             name: trans('themeDetail.canvas'),
@@ -204,6 +203,12 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
             name: trans('themeDetail.primarySurface'),
             desc: trans('themeDetail.primarySurfaceDesc'),
             color: this.state.theme.primarySurface,
+          },
+          {
+            settingsKey: 'borderColor',
+            name: trans('themeDetail.borderColor'),
+            desc: trans('themeDetail.borderColorDesc'),
+            color: this.state.theme.borderColor,
           }
         ]
       },
@@ -227,11 +232,24 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
       }
     ];
 
-    // const fontSettings = [];
+    const fontSettings = [
+      {
+        title: trans('themeDetail.fonts'),
+        items: [
+          {
+            settingsKey: 'fontFamily',
+            name: trans('themeDetail.fontFamily'),
+            desc: trans('themeDetail.fontFamilyDesc'),
+            type: "fontFamily",
+            value: this.state.theme.fontFamily,
+          }
+        ]
+      },
+    ];
 
     const layoutSettings = [
       {
-        title: trans('themeDetail.borderRadius'),
+        title: trans('themeDetail.borders'),
         items: [
           {
             settingsKey: 'borderRadius',
@@ -239,11 +257,25 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
             desc: trans('themeDetail.borderRadiusDesc'),
             type: "radius",
             value: this.state.theme.borderRadius,
+          },
+          {
+            settingsKey: 'borderWidth',
+            name: trans('themeDetail.borderWidth'),
+            desc: trans('themeDetail.borderWidthDesc'),
+            type: "borderWidth",
+            value: this.state.theme.borderWidth,
+          },
+          {
+            settingsKey: 'borderStyle',
+            name: trans('themeDetail.borderStyle'),
+            desc: trans('themeDetail.borderStyleDesc'),
+            type: "radius",
+            value: this.state.theme.borderStyle,
           }
         ]
       },
       {
-        title: trans('themeDetail.margin'),
+        title: trans('themeDetail.spacing'),
         items: [
           {
             settingsKey: 'margin',
@@ -251,24 +283,14 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
             desc: trans('themeDetail.marginDesc'),
             type: "margin",
             value: this.state.theme.margin,
-          }
-        ]
-      },
-      {
-        title: trans('themeDetail.padding'),
-        items: [
+          },
           {
             settingsKey: 'padding',
             name: trans('themeDetail.padding'),
             desc: trans('themeDetail.paddingDesc'),
             type: "padding",
             value: this.state.theme.padding,
-          }
-        ]
-      },
-      {
-        title: trans('themeDetail.gridColumns'),
-        items: [
+          },
           {
             settingsKey: 'gridColumns',
             name: trans('themeDetail.gridColumns'),
@@ -277,7 +299,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
             value: this.state.theme.gridColumns,
           }
         ]
-      }
+      },
     ];
 
     return (
@@ -341,8 +363,8 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
                         {item.items.map((colorItem) => (
                           <Tooltip title={colorItem.desc} placement="right">
                             <List.Item key={colorItem.settingsKey}>
-                              <ColorPicker
-                                colorKey={colorItem.settingsKey}
+                              <ThemeSettingsSelector
+                                themeSettingKey={colorItem.settingsKey}
                                 name={colorItem.name}
                                 // desc={colorItem.desc}
                                 color={colorItem.color}
@@ -365,12 +387,40 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
 
             <ThemeSettingsView>
               <StyleThemeSettingsCover>
-                <TextSizeIcon width={"36px"} style={{marginRight : "10px"}}/> <h2 style={{color: "#ffffff", marginTop : "8px"}}> {trans("theme.text")}</h2>
+                <TextSizeIcon width={"36px"} style={{marginRight : "10px"}}/> <h2 style={{color: "#ffffff", marginTop : "8px"}}> {trans("theme.fonts")}</h2>
               </StyleThemeSettingsCover>
               <Card style={{ marginBottom: "20px", minHeight : "200px" }}>
                 
-              <Flex gap={"middle"}>
-                  {/* here we need to place the Font Configuration */}
+                <Flex gap={"middle"}>
+                  <List
+                    bordered
+                    dataSource={fontSettings}
+                    renderItem={(item) => (
+                      <>
+                        {item.title && (
+                            <List.Item>
+                              <DetailTitle>{item.title}</DetailTitle>
+                            </List.Item>
+                        )}
+                        {item.items.map((layoutSettingsItem) => (
+                          <Tooltip title={layoutSettingsItem.desc} placement="right">
+                            <List.Item key={layoutSettingsItem.settingsKey}>
+                              {layoutSettingsItem.type == "fontFamily" && 
+                                <ThemeSettingsSelector
+                                  themeSettingKey={layoutSettingsItem.settingsKey}
+                                  name={layoutSettingsItem.name}
+                                  fontFamily={layoutSettingsItem.value}
+                                  configChange={(params) => {
+                                    this.configChange(params);
+                                  }}
+                                />
+                              }
+                          </List.Item>
+                          </Tooltip>
+                        ))}
+                      </>
+                    )}
+                  />
                   <Divider type="vertical" style={{height: "610px"}}/>
                   <PreviewApp style={{marginTop: '3px', height: "620px", width: "100%"}} theme={this.state.theme} dsl={dsl} />
                 </Flex>
@@ -399,8 +449,8 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
                           <Tooltip title={layoutSettingsItem.desc} placement="right">
                             <List.Item key={layoutSettingsItem.settingsKey}>
                               {layoutSettingsItem.type == "radius" && 
-                                <ColorPicker
-                                  colorKey={layoutSettingsItem.settingsKey}
+                                <ThemeSettingsSelector
+                                  themeSettingKey={layoutSettingsItem.settingsKey}
                                   name={layoutSettingsItem.name}
                                   radius={layoutSettingsItem.value}
                                   configChange={(params) => {
@@ -408,9 +458,19 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
                                   }}
                                 />
                               }
+                              {layoutSettingsItem.type == "borderWidth" && 
+                                <ThemeSettingsSelector
+                                  themeSettingKey={layoutSettingsItem.settingsKey}
+                                  name={layoutSettingsItem.name}
+                                  borderWidth={layoutSettingsItem.value}
+                                  configChange={(params) => {
+                                    this.configChange(params);
+                                  }}
+                                />
+                              }
                               {layoutSettingsItem.type == "margin" && 
-                                <ColorPicker
-                                  colorKey={layoutSettingsItem.settingsKey}
+                                <ThemeSettingsSelector
+                                  themeSettingKey={layoutSettingsItem.settingsKey}
                                   name={layoutSettingsItem.name}
                                   margin={layoutSettingsItem.value}
                                   configChange={(params) => {
@@ -419,8 +479,8 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
                                 />
                               }
                               {layoutSettingsItem.type == "padding" && 
-                                <ColorPicker
-                                  colorKey={layoutSettingsItem.settingsKey}
+                                <ThemeSettingsSelector
+                                  themeSettingKey={layoutSettingsItem.settingsKey}
                                   name={layoutSettingsItem.name}
                                   padding={layoutSettingsItem.value}
                                   configChange={(params) => {
@@ -429,8 +489,8 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
                                 />
                               }
                               {layoutSettingsItem.type == "gridColumns" && 
-                                <ColorPicker
-                                  colorKey={layoutSettingsItem.settingsKey}
+                                <ThemeSettingsSelector
+                                  themeSettingKey={layoutSettingsItem.settingsKey}
                                   name={layoutSettingsItem.name}
                                   gridColumns={layoutSettingsItem.value}
                                   configChange={(params) => {
@@ -456,9 +516,14 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
               <StyleThemeSettingsCover>
                 <ShapesCompIcon width={"36px"} style={{marginRight : "10px"}}/> <h2 style={{color: "#ffffff", marginTop : "8px"}}> {trans("theme.components")}</h2>
               </StyleThemeSettingsCover>
-              <Card style={{ marginBottom: "20px", minHeight : "200px" }}>
-                
-                <Divider />
+              <Card style={{ marginBottom: "20px", minHeight : "1000px", overflow: "auto" }}>
+                <Flex gap={"middle"}>
+                  <ThemeCompPanel />
+                  <Divider type="vertical" style={{height: "510px"}}/>
+                  <div style={{minWidth: "250px"}}><h4>Properties Display</h4></div>
+                  <Divider type="vertical" style={{height: "510px"}}/>
+                  <PreviewApp style={{height: "500px", width: "40%" }} theme={this.state.theme} dsl={dsl} />
+                </Flex>
 
               </Card>  
               
@@ -482,7 +547,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
                       <CodeEditor
                         value={this.state.theme.chart || ""}
                         onChange={(value) => this.configChange({
-                          colorKey: "chart",
+                          themeSettingKey: "chart",
                           chart: value.doc.toString() ? value.doc.toString() : undefined,
                         })}
                         styleName="window"
diff --git a/client/packages/lowcoder/src/pages/setting/theme/styledComponents.tsx b/client/packages/lowcoder/src/pages/setting/theme/styledComponents.tsx
index 3278ce921..5d4a016d0 100644
--- a/client/packages/lowcoder/src/pages/setting/theme/styledComponents.tsx
+++ b/client/packages/lowcoder/src/pages/setting/theme/styledComponents.tsx
@@ -676,7 +676,7 @@ export const Padding = styled.div<{ $padding: string }>`
   }	
 }`
 // Added By Aqib Mirza
-export const GridColumns = styled.div<{ $gridColumns: string }>`
+export const GridColumns = styled.div<{ $gridColumns: string }>` 
   > div {
     margin: 3px;
     overflow: hidden;
@@ -686,3 +686,26 @@ export const GridColumns = styled.div<{ $gridColumns: string }>`
     }
   }
 `;
+
+export const BorderStyle = styled.div<{ $borderStyle: string }>` 
+  > div {
+    margin: 3px;
+    overflow: hidden;
+      > svg {
+        fill: currentColor;
+      }
+    }
+  }
+`;
+
+export const BorderWidth = styled.div<{ $borderWidth: string }>`
+  > div {
+    margin: 3px;
+    overflow: hidden;
+      > svg {
+        fill: currentColor;
+      }
+    }
+  }
+`;
+

From e7476130518c30b6b55fe1af7f614017b836fadf Mon Sep 17 00:00:00 2001
From: FalkWolsky <fw@falkwolsky.com>
Date: Mon, 27 May 2024 13:40:47 +0200
Subject: [PATCH 05/57] Deleting an Space in tsconfig

---
 client/packages/lowcoder/tsconfig.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/packages/lowcoder/tsconfig.json b/client/packages/lowcoder/tsconfig.json
index cf5a20f77..6276f8966 100644
--- a/client/packages/lowcoder/tsconfig.json
+++ b/client/packages/lowcoder/tsconfig.json
@@ -20,4 +20,4 @@
     "baseUrl": "./src"
   },
   "include": ["src"]
-}
+}
\ No newline at end of file

From 2ee0cf12383bf4236597ebab5ea756c90dd23064 Mon Sep 17 00:00:00 2001
From: FalkWolsky <fw@falkwolsky.com>
Date: Mon, 27 May 2024 13:45:06 +0200
Subject: [PATCH 06/57] Small Update

---
 .../lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx       | 2 +-
 .../lowcoder/src/pages/setting/theme/detail/index.tsx         | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx b/client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx
index 31e370a25..81c4c61b7 100644
--- a/client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx
+++ b/client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx
@@ -94,7 +94,7 @@ Object.keys(uiCompCategoryNames).forEach((cat) => {
   initialState[stateCompName][key] = key === uiCompCategoryNames.dashboards
 })
 
-export const ThemeCompPanel = () => {
+export const themeCompPanel = () => {
   const [searchValue, setSearchValue] = useState("");
   const [propertySectionState, setPropertySectionState] = useState<PropertySectionState>(initialState);
   const [searchedPropertySectionState, setSearchedPropertySectionState] = useState<PropertySectionState>({});
diff --git a/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx b/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
index b9f7c0897..cb0ece927 100644
--- a/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
+++ b/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
@@ -43,7 +43,7 @@ import chartDsl from "./chartPreviewDsl";
 import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
 import { Card, Collapse, CollapseProps, Divider, Flex, List, Tooltip } from 'antd';
 
-import { ThemeCompPanel } from "pages/setting/theme/ThemeCompPanel";
+import { themeCompPanel as ThemeCompPanel } from "pages/setting/theme/ThemeCompPanel";
 
 const ThemeSettingsView = styled.div`
   font-size: 14px;
@@ -518,7 +518,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
               </StyleThemeSettingsCover>
               <Card style={{ marginBottom: "20px", minHeight : "1000px", overflow: "auto" }}>
                 <Flex gap={"middle"}>
-                  <ThemeCompPanel />
+                  <ThemeCompPanel/>
                   <Divider type="vertical" style={{height: "510px"}}/>
                   <div style={{minWidth: "250px"}}><h4>Properties Display</h4></div>
                   <Divider type="vertical" style={{height: "510px"}}/>

From 117a27701dabfaf8f50e35851c2c1562c09ab7cf Mon Sep 17 00:00:00 2001
From: FalkWolsky <fw@falkwolsky.com>
Date: Mon, 27 May 2024 13:49:15 +0200
Subject: [PATCH 07/57] Small Update

---
 .../lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx         | 2 +-
 .../packages/lowcoder/src/pages/setting/theme/detail/index.tsx  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx b/client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx
index 81c4c61b7..31e370a25 100644
--- a/client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx
+++ b/client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx
@@ -94,7 +94,7 @@ Object.keys(uiCompCategoryNames).forEach((cat) => {
   initialState[stateCompName][key] = key === uiCompCategoryNames.dashboards
 })
 
-export const themeCompPanel = () => {
+export const ThemeCompPanel = () => {
   const [searchValue, setSearchValue] = useState("");
   const [propertySectionState, setPropertySectionState] = useState<PropertySectionState>(initialState);
   const [searchedPropertySectionState, setSearchedPropertySectionState] = useState<PropertySectionState>({});
diff --git a/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx b/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
index cb0ece927..84a409086 100644
--- a/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
+++ b/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
@@ -43,7 +43,7 @@ import chartDsl from "./chartPreviewDsl";
 import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
 import { Card, Collapse, CollapseProps, Divider, Flex, List, Tooltip } from 'antd';
 
-import { themeCompPanel as ThemeCompPanel } from "pages/setting/theme/ThemeCompPanel";
+import { ThemeCompPanel } from "pages/setting/theme/ThemeCompPanel";
 
 const ThemeSettingsView = styled.div`
   font-size: 14px;

From b2d5862879bd9a2c34098d8e2f76714850c89407 Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Mon, 3 Jun 2024 12:25:51 +0500
Subject: [PATCH 08/57] theme: components styling

---
 .../lowcoder/src/api/commonSettingApi.ts      |   1 +
 .../lowcoder/src/components/PreviewApp.tsx    |   4 +-
 .../components/ThemeSettingsCompStyles.tsx    | 457 ++++++++++++++++++
 .../src/components/ThemeSettingsSelector.tsx  |   1 +
 .../lowcoder/src/comps/comps/textComp.tsx     |   2 -
 .../src/comps/controls/styleControl.tsx       |  58 ++-
 .../comps/controls/styleControlConstants.tsx  |   1 +
 .../src/comps/generators/uiCompBuilder.tsx    |   1 +
 .../src/comps/utils/compTypeContext.tsx       |   3 +
 .../packages/lowcoder/src/i18n/locales/en.ts  |   2 +
 .../packages/lowcoder/src/i18n/locales/pt.ts  |   1 +
 .../packages/lowcoder/src/i18n/locales/zh.ts  |   1 +
 .../lowcoder/src/layout/gridLayout.tsx        |  97 ++--
 .../pages/setting/theme/ThemeCompPanel.tsx    | 165 ++++++-
 .../src/pages/setting/theme/detail/index.tsx  |  60 +--
 15 files changed, 737 insertions(+), 117 deletions(-)
 create mode 100644 client/packages/lowcoder/src/components/ThemeSettingsCompStyles.tsx
 create mode 100644 client/packages/lowcoder/src/comps/utils/compTypeContext.tsx

diff --git a/client/packages/lowcoder/src/api/commonSettingApi.ts b/client/packages/lowcoder/src/api/commonSettingApi.ts
index 965605ed7..018071535 100644
--- a/client/packages/lowcoder/src/api/commonSettingApi.ts
+++ b/client/packages/lowcoder/src/api/commonSettingApi.ts
@@ -59,6 +59,7 @@ export interface ThemeDetail {
   boxShadow?: string;
   boxShadowColor?: string;
   animationIterationCount?: string;
+  components?: Record<string, object>;
 }
 
 export function getThemeDetailName(key: keyof ThemeDetail) {
diff --git a/client/packages/lowcoder/src/components/PreviewApp.tsx b/client/packages/lowcoder/src/components/PreviewApp.tsx
index df700f75d..1f5a71f0a 100644
--- a/client/packages/lowcoder/src/components/PreviewApp.tsx
+++ b/client/packages/lowcoder/src/components/PreviewApp.tsx
@@ -56,7 +56,9 @@ export default function PreviewApp(props: {
 
   return (
     <Preview style={props.style}>
-      <ThemeContext.Provider value={{ previewTheme: theme }}>{view}</ThemeContext.Provider>
+      <ThemeContext.Provider value={{ previewTheme: theme }}>
+        {view}
+      </ThemeContext.Provider>
     </Preview>
   );
 }
diff --git a/client/packages/lowcoder/src/components/ThemeSettingsCompStyles.tsx b/client/packages/lowcoder/src/components/ThemeSettingsCompStyles.tsx
new file mode 100644
index 000000000..839a287f8
--- /dev/null
+++ b/client/packages/lowcoder/src/components/ThemeSettingsCompStyles.tsx
@@ -0,0 +1,457 @@
+import _ from "lodash";
+import { useEffect, useState } from "react";
+import { ConfigItem, Radius, Margin, Padding, GridColumns, BorderWidth, BorderStyle } from "../pages/setting/theme/styledComponents";
+import { isValidColor, toHex } from "components/colorSelect/colorUtils";
+import { ColorSelect } from "components/colorSelect";
+import { TacoInput } from "components/tacoInput";
+import { Slider } from "antd";
+import { 
+  ExpandIcon, 
+  CompressIcon,
+  BorderRadiusIcon,
+  BorderWidthIcon,
+  BorderStyleIcon,
+  TableCellsIcon,
+  RefreshLineIcon,
+  OpacityIcon,
+  ShadowIcon,
+  StarSmileIcon,
+  TimerFlashIcon,
+  Timer2Icon,
+  TextSizeIcon,
+  TextWeightIcon,
+  FontFamilyIcon,
+  TextTransformationIcon,
+  TextDecorationIcon,
+  TextStyleIcon,
+  ImageCompIconSmall,
+  RotationIcon,
+ } from "lowcoder-design/src/icons";
+import { trans } from "i18n";
+
+export type configChangeParams = {
+  themeSettingKey: string;
+  color?: string;
+  radius?: string;
+  chart?: string;
+  margin?: string;  
+  padding?: string;
+  gridColumns?: string; // Added By Aqib Mirza
+  borderStyle?: string;
+  borderColor?: string;
+  borderWidth?: string;
+  fontFamily?: string;
+};
+
+type ColorConfigProps = {
+  className?: string;
+  themeSettingKey: string;
+  name?: string;
+  desc?: string;
+  color?: string;
+  
+  configChange: (params: configChangeParams) => void;
+  showVarName?: boolean;
+  radius?: string;
+  borderStyle?: string;
+  borderWidth?: string;
+  borderColor?: string;
+  fontFamily?: string;
+  margin?: string;  
+  padding?: string;
+  gridColumns?: string; // Added By Aqib Mirza
+};
+
+const isColorStyle = (styleKey: string) => {
+  return styleKey !== 'radius' &&
+    styleKey !== 'borderWidth' &&
+    styleKey !== 'boxShadow' &&
+    styleKey !== 'animationIterationCount' &&
+    styleKey !== 'opacity' &&
+    styleKey !== 'animation' &&
+    styleKey !== 'animationDelay' &&
+    styleKey !== 'animationDuration' &&
+    styleKey !== 'rotation' &&
+    styleKey !== 'cardRadius' &&
+    styleKey !== 'textSize' &&
+    styleKey !== 'textWeight' &&
+    styleKey !== 'textTransform' &&
+    styleKey !== 'textDecoration' &&
+    styleKey !== 'fontFamily' &&
+    styleKey !== 'borderStyle' &&
+    styleKey !== 'fontStyle' &&
+    styleKey !== 'backgroundImage' &&
+    styleKey !== 'backgroundImageRepeat' &&
+    styleKey !== 'backgroundImageSize' &&
+    styleKey !== 'backgroundImagePosition' &&
+    styleKey !== 'backgroundImageOrigin' &&
+    styleKey !== 'headerBackgroundImage' &&
+    styleKey !== 'headerBackgroundImageRepeat' &&
+    styleKey !== 'headerBackgroundImageSize' &&
+    styleKey !== 'headerBackgroundImagePosition' &&
+    styleKey !== 'headerBackgroundImageOrigin' &&
+    styleKey !== 'footerBackgroundImage' &&
+    styleKey !== 'footerBackgroundImageRepeat' &&
+    styleKey !== 'footerBackgroundImageSize' &&
+    styleKey !== 'footerBackgroundImagePosition' &&
+    styleKey !== 'footerBackgroundImageOrigin' &&
+    styleKey !== 'margin' &&
+    styleKey !== 'padding' &&
+    styleKey !== 'containerHeaderPadding' &&
+    styleKey !== 'containerSiderPadding' &&
+    styleKey !== 'containerFooterPadding' &&
+    styleKey !== 'containerBodyPadding';
+}
+
+
+type CompStyleProps = {
+  styleOptions: string[];
+  defaultStyle: Record<string, string>;
+  configChange: (params: any) => void;
+}
+
+export default function ThemeSettingsCompStyles(props: CompStyleProps) {
+  const { defaultStyle, styleOptions, configChange } = props;
+  const [compStyle, setCompStyle] = useState(defaultStyle)
+  
+  console.log('defaultStyle', defaultStyle);
+
+  const handleChange = (styleKey: string, styleValue: string) => {
+    setCompStyle((style) => {
+      const updateStyles = {
+        ...style,
+        [styleKey]: styleValue,
+      };
+      configChange(updateStyles);
+      return updateStyles;
+    });
+  }
+
+  const configChangeWithDebounce = _.debounce(configChange, 0);
+  const handleChangeWithDebounce = _.debounce(handleChange, 0);
+
+  useEffect(() => {
+    console.log(compStyle);
+  }, [compStyle]);
+
+
+  const getLabelByStyle = (styleKey: string) => {
+    let label = styleKey;
+    switch(styleKey) {
+      case 'radius': 
+      case 'cardRadius':
+      case 'gap': {
+        label = trans("style.borderRadius");
+        break;
+      }
+      // case 'borderWidth':
+      // case 'borderStyle':
+      // case 'margin': 
+      // case 'padding':
+      // case 'containerHeaderPadding':
+      // case 'containerSiderPadding':
+      // case 'containerFooterPadding':
+      // case 'containerBodyPadding':
+      // case 'opacity':
+      // case 'boxShadowColor':
+      // case 'boxShadow':
+      // case 'animationIterationCount':
+      // case 'animation':
+      // case 'animationDelay':
+      // case 'animationDuration':
+      // case 'textSize':
+      // case 'textWeight':
+      // case 'fontFamily':
+      // case 'textDecoration':
+      // case 'textTransform':
+      // case 'fontStyle':
+      // case 'backgroundImage':
+      // case 'headerBackgroundImage':
+      // case 'footerBackgroundImage':
+      // case 'backgroundImageRepeat':
+      // case 'headerBackgroundImageRepeat':
+      // case 'footerBackgroundImageRepeat':
+      // case 'rotation': {
+      //   label = trans(`style.${styleKey}`);
+      //   break;
+      // }
+      default: {
+        label = trans(`style.${styleKey}`);
+        break;
+      }
+    }
+    return label;
+  }
+
+  const getPlaceholderByStyle = (styleKey: string) => {
+    let placeholder = '';
+    switch(styleKey) {
+      case 'radius':
+      case 'cardRadius':
+      case 'gap': {
+        placeholder = '';
+        break;
+      }
+      case 'borderWidth': {
+        placeholder = '';
+        break;
+      }
+      case 'borderStyle': {
+        placeholder = '';
+        break;
+      }
+      case 'margin': {
+        placeholder = '';
+        break;
+      }
+      case 'padding':
+      case 'containerHeaderPadding':
+      case 'containerSiderPadding':
+      case 'containerFooterPadding':
+      case 'containerBodyPadding': {
+        placeholder = '';
+        break;
+      }
+      case 'opacity': {
+        placeholder = '';
+        break;
+      }
+      case 'boxShadowColor': {
+        placeholder = '';
+        break;
+      }
+      case 'boxShadow': {
+        placeholder = '';
+        break;
+      }
+      case 'animationIterationCount': {
+        placeholder = '';
+        break;
+      }
+      case 'animation': {
+        placeholder = '';
+        break;
+      }
+      case 'animationDelay': {
+        placeholder = '';
+        break;
+      }
+      case 'animationDuration': {
+        placeholder = '';
+        break;
+      }
+      case 'textSize': {
+        placeholder = '';
+        break;
+      }
+      case 'textWeight': {
+        placeholder = '';
+        break;
+      }
+      case 'fontFamily': {
+        placeholder = '';
+        break;
+      }
+      case 'textDecoration': {
+        placeholder = '';
+        break;
+      }
+      case 'textTransform': {
+        placeholder = '';
+        break;
+      }
+      case 'fontStyle': {
+        placeholder = '';
+        break;
+      }
+      case 'backgroundImage':
+      case 'headerBackgroundImage':
+      case 'footerBackgroundImage': {
+        placeholder = '';
+        break;
+      }
+      case 'backgroundImageRepeat':
+      case 'headerBackgroundImageRepeat':
+      case 'footerBackgroundImageRepeat': {
+        placeholder = '';
+        break;
+      }
+      case 'rotation': {
+        placeholder = '';
+        break;
+      }
+    }
+    return placeholder;
+  }
+
+  const getIconByStyle = (styleKey: string) => {
+    let icon = null;
+    switch(styleKey) {
+      case 'radius':
+      case 'cardRadius':
+      case 'gap': {
+        icon = <BorderRadiusIcon style={{width: "16px", margin: "-2px 0 2px -2px", padding: "0px"}}/>;
+        break;
+      }
+      case 'borderWidth': {
+        icon = <BorderWidthIcon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
+        break;
+      }
+      case 'borderStyle': {
+        icon = <BorderStyleIcon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
+        break;
+      }
+      case 'margin': {
+        icon = <ExpandIcon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
+        break;
+      }
+      case 'padding':
+      case 'containerHeaderPadding':
+      case 'containerSiderPadding':
+      case 'containerFooterPadding':
+      case 'containerBodyPadding': {
+        icon = <CompressIcon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
+        break;
+      }
+      case 'opacity': {
+        icon = <OpacityIcon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
+        break;
+      }
+      case 'boxShadowColor': {
+        icon = <BorderWidthIcon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
+        break;
+      }
+      case 'boxShadow': {
+        icon = <ShadowIcon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
+        break;
+      }
+      case 'animationIterationCount': {
+        icon = <RefreshLineIcon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
+        break;
+      }
+      case 'animation': {
+        icon = <StarSmileIcon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
+        break;
+      }
+      case 'animationDelay': {
+        icon = <TimerFlashIcon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
+        break;
+      }
+      case 'animationDuration': {
+        icon = <Timer2Icon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
+        break;
+      }
+      case 'textSize': {
+        icon = <TextSizeIcon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
+        break;
+      }
+      case 'textWeight': {
+        icon = <TextWeightIcon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
+        break;
+      }
+      case 'fontFamily': {
+        icon = <FontFamilyIcon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
+        break;
+      }
+      case 'textDecoration': {
+        icon = <TextDecorationIcon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
+        break;
+      }
+      case 'textTransform': {
+        icon = <TextTransformationIcon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
+        break;
+      }
+      case 'fontStyle': {
+        icon = <TextStyleIcon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
+        break;
+      }
+      case 'backgroundImage':
+      case 'headerBackgroundImage':
+      case 'footerBackgroundImage': {
+        icon = <ImageCompIconSmall style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
+        break;
+      }
+      case 'backgroundImageRepeat':
+      case 'headerBackgroundImageRepeat':
+      case 'footerBackgroundImageRepeat': {
+        icon = <ImageCompIconSmall style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
+        break;
+      }
+      case 'rotation': {
+        icon = <RotationIcon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
+        break;
+      }
+    }
+    return icon;
+  }
+
+  return (
+    <div style={{
+      border: "1px solid lightgray",
+      borderRadius: "6px",
+      marginBottom: "16px",
+    }}>
+      {styleOptions.map((styleKey: string) => (
+        <ConfigItem style={{
+          flexDirection: "row",
+          alignItems: "center",
+          margin: "0",
+          padding: "6px",
+          borderBottom: "1px solid lightgray",
+        }}>
+          <div className="text-desc" style={{
+            width: "100px",
+            minWidth: "auto",
+            marginRight: "10px",
+          }}>
+            <div className="name">
+              { getLabelByStyle(styleKey) }
+            </div>
+          </div>
+          { isColorStyle(styleKey) ? (
+            <div className="config-input" style={{minWidth: "auto", margin: "0"}}>
+              <ColorSelect
+                // changeColor={_.debounce(setColor, 500, {
+                //   leading: true,
+                //   trailing: true,
+                // })}
+                color={compStyle[styleKey]!}
+                trigger="hover"
+              />
+              <TacoInput
+                value={compStyle[styleKey]}
+                onChange={(e) => {
+                  handleChangeWithDebounce(styleKey, e.target.value);
+                }}
+                // onChange={(e) => setColor(e.target.value)}
+                // onBlur={colorInputBlur}
+                // onKeyUp={(e) => e.nativeEvent.key === "Enter" && colorInputBlur()}
+              />
+            </div>
+          ): (
+            <div className="config-input" style={{minWidth: "auto"}}>
+              {/* <Radius $radius={compStyle[styleKey] || "0"}> */}
+                <div>
+                  {getIconByStyle(styleKey)}
+                </div>
+              {/* </Radius> */}
+              <TacoInput
+                placeholder={getPlaceholderByStyle(styleKey)}
+                value={compStyle[styleKey]}
+                onChange={(e) => {
+                  handleChangeWithDebounce(styleKey, e.target.value);
+                  // setCompStyle((style) => ({
+                  //   ...style,
+                  //   [styleKey]: e.target.value,
+                  // }))
+                }}
+                // onBlur={(e) => radiusInputBlur(e.target.value)}
+                // onKeyUp={(e) => e.nativeEvent.key === "Enter" && radiusInputBlur(e.currentTarget.value)}
+              />
+            </div>
+          )}
+        </ConfigItem>
+      ))}
+    </div>
+  )
+}
diff --git a/client/packages/lowcoder/src/components/ThemeSettingsSelector.tsx b/client/packages/lowcoder/src/components/ThemeSettingsSelector.tsx
index f3d81a540..4ac7cbd3f 100644
--- a/client/packages/lowcoder/src/components/ThemeSettingsSelector.tsx
+++ b/client/packages/lowcoder/src/components/ThemeSettingsSelector.tsx
@@ -26,6 +26,7 @@ export type configChangeParams = {
   borderColor?: string;
   borderWidth?: string;
   fontFamily?: string;
+  components?: Record<string, object>,
 };
 
 type ColorConfigProps = {
diff --git a/client/packages/lowcoder/src/comps/comps/textComp.tsx b/client/packages/lowcoder/src/comps/comps/textComp.tsx
index 21220e7d2..c393d7f0a 100644
--- a/client/packages/lowcoder/src/comps/comps/textComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textComp.tsx
@@ -121,9 +121,7 @@ const VerticalAlignmentOptions = [
   { label: <AlignBottom />, value: "flex-end" },
 ] as const;
 
-
 let TextTmpComp = (function () {
-
   const childrenMap = {
     text: stringExposingStateControl(
       "text",
diff --git a/client/packages/lowcoder/src/comps/controls/styleControl.tsx b/client/packages/lowcoder/src/comps/controls/styleControl.tsx
index fd10c7486..c3a4e7df1 100644
--- a/client/packages/lowcoder/src/comps/controls/styleControl.tsx
+++ b/client/packages/lowcoder/src/comps/controls/styleControl.tsx
@@ -5,7 +5,7 @@ import { childrenToProps, ToConstructor } from "comps/generators/multi";
 import { BackgroundColorContext } from "comps/utils/backgroundColorContext";
 import { ThemeContext } from "comps/utils/themeContext";
 import { trans } from "i18n";
-import _ from "lodash";
+import _, { values } from "lodash";
 import {
   controlItem,
   IconReset,
@@ -80,6 +80,8 @@ import {
 } from "./styleControlConstants";
 import { faTextWidth } from "@fortawesome/free-solid-svg-icons";
 import appSelectControl from "./appSelectControl";
+import { JSONObject } from "@lowcoder-ee/util/jsonTypes";
+import { CompTypeContext } from "../utils/compTypeContext";
 
 function isSimpleColorConfig(config: SingleColorConfig): config is SimpleColorConfig {
   return config.hasOwnProperty("color");
@@ -350,9 +352,11 @@ function calcColors<ColorMap extends Record<string, string>>(
   props: ColorMap,
   colorConfigs: readonly SingleColorConfig[],
   theme?: ThemeDetail,
-  bgColor?: string
+  bgColor?: string,
+  compTheme?: Record<string, string>,
 ) {
-  const themeWithDefault = (theme || defaultTheme) as unknown as Record<string, string>;
+  let themeWithDefault = (theme || defaultTheme) as unknown as Record<string, string>;
+  themeWithDefault = {...themeWithDefault, ...(compTheme || {})};
   // Cover what is not there for the first pass
   let res: Record<string, string> = {};
   colorConfigs.forEach((config) => {
@@ -515,55 +519,55 @@ function calcColors<ColorMap extends Record<string, string>>(
       res[name] = themeWithDefault[config.radius];
     }
     if (isBorderWidthConfig(config)) {
-      res[name] = '0px';
+      res[name] = themeWithDefault[config.borderWidth] || '0px';
     }
     if (isRotationConfig(config)) {
-      res[name] = '0deg';
+      res[name] = themeWithDefault[config.rotation] || '0deg';
     }
     if (isBackgroundImageConfig(config)) {
-      res[name] = '';
+      res[name] = themeWithDefault[config.backgroundImage] || '';
     }
     if (isBackgroundImageRepeatConfig(config)) {
-      res[name] = 'no-repeat';
+      res[name] = themeWithDefault[config.backgroundImageRepeat] || 'no-repeat';
     }
     if (isBackgroundImageSizeConfig(config)) {
-      res[name] = 'cover';
+      res[name] = themeWithDefault[config.backgroundImageSize] || 'cover';
     }
     if (isBackgroundImagePositionConfig(config)) {
-      res[name] = 'center';
+      res[name] = themeWithDefault[config.backgroundImagePosition] || 'center';
     }
     if (isBackgroundImageOriginConfig(config)) {
-      res[name] = 'padding-box';
+      res[name] = themeWithDefault[config.backgroundImageOrigin] || 'padding-box';
     }
     if (isHeaderBackgroundImageConfig(config)) {
-      res[name] = '';
+      res[name] = themeWithDefault[config.headerBackgroundImage] || '';
     }
     if (isHeaderBackgroundImageRepeatConfig(config)) {
-      res[name] = 'no-repeat';
+      res[name] = themeWithDefault[config.headerBackgroundImageRepeat] || 'no-repeat';
     }
     if (isHeaderBackgroundImageSizeConfig(config)) {
-      res[name] = 'cover';
+      res[name] = themeWithDefault[config.headerBackgroundImageSize] || 'cover';
     }
     if (isHeaderBackgroundImagePositionConfig(config)) {
-      res[name] = 'center';
+      res[name] = themeWithDefault[config.headerBackgroundImagePosition] || 'center';
     }
     if (isHeaderBackgroundImageOriginConfig(config)) {
-      res[name] = 'padding-box';
+      res[name] = themeWithDefault[config.headerBackgroundImageOrigin] || 'padding-box';
     }
     if (isFooterBackgroundImageConfig(config)) {
-      res[name] = '';
+      res[name] = themeWithDefault[config.footerBackgroundImage] || '';
     }
     if (isFooterBackgroundImageRepeatConfig(config)) {
-      res[name] = 'no-repeat';
+      res[name] = themeWithDefault[config.footerBackgroundImageRepeat] || 'no-repeat';
     }
     if (isFooterBackgroundImageSizeConfig(config)) {
-      res[name] = 'cover';
+      res[name] = themeWithDefault[config.footerBackgroundImageSize] || 'cover';
     }
     if (isFooterBackgroundImagePositionConfig(config)) {
-      res[name] = 'center';
+      res[name] = themeWithDefault[config.footerBackgroundImagePosition] || 'center';
     }
     if (isFooterBackgroundImageOriginConfig(config)) {
-      res[name] = 'padding-box';
+      res[name] = themeWithDefault[config.footerBackgroundImageOrigin] || 'padding-box';
     }
     if (isTextSizeConfig(config)) {
       // TODO: remove default textSize after added in theme in backend.
@@ -836,15 +840,22 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
   return new ControlItemCompBuilder(
     childrenMap as ToConstructor<{ [K in Names<T>]: ColorControl }>,
     (props) => {
-      // const x = useContext(CompNameContext);
+      const compType = useContext(CompTypeContext);
       const theme = useContext(ThemeContext);
       const bgColor = useContext(BackgroundColorContext);
-      return calcColors(props as ColorMap, colorConfigs, theme?.theme, bgColor);
+      return calcColors(
+        props as ColorMap,
+        colorConfigs,
+        theme?.theme,
+        bgColor,
+        compType ? theme?.theme?.components?.[compType] as unknown as Record<string, string>: undefined,
+      );
     }
   )
     .setControlItemData({ filterText: label, searchChild: true })
     .setPropertyViewFn((children) => {
       const theme = useContext(ThemeContext);
+      const compType = useContext(CompTypeContext);
       const bgColor = useContext(BackgroundColorContext);
       const isMobile = useIsMobile();
 
@@ -852,7 +863,8 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
         childrenToProps(children) as ColorMap,
         colorConfigs,
         theme?.theme,
-        bgColor
+        bgColor,
+        compType ? theme?.theme?.components?.[compType] as unknown as Record<string, string>: undefined,
       );
       const showReset = Object.values(childrenToProps(children)).findIndex((item) => item) > -1;
       return (
diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
index 9c602be50..29dfe67f3 100644
--- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
+++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -246,6 +246,7 @@ export const defaultTheme: ThemeDetail = {
   boxShadow: "",
   boxShadowColor: "",
   animationIterationCount: "",
+  components: {},
 };
 
 export const SURFACE_COLOR = "#FFFFFF";
diff --git a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
index 64be29b6e..465341f57 100644
--- a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
+++ b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
@@ -235,6 +235,7 @@ function UIView(props: {
   }
   //END ADD BY FRED
 
+  // render condition for modal and drawer as we are not getting compType here
   if (comp.children.hasOwnProperty('showMask') && comp.children.hasOwnProperty('maskClosable')) {
     return (
       <HidableView hidden={childrenProps.hidden as boolean}>
diff --git a/client/packages/lowcoder/src/comps/utils/compTypeContext.tsx b/client/packages/lowcoder/src/comps/utils/compTypeContext.tsx
new file mode 100644
index 000000000..a70f83cd6
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/utils/compTypeContext.tsx
@@ -0,0 +1,3 @@
+import React from "react";
+
+export const CompTypeContext = React.createContext<string>('');
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
index 7860c3f8c..cbd6486b0 100644
--- a/client/packages/lowcoder/src/i18n/locales/en.ts
+++ b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -517,6 +517,7 @@ export const en = {
     "containerBodyPadding": "Body Padding",
     "minWidth": "Minimum Width",
     "aspectRatio": "Aspect Ratio",
+    "text": "Text",
     "textSize": "Text Size",
     "textWeight": "Text Weight",
     "fontFamily": "Font Family",
@@ -536,6 +537,7 @@ export const en = {
     "footerBackgroundImageSize": "BgImage Size",
     "footerBackgroundImagePosition": "BgImage Position",
     "footerBackgroundImageOrigin": "BgImage Origin",
+    "rotation": "Rotation",
   },
   "export": {
     "hiddenDesc": "If true, the component is hidden",
diff --git a/client/packages/lowcoder/src/i18n/locales/pt.ts b/client/packages/lowcoder/src/i18n/locales/pt.ts
index 8c85ba4ac..63ae85afb 100644
--- a/client/packages/lowcoder/src/i18n/locales/pt.ts
+++ b/client/packages/lowcoder/src/i18n/locales/pt.ts
@@ -554,6 +554,7 @@ export const pt: typeof en = {
         "containerBodyPadding": "Preenchimento do Corpo do Contêiner",
         "minWidth": "Largura Mínima",
         "aspectRatio": "Proporção",
+        "text": "Texto",
         "textSize": "Tamanho do Texto",
         "textWeight": "Peso do Texto",
         "fontFamily": "Família da Fonte",
diff --git a/client/packages/lowcoder/src/i18n/locales/zh.ts b/client/packages/lowcoder/src/i18n/locales/zh.ts
index 0664cd098..b791dfdc0 100644
--- a/client/packages/lowcoder/src/i18n/locales/zh.ts
+++ b/client/packages/lowcoder/src/i18n/locales/zh.ts
@@ -482,6 +482,7 @@ export const zh: typeof en = {
         containerBodyPadding: "内边距",
         "containerSiderPadding": "Sider 衬垫",
         minWidth: "最小宽度",
+        text: "文本",
         textSize: "字体大小",
         textWeight: "字体粗细",
         "fontFamily": "字体",
diff --git a/client/packages/lowcoder/src/layout/gridLayout.tsx b/client/packages/lowcoder/src/layout/gridLayout.tsx
index 9dec97a2d..e7d4d150f 100644
--- a/client/packages/lowcoder/src/layout/gridLayout.tsx
+++ b/client/packages/lowcoder/src/layout/gridLayout.tsx
@@ -51,6 +51,7 @@ import {
   synchronizeLayoutWithChildren,
   updateInCanvasCount,
 } from "./utils";
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
 
 type GridLayoutState = {
   layout: Layout;
@@ -442,53 +443,55 @@ class GridLayout extends React.Component<GridLayoutProps, GridLayoutState> {
     const selectable = isSelectable;
     const positionParams = genPositionParams(this.props);
     return (
-      <GridItem
-        compType={extraItem?.compType}
-        key={item.i}
-        containerWidth={width}
-        cols={cols}
-        margin={margin}
-        containerPadding={positionParams.containerPadding}
-        maxRows={maxRows}
-        rowHeight={rowHeight}
-        onDragStart={this.onDragStart}
-        onDrag={this.onDrag}
-        onDragEnd={this.onDragEnd}
-        onResizeStart={this.onResizeStart}
-        onResize={this.onResize}
-        onResizeStop={this.onResizeStop}
-        onHeightChange={this.onHeightChange}
-        isDraggable={isDraggable && isItemDraggable(item)}
-        isResizable={isResizable && isItemResizable(item)}
-        isSelectable={selectable}
-        transformScale={transformScale}
-        w={item.w}
-        h={extraItem?.hidden && !extraItem?.isSelected ? 0 : item.h}
-        x={item.x}
-        y={item.y}
-        i={item.i}
-        minH={item.minH}
-        minW={item.minW}
-        maxH={item.maxH}
-        maxW={item.maxW}
-        placeholder={item.placeholder}
-        layoutHide={item.hide}
-        static={item.static}
-        resizeHandles={getItemResizeHandles(item, extraItem)}
-        name={extraItem?.name}
-        autoHeight={extraItem?.autoHeight}
-        isSelected={extraItem?.isSelected}
-        hidden={extraItem?.hidden}
-        selectedSize={selectedSize}
-        clickItem={clickItem}
-        showName={{
-          top: showName?.top ?? 0,
-          bottom: (showName?.bottom ?? 0) + (this.ref.current?.scrollHeight ?? 0),
-        }}
-        zIndex={zIndex}
-      >
-        {child}
-      </GridItem>
+      <CompTypeContext.Provider value={extraItem?.compType}>
+        <GridItem
+          compType={extraItem?.compType}
+          key={item.i}
+          containerWidth={width}
+          cols={cols}
+          margin={margin}
+          containerPadding={positionParams.containerPadding}
+          maxRows={maxRows}
+          rowHeight={rowHeight}
+          onDragStart={this.onDragStart}
+          onDrag={this.onDrag}
+          onDragEnd={this.onDragEnd}
+          onResizeStart={this.onResizeStart}
+          onResize={this.onResize}
+          onResizeStop={this.onResizeStop}
+          onHeightChange={this.onHeightChange}
+          isDraggable={isDraggable && isItemDraggable(item)}
+          isResizable={isResizable && isItemResizable(item)}
+          isSelectable={selectable}
+          transformScale={transformScale}
+          w={item.w}
+          h={extraItem?.hidden && !extraItem?.isSelected ? 0 : item.h}
+          x={item.x}
+          y={item.y}
+          i={item.i}
+          minH={item.minH}
+          minW={item.minW}
+          maxH={item.maxH}
+          maxW={item.maxW}
+          placeholder={item.placeholder}
+          layoutHide={item.hide}
+          static={item.static}
+          resizeHandles={getItemResizeHandles(item, extraItem)}
+          name={extraItem?.name}
+          autoHeight={extraItem?.autoHeight}
+          isSelected={extraItem?.isSelected}
+          hidden={extraItem?.hidden}
+          selectedSize={selectedSize}
+          clickItem={clickItem}
+          showName={{
+            top: showName?.top ?? 0,
+            bottom: (showName?.bottom ?? 0) + (this.ref.current?.scrollHeight ?? 0),
+          }}
+          zIndex={zIndex}
+        >
+          {child}
+        </GridItem>
+      </CompTypeContext.Provider>
     );
   }
 
diff --git a/client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx b/client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx
index 31e370a25..cd7edc3a6 100644
--- a/client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx
+++ b/client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx
@@ -5,7 +5,7 @@ import {
   uiCompRegistry,
 } from "comps/uiCompRegistry";
 import { isEmpty } from "lodash";
-import { language } from "i18n";
+import { language, trans } from "i18n";
 import {
   CompIconDiv,
   EmptyCompContent,
@@ -20,8 +20,18 @@ import {
   PropertySectionContextType,
   PropertySectionState,
   labelCss,
+  sectionNames,
 } from "lowcoder-design";
-import { Input } from "antd";
+import { Divider, Flex, Input } from "antd";
+import { genRandomKey } from "@lowcoder-ee/comps/utils/idGenerator";
+import dsl from "./detail/previewDsl";
+import { RootComp } from "@lowcoder-ee/comps/comps/rootComp";
+import { NameGenerator, evalAndReduceWithExposing } from "@lowcoder-ee/comps/utils";
+import ThemeSettingsSelector from "@lowcoder-ee/components/ThemeSettingsSelector";
+import ThemeSettingsCompStyles from "@lowcoder-ee/components/ThemeSettingsCompStyles";
+import { JSONObject } from "@lowcoder-ee/util/jsonTypes";
+import PreviewApp from "@lowcoder-ee/components/PreviewApp";
+import { parseCompType } from "@lowcoder-ee/comps/utils/remote";
 
 const CompDiv = styled.div`
   display: flex;
@@ -94,10 +104,14 @@ Object.keys(uiCompCategoryNames).forEach((cat) => {
   initialState[stateCompName][key] = key === uiCompCategoryNames.dashboards
 })
 
-export const ThemeCompPanel = () => {
+export const ThemeCompPanel = (props: any) => {
+  const { theme } = props;
   const [searchValue, setSearchValue] = useState("");
   const [propertySectionState, setPropertySectionState] = useState<PropertySectionState>(initialState);
   const [searchedPropertySectionState, setSearchedPropertySectionState] = useState<PropertySectionState>({});
+  const [styleChildrens, setStyleChildrens] = useState<Record<string, any>>({});
+  const [selectedComp, setSelectedComp] = useState<string>('');
+  const [appDsl, setAppDSL] = useState<JSONObject>();
 
   const categories = useMemo(() => {
     const cats: Record<string, [string, UICompManifest][]> = Object.fromEntries(
@@ -140,6 +154,61 @@ export const ThemeCompPanel = () => {
     }
   }, [searchValue])
 
+  const onCompSelect = async (compMap: [string, UICompManifest]) => {
+    setAppDSL(undefined);
+    const [compType, compInfo] = compMap;
+    setSelectedComp(compType);
+    const compKey = genRandomKey();
+    let { comp, defaultDataFn } = compInfo;
+
+    const compData = parseCompType(compType)
+    if (compInfo.lazyLoad) {
+      comp = (await import(`../../../comps/${compInfo.compPath!}`))[compInfo.compName!];
+      const {
+        defaultDataFnName,
+        defaultDataFnPath,
+      } = compInfo;
+  
+      if(defaultDataFnName && defaultDataFnPath) {
+        const module = await import(`../../../comps/${defaultDataFnPath}.tsx`);
+        defaultDataFn = module[defaultDataFnName];
+      }
+      const newComp = new comp!({});
+      const compChildrens = newComp.children;
+      const styleChildrenKeys = Object.keys(compChildrens).filter(child => child.toLowerCase().endsWith('style'));
+      let styleChildrens: Record<string, any> = {};
+      styleChildrenKeys.forEach((childKey: string) => {
+        styleChildrens[childKey] = compChildrens[childKey];
+      })
+      setStyleChildrens(styleChildrens);
+    } else {
+      comp = compInfo.comp;
+    }
+
+    const ui = {
+      items: {
+        [compKey]: {
+          compType: compType,
+          name: `${compType}1`,
+          comp: defaultDataFn
+            ? defaultDataFn("comp", new NameGenerator())
+            : new comp!({}),
+        }
+      },
+      layout: {
+        [compKey]: {
+          ...compInfo.layoutInfo,
+          w: (compInfo?.layoutInfo?.w || 5) * 1.5,
+          h: (compInfo?.layoutInfo?.h || 5),
+          i: compKey,
+          x: 2,
+          y: 2,
+        }
+      }
+    }
+    setAppDSL({...dsl as any, ui});
+  }
+
   const compList = useMemo(
     () =>
       Object.entries(categories)
@@ -166,7 +235,7 @@ export const ThemeCompPanel = () => {
               >
                 <InsertContain>
                   {infos.map((info) => (
-                    <CompDiv key={info[0]} className={info[0] === "table" ? tableDragClassName : ""}>
+                    <CompDiv key={info[0]} className={info[0] === "table" ? tableDragClassName : ""} onClick={() => onCompSelect(info)}>
                       <HovDiv>
                         <IconContain Icon={info[1].icon}></IconContain>
                       </HovDiv>
@@ -183,6 +252,48 @@ export const ThemeCompPanel = () => {
     [categories, searchValue]
   );
 
+  const stylePropertyView = useMemo(() => {
+    return (
+      <>
+        {Object.keys(styleChildrens)?.map((styleKey: string) => {
+          return (
+            <>
+              <h4>
+                { sectionNames.hasOwnProperty(styleKey)
+                  ? sectionNames[styleKey as keyof typeof sectionNames]
+                  : styleKey
+                }
+              </h4>
+              <ThemeSettingsCompStyles
+                styleOptions={Object.keys(styleChildrens[styleKey].children)}
+                defaultStyle={theme.components?.[selectedComp] || {}}
+                configChange={(params) => {
+                  props.onCompStyleChange(selectedComp, params);
+                }}
+              />
+            </>
+          )
+        })}
+      </>
+    )
+  }, [styleChildrens]);
+
+  const appPreview = useMemo(() => {
+    if (!appDsl) return null;
+
+    return (
+      <PreviewApp
+        style={{
+          height: "500px",
+          minWidth: "auto",
+          width: "100%",
+        }}
+        theme={theme}
+        dsl={appDsl}
+      />
+    );
+  }, [appDsl, theme]);
+
   if(!compList.length) return (
     <RightPanelContentWrapper>
       <EmptyCompContent />
@@ -190,18 +301,38 @@ export const ThemeCompPanel = () => {
   )
 
   return (
-    <RightPanelContentWrapper>
-      <Input.Search
-        placeholder="Search components"
-        value={searchValue}
-        onChange={(e) => setSearchValue(e.target.value)}
-        style={{ marginBottom: 16 }}
-      />
-      <PropertySectionContext.Provider
-        value={propertySectionContextValue}
-      >
-        {compList}
-      </PropertySectionContext.Provider>
-    </RightPanelContentWrapper>
+    <Flex style={{
+      height: "500px",
+      overflow: "hidden",
+    }}>
+      <RightPanelContentWrapper style={{
+        padding: "12px",
+        overflow: "auto",
+      }}>
+        <Input.Search
+          placeholder="Search components"
+          value={searchValue}
+          onChange={(e) => setSearchValue(e.target.value)}
+          style={{ marginBottom: 16 }}
+        />
+        <PropertySectionContext.Provider
+          value={propertySectionContextValue}
+        >
+          {compList}
+        </PropertySectionContext.Provider>
+      </RightPanelContentWrapper>
+      {/* <Divider type="vertical" style={{height: "510px"}}/> */}
+      <div style={{flex: "1"}}>
+        {appPreview}
+      </div>
+      {/* <Divider type="vertical" style={{height: "510px"}}/> */}
+      <div style={{
+        width: "280px",
+        padding: "12px",
+        overflow: "auto",
+      }}>
+        {stylePropertyView}
+      </div>
+    </Flex>
   );
 };
diff --git a/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx b/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
index 84a409086..a8d13e36e 100644
--- a/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
+++ b/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
@@ -9,7 +9,7 @@ import {
 import history from "util/history";
 import { BASE_URL, THEME_SETTING } from "constants/routesURL";
 import ThemeSettingsSelector, { configChangeParams } from "../../../../components/ThemeSettingsSelector";
-import React, { lazy } from "react";
+import React, { lazy, useState } from "react";
 import { connect } from "react-redux";
 import { fetchCommonSettings, setCommonSettings } from "redux/reduxActions/commonSettingsActions";
 import { AppState } from "redux/reducers";
@@ -44,6 +44,7 @@ import { messageInstance } from "lowcoder-design/src/components/GlobalInstances"
 import { Card, Collapse, CollapseProps, Divider, Flex, List, Tooltip } from 'antd';
 
 import { ThemeCompPanel } from "pages/setting/theme/ThemeCompPanel";
+import { JSONObject } from "@lowcoder-ee/index.sdk";
 
 const ThemeSettingsView = styled.div`
   font-size: 14px;
@@ -91,6 +92,7 @@ type ThemeDetailPageState = {
   name: string;
   theme: ThemeDetail;
   canLeave: boolean;
+  compDsl?: JSONObject;
 };
 
 class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailPageState> {
@@ -103,6 +105,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
   constructor(props: ThemeDetailPageProps) {
     super(props);
     const { name, id, theme, type } = props.location.state || {};
+    console.log("defaultTheme", theme);
     if (!name || !id || !theme || !type) {
       history.replace(BASE_URL);
       window.location.reload();
@@ -123,6 +126,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
       theme,
       name,
       canLeave: false,
+      compDsl: undefined,
     };
     this.inputRef = React.createRef();
   }
@@ -171,7 +175,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
   isThemeNotChange() {
     return (
       JSON.stringify({ ...this.state.theme }) ===
-      JSON.stringify({ ...this.state.theme, ...this.themeDefault })
+      JSON.stringify({ ...this.themeDefault })
     );
   }
 
@@ -342,7 +346,6 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
           </Header>
 
           <DetailContent>
-
             <ThemeSettingsView>
               <StyleThemeSettingsCover>
                 <ColorPickerCompIcon width={"36px"} style={{marginRight : "10px"}}/> <h2 style={{color: "#ffffff", marginTop : "8px"}}> {trans("theme.mainColor")}</h2>
@@ -358,7 +361,6 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
                             <List.Item>
                               <DetailTitle>{item.title}</DetailTitle>
                             </List.Item>
-        
                         )}
                         {item.items.map((colorItem) => (
                           <Tooltip title={colorItem.desc} placement="right">
@@ -381,8 +383,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
                   <Divider type="vertical" style={{height: "610px"}}/>
                   <PreviewApp style={{marginTop: '3px', height: "620px", width: "100%"}} theme={this.state.theme} dsl={dsl} />
                 </Flex>
-              </Card>  
-              
+              </Card>
             </ThemeSettingsView>
 
             <ThemeSettingsView>
@@ -390,7 +391,6 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
                 <TextSizeIcon width={"36px"} style={{marginRight : "10px"}}/> <h2 style={{color: "#ffffff", marginTop : "8px"}}> {trans("theme.fonts")}</h2>
               </StyleThemeSettingsCover>
               <Card style={{ marginBottom: "20px", minHeight : "200px" }}>
-                
                 <Flex gap={"middle"}>
                   <List
                     bordered
@@ -424,8 +424,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
                   <Divider type="vertical" style={{height: "610px"}}/>
                   <PreviewApp style={{marginTop: '3px', height: "620px", width: "100%"}} theme={this.state.theme} dsl={dsl} />
                 </Flex>
-              </Card>  
-              
+              </Card>
             </ThemeSettingsView>
 
             <ThemeSettingsView>
@@ -433,7 +432,6 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
                 <PageLayoutCompIcon width={"36px"} style={{marginRight : "10px"}}/> <h2 style={{color: "#ffffff", marginTop : "8px"}}> {trans("theme.layout")}</h2>
               </StyleThemeSettingsCover>
               <Card style={{ marginBottom: "20px", minHeight : "200px" }}>
-                
                 <Flex gap={"middle"}>
                   <List
                     bordered
@@ -507,26 +505,36 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
                   <Divider type="vertical" style={{height: "610px"}}/>
                   <PreviewApp style={{marginTop: '3px', height: "620px", width: "100%"}} theme={this.state.theme} dsl={dsl} />
                 </Flex>
-
-              </Card>  
-              
+              </Card>
             </ThemeSettingsView>
 
             <ThemeSettingsView>
               <StyleThemeSettingsCover>
                 <ShapesCompIcon width={"36px"} style={{marginRight : "10px"}}/> <h2 style={{color: "#ffffff", marginTop : "8px"}}> {trans("theme.components")}</h2>
               </StyleThemeSettingsCover>
-              <Card style={{ marginBottom: "20px", minHeight : "1000px", overflow: "auto" }}>
-                <Flex gap={"middle"}>
-                  <ThemeCompPanel/>
-                  <Divider type="vertical" style={{height: "510px"}}/>
-                  <div style={{minWidth: "250px"}}><h4>Properties Display</h4></div>
-                  <Divider type="vertical" style={{height: "510px"}}/>
-                  <PreviewApp style={{height: "500px", width: "40%" }} theme={this.state.theme} dsl={dsl} />
-                </Flex>
-
-              </Card>  
-              
+              <Card
+                bodyStyle={{
+                  padding: '0px'
+                }}
+                style={{
+                  marginBottom: "20px",
+                }}
+              >
+                <ThemeCompPanel
+                  theme={this.state.theme}
+                  onCompStyleChange={(compName: string, compStyle: Record<string, string>) => {
+                    this.setState({
+                      theme: {
+                        ...this.state.theme,
+                        components: {
+                          ...this.state.theme.components,
+                          [compName]: compStyle,
+                        }
+                      },
+                    });
+                  }}
+                />
+              </Card>
             </ThemeSettingsView>
 
             <ThemeSettingsView>
@@ -560,9 +568,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
                   <Divider type="vertical" style={{height: "370px"}}/>
                   <PreviewApp style={{ height: "380px", width: "100%", margin: "0" }} theme={this.state.theme} dsl={chartDsl} />
                 </Flex>
-
-              </Card>  
-              
+              </Card>
             </ThemeSettingsView>
 
           </DetailContent>

From 8529fec8aeb86512e33d2770f52a4aa31bcd9472 Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Thu, 6 Jun 2024 19:00:31 +0500
Subject: [PATCH 09/57] theme: fix lc-comps loading in comp styling

---
 .../lowcoder/src/comps/comps/gridItemComp.tsx |   1 -
 .../pages/setting/theme/ThemeCompPanel.tsx    | 142 ++++++++++--------
 2 files changed, 81 insertions(+), 62 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/gridItemComp.tsx b/client/packages/lowcoder/src/comps/comps/gridItemComp.tsx
index 4fb4eb961..2ac4e82eb 100644
--- a/client/packages/lowcoder/src/comps/comps/gridItemComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/gridItemComp.tsx
@@ -39,7 +39,6 @@ const TmpComp = withTypeAndChildren<
 >(
   (type) => {
     const compInfo = parseCompType(type);
-
     if (compInfo.isRemote) {
       return remoteComp(compInfo);
     }
diff --git a/client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx b/client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx
index cd7edc3a6..737b6853b 100644
--- a/client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx
+++ b/client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx
@@ -5,14 +5,14 @@ import {
   uiCompRegistry,
 } from "comps/uiCompRegistry";
 import { isEmpty } from "lodash";
-import { language, trans } from "i18n";
+import { language } from "i18n";
 import {
   CompIconDiv,
   EmptyCompContent,
   RightPanelContentWrapper,
 } from "pages/editor/right/styledComponent";
 import { tableDragClassName } from "pages/tutorials/tutorialsConstant";
-import React, { useContext, useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import styled from "styled-components";
 import {
   BaseSection,
@@ -22,16 +22,14 @@ import {
   labelCss,
   sectionNames,
 } from "lowcoder-design";
-import { Divider, Flex, Input } from "antd";
-import { genRandomKey } from "@lowcoder-ee/comps/utils/idGenerator";
+import { Flex, Input } from "antd";
+import { genRandomKey } from "comps/utils/idGenerator";
 import dsl from "./detail/previewDsl";
-import { RootComp } from "@lowcoder-ee/comps/comps/rootComp";
-import { NameGenerator, evalAndReduceWithExposing } from "@lowcoder-ee/comps/utils";
-import ThemeSettingsSelector from "@lowcoder-ee/components/ThemeSettingsSelector";
-import ThemeSettingsCompStyles from "@lowcoder-ee/components/ThemeSettingsCompStyles";
-import { JSONObject } from "@lowcoder-ee/util/jsonTypes";
-import PreviewApp from "@lowcoder-ee/components/PreviewApp";
-import { parseCompType } from "@lowcoder-ee/comps/utils/remote";
+import { NameGenerator } from "comps/utils";
+import ThemeSettingsCompStyles from "components/ThemeSettingsCompStyles";
+import { JSONObject } from "util/jsonTypes";
+import PreviewApp from "components/PreviewApp";
+import { parseCompType } from "comps/utils/remote";
 
 const CompDiv = styled.div`
   display: flex;
@@ -109,7 +107,7 @@ export const ThemeCompPanel = (props: any) => {
   const [searchValue, setSearchValue] = useState("");
   const [propertySectionState, setPropertySectionState] = useState<PropertySectionState>(initialState);
   const [searchedPropertySectionState, setSearchedPropertySectionState] = useState<PropertySectionState>({});
-  const [styleChildrens, setStyleChildrens] = useState<Record<string, any>>({});
+  const [styleChildrens, setStyleChildrens] = useState<Record<string, any>>();
   const [selectedComp, setSelectedComp] = useState<string>('');
   const [appDsl, setAppDSL] = useState<JSONObject>();
 
@@ -156,57 +154,79 @@ export const ThemeCompPanel = (props: any) => {
 
   const onCompSelect = async (compMap: [string, UICompManifest]) => {
     setAppDSL(undefined);
-    const [compType, compInfo] = compMap;
-    setSelectedComp(compType);
-    const compKey = genRandomKey();
-    let { comp, defaultDataFn } = compInfo;
+    setStyleChildrens(undefined);
 
-    const compData = parseCompType(compType)
-    if (compInfo.lazyLoad) {
-      comp = (await import(`../../../comps/${compInfo.compPath!}`))[compInfo.compName!];
-      const {
-        defaultDataFnName,
-        defaultDataFnPath,
-      } = compInfo;
+    setTimeout(async () => {
+      
+      const [compType, compInfo] = compMap;
+      setSelectedComp(compType);
+      const compKey = genRandomKey();
+      let { comp, defaultDataFn } = compInfo;
   
-      if(defaultDataFnName && defaultDataFnPath) {
-        const module = await import(`../../../comps/${defaultDataFnPath}.tsx`);
-        defaultDataFn = module[defaultDataFnName];
-      }
-      const newComp = new comp!({});
-      const compChildrens = newComp.children;
-      const styleChildrenKeys = Object.keys(compChildrens).filter(child => child.toLowerCase().endsWith('style'));
-      let styleChildrens: Record<string, any> = {};
-      styleChildrenKeys.forEach((childKey: string) => {
-        styleChildrens[childKey] = compChildrens[childKey];
-      })
-      setStyleChildrens(styleChildrens);
-    } else {
-      comp = compInfo.comp;
-    }
-
-    const ui = {
-      items: {
-        [compKey]: {
-          compType: compType,
-          name: `${compType}1`,
-          comp: defaultDataFn
-            ? defaultDataFn("comp", new NameGenerator())
-            : new comp!({}),
+      const compData = parseCompType(compType)
+      if (compInfo.lazyLoad) {
+        comp = (await import(`../../../comps/${compInfo.compPath!}`))[compInfo.compName!];
+        const {
+          defaultDataFnName,
+          defaultDataFnPath,
+        } = compInfo;
+    
+        if(defaultDataFnName && defaultDataFnPath) {
+          const module = await import(`../../../comps/${defaultDataFnPath}.tsx`);
+          defaultDataFn = module[defaultDataFnName];
         }
-      },
-      layout: {
-        [compKey]: {
-          ...compInfo.layoutInfo,
-          w: (compInfo?.layoutInfo?.w || 5) * 1.5,
-          h: (compInfo?.layoutInfo?.h || 5),
-          i: compKey,
-          x: 2,
-          y: 2,
+        const newComp = new comp!({});
+        const compChildrens = newComp.children;
+        const styleChildrenKeys = Object.keys(compChildrens).filter(child => child.toLowerCase().endsWith('style'));
+        let styleChildrens: Record<string, any> = {};
+        styleChildrenKeys.forEach((childKey: string) => {
+          styleChildrens[childKey] = compChildrens[childKey];
+        })
+        setStyleChildrens(styleChildrens);
+      } else {
+        comp = compInfo.comp;
+        let newComp = new comp!({
+          dispatch: (action) => {
+            if (newComp) {
+              newComp = newComp.reduce(action);
+            }
+          },
+        }) as any;
+        await newComp.load();
+
+
+        const compChildrens = newComp.children;
+        const styleChildrenKeys = Object.keys(compChildrens).filter(child => child.toLowerCase().endsWith('style') || child.toLowerCase().endsWith('styles'));
+        let styleChildrens: Record<string, any> = {};
+        styleChildrenKeys.forEach((childKey: string) => {
+          styleChildrens[childKey] = compChildrens[childKey];
+        })
+        setStyleChildrens(styleChildrens);
+      }
+  
+      const ui = {
+        items: {
+          [compKey]: {
+            compType: compType,
+            name: `${compType}1`,
+            comp: defaultDataFn
+              ? defaultDataFn("comp", new NameGenerator())
+              : new comp!({}),
+          }
+        },
+        layout: {
+          [compKey]: {
+            ...compInfo.layoutInfo,
+            w: (compInfo?.layoutInfo?.w || 5) * 1.5,
+            h: (compInfo?.layoutInfo?.h || 5),
+            i: compKey,
+            x: 2,
+            y: 2,
+          }
         }
       }
-    }
-    setAppDSL({...dsl as any, ui});
+      setAppDSL({...dsl as any, ui});
+    }, 0)
   }
 
   const compList = useMemo(
@@ -255,7 +275,7 @@ export const ThemeCompPanel = (props: any) => {
   const stylePropertyView = useMemo(() => {
     return (
       <>
-        {Object.keys(styleChildrens)?.map((styleKey: string) => {
+        {Object.keys(styleChildrens || {})?.map((styleKey: string) => {
           return (
             <>
               <h4>
@@ -265,7 +285,7 @@ export const ThemeCompPanel = (props: any) => {
                 }
               </h4>
               <ThemeSettingsCompStyles
-                styleOptions={Object.keys(styleChildrens[styleKey].children)}
+                styleOptions={Object.keys(styleChildrens?.[styleKey].children)}
                 defaultStyle={theme.components?.[selectedComp] || {}}
                 configChange={(params) => {
                   props.onCompStyleChange(selectedComp, params);
@@ -302,7 +322,7 @@ export const ThemeCompPanel = (props: any) => {
 
   return (
     <Flex style={{
-      height: "500px",
+      height: "600px",
       overflow: "hidden",
     }}>
       <RightPanelContentWrapper style={{

From 61e3963d362158610512415f9ea8181e229495cd Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Sat, 8 Jun 2024 03:13:48 +0500
Subject: [PATCH 10/57] Theme:  added debounce for style changes and update
 theme

---
 .../lowcoder/src/api/commonSettingApi.ts      |  3 +-
 .../pages/setting/theme/ThemeCompPanel.tsx    | 40 +++++++++----------
 .../src/pages/setting/theme/detail/index.tsx  | 11 ++++-
 3 files changed, 30 insertions(+), 24 deletions(-)

diff --git a/client/packages/lowcoder/src/api/commonSettingApi.ts b/client/packages/lowcoder/src/api/commonSettingApi.ts
index 018071535..a650eed1c 100644
--- a/client/packages/lowcoder/src/api/commonSettingApi.ts
+++ b/client/packages/lowcoder/src/api/commonSettingApi.ts
@@ -2,6 +2,7 @@ import Api from "./api";
 import { AxiosPromise } from "axios";
 import { ApiResponse, GenericApiResponse } from "./apiResponses";
 import { trans } from "i18n";
+import { JSONObject } from "@lowcoder-ee/util/jsonTypes";
 
 export type FetchCommonSettingPayload = {
   orgId: string;
@@ -59,7 +60,7 @@ export interface ThemeDetail {
   boxShadow?: string;
   boxShadowColor?: string;
   animationIterationCount?: string;
-  components?: Record<string, object>;
+  components?: Record<string, JSONObject>;
 }
 
 export function getThemeDetailName(key: keyof ThemeDetail) {
diff --git a/client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx b/client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx
index 737b6853b..45fefc9bb 100644
--- a/client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx
+++ b/client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx
@@ -12,7 +12,7 @@ import {
   RightPanelContentWrapper,
 } from "pages/editor/right/styledComponent";
 import { tableDragClassName } from "pages/tutorials/tutorialsConstant";
-import React, { useEffect, useMemo, useState } from "react";
+import React, { Fragment, useEffect, useMemo, useState } from "react";
 import styled from "styled-components";
 import {
   BaseSection,
@@ -162,8 +162,8 @@ export const ThemeCompPanel = (props: any) => {
       setSelectedComp(compType);
       const compKey = genRandomKey();
       let { comp, defaultDataFn } = compInfo;
-  
-      const compData = parseCompType(compType)
+      let newComp: any;
+
       if (compInfo.lazyLoad) {
         comp = (await import(`../../../comps/${compInfo.compPath!}`))[compInfo.compName!];
         const {
@@ -175,17 +175,10 @@ export const ThemeCompPanel = (props: any) => {
           const module = await import(`../../../comps/${defaultDataFnPath}.tsx`);
           defaultDataFn = module[defaultDataFnName];
         }
-        const newComp = new comp!({});
-        const compChildrens = newComp.children;
-        const styleChildrenKeys = Object.keys(compChildrens).filter(child => child.toLowerCase().endsWith('style'));
-        let styleChildrens: Record<string, any> = {};
-        styleChildrenKeys.forEach((childKey: string) => {
-          styleChildrens[childKey] = compChildrens[childKey];
-        })
-        setStyleChildrens(styleChildrens);
+        newComp = new comp!({});
       } else {
         comp = compInfo.comp;
-        let newComp = new comp!({
+        newComp = new comp!({
           dispatch: (action) => {
             if (newComp) {
               newComp = newComp.reduce(action);
@@ -193,14 +186,21 @@ export const ThemeCompPanel = (props: any) => {
           },
         }) as any;
         await newComp.load();
+      }
 
-
+      if (newComp) {
         const compChildrens = newComp.children;
-        const styleChildrenKeys = Object.keys(compChildrens).filter(child => child.toLowerCase().endsWith('style') || child.toLowerCase().endsWith('styles'));
+        let styleChildrenKeys = Object.keys(compChildrens).filter(child => child.toLowerCase().endsWith('style'));
         let styleChildrens: Record<string, any> = {};
         styleChildrenKeys.forEach((childKey: string) => {
           styleChildrens[childKey] = compChildrens[childKey];
         })
+        if (compChildrens.container) {
+          styleChildrenKeys = Object.keys(compChildrens.container.children).filter(child => child.toLowerCase().endsWith('style'));
+          styleChildrenKeys.forEach((childKey: string) => {
+            styleChildrens[childKey] = compChildrens.container.children[childKey];
+          })
+        }
         setStyleChildrens(styleChildrens);
       }
   
@@ -277,7 +277,7 @@ export const ThemeCompPanel = (props: any) => {
       <>
         {Object.keys(styleChildrens || {})?.map((styleKey: string) => {
           return (
-            <>
+            <Fragment key={styleKey}>
               <h4>
                 { sectionNames.hasOwnProperty(styleKey)
                   ? sectionNames[styleKey as keyof typeof sectionNames]
@@ -286,12 +286,12 @@ export const ThemeCompPanel = (props: any) => {
               </h4>
               <ThemeSettingsCompStyles
                 styleOptions={Object.keys(styleChildrens?.[styleKey].children)}
-                defaultStyle={theme.components?.[selectedComp] || {}}
+                defaultStyle={{...theme.components?.[selectedComp]?.[styleKey] || {}}}
                 configChange={(params) => {
-                  props.onCompStyleChange(selectedComp, params);
+                  props.onCompStyleChange(selectedComp, styleKey, params);
                 }}
               />
-            </>
+            </Fragment>
           )
         })}
       </>
@@ -304,7 +304,7 @@ export const ThemeCompPanel = (props: any) => {
     return (
       <PreviewApp
         style={{
-          height: "500px",
+          height: "600px",
           minWidth: "auto",
           width: "100%",
         }}
@@ -341,11 +341,9 @@ export const ThemeCompPanel = (props: any) => {
           {compList}
         </PropertySectionContext.Provider>
       </RightPanelContentWrapper>
-      {/* <Divider type="vertical" style={{height: "510px"}}/> */}
       <div style={{flex: "1"}}>
         {appPreview}
       </div>
-      {/* <Divider type="vertical" style={{height: "510px"}}/> */}
       <div style={{
         width: "280px",
         padding: "12px",
diff --git a/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx b/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
index a8d13e36e..7b5e7728c 100644
--- a/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
+++ b/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
@@ -522,13 +522,20 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
               >
                 <ThemeCompPanel
                   theme={this.state.theme}
-                  onCompStyleChange={(compName: string, compStyle: Record<string, string>) => {
+                  onCompStyleChange={(
+                    compName: string,
+                    styleKey: string,
+                    compStyle: Record<string, string>
+                  ) => {
                     this.setState({
                       theme: {
                         ...this.state.theme,
                         components: {
                           ...this.state.theme.components,
-                          [compName]: compStyle,
+                          [compName]: {
+                            ...this.state.theme.components?.[compName],
+                            [styleKey]: compStyle,
+                          }
                         }
                       },
                     });

From bbb7f7a689c3e4bd438e9a031bbf720a353898f1 Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Sat, 8 Jun 2024 03:14:53 +0500
Subject: [PATCH 11/57] Theme: use theme style in candleChartComp

---
 .../comps/candleStickChartComp/candleStickChartComp.tsx  | 3 ++-
 .../comps/candleStickChartComp/candleStickChartUtils.ts  | 9 +++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartComp.tsx b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartComp.tsx
index 3d1750d9c..2d17a36f9 100644
--- a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartComp.tsx
@@ -144,7 +144,8 @@ CandleStickChartTmpComp = withViewFn(CandleStickChartTmpComp, (comp) => {
   const option = useMemo(() => {
     return getEchartsConfig(
       childrenToProps(echartsConfigChildren) as ToViewReturn<typeof echartsConfigChildren>,
-      chartSize
+      chartSize,
+      theme?.theme?.components?.candleStickChart || {},
     );
   }, [chartSize, ...Object.values(echartsConfigChildren)]);
 
diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts
index 00dcb0d2d..3c6611ba9 100644
--- a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts
@@ -12,6 +12,7 @@ import { chartColorPalette, isNumeric, JSONObject, loadScript } from "lowcoder-s
 import { calcXYConfig } from "comps/chartComp/chartConfigs/cartesianAxisConfig";
 import Big from "big.js";
 import { googleMapsApiUrl } from "../chartComp/chartConfigs/chartUrls";
+import { useContext } from "react";
 
 export function transformData(
   originData: JSONObject[],
@@ -128,7 +129,11 @@ export function getSeriesConfig(props: EchartsConfigProps) {
 }
 
 // https://echarts.apache.org/en/option.html
-export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSize): EChartsOptionWithMap {
+export function getEchartsConfig(
+  props: EchartsConfigProps,
+  chartSize?: ChartSize,
+  theme?: any,
+): EChartsOptionWithMap {
   if (props.mode === "json") {
     let opt={
   "title": {
@@ -136,7 +141,7 @@ export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSiz
     'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom',
     "left":"center"
   },
-  "backgroundColor": props?.style?.background,
+  "backgroundColor": props?.style?.background || theme.background,
   "color": props.echartsOption.data?.map(data => data.color),
    "tooltip": props.tooltip&&{
     "trigger": "axis",

From e819e350046fdaa78a87ad07a36e251d6cf92fcd Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Sat, 8 Jun 2024 03:16:27 +0500
Subject: [PATCH 12/57] Theme: use theme styles for comps

---
 .../components/ThemeSettingsCompStyles.tsx    | 108 ++++++++----------
 .../src/comps/controls/styleControl.tsx       |  18 ++-
 .../comps/controls/styleControlConstants.tsx  |   2 +-
 3 files changed, 64 insertions(+), 64 deletions(-)

diff --git a/client/packages/lowcoder/src/components/ThemeSettingsCompStyles.tsx b/client/packages/lowcoder/src/components/ThemeSettingsCompStyles.tsx
index 839a287f8..ca8c295e8 100644
--- a/client/packages/lowcoder/src/components/ThemeSettingsCompStyles.tsx
+++ b/client/packages/lowcoder/src/components/ThemeSettingsCompStyles.tsx
@@ -1,5 +1,4 @@
-import _ from "lodash";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { ConfigItem, Radius, Margin, Padding, GridColumns, BorderWidth, BorderStyle } from "../pages/setting/theme/styledComponents";
 import { isValidColor, toHex } from "components/colorSelect/colorUtils";
 import { ColorSelect } from "components/colorSelect";
@@ -28,6 +27,7 @@ import {
   RotationIcon,
  } from "lowcoder-design/src/icons";
 import { trans } from "i18n";
+import { debounce } from "lodash";
 
 export type configChangeParams = {
   themeSettingKey: string;
@@ -112,28 +112,22 @@ type CompStyleProps = {
 
 export default function ThemeSettingsCompStyles(props: CompStyleProps) {
   const { defaultStyle, styleOptions, configChange } = props;
-  const [compStyle, setCompStyle] = useState(defaultStyle)
-  
-  console.log('defaultStyle', defaultStyle);
+  const [compStyle, setCompStyle] = useState({...defaultStyle});
 
-  const handleChange = (styleKey: string, styleValue: string) => {
-    setCompStyle((style) => {
-      const updateStyles = {
-        ...style,
-        [styleKey]: styleValue,
-      };
+  const updateThemeWithDebounce = useMemo(() => {
+    return debounce((updateStyles) => {
       configChange(updateStyles);
-      return updateStyles;
-    });
-  }
-
-  const configChangeWithDebounce = _.debounce(configChange, 0);
-  const handleChangeWithDebounce = _.debounce(handleChange, 0);
-
-  useEffect(() => {
-    console.log(compStyle);
-  }, [compStyle]);
+    }, 500);
+  }, [configChange]);
 
+  const handleChange = (styleKey: string, styleValue: string) => {
+    const updateStyles = {
+      ...compStyle,
+      [styleKey]: styleValue,
+    };
+    setCompStyle(updateStyles);
+    updateThemeWithDebounce(updateStyles);
+  }
 
   const getLabelByStyle = (styleKey: string) => {
     let label = styleKey;
@@ -189,19 +183,19 @@ export default function ThemeSettingsCompStyles(props: CompStyleProps) {
       case 'radius':
       case 'cardRadius':
       case 'gap': {
-        placeholder = '';
+        placeholder = '2px';
         break;
       }
       case 'borderWidth': {
-        placeholder = '';
+        placeholder = '1px';
         break;
       }
       case 'borderStyle': {
-        placeholder = '';
+        placeholder = 'solid';
         break;
       }
       case 'margin': {
-        placeholder = '';
+        placeholder = '3px';
         break;
       }
       case 'padding':
@@ -209,59 +203,59 @@ export default function ThemeSettingsCompStyles(props: CompStyleProps) {
       case 'containerSiderPadding':
       case 'containerFooterPadding':
       case 'containerBodyPadding': {
-        placeholder = '';
+        placeholder = '3px';
         break;
       }
       case 'opacity': {
-        placeholder = '';
+        placeholder = '1';
         break;
       }
       case 'boxShadowColor': {
-        placeholder = '';
+        placeholder = '#FFFFFF';
         break;
       }
       case 'boxShadow': {
-        placeholder = '';
+        placeholder = '0px 0px 0px';
         break;
       }
       case 'animationIterationCount': {
-        placeholder = '';
+        placeholder = '0';
         break;
       }
       case 'animation': {
-        placeholder = '';
+        placeholder = 'none';
         break;
       }
       case 'animationDelay': {
-        placeholder = '';
+        placeholder = '0s';
         break;
       }
       case 'animationDuration': {
-        placeholder = '';
+        placeholder = '0s';
         break;
       }
       case 'textSize': {
-        placeholder = '';
+        placeholder = '14px';
         break;
       }
       case 'textWeight': {
-        placeholder = '';
+        placeholder = 'normal';
         break;
       }
       case 'fontFamily': {
-        placeholder = '';
+        placeholder = 'sans-serif';
         break;
       }
       case 'textDecoration': {
-        placeholder = '';
+        placeholder = 'none';
         break;
       }
       case 'textTransform': {
-        placeholder = '';
+        placeholder = 'none';
         break;
       }
       case 'fontStyle': {
-        placeholder = '';
+        placeholder = 'normal';
         break;
       }
       case 'backgroundImage':
@@ -273,11 +267,11 @@ export default function ThemeSettingsCompStyles(props: CompStyleProps) {
       case 'backgroundImageRepeat':
       case 'headerBackgroundImageRepeat':
       case 'footerBackgroundImageRepeat': {
-        placeholder = '';
+        placeholder = 'no-repeat';
         break;
       }
       case 'rotation': {
-        placeholder = '';
+        placeholder = '0deg';
         break;
       }
     }
@@ -392,13 +386,16 @@ export default function ThemeSettingsCompStyles(props: CompStyleProps) {
       marginBottom: "16px",
     }}>
       {styleOptions.map((styleKey: string) => (
-        <ConfigItem style={{
-          flexDirection: "row",
-          alignItems: "center",
-          margin: "0",
-          padding: "6px",
-          borderBottom: "1px solid lightgray",
-        }}>
+        <ConfigItem
+          key={styleKey}
+          style={{
+            flexDirection: "row",
+            alignItems: "center",
+            margin: "0",
+            padding: "6px",
+            borderBottom: "1px solid lightgray",
+          }}
+        >
           <div className="text-desc" style={{
             width: "100px",
             minWidth: "auto",
@@ -415,14 +412,13 @@ export default function ThemeSettingsCompStyles(props: CompStyleProps) {
                 //   leading: true,
                 //   trailing: true,
                 // })}
+                changeColor={(value) => handleChange(styleKey, value)}
                 color={compStyle[styleKey]!}
                 trigger="hover"
               />
               <TacoInput
                 value={compStyle[styleKey]}
-                onChange={(e) => {
-                  handleChangeWithDebounce(styleKey, e.target.value);
-                }}
+                onChange={(e) => handleChange(styleKey, e.target.value)}
                 // onChange={(e) => setColor(e.target.value)}
                 // onBlur={colorInputBlur}
                 // onKeyUp={(e) => e.nativeEvent.key === "Enter" && colorInputBlur()}
@@ -437,14 +433,8 @@ export default function ThemeSettingsCompStyles(props: CompStyleProps) {
               {/* </Radius> */}
               <TacoInput
                 placeholder={getPlaceholderByStyle(styleKey)}
-                value={compStyle[styleKey]}
-                onChange={(e) => {
-                  handleChangeWithDebounce(styleKey, e.target.value);
-                  // setCompStyle((style) => ({
-                  //   ...style,
-                  //   [styleKey]: e.target.value,
-                  // }))
-                }}
+                defaultValue={compStyle[styleKey]}
+                onChange={(e) => handleChange(styleKey, e.target.value)}
                 // onBlur={(e) => radiusInputBlur(e.target.value)}
                 // onKeyUp={(e) => e.nativeEvent.key === "Enter" && radiusInputBlur(e.currentTarget.value)}
               />
diff --git a/client/packages/lowcoder/src/comps/controls/styleControl.tsx b/client/packages/lowcoder/src/comps/controls/styleControl.tsx
index c3a4e7df1..33cd46628 100644
--- a/client/packages/lowcoder/src/comps/controls/styleControl.tsx
+++ b/client/packages/lowcoder/src/comps/controls/styleControl.tsx
@@ -80,7 +80,7 @@ import {
 } from "./styleControlConstants";
 import { faTextWidth } from "@fortawesome/free-solid-svg-icons";
 import appSelectControl from "./appSelectControl";
-import { JSONObject } from "@lowcoder-ee/util/jsonTypes";
+import { JSONObject, JSONValue } from "@lowcoder-ee/util/jsonTypes";
 import { CompTypeContext } from "../utils/compTypeContext";
 
 function isSimpleColorConfig(config: SingleColorConfig): config is SimpleColorConfig {
@@ -785,7 +785,10 @@ const ResetIcon = styled(IconReset)`
   }
 `;
 
-export function styleControl<T extends readonly SingleColorConfig[]>(colorConfigs: T) {
+export function styleControl<T extends readonly SingleColorConfig[]>(
+  colorConfigs: T,
+  styleKey: string = '',
+) {
   type ColorMap = { [K in Names<T>]: string };
   const childrenMap: any = {};
   colorConfigs.map((config) => {
@@ -843,12 +846,16 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
       const compType = useContext(CompTypeContext);
       const theme = useContext(ThemeContext);
       const bgColor = useContext(BackgroundColorContext);
+      const compTheme = compType
+        ? theme?.theme?.components?.[compType]?.[styleKey]
+        : undefined;
+
       return calcColors(
         props as ColorMap,
         colorConfigs,
         theme?.theme,
         bgColor,
-        compType ? theme?.theme?.components?.[compType] as unknown as Record<string, string>: undefined,
+        compTheme as Record<string, string> | undefined,
       );
     }
   )
@@ -858,13 +865,16 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
       const compType = useContext(CompTypeContext);
       const bgColor = useContext(BackgroundColorContext);
       const isMobile = useIsMobile();
+      const compTheme = compType
+        ? theme?.theme?.components?.[compType]?.[styleKey]
+        : undefined;
 
       const props = calcColors(
         childrenToProps(children) as ColorMap,
         colorConfigs,
         theme?.theme,
         bgColor,
-        compType ? theme?.theme?.components?.[compType] as unknown as Record<string, string>: undefined,
+        compTheme as Record<string, string> | undefined,
       );
       const showReset = Object.values(childrenToProps(children)).findIndex((item) => item) > -1;
       return (
diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
index 29dfe67f3..13d612007 100644
--- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
+++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -500,7 +500,7 @@ const BORDER = {
 const RADIUS = {
   name: "radius",
   label: trans("style.borderRadius"),
-  radius: "borderRadius",
+  radius: "radius",
 } as const;
 
 const BORDER_WIDTH = {

From 8c17c04efdec6ad9e8f5afaf86389fc5d223d10c Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Sat, 8 Jun 2024 03:17:08 +0500
Subject: [PATCH 13/57] Theme: apply theme styles in textComp

---
 .../lowcoder/src/comps/comps/textComp.tsx     | 29 ++++++++++++++++---
 .../lowcoder/src/comps/utils/themeUtil.ts     | 25 ++++++++++++++++
 2 files changed, 50 insertions(+), 4 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/textComp.tsx b/client/packages/lowcoder/src/comps/comps/textComp.tsx
index c393d7f0a..849da1477 100644
--- a/client/packages/lowcoder/src/comps/comps/textComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textComp.tsx
@@ -6,7 +6,7 @@ import styled, { css } from "styled-components";
 import { AlignCenter } from "lowcoder-design";
 import { AlignLeft } from "lowcoder-design";
 import { AlignRight } from "lowcoder-design";
-import { UICompBuilder } from "../generators";
+import { UICompBuilder, withDefault } from "../generators";
 import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators/withExposing";
 import { markdownCompCss, TacoMarkDown } from "lowcoder-design";
 import { styleControl } from "comps/controls/styleControl";
@@ -18,11 +18,15 @@ import { alignWithJustifyControl } from "comps/controls/alignControl";
 import { MarginControl } from "../controls/marginControl";
 import { PaddingControl } from "../controls/paddingControl";
 
-import React, { useContext } from "react";
+import React, { useContext, useEffect } from "react";
 import { EditorContext } from "comps/editorState";
 import { clickEvent, eventHandlerControl } from "../controls/eventHandlerControl";
 
 const EventOptions = [clickEvent] as const;
+import { ThemeContext } from "../utils/themeContext";
+import { CompTypeContext } from "../utils/compTypeContext";
+import { changeChildAction } from "lowcoder-core";
+import { setInitialCompStyles } from "../utils/themeUtil";
 
 const getStyle = (style: TextStyleType) => {
   return css`
@@ -115,6 +119,7 @@ const typeOptions = [
     value: "text",
   },
 ] as const;
+
 const VerticalAlignmentOptions = [
   { label: <AlignTop />, value: "flex-start" },
   { label: <AlignVerticalCenter />, value: "center" },
@@ -132,13 +137,29 @@ let TextTmpComp = (function () {
     type: dropdownControl(typeOptions, "markdown"),
     horizontalAlignment: alignWithJustifyControl(),
     verticalAlignment: dropdownControl(VerticalAlignmentOptions, "center"),
-    style: styleControl(TextStyle),
+    style: styleControl(TextStyle, 'style'),
     animationStyle: styleControl(AnimationStyle),
     margin: MarginControl,
     padding: PaddingControl,
   };
-  return new UICompBuilder(childrenMap, (props) => {
+  return new UICompBuilder(childrenMap, (props, dispatch) => {
     const value = props.text.value;
+    const theme = useContext(ThemeContext);
+    const compType = useContext(CompTypeContext);
+    const compTheme = theme?.theme?.components?.[compType];
+    const styleProps: Record<string, any> = {};
+    ['style'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []);
+  
     return (
       <TextContainer
         $animationStyle={props.animationStyle}
diff --git a/client/packages/lowcoder/src/comps/utils/themeUtil.ts b/client/packages/lowcoder/src/comps/utils/themeUtil.ts
index 75045a03f..4bace9959 100644
--- a/client/packages/lowcoder/src/comps/utils/themeUtil.ts
+++ b/client/packages/lowcoder/src/comps/utils/themeUtil.ts
@@ -1,6 +1,8 @@
 import { ThemeType } from "api/commonSettingApi";
 import { getLocalThemeId } from "util/localStorageUtil";
 import { getGlobalSettings } from "./globalSettings";
+import { CompAction, multiChangeAction, changeValueAction } from "lowcoder-core";
+import { JSONObject, JSONValue } from "@lowcoder-ee/util/jsonTypes";
 
 export const DEFAULT_THEMEID = "default";
 
@@ -20,3 +22,26 @@ export function getCurrentTheme(themeList: ThemeType[], appThemeId: string) {
       : appThemeId
   );
 }
+
+export function setInitialCompStyles({
+  dispatch,
+  compTheme,
+  styleProps,
+}: {
+  dispatch: (action: CompAction) => void,
+  compTheme?: JSONObject,
+  styleProps: Record<string, any>,
+}) {
+  const styleKeys = Object.keys(styleProps);
+  const actions: Record<string, any> = {};
+  styleKeys.forEach(styleKey => {
+    actions[styleKey] = changeValueAction({
+      ...(compTheme?.[styleKey] as object || {}),
+      ...styleProps[styleKey],
+    }, false);
+  })
+
+  dispatch(
+    multiChangeAction(actions),
+  );
+}
\ No newline at end of file

From 29bff58f9f8c076f1d84a1eb433d1b42278aa7f1 Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Sat, 8 Jun 2024 03:17:20 +0500
Subject: [PATCH 14/57] Theme: apply theme styles in triContainerComp

---
 .../comps/triContainerComp/triContainer.tsx   | 32 ++++++++++++++++++-
 .../triContainerComp/triContainerComp.tsx     | 32 +++++++++++++++----
 2 files changed, 57 insertions(+), 7 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx
index 4f78b5079..f982b2d53 100644
--- a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx
+++ b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx
@@ -36,11 +36,21 @@ const Wrapper = styled.div<{$style: ContainerStyleType; $animationStyle?:Animati
 `;
 
 const HeaderInnerGrid = styled(InnerGrid)<{
-  $backgroundColor: string
+  $backgroundColor: string,
+  $headerBackgroundImage: string;
+  $headerBackgroundImageRepeat: string;
+  $headerBackgroundImageSize: string;
+  $headerBackgroundImagePosition: string;
+  $headerBackgroundImageOrigin: string;
  }>`
   overflow: visible;
   ${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`}
   border-radius: 0;
+  ${(props) => props.$headerBackgroundImage && `background-image: url(${props.$headerBackgroundImage});`}
+  ${(props) => props.$headerBackgroundImageRepeat && `background-repeat: ${props.$headerBackgroundImageRepeat};`}
+  ${(props) => props.$headerBackgroundImageSize && `background-size: ${props.$headerBackgroundImageSize};`}
+  ${(props) => props.$headerBackgroundImagePosition && `background-position: ${props.$headerBackgroundImagePosition};`}
+  ${(props) => props.$headerBackgroundImageOrigin && `background-origin: ${props.$headerBackgroundImageOrigin};`}
 `;
 
 const BodyInnerGrid = styled(InnerGrid)<{
@@ -48,11 +58,21 @@ const BodyInnerGrid = styled(InnerGrid)<{
   $backgroundColor: string;
   $borderColor: string;
   $borderWidth: string;
+  $backgroundImage: string;
+  $backgroundImageRepeat: string;
+  $backgroundImageSize: string;
+  $backgroundImagePosition: string;
+  $backgroundImageOrigin: string;
 }>`
   border-top: ${(props) => `${props.$showBorder ? props.$borderWidth : 0} solid ${props.$borderColor}`};
   flex: 1;
   ${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`}
   border-radius: 0;
+  ${(props) => props.$backgroundImage && `background-image: url(${props.$backgroundImage});`}
+  ${(props) => props.$backgroundImageRepeat && `background-repeat: ${props.$backgroundImageRepeat};`}
+  ${(props) => props.$backgroundImageSize && `background-size: ${props.$backgroundImageSize};`}
+  ${(props) => props.$backgroundImagePosition && `background-position: ${props.$backgroundImagePosition};`}
+  ${(props) => props.$backgroundImageOrigin && `background-origin: ${props.$backgroundImageOrigin};`}
 `;
 
 const FooterInnerGrid = styled(InnerGrid)<{
@@ -118,6 +138,11 @@ export function TriContainer(props: TriContainerProps) {
             containerPadding={[paddingWidth, 3]}
             showName={{ bottom: showBody || showFooter ? 20 : 0 }}
             $backgroundColor={headerStyle?.headerBackground || 'transparent'}
+            $headerBackgroundImage={headerStyle?.headerBackgroundImage}
+            $headerBackgroundImageRepeat={headerStyle?.headerBackgroundImageRepeat}
+            $headerBackgroundImageSize={headerStyle?.headerBackgroundImageSize}
+            $headerBackgroundImagePosition={headerStyle?.headerBackgroundImagePosition}
+            $headerBackgroundImageOrigin={headerStyle?.headerBackgroundImageOrigin}
             style={{padding: headerStyle.containerHeaderPadding}}
 
           />
@@ -140,6 +165,11 @@ export function TriContainer(props: TriContainerProps) {
                 $backgroundColor={bodyStyle?.background || 'transparent'}
                 $borderColor={style?.border}
                 $borderWidth={style?.borderWidth}
+                $backgroundImage={bodyStyle?.backgroundImage}
+                $backgroundImageRepeat={bodyStyle?.backgroundImageRepeat}
+                $backgroundImageSize={bodyStyle?.backgroundImageSize}
+                $backgroundImagePosition={bodyStyle?.backgroundImagePosition}
+                $backgroundImageOrigin={bodyStyle?.backgroundImageOrigin}
                 style={{padding: bodyStyle.containerBodyPadding}}
               />
             </ScrollBar>
diff --git a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainerComp.tsx
index b93e018b4..4b293c335 100644
--- a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainerComp.tsx
@@ -11,10 +11,10 @@ import {
 import { MultiCompBuilder, sameTypeMap, withDefault } from "comps/generators";
 import { migrateOldData } from "comps/generators/simpleGenerators";
 import { NameGenerator } from "comps/utils";
-import { fromRecord, Node } from "lowcoder-core";
+import { changeValueAction, fromRecord, multiChangeAction, Node } from "lowcoder-core";
 import { nodeIsRecord } from "lowcoder-core";
 import _ from "lodash";
-import { ReactNode } from "react";
+import { ReactNode, useContext, useEffect } from "react";
 import { lastValueIfEqual } from "util/objectUtils";
 import {
   CompTree,
@@ -27,6 +27,9 @@ import { SimpleContainerComp } from "../containerBase/simpleContainerComp";
 import { ContainerBodyChildComp } from "./containerBodyChildComp";
 import { trans } from "i18n";
 import { ControlNode } from "lowcoder-design";
+import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
 
 const childrenMap = {
   header: SimpleContainerComp,
@@ -40,15 +43,32 @@ const childrenMap = {
   showFooter: BoolControl,
   autoHeight: AutoHeightControl,
   scrollbars: withDefault(BoolControl, false),
-  style: withDefault(styleControl(ContainerStyle),{borderWidth:'1px'}),
-  headerStyle: styleControl(ContainerHeaderStyle),
-  bodyStyle: styleControl(ContainerBodyStyle),
-  footerStyle: styleControl(ContainerFooterStyle),
+  style: withDefault(styleControl(ContainerStyle, 'style'),{borderWidth:'1px'}),
+  headerStyle: styleControl(ContainerHeaderStyle, 'headerStyle'),
+  bodyStyle: styleControl(ContainerBodyStyle, 'bodyStyle'),
+  footerStyle: styleControl(ContainerFooterStyle, 'footerStyle'),
 };
 
 // Compatible with old style data 2022-8-15
 const TriContainerBaseComp = migrateOldData(
   new MultiCompBuilder(childrenMap, (props, dispatch) => {
+    const theme = useContext(ThemeContext);
+    const compType = useContext(CompTypeContext);
+    const compTheme = theme?.theme?.components?.[compType];
+    // Filter style props from children props
+    const styleProps: Record<string, any> = {};
+    ['style', 'headerStyle', 'bodyStyle', 'footerStyle'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+    // Update comp styles with combination of default style and comp theme style 
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []);
+
     return { ...props, dispatch };
   }).build(),
   fixOldStyleData

From 2e1237478fa0047ffd351647bd043fd46ed60111 Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Sun, 16 Jun 2024 17:51:12 +0500
Subject: [PATCH 15/57] Theme: moved defaultTheme to separate constant file

---
 .../src/components/colorSelect/index.tsx      |  2 +-
 .../comps/containerComp/containerView.tsx     |  2 +-
 .../comps/containerComp/flowContainerView.tsx |  2 +-
 .../comps/comps/gridLayoutComp/canvasView.tsx |  2 +-
 .../moduleContainerComp.tsx                   |  2 +-
 .../comps/controls/styleControlConstants.tsx  | 25 +---------
 .../lowcoder/src/constants/themeConstants.ts  | 48 +++++++++++++++++++
 7 files changed, 54 insertions(+), 29 deletions(-)
 create mode 100644 client/packages/lowcoder/src/constants/themeConstants.ts

diff --git a/client/packages/lowcoder-design/src/components/colorSelect/index.tsx b/client/packages/lowcoder-design/src/components/colorSelect/index.tsx
index 7249ff330..24c091256 100644
--- a/client/packages/lowcoder-design/src/components/colorSelect/index.tsx
+++ b/client/packages/lowcoder-design/src/components/colorSelect/index.tsx
@@ -29,7 +29,7 @@ export const ColorSelect = (props: ColorSelectProps) => {
       dispatch && dispatch(changeValueAction(toHex(rgbaColor), true));
       changeColor && changeColor(toHex(rgbaColor));
     }, 200),
-    [dispatch]
+    [dispatch,changeColor]
   );
   return (
     <Popover
diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx
index 3d9d45f93..1bb216a44 100644
--- a/client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx
@@ -60,7 +60,7 @@ import { ExternalEditorContext } from "util/context/ExternalEditorContext";
 import { selectCompModifierKeyPressed } from "util/keyUtils";
 import { defaultLayout, GridItemComp, GridItemDataType } from "../gridItemComp";
 import { ThemeContext } from "comps/utils/themeContext";
-import { defaultTheme } from "comps/controls/styleControlConstants";
+import { defaultTheme } from "@lowcoder-ee/constants/themeConstants";
 
 const childrenMap = {
   layout: valueComp<Layout>({}),
diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/flowContainerView.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/flowContainerView.tsx
index 5dce4e4d5..71bb7b83d 100644
--- a/client/packages/lowcoder/src/comps/comps/containerComp/flowContainerView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/containerComp/flowContainerView.tsx
@@ -6,8 +6,8 @@ import { CompSelectionWrapper } from "layout/compSelectionWrapper";
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
 import { ThemeContext } from "comps/utils/themeContext";
-import { defaultTheme } from "comps/controls/styleControlConstants";
 import styled from "styled-components";
+import { defaultTheme } from "@lowcoder-ee/constants/themeConstants";
 
 const FlowContainerWrapper = styled.div<{ $bgColor: string; $maxWidth?: number; $minHeight: string }>`
   background-color: ${(props) => props.$bgColor};
diff --git a/client/packages/lowcoder/src/comps/comps/gridLayoutComp/canvasView.tsx b/client/packages/lowcoder/src/comps/comps/gridLayoutComp/canvasView.tsx
index 1a15ba9d3..35f56dca4 100644
--- a/client/packages/lowcoder/src/comps/comps/gridLayoutComp/canvasView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/gridLayoutComp/canvasView.tsx
@@ -15,11 +15,11 @@ import { ExternalEditorContext } from "util/context/ExternalEditorContext";
 import { AppTypeEnum } from "constants/applicationConstants";
 import { EditorContainerPadding, TopHeaderHeight } from "constants/style";
 import { ThemeContext } from "comps/utils/themeContext";
-import { defaultTheme } from "comps/controls/styleControlConstants";
 import { checkIsMobile } from "util/commonUtils";
 import { CanvasContainerID } from "constants/domLocators";
 import { CNRootContainer } from "constants/styleSelectors";
 import { ScrollBar } from "lowcoder-design";
+import { defaultTheme } from "@lowcoder-ee/constants/themeConstants";
 
 // min-height: 100vh;
 
diff --git a/client/packages/lowcoder/src/comps/comps/moduleContainerComp/moduleContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/moduleContainerComp/moduleContainerComp.tsx
index f89cf5cf3..e3dfac6ad 100644
--- a/client/packages/lowcoder/src/comps/comps/moduleContainerComp/moduleContainerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/moduleContainerComp/moduleContainerComp.tsx
@@ -1,4 +1,3 @@
-import { defaultTheme } from "comps/controls/styleControlConstants";
 import { ThemeContext } from "comps/utils/themeContext";
 import { BorderColor } from "constants/style";
 import { HintPlaceHolder } from "lowcoder-design";
@@ -13,6 +12,7 @@ import {
   gridItemCompToGridItems,
   InnerGrid,
 } from "../containerComp/containerView";
+import { defaultTheme } from "@lowcoder-ee/constants/themeConstants";
 
 const StyledInnerGrid = styled(InnerGrid)<ContainerBaseProps & { $bordered: boolean }>`
   border: ${(props) => (!props.$bordered ? "0px" : `1px solid ${BorderColor}`)};
diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
index 13d612007..ee500ffa4 100644
--- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
+++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -2,6 +2,7 @@ import {ThemeDetail} from "api/commonSettingApi";
 import {darkenColor, isDarkColor, lightenColor, toHex} from "lowcoder-design";
 import {trans} from "i18n";
 import {StyleConfigType} from "./styleControl";
+import { defaultTheme } from "@lowcoder-ee/constants/themeConstants";
 
 type SupportPlatform = "pc" | "mobile";
 
@@ -225,30 +226,6 @@ export type SingleColorConfig =
   | BoxShadowColorConfig
   | AnimationIterationCountConfig;
 
-export const defaultTheme: ThemeDetail = {
-  primary: "#3377FF",
-  textDark: "#222222",
-  textLight: "#FFFFFF",
-  canvas: "#F5F5F6",
-  primarySurface: "#FFFFFF",
-  borderColor: "#D7D9E0",
-  borderRadius: "4px",
-  borderWidth: "1px",
-  borderStyle: "solid",
-  margin: "3px",
-  padding: "3px",
-  gridColumns: "24",
-  textSize: "14px",
-  animation: "",
-  animationDelay: "",
-  animationDuration: "",
-  opacity: "1",
-  boxShadow: "",
-  boxShadowColor: "",
-  animationIterationCount: "",
-  components: {},
-};
-
 export const SURFACE_COLOR = "#FFFFFF";
 const SECOND_SURFACE_COLOR = "#D7D9E0";
 const ERROR_COLOR = "#F5222D";
diff --git a/client/packages/lowcoder/src/constants/themeConstants.ts b/client/packages/lowcoder/src/constants/themeConstants.ts
new file mode 100644
index 000000000..21ad85787
--- /dev/null
+++ b/client/packages/lowcoder/src/constants/themeConstants.ts
@@ -0,0 +1,48 @@
+import { ThemeDetail } from "@lowcoder-ee/api/commonSettingApi";
+
+const text = {
+  style: {
+    borderWidth: 0,
+  }
+};
+
+const input = {
+  style: {
+    borderWidth: '0px',
+    background: 'transparent',
+  },
+  labelStyle: {
+    borderWidth: '0px',
+  },
+  inputFieldStyle: {
+    borderWidth: '1px',
+    border: '#D7D9E0'
+  }
+};
+
+export const defaultTheme: ThemeDetail = {
+  primary: "#3377FF",
+  textDark: "#222222",
+  textLight: "#FFFFFF",
+  canvas: "#F5F5F6",
+  primarySurface: "#FFFFFF",
+  border: "#D7D9E0",
+  radius: "4px",
+  borderWidth: "1px",
+  borderStyle: "solid",
+  margin: "3px",
+  padding: "3px",
+  gridColumns: "24",
+  textSize: "14px",
+  animation: "",
+  animationDelay: "",
+  animationDuration: "",
+  opacity: "1",
+  boxShadow: "",
+  boxShadowColor: "",
+  animationIterationCount: "",
+  components: {
+    text,
+    input,
+  },
+};

From ee603b04679416c727c557ba53d44ab45f2d0f4d Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Sun, 16 Jun 2024 18:02:29 +0500
Subject: [PATCH 16/57] Theme: applied theme styles in input comp

---
 .../comps/comps/layout/mobileTabLayout.tsx    |  3 +-
 .../lowcoder/src/comps/comps/rootComp.tsx     |  2 +-
 .../comps/comps/tableComp/tableCompView.tsx   |  2 +-
 .../comps/tableComp/tableToolbarComp.tsx      |  3 +-
 .../lowcoder/src/comps/comps/textComp.tsx     |  5 +--
 .../comps/comps/textInputComp/inputComp.tsx   | 33 +++++++++++++++----
 6 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx b/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx
index 25b93966b..63de78fd3 100644
--- a/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx
+++ b/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx
@@ -20,7 +20,7 @@ import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { dropdownControl } from "@lowcoder-ee/comps/controls/dropdownControl";
 import { DataOption, DataOptionType, ModeOptions, menuItemStyleOptions, mobileNavJsonMenuItems } from "./navLayoutConstants";
 import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
-import { NavLayoutItemActiveStyle, NavLayoutItemActiveStyleType, NavLayoutItemHoverStyle, NavLayoutItemHoverStyleType, NavLayoutItemStyle, NavLayoutItemStyleType, NavLayoutStyle, NavLayoutStyleType, defaultTheme } from "@lowcoder-ee/comps/controls/styleControlConstants";
+import { NavLayoutItemActiveStyle, NavLayoutItemActiveStyleType, NavLayoutItemHoverStyle, NavLayoutItemHoverStyleType, NavLayoutItemStyle, NavLayoutItemStyleType, NavLayoutStyle, NavLayoutStyleType } from "@lowcoder-ee/comps/controls/styleControlConstants";
 import Segmented from "antd/es/segmented";
 import { controlItem } from "components/control";
 import { check } from "@lowcoder-ee/util/convertUtils";
@@ -32,6 +32,7 @@ import { AlignLeft } from "lowcoder-design";
 import { AlignRight } from "lowcoder-design";
 import { LayoutActionComp } from "./layoutActionComp";
 import { clickEvent, eventHandlerControl } from "@lowcoder-ee/index.sdk";
+import { defaultTheme } from "@lowcoder-ee/constants/themeConstants";
 
 const TabBar = React.lazy(() => import("antd-mobile/es/components/tab-bar"));
 const TabBarItem = React.lazy(() =>
diff --git a/client/packages/lowcoder/src/comps/comps/rootComp.tsx b/client/packages/lowcoder/src/comps/comps/rootComp.tsx
index b0db715ee..c39f340b8 100644
--- a/client/packages/lowcoder/src/comps/comps/rootComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/rootComp.tsx
@@ -17,7 +17,7 @@ import { TransformerListComp } from "./transformerListComp";
 import UIComp from "./uiComp";
 import { ThemeContext } from "comps/utils/themeContext";
 import { ModuleLayoutCompName } from "constants/compConstants";
-import { defaultTheme as localDefaultTheme } from "comps/controls/styleControlConstants";
+import { defaultTheme as localDefaultTheme } from "constants/themeConstants";
 import { ModuleLoading } from "components/ModuleLoading";
 import EditorSkeletonView from "pages/editor/editorSkeletonView";
 import { getGlobalSettings } from "comps/utils/globalSettings";
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
index c442413d0..23bf44bfe 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
@@ -13,7 +13,6 @@ import {
   supportChildrenTree,
 } from "comps/comps/tableComp/tableUtils";
 import {
-  defaultTheme,
   handleToHoverRow,
   handleToSelectedRow,
   TableColumnLinkStyleType,
@@ -41,6 +40,7 @@ import { EmptyContent } from "pages/common/styledComponent";
 import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
 import { ReactRef, ResizeHandleAxis } from "layout/gridLayoutPropTypes";
 import { CellColorViewType } from "./column/tableColumnComp";
+import { defaultTheme } from "@lowcoder-ee/constants/themeConstants";
 
 
 function genLinerGradient(color: string) {
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableToolbarComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableToolbarComp.tsx
index ee68b9b1b..742734052 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tableToolbarComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableToolbarComp.tsx
@@ -7,7 +7,7 @@ import { TableOnEventView } from "comps/comps/tableComp/tableTypes";
 import { BoolControl } from "comps/controls/boolControl";
 import { StringControl } from "comps/controls/codeControl";
 import { dropdownControl } from "comps/controls/dropdownControl";
-import { defaultTheme, TableToolbarStyleType } from "comps/controls/styleControlConstants";
+import { TableToolbarStyleType } from "comps/controls/styleControlConstants";
 import { stateComp } from "comps/generators";
 import { genRandomKey } from "comps/utils/idGenerator";
 import { ThemeContext } from "comps/utils/themeContext";
@@ -38,6 +38,7 @@ import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
 import styled, { css } from "styled-components";
 import { JSONValue } from "util/jsonTypes";
 import { ControlNodeCompBuilder } from "comps/generators/controlCompBuilder";
+import { defaultTheme } from "@lowcoder-ee/constants/themeConstants";
 
 const SaveChangeButtons = styled.div`
   display: flex;
diff --git a/client/packages/lowcoder/src/comps/comps/textComp.tsx b/client/packages/lowcoder/src/comps/comps/textComp.tsx
index 849da1477..09c4c7b65 100644
--- a/client/packages/lowcoder/src/comps/comps/textComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textComp.tsx
@@ -138,7 +138,7 @@ let TextTmpComp = (function () {
     horizontalAlignment: alignWithJustifyControl(),
     verticalAlignment: dropdownControl(VerticalAlignmentOptions, "center"),
     style: styleControl(TextStyle, 'style'),
-    animationStyle: styleControl(AnimationStyle),
+    animationStyle: styleControl(AnimationStyle, 'animationStyle'),
     margin: MarginControl,
     padding: PaddingControl,
   };
@@ -147,8 +147,9 @@ let TextTmpComp = (function () {
     const theme = useContext(ThemeContext);
     const compType = useContext(CompTypeContext);
     const compTheme = theme?.theme?.components?.[compType];
+  
     const styleProps: Record<string, any> = {};
-    ['style'].forEach((key: string) => {
+    ['style', 'animationStyle'].forEach((key: string) => {
       styleProps[key] = (props as any)[key];
     });
 
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx
index 46092e6d6..00c3b7612 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx
@@ -33,8 +33,11 @@ import { InputRef } from "antd/es/input";
 import { RefControl } from "comps/controls/refControl";
 import { migrateOldData, withDefault } from "comps/generators/simpleGenerators";
 
-import React, { useContext } from "react";
+import React, { useContext, useEffect } from "react";
 import { EditorContext } from "comps/editorState";
+import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
 
 /**
  * Input Comp
@@ -51,16 +54,34 @@ const childrenMap = {
   viewRef: RefControl<InputRef>,
   showCount: BoolControl,
   allowClear: BoolControl,
-  style: withDefault(styleControl(InputFieldStyle),{background:'transparent'}) , 
-  labelStyle:styleControl(LabelStyle), 
+  style: styleControl(InputFieldStyle, 'style'), 
+  labelStyle:styleControl(LabelStyle, 'labelStyle'), 
   prefixIcon: IconControl,
   suffixIcon: IconControl,
-  inputFieldStyle:withDefault(styleControl(InputLikeStyle),{borderWidth: '1px'}) ,
-  animationStyle: styleControl(AnimationStyle),
+  inputFieldStyle: styleControl(InputLikeStyle, 'inputFieldStyle') ,
+  animationStyle: styleControl(AnimationStyle, 'animationStyle'),
 };
 
-let InputBasicComp = new UICompBuilder(childrenMap, (props) => {
+let InputBasicComp = new UICompBuilder(childrenMap, (props, dispatch) => {
   const [inputProps, validateState] = useTextInputProps(props);
+
+  const theme = useContext(ThemeContext);
+  const compType = useContext(CompTypeContext);
+  const compTheme = theme?.theme?.components?.[compType];
+
+  const styleProps: Record<string, any> = {};
+  ['style', 'labelStyle', 'inputFieldStyle', 'animationStyle'].forEach((key: string) => {
+    styleProps[key] = (props as any)[key];
+  });
+
+  useEffect(() => {
+    setInitialCompStyles({
+      dispatch,
+      compTheme,
+      styleProps,
+    });
+  }, []);
+
   return props.label({
     required: props.required,
     children: (

From e4b5ddc65d8e15f1d7a0f580d4ed709d0863a86e Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Sun, 16 Jun 2024 18:04:19 +0500
Subject: [PATCH 17/57] Theme: update styleControls to handle comp theme styles

---
 .../lowcoder/src/comps/controls/styleControl.tsx      | 11 ++++++++++-
 .../src/pages/setting/theme/ThemeCompPanel.tsx        | 10 +++++-----
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/controls/styleControl.tsx b/client/packages/lowcoder/src/comps/controls/styleControl.tsx
index 33cd46628..9622d881e 100644
--- a/client/packages/lowcoder/src/comps/controls/styleControl.tsx
+++ b/client/packages/lowcoder/src/comps/controls/styleControl.tsx
@@ -36,7 +36,6 @@ import { useIsMobile } from "util/hooks";
 import { CSSCodeControl, ObjectControl, RadiusControl, StringControl } from "./codeControl";
 import { ColorControl } from "./colorControl";
 import {
-  defaultTheme,
   DepColorConfig,
   DEP_TYPE,
   RadiusConfig,
@@ -82,6 +81,7 @@ import { faTextWidth } from "@fortawesome/free-solid-svg-icons";
 import appSelectControl from "./appSelectControl";
 import { JSONObject, JSONValue } from "@lowcoder-ee/util/jsonTypes";
 import { CompTypeContext } from "../utils/compTypeContext";
+import { defaultTheme } from "@lowcoder-ee/constants/themeConstants";
 
 function isSimpleColorConfig(config: SingleColorConfig): config is SimpleColorConfig {
   return config.hasOwnProperty("color");
@@ -357,6 +357,7 @@ function calcColors<ColorMap extends Record<string, string>>(
 ) {
   let themeWithDefault = (theme || defaultTheme) as unknown as Record<string, string>;
   themeWithDefault = {...themeWithDefault, ...(compTheme || {})};
+
   // Cover what is not there for the first pass
   let res: Record<string, string> = {};
   colorConfigs.forEach((config) => {
@@ -628,6 +629,10 @@ function calcColors<ColorMap extends Record<string, string>>(
     }
     if (isDepColorConfig(config)) {
       if (config.depType && config.depType === DEP_TYPE.CONTRAST_TEXT) {
+        if (compTheme?.[name]) {
+          res[name] = compTheme[name];
+          return;
+        }
         // bgColor is the background color of the container component, equivalent to canvas
         let depKey = config.depName ? res[config.depName] : themeWithDefault[config.depTheme!];
         if (bgColor && config.depTheme === "canvas") {
@@ -640,12 +645,16 @@ function calcColors<ColorMap extends Record<string, string>>(
         );
       } else if (config?.depType === DEP_TYPE.SELF && config.depTheme === "canvas" && bgColor) {
         res[name] = bgColor;
+      } else if ((config?.depType || config?.depName) && compTheme?.[name]) {
+        res[name] = compTheme[name];
       } else {
         const rest = [];
         config.depName && rest.push(res[config.depName]);
         config.depTheme && rest.push(themeWithDefault[config.depTheme]);
         res[name] = config.transformer(rest[0], rest[1]);
       }
+    } else {
+      res[name] = themeWithDefault[config.name]
     }
   });
   return res as ColorMap;
diff --git a/client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx b/client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx
index 45fefc9bb..e9fc36ac4 100644
--- a/client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx
+++ b/client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx
@@ -314,11 +314,11 @@ export const ThemeCompPanel = (props: any) => {
     );
   }, [appDsl, theme]);
 
-  if(!compList.length) return (
-    <RightPanelContentWrapper>
-      <EmptyCompContent />
-    </RightPanelContentWrapper>
-  )
+  // if(!compList.length) return (
+  //   <RightPanelContentWrapper>
+  //     <EmptyCompContent />
+  //   </RightPanelContentWrapper>
+  // )
 
   return (
     <Flex style={{

From 04848bae1c2235142d4af8db71fea033be178faf Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Sun, 16 Jun 2024 20:29:19 +0500
Subject: [PATCH 18/57] Theme: apply theme styles on table comp

---
 .../comps/comps/tableComp/tableCompView.tsx   | 23 ++++++++++++++++++-
 .../src/comps/comps/tableComp/tableTypes.tsx  | 10 ++++----
 .../src/comps/controls/styleControl.tsx       |  8 +++++--
 .../comps/controls/styleControlConstants.tsx  |  2 +-
 .../lowcoder/src/constants/themeConstants.ts  | 17 ++++++++++++++
 .../pages/setting/theme/ThemeCompPanel.tsx    |  3 ++-
 6 files changed, 53 insertions(+), 10 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
index 23bf44bfe..59a748dad 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
@@ -41,6 +41,10 @@ import { messageInstance } from "lowcoder-design/src/components/GlobalInstances"
 import { ReactRef, ResizeHandleAxis } from "layout/gridLayoutPropTypes";
 import { CellColorViewType } from "./column/tableColumnComp";
 import { defaultTheme } from "@lowcoder-ee/constants/themeConstants";
+import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
+import { childrenToProps } from "@lowcoder-ee/comps/generators/multi";
 
 
 function genLinerGradient(color: string) {
@@ -345,7 +349,6 @@ const TableTd = styled.td<{
   background: ${(props) => props.$background} !important;
   border-color: ${(props) => props.$style.border} !important;
   border-radius: ${(props) => props.$style.radius};
-
   padding: 0 !important;
 
   > div {
@@ -775,6 +778,24 @@ export function TableCompView(props: {
     };
   }, [pagination, data]);
 
+  const childrenProps = childrenToProps(comp.children);
+  const theme = useContext(ThemeContext);
+  const compType = useContext(CompTypeContext);
+  const compTheme = theme?.theme?.components?.[compType];
+
+  const styleProps: Record<string, any> = {};
+  ['style', 'rowStyle', 'toolbarStyle', 'headerStyle', 'columnsStyle'].forEach((key: string) => {
+    styleProps[key] = (childrenProps as any)[key];
+  });
+
+  useEffect(() => {
+    setInitialCompStyles({
+      dispatch: comp.dispatch,
+      compTheme,
+      styleProps,
+    });
+  }, []);
+
   const handleChangeEvent = useCallback(
     (eventName: TableEventOptionValues) => {
       if (eventName === "saveChanges" && !compChildren.onEvent.isBind(eventName)) {
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx
index 78347b271..bc59934db 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx
@@ -205,12 +205,12 @@ const tableChildrenMap = {
   pagination: PaginationControl,
   sort: valueComp<Array<SortValue>>([]),
   toolbar: TableToolbarComp,
-  style: withDefault(styleControl(TableStyle), {borderWidth: '1px'}),
-  rowStyle: withDefault(styleControl(TableRowStyle),{ borderWidth: '1px'}),
-  toolbarStyle: styleControl(TableToolbarStyle),
-  headerStyle:withDefault(styleControl(TableHeaderStyle), {borderWidth: '1px'}),
+  style: styleControl(TableStyle, 'style'),
+  rowStyle: styleControl(TableRowStyle, 'rowStyle'),
+  toolbarStyle: styleControl(TableToolbarStyle, 'toolbarStyle'),
+  headerStyle: styleControl(TableHeaderStyle, 'headerStyle'),
   searchText: StringControl,
-  columnsStyle: withDefault(styleControl(TableColumnStyle), {radius:'0px'}),
+  columnsStyle: styleControl(TableColumnStyle, 'columnsStyle'),
   viewModeResizable: BoolControl,
   visibleResizables: BoolControl,
   // sample data for regenerating columns
diff --git a/client/packages/lowcoder/src/comps/controls/styleControl.tsx b/client/packages/lowcoder/src/comps/controls/styleControl.tsx
index 9622d881e..4a2408a2b 100644
--- a/client/packages/lowcoder/src/comps/controls/styleControl.tsx
+++ b/client/packages/lowcoder/src/comps/controls/styleControl.tsx
@@ -355,8 +355,12 @@ function calcColors<ColorMap extends Record<string, string>>(
   bgColor?: string,
   compTheme?: Record<string, string>,
 ) {
-  let themeWithDefault = (theme || defaultTheme) as unknown as Record<string, string>;
-  themeWithDefault = {...themeWithDefault, ...(compTheme || {})};
+  // let themeWithDefault = (theme || defaultTheme) as unknown as Record<string, string>;
+  let themeWithDefault = {
+    ...defaultTheme,
+    ...(theme || {}),
+    ...(compTheme || {}),
+  } as unknown as Record<string, string>;
 
   // Cover what is not there for the first pass
   let res: Record<string, string> = {};
diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
index ee500ffa4..e32d45ec8 100644
--- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
+++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -241,7 +241,7 @@ export function contrastText(
   textDark: string,
   textLight: string
 ) {
-  return isDarkColor(color) && color !== "#00000000" ? textLight : textDark;
+  return color && isDarkColor(color) && color !== "#00000000" ? textLight : textDark;
 }
 
 // return similar background color
diff --git a/client/packages/lowcoder/src/constants/themeConstants.ts b/client/packages/lowcoder/src/constants/themeConstants.ts
index 21ad85787..945af71e5 100644
--- a/client/packages/lowcoder/src/constants/themeConstants.ts
+++ b/client/packages/lowcoder/src/constants/themeConstants.ts
@@ -20,6 +20,21 @@ const input = {
   }
 };
 
+const table = {
+  style: {
+    borderWidth: '1px'
+  },
+  rowStyle: {
+    borderWidth: '1px'
+  },
+  headerStyle: {
+    borderWidth: '1px'
+  },
+  columnsStyle: {
+    radius: '0px'
+  }
+}
+
 export const defaultTheme: ThemeDetail = {
   primary: "#3377FF",
   textDark: "#222222",
@@ -34,6 +49,7 @@ export const defaultTheme: ThemeDetail = {
   padding: "3px",
   gridColumns: "24",
   textSize: "14px",
+  text: "#222222",
   animation: "",
   animationDelay: "",
   animationDuration: "",
@@ -44,5 +60,6 @@ export const defaultTheme: ThemeDetail = {
   components: {
     text,
     input,
+    table,
   },
 };
diff --git a/client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx b/client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx
index e9fc36ac4..537730571 100644
--- a/client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx
+++ b/client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx
@@ -30,6 +30,7 @@ import ThemeSettingsCompStyles from "components/ThemeSettingsCompStyles";
 import { JSONObject } from "util/jsonTypes";
 import PreviewApp from "components/PreviewApp";
 import { parseCompType } from "comps/utils/remote";
+import { defaultTheme } from "@lowcoder-ee/constants/themeConstants";
 
 const CompDiv = styled.div`
   display: flex;
@@ -308,7 +309,7 @@ export const ThemeCompPanel = (props: any) => {
           minWidth: "auto",
           width: "100%",
         }}
-        theme={theme}
+        theme={{...defaultTheme, ...theme}}
         dsl={appDsl}
       />
     );

From b8d44e5145168000cc670414bc467cc0d1cb4831 Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Sun, 16 Jun 2024 20:48:34 +0500
Subject: [PATCH 19/57] Theme: apply theme styles in list/grid view

---
 .../src/comps/comps/listViewComp/listView.tsx | 27 +++++++++++++++++--
 .../comps/comps/listViewComp/listViewComp.tsx |  4 +--
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx b/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx
index d2341d262..fd05024af 100644
--- a/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx
@@ -4,7 +4,7 @@ import { BackgroundColorContext } from "comps/utils/backgroundColorContext";
 import _ from "lodash";
 import { ConstructorToView, deferAction } from "lowcoder-core";
 import { HintPlaceHolder, ScrollBar, pageItemRender } from "lowcoder-design";
-import { RefObject, useContext, createContext, useMemo, useRef } from "react";
+import { RefObject, useContext, createContext, useMemo, useRef, useEffect } from "react";
 import ReactResizeDetector from "react-resize-detector";
 import styled from "styled-components";
 import { checkIsMobile } from "util/commonUtils";
@@ -18,7 +18,11 @@ import {
 import { ContextContainerComp } from "./contextContainerComp";
 import { ListViewImplComp } from "./listViewComp";
 import { getCurrentItemParams, getData } from "./listViewUtils";
-import { AnimationStyleType } from "@lowcoder-ee/comps/controls/styleControlConstants";
+import { AnimationStyleType } from "@lowcoder-ee/index.sdk";
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
+import { childrenToProps } from "@lowcoder-ee/comps/generators/multi";
 
 const ListViewWrapper = styled.div<{ $style: any; $paddingWidth: string,$animationStyle:AnimationStyleType }>`
   height: 100%;
@@ -274,6 +278,25 @@ export function ListView(props: Props) {
   const maxWidth = editorState.getAppSettings().maxWidth;
   const isMobile = checkIsMobile(maxWidth);
   const paddingWidth = isMobile ? "4px" : "16px";
+
+  const childrenProps = childrenToProps(comp.children);
+  const theme = useContext(ThemeContext);
+  const compType = useContext(CompTypeContext);
+  const compTheme = theme?.theme?.components?.[compType];
+
+  const styleProps: Record<string, any> = {};
+  ['style', 'animationStyle'].forEach((key: string) => {
+    styleProps[key] = (childrenProps as any)[key];
+  });
+
+  useEffect(() => {
+    setInitialCompStyles({
+      dispatch: comp.dispatch,
+      compTheme,
+      styleProps,
+    });
+  }, []);
+
   // log.debug("renders: ", renders);
   return (
     <BackgroundColorContext.Provider value={style.background}>
diff --git a/client/packages/lowcoder/src/comps/comps/listViewComp/listViewComp.tsx b/client/packages/lowcoder/src/comps/comps/listViewComp/listViewComp.tsx
index 055e1a113..b018bcbdd 100644
--- a/client/packages/lowcoder/src/comps/comps/listViewComp/listViewComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/listViewComp/listViewComp.tsx
@@ -52,8 +52,8 @@ const childrenMap = {
   scrollbars: withDefault(BoolControl, false),
   showBorder: BoolControl,
   pagination: withDefault(PaginationControl, { pageSize: "6" }),
-  style: styleControl(ListViewStyle),
-  animationStyle: styleControl(AnimationStyle),
+  style: styleControl(ListViewStyle, 'style'),
+  animationStyle: styleControl(AnimationStyle, 'animationStyle'),
   horizontal: withDefault(BoolControl, false),
   minHorizontalWidth: withDefault(RadiusControl, '100px'),
 };

From 5c413c02413157c01d13b5fc8dcedd6137dcdd38 Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Mon, 17 Jun 2024 00:15:12 +0500
Subject: [PATCH 20/57] Theme: apply theme styles on link comp

---
 .../src/comps/comps/buttonComp/linkComp.tsx   | 28 ++++++++++++++++---
 .../src/comps/controls/styleControl.tsx       |  5 +++-
 .../lowcoder/src/constants/themeConstants.ts  |  8 ++++++
 3 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx
index bd3765681..8d2e6c74f 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx
@@ -21,7 +21,10 @@ import { hasIcon } from "comps/utils";
 import { RefControl } from "comps/controls/refControl";
 
 import { EditorContext } from "comps/editorState";
-import React, { useContext } from "react";
+import React, { useContext, useEffect } from "react";
+import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
 
 const Link = styled(Button)<{
   $style: LinkStyleType;
@@ -85,13 +88,30 @@ const LinkTmpComp = (function () {
     onEvent: ButtonEventHandlerControl,
     disabled: BoolCodeControl,
     loading: BoolCodeControl,
-    style: migrateOldData(styleControl(LinkStyle), fixOldData),
-    animationStyle:styleControl(AnimationStyle),
+    style: migrateOldData(styleControl(LinkStyle, 'style'), fixOldData),
+    animationStyle: styleControl(AnimationStyle, 'animationStyle'),
     prefixIcon: IconControl,
     suffixIcon: IconControl,
     viewRef: RefControl<HTMLElement>,
   };
-  return new UICompBuilder(childrenMap, (props) => {
+  return new UICompBuilder(childrenMap, (props, dispatch) => {
+    const theme = useContext(ThemeContext);
+    const compType = useContext(CompTypeContext);
+    const compTheme = theme?.theme?.components?.[compType];
+
+    const styleProps: Record<string, any> = {};
+    ['style', 'animationStyle'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []);
+
     // chrome86 bug: button children should not contain only empty span
     const hasChildren = hasIcon(props.prefixIcon) || !!props.text || hasIcon(props.suffixIcon);
     return (
diff --git a/client/packages/lowcoder/src/comps/controls/styleControl.tsx b/client/packages/lowcoder/src/comps/controls/styleControl.tsx
index 4a2408a2b..48a4b9c0b 100644
--- a/client/packages/lowcoder/src/comps/controls/styleControl.tsx
+++ b/client/packages/lowcoder/src/comps/controls/styleControl.tsx
@@ -860,7 +860,10 @@ export function styleControl<T extends readonly SingleColorConfig[]>(
       const theme = useContext(ThemeContext);
       const bgColor = useContext(BackgroundColorContext);
       const compTheme = compType
-        ? theme?.theme?.components?.[compType]?.[styleKey]
+        ? {
+            ...(defaultTheme.components?.[compType]?.[styleKey] || {}) as unknown as Record<string, string>,
+            ...(theme?.theme?.components?.[compType]?.[styleKey] || {}) as unknown as Record<string, string>
+          }
         : undefined;
 
       return calcColors(
diff --git a/client/packages/lowcoder/src/constants/themeConstants.ts b/client/packages/lowcoder/src/constants/themeConstants.ts
index 945af71e5..ac374eb15 100644
--- a/client/packages/lowcoder/src/constants/themeConstants.ts
+++ b/client/packages/lowcoder/src/constants/themeConstants.ts
@@ -35,6 +35,13 @@ const table = {
   }
 }
 
+const link = {
+  style: {
+    borderWidth: '0px',
+    background: 'transparent',
+  }
+}
+
 export const defaultTheme: ThemeDetail = {
   primary: "#3377FF",
   textDark: "#222222",
@@ -61,5 +68,6 @@ export const defaultTheme: ThemeDetail = {
     text,
     input,
     table,
+    link,
   },
 };

From e659877ad9ff678c3aca95a249e8b50453577e99 Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Mon, 17 Jun 2024 00:34:22 +0500
Subject: [PATCH 21/57] Theme: apply theme styles in rating comp

---
 .../lowcoder/src/comps/comps/ratingComp.tsx   | 33 +++++++++++++++----
 .../lowcoder/src/constants/themeConstants.ts  | 14 ++++++++
 2 files changed, 41 insertions(+), 6 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/ratingComp.tsx b/client/packages/lowcoder/src/comps/comps/ratingComp.tsx
index 793cf67c2..d8b83d9dd 100644
--- a/client/packages/lowcoder/src/comps/comps/ratingComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/ratingComp.tsx
@@ -17,6 +17,10 @@ import { trans } from "i18n";
 
 import { useContext, useEffect, useRef } from "react";
 import { EditorContext } from "comps/editorState";
+import { CompTypeContext } from "../utils/compTypeContext";
+import { ThemeContext } from "../utils/themeContext";
+import { setInitialCompStyles } from "../utils/themeUtil";
+
 
 const EventOptions = [changeEvent] as const;
 
@@ -43,20 +47,37 @@ const RatingBasicComp = (function () {
     allowHalf: BoolControl,
     disabled: BoolCodeControl,
     onEvent: eventHandlerControl(EventOptions),
-    style: withDefault(styleControl(InputFieldStyle),{background:'transparent'}) , 
-    animationStyle: styleControl(AnimationStyle),
+    style: styleControl(InputFieldStyle, 'style') , 
+    animationStyle: styleControl(AnimationStyle, 'animationStyle'),
     labelStyle: styleControl(
       LabelStyle.filter(
         (style) => ['accent', 'validate'].includes(style.name) === false
-      )
+      ),
+      'labelStyle',
     ),
-    inputFieldStyle: migrateOldData(styleControl(RatingStyle), fixOldData),
+    inputFieldStyle: migrateOldData(styleControl(RatingStyle, 'inputFieldStyle'), fixOldData),
     ...formDataChildren,
   };
-  return new UICompBuilder(childrenMap, (props) => {
+  return new UICompBuilder(childrenMap, (props, dispatch) => {
     const defaultValue = { ...props.defaultValue }.value;
     const value = { ...props.value }.value;
-    const changeRef = useRef(false)
+    const changeRef = useRef(false);
+    const theme = useContext(ThemeContext);
+    const compType = useContext(CompTypeContext);
+    const compTheme = theme?.theme?.components?.[compType];
+  
+    const styleProps: Record<string, any> = {};
+    ['style', 'animationStyle', 'labelStyle', 'inputFieldStyle'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []);
 
     useEffect(() => {
       props.value.onChange(defaultValue);
diff --git a/client/packages/lowcoder/src/constants/themeConstants.ts b/client/packages/lowcoder/src/constants/themeConstants.ts
index ac374eb15..f5815d6a9 100644
--- a/client/packages/lowcoder/src/constants/themeConstants.ts
+++ b/client/packages/lowcoder/src/constants/themeConstants.ts
@@ -42,6 +42,19 @@ const link = {
   }
 }
 
+const rating = {
+  style: {
+    background: 'transparent',
+    borderWidth: '0px',
+  },
+  labelStyle: {
+    borderWidth: '0px',
+  },
+  inputFieldStyle: {
+    borderWidth: '0px',
+  }
+}
+
 export const defaultTheme: ThemeDetail = {
   primary: "#3377FF",
   textDark: "#222222",
@@ -69,5 +82,6 @@ export const defaultTheme: ThemeDetail = {
     input,
     table,
     link,
+    rating,
   },
 };

From 5bf8a7bb6f319ec331a70770078df3744a965381 Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Mon, 17 Jun 2024 01:17:52 +0500
Subject: [PATCH 22/57] fixed imported dependencies path

---
 .../src/comps/comps/buttonComp/buttonComp.tsx |  2 +-
 .../comps/comps/buttonComp/dropdownComp.tsx   |  1 -
 .../comps/containerComp/containerComp.tsx     |  2 +-
 .../comps/containerComp/pageLayoutComp.tsx    |  2 +-
 .../src/comps/comps/customComp/customComp.tsx |  2 +-
 .../src/comps/comps/formComp/formComp.tsx     |  2 +-
 .../comps/comps/jsonComp/jsonExplorerComp.tsx |  4 +--
 .../src/comps/comps/listViewComp/listView.tsx |  2 +-
 .../src/comps/comps/progressCircleComp.tsx    | 28 ++++++++++++++++---
 .../lowcoder/src/comps/comps/progressComp.tsx | 28 ++++++++++++++++---
 .../selectInputComp/radioCompConstants.tsx    |  4 +--
 11 files changed, 58 insertions(+), 19 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx
index 044b0be05..76baa23ba 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx
@@ -131,7 +131,7 @@ const ButtonTmpComp = (function () {
     prefixIcon: IconControl,
     suffixIcon: IconControl,
     style: ButtonStyleControl,
-    animationStyle:styleControl(AnimationStyle),
+    animationStyle: styleControl(AnimationStyle),
     viewRef: RefControl<HTMLElement>,
   };
   return new UICompBuilder(childrenMap, (props) => (
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx
index 6ef87e091..f1a315b55 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx
@@ -23,7 +23,6 @@ import {
 } from "./buttonCompConstants";
 import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
 
-
 const StyledDropdownButton = styled(DropdownButton)`
   width: 100%;
   
diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx
index 3c316e38c..63d074053 100644
--- a/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx
@@ -16,8 +16,8 @@ import { BoolCodeControl } from "comps/controls/codeControl";
 import { DisabledContext } from "comps/generators/uiCompBuilder";
 import React, { useContext } from "react";
 import { EditorContext } from "comps/editorState";
-import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
 import { AnimationStyle } from "@lowcoder-ee/comps/controls/styleControlConstants";
+import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
 
 export const ContainerBaseComp = (function () {
   const childrenMap = {
diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx
index ed3bc954a..982e288e9 100644
--- a/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx
@@ -18,8 +18,8 @@ import {
   ContainerCompBuilder,
 } from "../pageLayoutComp/pageLayoutCompBuilder";
 import { PageLayout } from "../pageLayoutComp/pageLayout";
-import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
 import { AnimationStyle } from "@lowcoder-ee/comps/controls/styleControlConstants";
+import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
 
 export const ContainerBaseComp = (function () {
   const childrenMap = {
diff --git a/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx b/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx
index 23858d1a2..23874777f 100644
--- a/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx
@@ -219,7 +219,7 @@ function InnerCustomComponent(props: IProps) {
 const childrenMap = {
   model: jsonObjectStateControl(defaultModel),
   code: withDefault(StringControl, defaultCode),
-  style:styleControl(CustomStyle),
+  style: styleControl(CustomStyle),
   animationStyle:styleControl(AnimationStyle),
 };
 
diff --git a/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx b/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx
index 057b78705..70949396c 100644
--- a/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx
@@ -80,7 +80,7 @@ const childrenMap = {
   disableSubmit: BoolCodeControl,
   loading: BoolCodeControl,
   onEvent: eventHandlerControl(eventOptions),
-  animationStyle:styleControl(AnimationStyle)
+  animationStyle: styleControl(AnimationStyle)
 };
 
 type FormProps = TriContainerViewProps &
diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx
index 05e95eb5b..d6d6ddc38 100644
--- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx
@@ -11,8 +11,8 @@ import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { EditorContext } from "comps/editorState";
 import { useContext } from "react";
-import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
 import { AnimationStyle, AnimationStyleType } from "@lowcoder-ee/comps/controls/styleControlConstants";
+import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
 
 /**
  * JsonExplorer Comp
@@ -55,7 +55,7 @@ let JsonExplorerTmpComp = (function () {
     indent: withDefault(NumberControl, 4),
     expandToggle: BoolControl.DEFAULT_TRUE,
     theme: dropdownControl(themeOptions, 'shapeshifter:inverted'),
-    animationStyle:styleControl(AnimationStyle),
+    animationStyle: styleControl(AnimationStyle),
   };
   return new UICompBuilder(childrenMap, (props) => (
     <JsonExplorerContainer
diff --git a/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx b/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx
index fd05024af..a58b62944 100644
--- a/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx
@@ -18,11 +18,11 @@ import {
 import { ContextContainerComp } from "./contextContainerComp";
 import { ListViewImplComp } from "./listViewComp";
 import { getCurrentItemParams, getData } from "./listViewUtils";
-import { AnimationStyleType } from "@lowcoder-ee/index.sdk";
 import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
 import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
 import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
 import { childrenToProps } from "@lowcoder-ee/comps/generators/multi";
+import { AnimationStyleType } from "@lowcoder-ee/comps/controls/styleControlConstants";
 
 const ListViewWrapper = styled.div<{ $style: any; $paddingWidth: string,$animationStyle:AnimationStyleType }>`
   height: 100%;
diff --git a/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx b/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx
index a001c7bd2..9184bb259 100644
--- a/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx
@@ -9,8 +9,11 @@ import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 
-import { useContext } from "react";
+import { useContext, useEffect } from "react";
 import { EditorContext } from "comps/editorState";
+import { ThemeContext } from "../utils/themeContext";
+import { CompTypeContext } from "../utils/compTypeContext";
+import { setInitialCompStyles } from "../utils/themeUtil";
 
 // TODO: after Update of ANTd, introduce Size attribute to ProgressCircle
 
@@ -69,10 +72,27 @@ let ProgressCircleTmpComp = (function () {
   const childrenMap = {
     value: numberExposingStateControl("value", 60),
     // borderRadius property hidden as it's not valid for progress circle
-    style: styleControl(CircleProgressStyle),
-    animationStyle: styleControl(AnimationStyle),
+    style: styleControl(CircleProgressStyle, 'style'),
+    animationStyle: styleControl(AnimationStyle, 'animationStyle'),
   };
-  return new UICompBuilder(childrenMap, (props) => {
+  return new UICompBuilder(childrenMap, (props, dispatch) => {
+    const theme = useContext(ThemeContext);
+    const compType = useContext(CompTypeContext);
+    const compTheme = theme?.theme?.components?.[compType];
+  
+    const styleProps: Record<string, any> = {};
+    ['style', 'animationStyle'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []);
+
     return (
       <StyledProgressCircle
         $style={props.style}
diff --git a/client/packages/lowcoder/src/comps/comps/progressComp.tsx b/client/packages/lowcoder/src/comps/comps/progressComp.tsx
index 6e5dc49c9..20b2747ce 100644
--- a/client/packages/lowcoder/src/comps/comps/progressComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/progressComp.tsx
@@ -10,8 +10,11 @@ import styled, { css } from "styled-components";
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 
-import { useContext } from "react";
+import { useContext, useEffect } from "react";
 import { EditorContext } from "comps/editorState";
+import { ThemeContext } from "../utils/themeContext";
+import { CompTypeContext } from "../utils/compTypeContext";
+import { setInitialCompStyles } from "../utils/themeUtil";
 
 const getStyle = (style: ProgressStyleType) => {
   return css`
@@ -53,10 +56,27 @@ const ProgressBasicComp = (function () {
   const childrenMap = {
     value: numberExposingStateControl('value', 60),
     showInfo: BoolControl,
-    style: styleControl(ProgressStyle),
-    animationStyle: styleControl(AnimationStyle),
+    style: styleControl(ProgressStyle, 'style'),
+    animationStyle: styleControl(AnimationStyle, 'animationStyle'),
   };
-  return new UICompBuilder(childrenMap, (props) => {
+  return new UICompBuilder(childrenMap, (props, dispatch) => {
+    const theme = useContext(ThemeContext);
+    const compType = useContext(CompTypeContext);
+    const compTheme = theme?.theme?.components?.[compType];
+  
+    const styleProps: Record<string, any> = {};
+    ['style', 'animationStyle'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []);
+
     return (
       <ProgressStyled
         percent={Math.round(props.value.value)}
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioCompConstants.tsx
index 6e1c27b1b..0c3554ee1 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioCompConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioCompConstants.tsx
@@ -22,7 +22,7 @@ import { RefControl } from "comps/controls/refControl";
 
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
-import { withDefault } from "@lowcoder-ee/comps/generators/simpleGenerators";
+import { withDefault } from "@lowcoder-ee/comps/generators";
 
 export const RadioLayoutOptions = [
   { label: trans("radio.horizontal"), value: "horizontal" },
@@ -41,7 +41,7 @@ export const RadioChildrenMap = {
   labelStyle:styleControl(LabelStyle),
   layout: dropdownControl(RadioLayoutOptions, "horizontal"),
   viewRef: RefControl<HTMLDivElement>,
-  inputFieldStyle:withDefault(styleControl(RadioStyle),{borderWidth: '1px'}),
+  inputFieldStyle: withDefault(styleControl(RadioStyle),{borderWidth: '1px'}),
   animationStyle: styleControl(AnimationStyle),
   ...SelectInputValidationChildren,
   ...formDataChildren,

From 106e8ed0041181394f04d3182bfbb4e651c2ebc5 Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Mon, 17 Jun 2024 01:39:36 +0500
Subject: [PATCH 23/57] Theme: apply theme styles in timeline comp

---
 .../comps/comps/timelineComp/timelineComp.tsx | 21 ++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx b/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx
index 40e9b0f3f..ab2b4d22f 100644
--- a/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx
@@ -47,6 +47,9 @@ import { timelineDate, timelineNode, TimelineDataTooltip } from "./timelineConst
 import { convertTimeLineData } from "./timelineUtils";
 import { default as Timeline } from "antd/es/timeline";
 import { EditorContext } from "comps/editorState";
+import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
 
 const EventOptions = [
   clickEvent,
@@ -64,7 +67,7 @@ const childrenMap = {
   reverse: BoolControl,
   pending: withDefault(StringControl, trans("timeLine.defaultPending")),
   onEvent: eventHandlerControl(EventOptions),
-  style: styleControl(TimeLineStyle),
+  style: styleControl(TimeLineStyle, 'style'),
   clickedObject: valueComp<timelineNode>({ title: "" }),
   clickedIndex: valueComp<number>(0),
 };
@@ -89,6 +92,22 @@ const TimelineComp = (
 ) => {
   const { value, dispatch, style, mode, reverse, onEvent } = props;
   const [icons, setIcons] = useState<React.ReactNode[]>([]);
+  const theme = useContext(ThemeContext);
+  const compType = useContext(CompTypeContext);
+  const compTheme = theme?.theme?.components?.[compType];
+
+  const styleProps: Record<string, any> = {};
+  ['style'].forEach((key: string) => {
+    styleProps[key] = (props as any)[key];
+  });
+
+  useEffect(() => {
+    setInitialCompStyles({
+      dispatch,
+      compTheme,
+      styleProps,
+    });
+  }, []);
 
   useEffect(() => {
     const loadIcons = async () => {

From ea58eae2ab6b60773ec856c5d1aab2eef4615e24 Mon Sep 17 00:00:00 2001
From: FalkWolsky <fw@falkwolsky.com>
Date: Sat, 15 Jun 2024 16:46:54 +0200
Subject: [PATCH 24/57] Update for Mobile Navigation Items Display

---
 .../lowcoder/src/comps/comps/layout/mobileTabLayout.tsx        | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx b/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx
index 63de78fd3..572521fc2 100644
--- a/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx
+++ b/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx
@@ -33,6 +33,9 @@ import { AlignRight } from "lowcoder-design";
 import { LayoutActionComp } from "./layoutActionComp";
 import { clickEvent, eventHandlerControl } from "@lowcoder-ee/index.sdk";
 import { defaultTheme } from "@lowcoder-ee/constants/themeConstants";
+import { AlignCenter } from "lowcoder-design";
+import { AlignLeft } from "lowcoder-design";
+import { AlignRight } from "lowcoder-design";
 
 const TabBar = React.lazy(() => import("antd-mobile/es/components/tab-bar"));
 const TabBarItem = React.lazy(() =>

From 7fc918230d00057c14b154c1cc99740d1a471a59 Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Mon, 17 Jun 2024 02:36:35 +0500
Subject: [PATCH 25/57] remove duplicate dependecies

---
 .../lowcoder/src/comps/comps/layout/mobileTabLayout.tsx        | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx b/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx
index 572521fc2..63de78fd3 100644
--- a/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx
+++ b/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx
@@ -33,9 +33,6 @@ import { AlignRight } from "lowcoder-design";
 import { LayoutActionComp } from "./layoutActionComp";
 import { clickEvent, eventHandlerControl } from "@lowcoder-ee/index.sdk";
 import { defaultTheme } from "@lowcoder-ee/constants/themeConstants";
-import { AlignCenter } from "lowcoder-design";
-import { AlignLeft } from "lowcoder-design";
-import { AlignRight } from "lowcoder-design";
 
 const TabBar = React.lazy(() => import("antd-mobile/es/components/tab-bar"));
 const TabBarItem = React.lazy(() =>

From 5d20a89b2d228bb1732cf360b326afaf590bd529 Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Mon, 17 Jun 2024 02:57:15 +0500
Subject: [PATCH 26/57] Theme: config updates

---
 .../packages/lowcoder/src/api/commonSettingApi.ts   | 13 +++++++++----
 .../src/pages/setting/theme/detail/index.tsx        |  4 ++--
 .../src/pages/setting/theme/themeConstant.tsx       |  6 +++---
 3 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/client/packages/lowcoder/src/api/commonSettingApi.ts b/client/packages/lowcoder/src/api/commonSettingApi.ts
index a650eed1c..6bbcd0a09 100644
--- a/client/packages/lowcoder/src/api/commonSettingApi.ts
+++ b/client/packages/lowcoder/src/api/commonSettingApi.ts
@@ -43,14 +43,17 @@ export interface ThemeDetail {
   textLight: string;
   canvas: string; // app bg-color
   primarySurface: string; // comp bg-color
-  borderRadius: string;
-  borderColor?: string;
+  borderRadius?: string; // will be depreceated
+  borderColor?: string; // will be depreceated
+  radius?: string;
+  border?: string;
   borderWidth?: string;
   borderStyle?: string;
   chart?: string;
   margin?: string;
   padding?: string;
   gridColumns?: string; //Added By Aqib Mirza
+  text?: string;
   textSize?: string;
   fontFamily?: string;
   animation?: string;
@@ -70,8 +73,8 @@ export function getThemeDetailName(key: keyof ThemeDetail) {
     case "textLight": return trans("themeDetail.textLight");
     case "canvas": return trans("themeDetail.canvas");
     case "primarySurface": return trans("themeDetail.primarySurface");
-    case "borderRadius": return trans("themeDetail.borderRadius");
-    case "borderColor": return trans("themeDetail.borderColor");
+    case "radius": return trans("themeDetail.borderRadius");
+    case "border": return trans("themeDetail.borderColor");
     case "borderWidth": return trans("themeDetail.borderWidth");
     case "borderStyle": return trans("themeDetail.borderStyle");
     case "fontFamily": return trans("themeDetail.fontFamily");
@@ -92,6 +95,8 @@ export function isThemeColorKey(key: string) {
     case "primarySurface":
     case "borderRadius":
     case "borderColor":
+    case "radius":
+    case "border":
     case "borderWidth":
     case "borderStyle":
     case "fontFamily":
diff --git a/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx b/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
index 7b5e7728c..62dc5cbea 100644
--- a/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
+++ b/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
@@ -212,7 +212,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
             settingsKey: 'borderColor',
             name: trans('themeDetail.borderColor'),
             desc: trans('themeDetail.borderColorDesc'),
-            color: this.state.theme.borderColor,
+            color: this.state.theme.border || this.state.theme.borderColor,
           }
         ]
       },
@@ -260,7 +260,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
             name: trans('themeDetail.borderRadius'),
             desc: trans('themeDetail.borderRadiusDesc'),
             type: "radius",
-            value: this.state.theme.borderRadius,
+            value: this.state.theme.radius || this.state.theme.borderRadius,
           },
           {
             settingsKey: 'borderWidth',
diff --git a/client/packages/lowcoder/src/pages/setting/theme/themeConstant.tsx b/client/packages/lowcoder/src/pages/setting/theme/themeConstant.tsx
index 729d8b788..a68d453d1 100644
--- a/client/packages/lowcoder/src/pages/setting/theme/themeConstant.tsx
+++ b/client/packages/lowcoder/src/pages/setting/theme/themeConstant.tsx
@@ -27,7 +27,7 @@ export const themeTemplateList = [
       textLight: "#FFFFFF",
       canvas: "#F5F5F6",
       primarySurface: "#FFFFFF",
-      borderRadius: "4px",
+      radius: "4px",
       chart: JSON.stringify(ChartTheme, null, 2),
       gridColumns: "24", //Added By Aqib Mirza
       margin: "3px",
@@ -44,7 +44,7 @@ export const themeTemplateList = [
       textLight: "#FFFFFF",
       canvas: "#29324F",
       primarySurface: "#495780",
-      borderRadius: "4px",
+      radius: "4px",
       chart: JSON.stringify(ChartYellowTheme, null, 2),
       gridColumns: "24", //Added By Aqib Mirza
       margin: "3px",
@@ -61,7 +61,7 @@ export const themeTemplateList = [
       textLight: "#FFFFFF",
       canvas: "#F5F5F6",
       primarySurface: "#FFFFFF",
-      borderRadius: "4px",
+      radius: "4px",
       chart: JSON.stringify(ChartGreenTheme, null, 2),
       gridColumns: "24", //Added By Aqib Mirza
       margin: "3px",

From 660fa277c0e38ec953b44c30f04f940c0a0768d5 Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Mon, 17 Jun 2024 05:00:18 +0500
Subject: [PATCH 27/57] Theme: apply theme on data collection comps

---
 .../autoCompleteComp/autoCompleteComp.tsx     | 32 ++++++--
 .../src/comps/comps/buttonComp/buttonComp.tsx | 77 ++++++++++++-------
 .../comps/buttonComp/buttonCompConstants.tsx  |  2 +-
 .../comps/comps/buttonComp/dropdownComp.tsx   | 25 +++++-
 .../comps/buttonComp/toggleButtonComp.tsx     | 27 ++++++-
 .../src/comps/comps/dateComp/dateComp.tsx     | 52 +++++++++++--
 .../src/comps/comps/dateComp/timeComp.tsx     | 44 ++++++++++-
 .../comps/comps/jsonComp/jsonEditorComp.tsx   | 26 ++++++-
 .../comps/comps/jsonComp/jsonExplorerComp.tsx | 55 +++++++++----
 .../jsonSchemaFormComp/jsonSchemaFormComp.tsx | 27 ++++++-
 .../comps/numberInputComp/numberInputComp.tsx | 30 ++++++--
 .../comps/numberInputComp/sliderComp.tsx      | 23 +++++-
 .../numberInputComp/sliderCompConstants.tsx   | 11 ++-
 .../src/comps/comps/richTextEditorComp.tsx    | 23 +++++-
 .../comps/selectInputComp/checkboxComp.tsx    | 33 ++++++--
 .../comps/selectInputComp/multiSelectComp.tsx | 26 ++++++-
 .../comps/comps/selectInputComp/radioComp.tsx | 22 +++++-
 .../selectInputComp/radioCompConstants.tsx    |  8 +-
 .../selectInputComp/segmentedControl.tsx      | 27 ++++++-
 .../comps/selectInputComp/selectComp.tsx      | 29 +++++--
 .../lowcoder/src/comps/comps/switchComp.tsx   | 32 ++++++--
 .../comps/textInputComp/passwordComp.tsx      | 32 ++++++--
 .../comps/textInputComp/textAreaComp.tsx      | 31 ++++++--
 .../lowcoder/src/constants/themeConstants.ts  | 34 ++++++++
 .../src/pages/setting/theme/detail/index.tsx  |  8 +-
 25 files changed, 599 insertions(+), 137 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx
index c310f9d19..925dc1870 100644
--- a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { Input, Section, sectionNames } from "lowcoder-design";
 import { BoolControl } from "comps/controls/boolControl";
 import { styleControl } from "comps/controls/styleControl";
@@ -55,7 +55,9 @@ import {
   autocompleteIconColor,
   componentSize,
 } from "./autoCompleteConstants";
-
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
+import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
 
 
 const InputStyle = styled(Input) <{ $style: InputLikeStyleType }>`
@@ -76,8 +78,8 @@ const childrenMap = {
   ...textInputChildren,
   viewRef: RefControl<InputRef>,
   allowClear: BoolControl.DEFAULT_TRUE,
-  style: withDefault(styleControl(InputFieldStyle),{background:'transparent'}),
-  labelStyle:styleControl(LabelStyle),
+  style: styleControl(InputFieldStyle , 'style'),
+  labelStyle: styleControl(LabelStyle , 'labelStyle'),
   prefixIcon: IconControl,
   suffixIcon: IconControl,
   items: jsonControl(convertAutoCompleteData, autoCompleteDate),
@@ -90,8 +92,8 @@ const childrenMap = {
   autocompleteIconColor: dropdownControl(autocompleteIconColor, "blue"),
   componentSize: dropdownControl(componentSize, "small"),
   valueInItems: booleanExposingStateControl("valueInItems"),
-  inputFieldStyle: withDefault(styleControl(InputLikeStyle),{borderWidth:'1px'}),
-  animationStyle: styleControl(AnimationStyle),
+  inputFieldStyle: styleControl(InputLikeStyle , 'inputFieldStyle'),
+  animationStyle: styleControl(AnimationStyle , 'animationStyle'),
 };
 
 const getValidate = (value: any): "" | "warning" | "error" | undefined => {
@@ -104,7 +106,23 @@ const getValidate = (value: any): "" | "warning" | "error" | undefined => {
 };
 
 let AutoCompleteCompBase = (function () {
-  return new UICompBuilder(childrenMap, (props) => {
+  return new UICompBuilder(childrenMap, (props, dispatch) => {
+    const theme = useContext(ThemeContext);
+    const compType = useContext(CompTypeContext);
+    const compTheme = theme?.theme?.components?.[compType];
+    const styleProps: Record<string, any> = {};
+    ['style', 'labelStyle', 'inputFieldStyle', 'animationStyle'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []);
+
     const {
       items,
       onEvent,
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx
index 76baa23ba..e3b0d96a3 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx
@@ -24,9 +24,12 @@ import {
 } from "./buttonCompConstants";
 import { RefControl } from "comps/controls/refControl";
 
-import React, { useContext } from "react";
+import React, { useContext, useEffect } from "react";
 import { AnimationStyle } from "@lowcoder-ee/comps/controls/styleControlConstants";
 import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
+import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
 
 const FormLabel = styled(CommonBlueLabel)`
   font-size: 13px;
@@ -131,35 +134,53 @@ const ButtonTmpComp = (function () {
     prefixIcon: IconControl,
     suffixIcon: IconControl,
     style: ButtonStyleControl,
-    animationStyle: styleControl(AnimationStyle),
+    animationStyle: styleControl(AnimationStyle, 'animationStyle'),
     viewRef: RefControl<HTMLElement>,
   };
-  return new UICompBuilder(childrenMap, (props) => (
-    <ButtonCompWrapper disabled={props.disabled}>
-      <EditorContext.Consumer>
-        {(editorState) => (
-          <Button100
-            ref={props.viewRef}
-            $buttonStyle={props.style}
-            loading={props.loading}
-            disabled={
-              props.disabled ||
-              (!isDefault(props.type) && getForm(editorState, props.form)?.disableSubmit())
-            }
-            onClick={() =>
-              isDefault(props.type) ? props.onEvent("click") : submitForm(editorState, props.form)
-            }
-          >
-            {props.prefixIcon && <IconWrapper>{props.prefixIcon}</IconWrapper>}
-            {
-              props.text || (props.prefixIcon || props.suffixIcon ? undefined : " ") // Avoid button disappearing
-            }
-            {props.suffixIcon && <IconWrapper>{props.suffixIcon}</IconWrapper>}
-          </Button100>
-        )}
-      </EditorContext.Consumer>
-    </ButtonCompWrapper>
-  ))
+  return new UICompBuilder(childrenMap, (props , dispatch) => {
+    const theme = useContext(ThemeContext);
+    const compType = useContext(CompTypeContext);
+    const compTheme = theme?.theme?.components?.[compType];
+    const styleProps: Record<string, any> = {};
+    ['style', 'animationStyle'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []);
+
+    return(
+      <ButtonCompWrapper disabled={props.disabled}>
+        <EditorContext.Consumer>
+          {(editorState) => (
+            <Button100
+              ref={props.viewRef}
+              $buttonStyle={props.style}
+              loading={props.loading}
+              disabled={
+                props.disabled ||
+                (!isDefault(props.type) && getForm(editorState, props.form)?.disableSubmit())
+              }
+              onClick={() =>
+                isDefault(props.type) ? props.onEvent("click") : submitForm(editorState, props.form)
+              }
+            >
+              {props.prefixIcon && <IconWrapper>{props.prefixIcon}</IconWrapper>}
+              {
+                props.text || (props.prefixIcon || props.suffixIcon ? undefined : " ") // Avoid button disappearing
+              }
+              {props.suffixIcon && <IconWrapper>{props.suffixIcon}</IconWrapper>}
+            </Button100>
+          )}
+        </EditorContext.Consumer>
+      </ButtonCompWrapper>
+    );
+  })
     .setPropertyViewFn((children) => (
       <>
         <Section name={sectionNames.basic}>
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx
index c509aeaa9..1fe2f3270 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx
@@ -97,7 +97,7 @@ function fixOldData(oldData: any) {
   }
   return oldData;
 }
-const ButtonTmpStyleControl = styleControl(ButtonStyle);
+const ButtonTmpStyleControl = styleControl(ButtonStyle, 'style');
 export const ButtonStyleControl = migrateOldData(ButtonTmpStyleControl, fixOldData);
 
 export const buttonRefMethods = refMethods<HTMLElement>([
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx
index f1a315b55..4368af2ee 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx
@@ -9,7 +9,7 @@ import { UICompBuilder } from "comps/generators/uiCompBuilder";
 import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
 import { Section, sectionNames } from "lowcoder-design";
 import { trans } from "i18n";
-import React, { ReactElement, useContext } from "react";
+import React, { ReactElement, useContext, useEffect } from "react";
 import { EditorContext } from "comps/editorState";
 import styled from "styled-components";
 import { ButtonEventHandlerControl } from "../../controls/eventHandlerControl";
@@ -22,6 +22,9 @@ import {
   getButtonStyle,
 } from "./buttonCompConstants";
 import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
+import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
 
 const StyledDropdownButton = styled(DropdownButton)`
   width: 100%;
@@ -85,9 +88,25 @@ const DropdownTmpComp = (function () {
     options: DropdownOptionControl,
     disabled: BoolCodeControl,
     onEvent: ButtonEventHandlerControl,
-    style: styleControl(DropdownStyle),
+    style: styleControl(DropdownStyle, 'style'),
   };
-  return new UICompBuilder(childrenMap, (props) => {
+  return new UICompBuilder(childrenMap, (props, dispatch) => {
+    const theme = useContext(ThemeContext);
+    const compType = useContext(CompTypeContext);
+    const compTheme = theme?.theme?.components?.[compType];
+    const styleProps: Record<string, any> = {};
+    ['style'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []);
+
     const hasIcon =
       props.options.findIndex((option) => (option.prefixIcon as ReactElement)?.props.value) > -1;
     const items = props.options
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx
index e8238e4c2..bc2829d9c 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx
@@ -23,8 +23,11 @@ import {
 import { styleControl } from "comps/controls/styleControl";
 import { BoolControl } from "comps/controls/boolControl";
 import { RefControl } from "comps/controls/refControl";
-import React, { useContext } from "react";
+import React, { useContext, useEffect } from "react";
 import { EditorContext } from "comps/editorState"; 
+import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
 
 const IconWrapper = styled.div`
   display: flex;
@@ -60,15 +63,31 @@ const ToggleTmpComp = (function () {
     falseIcon: withDefault(IconControl, "/icon:solid/AngleDown"),
     iconPosition: LeftRightControl,
     alignment: AlignWithStretchControl,
-    style: styleControl(ToggleButtonStyle),
-    animationStyle: styleControl(AnimationStyle),
+    style: styleControl(ToggleButtonStyle , 'style'),
+    animationStyle: styleControl(AnimationStyle , 'animationStyle'),
     showBorder: withDefault(BoolControl, true),
     viewRef: RefControl<HTMLElement>,
   };
-  return new UICompBuilder(childrenMap, (props) => {
+  return new UICompBuilder(childrenMap, (props, dispatch) => {
     const text = props.showText
       ? (props.value.value ? props.trueText : props.falseText) || undefined
       : undefined;
+    const theme = useContext(ThemeContext);
+    const compType = useContext(CompTypeContext);
+    const compTheme = theme?.theme?.components?.[compType];
+    const styleProps: Record<string, any> = {};
+    ['style',  'animationStyle'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []);
+
     return (
       <ButtonCompWrapperStyled
         disabled={props.disabled}
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx
index 8a4d5a0db..125aadaba 100644
--- a/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx
@@ -37,7 +37,7 @@ import {
 } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { DATE_FORMAT, DATE_TIME_FORMAT, DateParser, PickerMode } from "util/dateTimeUtils";
-import React, { ReactNode, useContext } from "react";
+import React, { ReactNode, useContext, useEffect } from "react";
 import { IconControl } from "comps/controls/iconControl";
 import { hasIcon } from "comps/utils";
 import { Section, sectionNames } from "components/Section";
@@ -49,6 +49,9 @@ import { CommonPickerMethods } from "antd/es/date-picker/generatePicker/interfac
 import { DateRangeUIView } from "comps/comps/dateComp/dateRangeUIView";
 
 import { EditorContext } from "comps/editorState";
+import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
 
 const defaultStyle = {
   borderStyle: 'solid',
@@ -76,13 +79,16 @@ const commonChildren = {
   hourStep: RangeControl.closed(1, 24, 1),
   minuteStep: RangeControl.closed(1, 60, 1),
   secondStep: RangeControl.closed(1, 60, 1),
-  style: withDefault(styleControl(InputFieldStyle),{background:'transparent'}),
-  animationStyle: styleControl(AnimationStyle),
-  labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)),
+  style: styleControl(InputFieldStyle, 'style'),
+  animationStyle: styleControl(AnimationStyle, 'animationStyle'),
+  labelStyle: styleControl(
+    LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false),
+    'labelStyle',
+  ),
   suffixIcon: withDefault(IconControl, "/icon:regular/calendar"),
   ...validationChildren,
   viewRef: RefControl<CommonPickerMethods>,
-  inputFieldStyle: withDefault(styleControl(DateTimeStyle), defaultStyle),
+  inputFieldStyle: withDefault(styleControl(DateTimeStyle, 'inputFieldStyle'), defaultStyle),
 };
 type CommonChildrenType = RecordConstructorToComp<typeof commonChildren>;
 
@@ -165,7 +171,23 @@ export type DateCompViewProps = Pick<
   placeholder?: string | [string, string];
 };
 
-export const datePickerControl = new UICompBuilder(childrenMap, (props) => {
+export const datePickerControl = new UICompBuilder(childrenMap, (props, dispatch) => {
+  const theme = useContext(ThemeContext);
+  const compType = useContext(CompTypeContext);
+  const compTheme = theme?.theme?.components?.[compType];
+  const styleProps: Record<string, any> = {};
+  ['style', 'labelStyle', 'inputFieldStyle', 'animationStyle'].forEach((key: string) => {
+    styleProps[key] = (props as any)[key];
+  });
+
+  useEffect(() => {
+    setInitialCompStyles({
+      dispatch,
+      compTheme,
+      styleProps,
+    });
+  }, []);
+
   let time = null;
   if (props.value.value !== '') {
     time = dayjs(props.value.value, DateParser);
@@ -284,7 +306,23 @@ export const dateRangeControl = (function () {
     ...commonChildren,
   };
 
-  return new UICompBuilder(childrenMap, (props) => {
+  return new UICompBuilder(childrenMap, (props, dispatch) => {
+    const theme = useContext(ThemeContext);
+    const compType = useContext(CompTypeContext);
+    const compTheme = theme?.theme?.components?.[compType];
+    const styleProps: Record<string, any> = {};
+    ['style', 'labelStyle', 'inputFieldStyle', 'animationStyle'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []);
+
     let start = null;
     let end = null;
     if (props.start.value !== '') {
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx
index e2c36b659..ef8b13b99 100644
--- a/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx
@@ -40,7 +40,7 @@ import {
 } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { TIME_FORMAT, TimeParser } from "util/dateTimeUtils";
-import React, { ReactNode, useContext } from "react";
+import React, { ReactNode, useContext, useEffect } from "react";
 import { IconControl } from "comps/controls/iconControl";
 import { hasIcon } from "comps/utils";
 import { Section, sectionNames } from "components/Section";
@@ -52,6 +52,9 @@ import { CommonPickerMethods } from "antd/es/date-picker/generatePicker/interfac
 import { TimePickerProps } from "antd/es/time-picker";
 
 import { EditorContext } from "comps/editorState";
+import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
 
 const EventOptions = [changeEvent, focusEvent, blurEvent] as const;
 
@@ -73,7 +76,7 @@ const commonChildren = {
   hourStep: RangeControl.closed(1, 24, 1),
   minuteStep: RangeControl.closed(1, 60, 1),
   secondStep: RangeControl.closed(1, 60, 1),
-  style: withDefault(styleControl(DateTimeStyle),{background:'transparent',borderWidth:'1px'}),
+  style: styleControl(DateTimeStyle, 'style'),
   suffixIcon: withDefault(IconControl, "/icon:regular/clock"),
   viewRef: RefControl<CommonPickerMethods>,
   ...validationChildren,
@@ -136,7 +139,23 @@ export type TimeCompViewProps = Pick<
   placeholder?: string | [string, string];
 };
 
-export const timePickerControl = new UICompBuilder(childrenMap, (props) => {
+export const timePickerControl = new UICompBuilder(childrenMap, (props, dispatch) => {
+  const theme = useContext(ThemeContext);
+  const compType = useContext(CompTypeContext);
+  const compTheme = theme?.theme?.components?.[compType];
+  const styleProps: Record<string, any> = {};
+  ['style'].forEach((key: string) => {
+    styleProps[key] = (props as any)[key];
+  });
+
+  useEffect(() => {
+    setInitialCompStyles({
+      dispatch,
+      compTheme,
+      styleProps,
+    });
+  }, []);
+
   let time = null;
   if(props.value.value !== '') {
     time = dayjs(props.value.value, TimeParser);
@@ -231,7 +250,24 @@ export const timeRangeControl = (function () {
     ...commonChildren,
   };
 
-  return new UICompBuilder(childrenMap, (props) => {
+  return new UICompBuilder(childrenMap, (props, dispatch) => {
+    const theme = useContext(ThemeContext);
+    const compType = useContext(CompTypeContext);
+    const compTheme = theme?.theme?.components?.[compType];
+    const styleProps: Record<string, any> = {};
+    ['style'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []);
+
+
     let start = null;
     if(props.start.value !== '') {
       start = dayjs(props.start.value, TimeParser);
diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx
index 9583c449a..6d35de35c 100644
--- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx
@@ -20,6 +20,9 @@ import {
 } from "base/codeEditor/codeMirror";
 import { useExtensions } from "base/codeEditor/extensions";
 import { EditorContext } from "comps/editorState";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
 
 /**
  * JsonEditor Comp
@@ -65,14 +68,29 @@ const childrenMap = {
   value: jsonValueExposingStateControl("value", defaultData),
   onEvent: ChangeEventHandlerControl,
   label: withDefault(LabelControl, { position: "column" }),
-  style: styleControl(JsonEditorStyle),
-  animationStyle: styleControl(AnimationStyle),
-
+  style: styleControl(JsonEditorStyle, 'style'),
+  animationStyle: styleControl(AnimationStyle , 'animationStyle'),
   ...formDataChildren,
 };
 
 let JsonEditorTmpComp = (function () {
-  return new UICompBuilder(childrenMap, (props) => {
+  return new UICompBuilder(childrenMap, (props, dispatch) => {
+    const theme = useContext(ThemeContext);
+    const compType = useContext(CompTypeContext);
+    const compTheme = theme?.theme?.components?.[compType];
+    const styleProps: Record<string, any> = {};
+    ['style', 'animationStyle'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []);
+
     const wrapperRef = useRef<HTMLDivElement>(null);
     const view = useRef<EditorViewType | null>(null);
     const editContent = useRef<string>();
diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx
index d6d6ddc38..e7e15ffe0 100644
--- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx
@@ -10,9 +10,12 @@ import { ArrayOrJSONObjectControl, NumberControl } from "comps/controls/codeCont
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { EditorContext } from "comps/editorState";
-import { useContext } from "react";
+import { useContext, useEffect } from "react";
 import { AnimationStyle, AnimationStyleType } from "@lowcoder-ee/comps/controls/styleControlConstants";
 import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
+import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
 
 /**
  * JsonExplorer Comp
@@ -55,23 +58,41 @@ let JsonExplorerTmpComp = (function () {
     indent: withDefault(NumberControl, 4),
     expandToggle: BoolControl.DEFAULT_TRUE,
     theme: dropdownControl(themeOptions, 'shapeshifter:inverted'),
-    animationStyle: styleControl(AnimationStyle),
+    animationStyle:styleControl(AnimationStyle, 'animationStyle'),
   };
-  return new UICompBuilder(childrenMap, (props) => (
-    <JsonExplorerContainer
-      $theme={props.theme as keyof typeof bgColorMap}
-      $animationStyle={props.animationStyle}
-    >
-      <ReactJson
-        name={false}
-        src={props.value}
-        theme={props.theme as ThemeKeys}
-        collapsed={!props.expandToggle}
-        displayDataTypes={false}
-        indentWidth={props.indent}
-      />
-    </JsonExplorerContainer>
-  ))
+  return new UICompBuilder(childrenMap, (props, dispatch) => {
+    const theme = useContext(ThemeContext);
+    const compType = useContext(CompTypeContext);
+    const compTheme = theme?.theme?.components?.[compType];
+    const styleProps: Record<string, any> = {};
+    ['animationStyle'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []);
+
+    return (
+      <JsonExplorerContainer
+        $theme={props.theme as keyof typeof bgColorMap}
+        $animationStyle={props.animationStyle}
+      >
+        <ReactJson
+          name={false}
+          src={props.value}
+          theme={props.theme as ThemeKeys}
+          collapsed={!props.expandToggle}
+          displayDataTypes={false}
+          indentWidth={props.indent}
+        />
+      </JsonExplorerContainer>
+    )
+  })
     .setPropertyViewFn((children) => {
       return (
         <>
diff --git a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx
index d80ee9f23..6acfbb084 100644
--- a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx
@@ -23,8 +23,11 @@ import ErrorBoundary from "./errorBoundary";
 import { Theme } from "@rjsf/antd";
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
 
-import { useContext } from "react";
+import { useContext, useEffect } from "react";
 import { EditorContext } from "comps/editorState";
+import { ThemeContext } from '../../utils/themeContext';
+import { CompTypeContext } from '../../utils/compTypeContext';
+import { setInitialCompStyles } from '../../utils/themeUtil';
 
 Theme.widgets.DateWidget = DateWidget(false);
 Theme.widgets.DateTimeWidget = DateWidget(true);
@@ -191,10 +194,26 @@ let FormBasicComp = (function () {
     uiSchema: jsonObjectControl(i18nObjs.jsonForm.defaultUiSchema),
     data: jsonObjectExposingStateControl("data", i18nObjs.jsonForm.defaultFormData),
     onEvent: eventHandlerControl(EventOptions),
-    style: styleControl(JsonSchemaFormStyle),
-    animationStyle: styleControl(AnimationStyle),
+    style: styleControl(JsonSchemaFormStyle , 'style'),
+    animationStyle: styleControl(AnimationStyle , 'animationStyle'),
   };
-  return new UICompBuilder(childrenMap, (props) => {
+  return new UICompBuilder(childrenMap, (props, dispatch) => {
+    const theme = useContext(ThemeContext);
+    const compType = useContext(CompTypeContext);
+    const compTheme = theme?.theme?.components?.[compType];
+    const styleProps: Record<string, any> = {};
+    ['style','animationStyle'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []);
+
     // rjsf 4.20 supports ui:submitButtonOptions, but if the button is customized, it will not take effect. Here we implement it ourselves
     const buttonOptions = props?.uiSchema?.[
       "ui:submitButtonOptions"
diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx
index 44a97bd02..36e96d241 100644
--- a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx
@@ -54,6 +54,9 @@ import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
 import { migrateOldData } from "comps/generators/simpleGenerators";
 import { fixOldInputCompData } from "../textInputComp/textInputConstants";
+import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
 
 const getStyle = (style: InputLikeStyleType) => {
   return css`
@@ -259,13 +262,12 @@ const childrenMap = {
   allowNull: BoolControl,
   onEvent: InputEventHandlerControl,
   viewRef: RefControl<HTMLInputElement>,
-  style: withDefault(styleControl(InputFieldStyle),{background:'transparent'}) , 
-  labelStyle:styleControl(LabelStyle),
+  style: styleControl(InputFieldStyle , 'style') , 
+  labelStyle: styleControl(LabelStyle , 'labelStyle'),
   prefixText : stringExposingStateControl("defaultValue"),
-  animationStyle: styleControl(AnimationStyle),
-
+  animationStyle: styleControl(AnimationStyle , 'animationStyle'),
   prefixIcon: IconControl,
-  inputFieldStyle: withDefault(styleControl(InputLikeStyle), {borderWidth: '1px'}) ,
+  inputFieldStyle: styleControl(InputLikeStyle , 'inputFieldStyle'),
   // validation
   required: BoolControl,
   min: UndefinedNumberControl,
@@ -381,7 +383,23 @@ const CustomInputNumber = (props: RecordConstructorToView<typeof childrenMap>) =
 };
 
 let NumberInputTmpComp = (function () {
-  return new UICompBuilder(childrenMap, (props) => {
+  return new UICompBuilder(childrenMap, (props, dispatch) => {
+    const theme = useContext(ThemeContext);
+    const compType = useContext(CompTypeContext);
+    const compTheme = theme?.theme?.components?.[compType];
+    const styleProps: Record<string, any> = {};
+    ['style', 'labelStyle', 'inputFieldStyle', 'animationStyle'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []);
+
     return props.label({
       required: props.required,
       children: <CustomInputNumber {...props} />,
diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx
index a73b39a47..e320ef79c 100644
--- a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx
@@ -7,6 +7,10 @@ import { formDataChildren, FormDataPropertyView } from "../formComp/formDataCons
 import { SliderChildren, SliderPropertyView, SliderStyled, SliderWrapper } from "./sliderCompConstants";
 import { hasIcon } from "comps/utils";
 import { BoolControl } from "comps/controls/boolControl";
+import { ThemeContext } from "../../utils/themeContext";
+import { useContext, useEffect } from "react";
+import { CompTypeContext } from "../../utils/compTypeContext";
+import { setInitialCompStyles } from "../../utils/themeUtil";
 
 const SliderBasicComp = (function () {
   /**
@@ -18,7 +22,24 @@ const SliderBasicComp = (function () {
     vertical: BoolControl,
     ...formDataChildren,
   };
-  return new UICompBuilder(childrenMap, (props) => {
+  return new UICompBuilder(childrenMap, (props, dispatch) => {
+    const theme = useContext(ThemeContext);
+    const compType = useContext(CompTypeContext);
+    console.log("compType", compType)
+    const compTheme = theme?.theme?.components?.[compType];
+    const styleProps: Record<string, any> = {};
+    ['style', 'labelStyle', 'inputFieldStyle', 'animationStyle'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []);
+
     return props.label({
       style: props.style,
       labelStyle: props.labelStyle,
diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx
index 41bc79f6b..90e827919 100644
--- a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx
@@ -71,12 +71,15 @@ export const SliderChildren = {
   label: LabelControl,
   disabled: BoolCodeControl,
   onEvent: ChangeEventHandlerControl,
-  style: withDefault(styleControl(InputFieldStyle),{background:'transparent'}) , 
-  labelStyle:styleControl(LabelStyle.filter((style)=> ['accent','validate'].includes(style.name) === false)),
+  style: styleControl(InputFieldStyle, 'style'), 
+  labelStyle: styleControl(
+    LabelStyle.filter((style)=> ['accent','validate'].includes(style.name) === false),
+    'labelStyle',
+  ),
   prefixIcon: IconControl,
   suffixIcon: IconControl,
-  inputFieldStyle:styleControl(SliderStyle),
-  animationStyle:styleControl(AnimationStyle)
+  inputFieldStyle: styleControl(SliderStyle, 'inputFieldStyle'),
+  animationStyle: styleControl(AnimationStyle, 'animationStyle')
 };
 
 export const SliderPropertyView = (
diff --git a/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx b/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx
index f6e040314..ceb75ea71 100644
--- a/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx
@@ -26,6 +26,9 @@ import { RichTextEditorStyle, RichTextEditorStyleType } from "comps/controls/sty
 
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
+import { setInitialCompStyles } from "../utils/themeUtil";
+import { ThemeContext } from "../utils/themeContext";
+import { CompTypeContext } from "../utils/compTypeContext";
 
 const localizeStyle = css`
   & .ql-snow {
@@ -172,7 +175,7 @@ const childrenMap = {
   placeholder: withDefault(StringControl, trans("richTextEditor.placeholder")),
   toolbar: withDefault(StringControl, JSON.stringify(toolbarOptions)),
   onEvent: ChangeEventHandlerControl,
-  style: styleControl(RichTextEditorStyle),
+  style: styleControl(RichTextEditorStyle , 'style'),
 
   ...formDataChildren,
 };
@@ -290,7 +293,23 @@ function RichTextEditor(props: IProps) {
   );
 }
 
-const RichTextEditorCompBase = new UICompBuilder(childrenMap, (props) => {
+const RichTextEditorCompBase = new UICompBuilder(childrenMap, (props, dispatch) => {
+  const theme = useContext(ThemeContext);
+  const compType = useContext(CompTypeContext);
+  const compTheme = theme?.theme?.components?.[compType];
+  const styleProps: Record<string, any> = {};
+  ['style'].forEach((key: string) => {
+    styleProps[key] = (props as any)[key];
+  });
+
+  useEffect(() => {
+    setInitialCompStyles({
+      dispatch,
+      compTheme,
+      styleProps,
+    });
+  }, []);
+
   const handleChange = (v: string) => {
     props.value.onChange(v);
     props.onEvent("change");
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx
index 985d4dc30..2803b3532 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx
@@ -24,6 +24,10 @@ import { trans } from "i18n";
 import { RefControl } from "comps/controls/refControl";
 import { migrateOldData } from "comps/generators/simpleGenerators";
 import { fixOldInputCompData } from "../textInputComp/textInputConstants";
+import { useContext, useEffect } from "react";
+import { setInitialCompStyles } from "../../utils/themeUtil";
+import { ThemeContext } from "../../utils/themeContext";
+import { CompTypeContext } from "../../utils/compTypeContext";
 
 export const getStyle = (style: CheckboxStyleType) => {
   return css`
@@ -146,16 +150,35 @@ let CheckboxBasicComp = (function () {
     disabled: BoolCodeControl,
     onEvent: ChangeEventHandlerControl,
     options: SelectInputOptionControl,
-    style: styleControl(InputFieldStyle),
-    labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)),
+    style: styleControl(InputFieldStyle , 'style'),
+    labelStyle: styleControl(
+      LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false),
+      'labelStyle',
+    ),
     layout: dropdownControl(RadioLayoutOptions, "horizontal"),
     viewRef: RefControl<HTMLDivElement>,
-    inputFieldStyle:styleControl(CheckboxStyle),
-    animationStyle:styleControl(AnimationStyle),
+    inputFieldStyle: styleControl(CheckboxStyle , 'inputFieldStyle'),
+    animationStyle: styleControl(AnimationStyle , 'animationStyle'),
     ...SelectInputValidationChildren,
     ...formDataChildren,
   };
-  return new UICompBuilder(childrenMap, (props) => {
+  return new UICompBuilder(childrenMap, (props, dispatch) => {
+    const theme = useContext(ThemeContext);
+    const compType = useContext(CompTypeContext);
+    const compTheme = theme?.theme?.components?.[compType];
+    const styleProps: Record<string, any> = {};
+    ['style', 'labelStyle', 'inputFieldStyle', 'animationStyle'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []);
+
     const [
       validateState,
       handleChange,
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx
index cba0023b9..805d0a67b 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx
@@ -16,20 +16,40 @@ import { PaddingControl } from "../../controls/paddingControl";
 import { MarginControl } from "../../controls/marginControl";
 import { migrateOldData, withDefault } from "comps/generators/simpleGenerators";
 import { fixOldInputCompData } from "../textInputComp/textInputConstants";
+import { useContext, useEffect } from "react";
+import { setInitialCompStyles } from "../../utils/themeUtil";
+import { ThemeContext } from "../../utils/themeContext";
+import { CompTypeContext } from "../../utils/compTypeContext";
 
 let MultiSelectBasicComp = (function () {
   const childrenMap = {
     ...SelectChildrenMap,
     defaultValue: arrayStringExposingStateControl("defaultValue", ["1", "2"]),
     value: arrayStringExposingStateControl("value"),
-    style: withDefault(styleControl(InputFieldStyle),{background:'transparent'}),
-    labelStyle:styleControl(LabelStyle),
-    inputFieldStyle:withDefault(styleControl(MultiSelectStyle),{borderWidth:'1px'}),
+    style: styleControl(InputFieldStyle , 'style'),
+    labelStyle:styleControl(LabelStyle , 'labelStyle'),
+    inputFieldStyle:styleControl(MultiSelectStyle , 'inputFieldStyle'),
     childrenInputFieldStyle:styleControl(ChildrenMultiSelectStyle),
     margin: MarginControl,	
     padding: PaddingControl,
   };
   return new UICompBuilder(childrenMap, (props, dispatch) => {
+    const theme = useContext(ThemeContext);
+    const compType = useContext(CompTypeContext);
+    const compTheme = theme?.theme?.components?.[compType];
+    const styleProps: Record<string, any> = {};
+    ['style', 'labelStyle', 'inputFieldStyle'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []);
+
     const valueSet = new Set<any>(props.options.map((o) => o.value)); // Filter illegal default values entered by the user
     const [
       validateState,
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx
index d1a2a2daa..b35ec1b2a 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx
@@ -13,6 +13,10 @@ import { EllipsisTextCss, ValueFromOption } from "lowcoder-design";
 import { trans } from "i18n";
 import { fixOldInputCompData } from "../textInputComp/textInputConstants";
 import { migrateOldData } from "comps/generators/simpleGenerators";
+import { ThemeContext } from "../../utils/themeContext";
+import { useContext, useEffect } from "react";
+import { CompTypeContext } from "../../utils/compTypeContext";
+import { setInitialCompStyles } from "../../utils/themeUtil";
 
 const getStyle = (style: RadioStyleType, inputFieldStyle?:RadioStyleType ) => {
   return css`
@@ -97,7 +101,23 @@ const Radio = styled(AntdRadioGroup)<{
 `;
 
 let RadioBasicComp = (function () {
-  return new UICompBuilder(RadioChildrenMap, (props) => {
+  return new UICompBuilder(RadioChildrenMap, (props, dispatch) => {
+    const theme = useContext(ThemeContext);
+    const compType = useContext(CompTypeContext);
+    const compTheme = theme?.theme?.components?.[compType];
+    const styleProps: Record<string, any> = {};
+    ['style', 'labelStyle', 'inputFieldStyle', 'animationStyle'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []);
+
     const [
       validateState,
       handleChange,
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioCompConstants.tsx
index 0c3554ee1..ca740c6db 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioCompConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioCompConstants.tsx
@@ -37,12 +37,12 @@ export const RadioChildrenMap = {
   disabled: BoolCodeControl,
   onEvent: ChangeEventHandlerControl,
   options: SelectInputOptionControl,
-  style: styleControl(InputFieldStyle),
-  labelStyle:styleControl(LabelStyle),
+  style: styleControl(InputFieldStyle , 'style'),
+  labelStyle:styleControl(LabelStyle , 'labelStyle'),
   layout: dropdownControl(RadioLayoutOptions, "horizontal"),
   viewRef: RefControl<HTMLDivElement>,
-  inputFieldStyle: withDefault(styleControl(RadioStyle),{borderWidth: '1px'}),
-  animationStyle: styleControl(AnimationStyle),
+  inputFieldStyle:styleControl(RadioStyle ,'inputFieldStyle' ),
+  animationStyle: styleControl(AnimationStyle , 'animationStyle'),
   ...SelectInputValidationChildren,
   ...formDataChildren,
 };
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx
index c8309f4a5..82719f9e0 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx
@@ -23,10 +23,13 @@ import { trans } from "i18n";
 import { hasIcon } from "comps/utils";
 import { RefControl } from "comps/controls/refControl";
 
-import { useContext } from "react";
+import { useContext, useEffect } from "react";
 import { EditorContext } from "comps/editorState";
 import { migrateOldData, withDefault } from "comps/generators/simpleGenerators";
 import { fixOldInputCompData } from "../textInputComp/textInputConstants";
+import { ThemeContext } from "../../utils/themeContext";
+import { CompTypeContext } from "../../utils/compTypeContext";
+import { setInitialCompStyles } from "../../utils/themeUtil";
 
 
 const getStyle = (style: SegmentStyleType) => {
@@ -77,8 +80,8 @@ const SegmentChildrenMap = {
   disabled: BoolCodeControl,
   onEvent: ChangeEventHandlerControl,
   options: SelectOptionControl,
-  style: withDefault(styleControl(SegmentStyle), { borderWidth: '1px' }),
-  animationStyle:styleControl(AnimationStyle),
+  style: styleControl(SegmentStyle, 'style'),
+  animationStyle: styleControl(AnimationStyle, 'animationStyle'),
   viewRef: RefControl<HTMLDivElement>,
 
   ...SelectInputValidationChildren,
@@ -86,7 +89,23 @@ const SegmentChildrenMap = {
 };
 
 let SegmentedControlBasicComp = (function () {
-  return new UICompBuilder(SegmentChildrenMap, (props) => {
+  return new UICompBuilder(SegmentChildrenMap, (props, dispatch) => {
+    const theme = useContext(ThemeContext);
+    const compType = useContext(CompTypeContext);
+    const compTheme = theme?.theme?.components?.[compType];
+    const styleProps: Record<string, any> = {};
+    ['style', 'animationStyle'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []);
+  
     const [
       validateState,
       handleChange,
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx
index 73625895e..7c620ec97 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx
@@ -15,22 +15,41 @@ import {
   SelectInputInvalidConfig,
   useSelectInputValidate,
 } from "./selectInputConstants";
-import { useRef } from "react";
+import { useContext, useEffect, useRef } from "react";
 import { RecordConstructorToView } from "lowcoder-core";
 import { fixOldInputCompData } from "../textInputComp/textInputConstants";
 import { migrateOldData, withDefault } from "comps/generators/simpleGenerators";
+import { setInitialCompStyles } from "../../utils/themeUtil";
+import { ThemeContext } from "../../utils/themeContext";
+import { CompTypeContext } from "../../utils/compTypeContext";
 
 let SelectBasicComp = (function () {
   const childrenMap = {
     ...SelectChildrenMap,
     defaultValue: stringExposingStateControl("defaultValue"),
     value: stringExposingStateControl("value"),
-    style: withDefault(styleControl(InputFieldStyle),{background:'transparent'}),
-    labelStyle: styleControl(LabelStyle),
-    inputFieldStyle: withDefault(styleControl(SelectStyle),{borderWidth:'1px'}),
-    childrenInputFieldStyle: withDefault(styleControl(ChildrenMultiSelectStyle),{text:'#000'})
+    style: styleControl(InputFieldStyle , 'style'),
+    labelStyle: styleControl(LabelStyle , 'labelStyle'),
+    inputFieldStyle: styleControl(SelectStyle , 'inputFieldStyle'),
+    childrenInputFieldStyle: styleControl(ChildrenMultiSelectStyle, 'childrenInputFieldStyle')
   };
   return new UICompBuilder(childrenMap, (props, dispatch) => {
+    const theme = useContext(ThemeContext);
+    const compType = useContext(CompTypeContext);
+    const compTheme = theme?.theme?.components?.[compType];
+    const styleProps: Record<string, any> = {};
+    ['style', 'labelStyle', 'inputFieldStyle', 'childrenInputFieldStyle'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []);
+
     const [
       validateState,
       handleChange,
diff --git a/client/packages/lowcoder/src/comps/comps/switchComp.tsx b/client/packages/lowcoder/src/comps/comps/switchComp.tsx
index 687cde5c0..2ca60cdc9 100644
--- a/client/packages/lowcoder/src/comps/comps/switchComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/switchComp.tsx
@@ -17,8 +17,11 @@ import { RefControl } from "comps/controls/refControl";
 import { refMethods } from "comps/generators/withMethodExposing";
 import { blurMethod, clickMethod, focusWithOptions } from "comps/utils/methodUtils";
 
-import { useContext } from "react";
+import { useContext, useEffect } from "react";
 import { EditorContext } from "comps/editorState";
+import { setInitialCompStyles } from "../utils/themeUtil";
+import { ThemeContext } from "../utils/themeContext";
+import { CompTypeContext } from "../utils/compTypeContext";
 
 const EventOptions = [
   changeEvent,
@@ -89,18 +92,35 @@ let SwitchTmpComp = (function () {
     label: LabelControl,
     onEvent: eventHandlerControl(EventOptions),
     disabled: BoolCodeControl,
-    style: styleControl(InputFieldStyle),
-    animationStyle: styleControl(AnimationStyle),
+    style: styleControl(InputFieldStyle , 'style'),
+    animationStyle: styleControl(AnimationStyle , 'animationStyle'),
     labelStyle: styleControl(
       LabelStyle.filter(
         (style) => ['accent', 'validate'].includes(style.name) === false
-      )
+      ),
+      'labelStyle'
     ),
     viewRef: RefControl<HTMLElement>,
-    inputFieldStyle:migrateOldData(styleControl(SwitchStyle), fixOldData),
+    inputFieldStyle: migrateOldData(styleControl(SwitchStyle, 'inputFieldStyle'), fixOldData),
     ...formDataChildren,
   };
-  return new UICompBuilder(childrenMap, (props) => {
+  return new UICompBuilder(childrenMap, (props, dispatch) => {
+    const theme = useContext(ThemeContext);
+    const compType = useContext(CompTypeContext);
+    const compTheme = theme?.theme?.components?.[compType];
+    const styleProps: Record<string, any> = {};
+    ['style', 'labelStyle', 'inputFieldStyle', 'animationStyle'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []);
+
     return props.label({
       style: props.style,
       labelStyle: props.labelStyle,
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx
index 127039ab0..c67743c76 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx
@@ -25,7 +25,7 @@ import {
 } from "./textInputConstants";
 import { withMethodExposing } from "../../generators/withMethodExposing";
 import { styleControl } from "comps/controls/styleControl";
-import styled from "styled-components";
+import styled, { ThemeContext } from "styled-components";
 import {  AnimationStyle, InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle } from "comps/controls/styleControlConstants";
 import {
   hiddenPropertyView,
@@ -39,9 +39,11 @@ import { trans } from "i18n";
 import { IconControl } from "comps/controls/iconControl";
 import { hasIcon } from "comps/utils";
 import { RefControl } from "comps/controls/refControl";
-import React, { useContext } from "react";
+import React, { useContext, useEffect } from "react";
 import { EditorContext } from "comps/editorState";
 import { migrateOldData } from "comps/generators/simpleGenerators";
+import { CompTypeContext } from "../../utils/compTypeContext";
+import { setInitialCompStyles } from "../../utils/themeUtil";
 
 const PasswordStyle = styled(InputPassword)<{
   $style: InputLikeStyleType;
@@ -59,13 +61,29 @@ let PasswordTmpComp = (function () {
     validationType: dropdownControl(TextInputValidationOptions, "Regex"),
     visibilityToggle: BoolControl.DEFAULT_TRUE,
     prefixIcon: IconControl,
-    style: withDefault(styleControl(InputFieldStyle),{background:'transparent'}) , 
-    labelStyle: styleControl(LabelStyle),
-    inputFieldStyle: withDefault(styleControl(InputLikeStyle),{borderWidth: '1px'}), 
-    animationStyle: styleControl(AnimationStyle),
+    style: styleControl(InputFieldStyle ,'style' ) , 
+    labelStyle: styleControl(LabelStyle,'labelStyle'),
+    inputFieldStyle: styleControl(InputLikeStyle , 'inputFieldStyle'), 
+    animationStyle: styleControl(AnimationStyle , 'animationStyle'),
   };
-  return new UICompBuilder(childrenMap, (props) => {
+  return new UICompBuilder(childrenMap, (props, dispatch) => {
     const [inputProps, validateState] = useTextInputProps(props);
+    const theme = useContext(ThemeContext);
+    const compType = useContext(CompTypeContext);
+    const compTheme = theme?.theme?.components?.[compType];
+    const styleProps: Record<string, any> = {};
+    ['style', 'labelStyle', 'inputFieldStyle', 'animationStyle'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []);
+
     return props.label({
       required: props.required,
       children: (
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx
index ba2dd3438..40fc92e40 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx
@@ -34,9 +34,12 @@ import { RefControl } from "comps/controls/refControl";
 import { TextAreaRef } from "antd/es/input/TextArea";
 import { blurMethod, focusWithOptions } from "comps/utils/methodUtils";
 
-import React, { useContext } from "react";
+import React, { useContext, useEffect } from "react";
 import { EditorContext } from "comps/editorState";
 import { migrateOldData } from "comps/generators/simpleGenerators";
+import { setInitialCompStyles } from "../../utils/themeUtil";
+import { ThemeContext } from "../../utils/themeContext";
+import { CompTypeContext } from "../../utils/compTypeContext";
 
 const TextAreaStyled = styled(TextArea)<{
   $style: InputLikeStyleType;
@@ -73,13 +76,29 @@ let TextAreaTmpComp = (function () {
     viewRef: RefControl<TextAreaRef>,
     allowClear: BoolControl,
     autoHeight: withDefault(AutoHeightControl, "fixed"),
-    style: withDefault(styleControl(InputFieldStyle),{background:'transparent'}) , 
-    labelStyle: styleControl(LabelStyle),
-    inputFieldStyle:  withDefault(styleControl(InputLikeStyle), {borderWidth: '1px'}),
-    animationStyle: styleControl(AnimationStyle)
+    style: styleControl(InputFieldStyle, 'style') , 
+    labelStyle: styleControl(LabelStyle ,'labelStyle' ),
+    inputFieldStyle: styleControl(InputLikeStyle , 'inputFieldStyle'),
+    animationStyle: styleControl(AnimationStyle, 'animationStyle')
   };
-  return new UICompBuilder(childrenMap, (props) => {
+  return new UICompBuilder(childrenMap, (props, dispatch) => {
     const [inputProps, validateState] = useTextInputProps(props);
+    const theme = useContext(ThemeContext);
+    const compType = useContext(CompTypeContext);
+    const compTheme = theme?.theme?.components?.[compType];
+    const styleProps: Record<string, any> = {};
+    ['style', 'labelStyle', 'inputFieldStyle', 'animationStyle'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []);
+
     return props.label({
       required: props.required,
       inputFieldStyle:props.inputFieldStyle,
diff --git a/client/packages/lowcoder/src/constants/themeConstants.ts b/client/packages/lowcoder/src/constants/themeConstants.ts
index f5815d6a9..20cd5f7fc 100644
--- a/client/packages/lowcoder/src/constants/themeConstants.ts
+++ b/client/packages/lowcoder/src/constants/themeConstants.ts
@@ -55,6 +55,24 @@ const rating = {
   }
 }
 
+const time = {
+  style: {
+    background: 'transparent',
+    borderWidth:'1px'
+  },
+  inputFieldStyle: {
+    borderStyle: 'solid',
+    borderWidth: '1px',
+  },
+};
+
+const segmentedControl = {
+  style: {
+    borderWidth: '0px',
+  }
+};
+;
+
 export const defaultTheme: ThemeDetail = {
   primary: "#3377FF",
   textDark: "#222222",
@@ -83,5 +101,21 @@ export const defaultTheme: ThemeDetail = {
     table,
     link,
     rating,
+    password: input,
+    numberInput: input,
+    textArea: input,
+    autocomplete: input,
+    switch: input,
+    checkbox: input,
+    radio: input,
+    date: input,
+    dateRange: input,
+    time,
+    timeRange: time,
+    slider: input,
+    rangeSlider: input,
+    segmentedControl,
+    select: input,
+    multiSelect: input,
   },
 };
diff --git a/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx b/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
index 62dc5cbea..de0eb629d 100644
--- a/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
+++ b/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
@@ -346,7 +346,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
           </Header>
 
           <DetailContent>
-            <ThemeSettingsView>
+            {/* <ThemeSettingsView>
               <StyleThemeSettingsCover>
                 <ColorPickerCompIcon width={"36px"} style={{marginRight : "10px"}}/> <h2 style={{color: "#ffffff", marginTop : "8px"}}> {trans("theme.mainColor")}</h2>
               </StyleThemeSettingsCover>
@@ -506,7 +506,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
                   <PreviewApp style={{marginTop: '3px', height: "620px", width: "100%"}} theme={this.state.theme} dsl={dsl} />
                 </Flex>
               </Card>
-            </ThemeSettingsView>
+            </ThemeSettingsView> */}
 
             <ThemeSettingsView>
               <StyleThemeSettingsCover>
@@ -544,7 +544,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
               </Card>
             </ThemeSettingsView>
 
-            <ThemeSettingsView>
+            {/* <ThemeSettingsView>
               <StyleThemeSettingsCover>
                 <ChartCompIcon width={"36px"} style={{marginRight : "10px"}}/> <h2 style={{color: "#ffffff", marginTop : "8px"}}> {trans("theme.charts")}</h2>
               </StyleThemeSettingsCover>
@@ -576,7 +576,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
                   <PreviewApp style={{ height: "380px", width: "100%", margin: "0" }} theme={this.state.theme} dsl={chartDsl} />
                 </Flex>
               </Card>
-            </ThemeSettingsView>
+            </ThemeSettingsView> */}
 
           </DetailContent>
 

From 736ad0380a99804154321edbcef00087c0244853 Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Mon, 17 Jun 2024 05:23:45 +0500
Subject: [PATCH 28/57] Theme: apply theme styles on time comp

---
 .../src/comps/comps/dateComp/dateComp.tsx     |  2 +-
 .../src/comps/comps/dateComp/timeComp.tsx     | 58 +++++++++++++++----
 .../lowcoder/src/constants/themeConstants.ts  | 15 +----
 .../src/pages/setting/theme/detail/index.tsx  |  2 +-
 4 files changed, 50 insertions(+), 27 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx
index 125aadaba..3c8ab59cb 100644
--- a/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx
@@ -88,7 +88,7 @@ const commonChildren = {
   suffixIcon: withDefault(IconControl, "/icon:regular/calendar"),
   ...validationChildren,
   viewRef: RefControl<CommonPickerMethods>,
-  inputFieldStyle: withDefault(styleControl(DateTimeStyle, 'inputFieldStyle'), defaultStyle),
+  inputFieldStyle: styleControl(DateTimeStyle, 'inputFieldStyle'),
 };
 type CommonChildrenType = RecordConstructorToComp<typeof commonChildren>;
 
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx
index ef8b13b99..7dbd00051 100644
--- a/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx
@@ -25,7 +25,7 @@ import {
 } from "../../generators/withExposing";
 import { formDataChildren, FormDataPropertyView } from "../formComp/formDataConstants";
 import { styleControl } from "comps/controls/styleControl";
-import { DateTimeStyle, DateTimeStyleType } from "comps/controls/styleControlConstants";
+import { AnimationStyle, DateTimeStyle, DateTimeStyleType, InputFieldStyle, LabelStyle } from "comps/controls/styleControlConstants";
 import { withMethodExposing } from "../../generators/withMethodExposing";
 import {
   disabledPropertyView,
@@ -76,7 +76,13 @@ const commonChildren = {
   hourStep: RangeControl.closed(1, 24, 1),
   minuteStep: RangeControl.closed(1, 60, 1),
   secondStep: RangeControl.closed(1, 60, 1),
-  style: styleControl(DateTimeStyle, 'style'),
+  style: styleControl(InputFieldStyle, 'style'),
+  animationStyle: styleControl(AnimationStyle, 'animationStyle'),
+  labelStyle: styleControl(
+    LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false),
+    'labelStyle',
+  ),
+  inputFieldStyle: styleControl(DateTimeStyle, 'inputFieldStyle'),
   suffixIcon: withDefault(IconControl, "/icon:regular/clock"),
   viewRef: RefControl<CommonPickerMethods>,
   ...validationChildren,
@@ -144,7 +150,7 @@ export const timePickerControl = new UICompBuilder(childrenMap, (props, dispatch
   const compType = useContext(CompTypeContext);
   const compTheme = theme?.theme?.components?.[compType];
   const styleProps: Record<string, any> = {};
-  ['style'].forEach((key: string) => {
+  ['style', 'labelStyle', 'inputFieldStyle', 'animationStyle'].forEach((key: string) => {
     styleProps[key] = (props as any)[key];
   });
 
@@ -164,10 +170,13 @@ export const timePickerControl = new UICompBuilder(childrenMap, (props, dispatch
   return props.label({
     required: props.required,
     style: props.style,
+    labelStyle: props.labelStyle,
+    inputFieldStyle:props.inputFieldStyle,
+    animationStyle:props.animationStyle,
     children: (
       <TimeUIView
         viewRef={props.viewRef}
-        $style={props.style}
+        $style={props.inputFieldStyle}
         disabled={props.disabled}
         value={time?.isValid() ? time : null}
         disabledTime={() => disabledTime(props.minTime, props.maxTime)}
@@ -234,9 +243,20 @@ export const timePickerControl = new UICompBuilder(childrenMap, (props, dispatch
       )}
 
       {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
-        <Section name={sectionNames.style}>
-          {children.style.getPropertyView()}
-        </Section>
+        <>
+          <Section name={sectionNames.style}>
+            {children.style.getPropertyView()}
+          </Section>
+          <Section name={sectionNames.labelStyle}>
+            {children.labelStyle.getPropertyView()}
+          </Section>
+          <Section name={sectionNames.inputFieldStyle}>
+            {children.inputFieldStyle.getPropertyView()}
+          </Section>
+          <Section name={sectionNames.animationStyle} hasTooltip={true}>
+            {children.animationStyle.getPropertyView()}
+          </Section>
+        </>
       )}
     </>
   ))
@@ -255,7 +275,7 @@ export const timeRangeControl = (function () {
     const compType = useContext(CompTypeContext);
     const compTheme = theme?.theme?.components?.[compType];
     const styleProps: Record<string, any> = {};
-    ['style'].forEach((key: string) => {
+    ['style', 'labelStyle', 'inputFieldStyle', 'animationStyle'].forEach((key: string) => {
       styleProps[key] = (props as any)[key];
     });
 
@@ -280,7 +300,7 @@ export const timeRangeControl = (function () {
     const children = (
       <TimeRangeUIView
         viewRef={props.viewRef}
-        $style={props.style}
+        $style={props.inputFieldStyle}
         disabled={props.disabled}
         start={start?.isValid() ? start : null}
         end={end?.isValid() ? end : null}
@@ -307,6 +327,9 @@ export const timeRangeControl = (function () {
     return props.label({
       required: props.required,
       style: props.style,
+      labelStyle: props.labelStyle,
+      inputFieldStyle:props.inputFieldStyle,
+      animationStyle:props.animationStyle,
       children: children,
       ...(startResult.validateStatus !== "success"
         ? startResult
@@ -359,9 +382,20 @@ export const timeRangeControl = (function () {
         )}
 
         {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
-          <Section name={sectionNames.style}>
-            {children.style.getPropertyView()}
-          </Section>
+          <>
+            <Section name={sectionNames.style}>
+              {children.style.getPropertyView()}
+            </Section>
+            <Section name={sectionNames.labelStyle}>
+              {children.labelStyle.getPropertyView()}
+            </Section>
+            <Section name={sectionNames.inputFieldStyle}>
+              {children.inputFieldStyle.getPropertyView()}
+            </Section>
+            <Section name={sectionNames.animationStyle} hasTooltip={true}>
+              {children.animationStyle.getPropertyView()}
+            </Section>
+          </>
         )}
       </>
     ))
diff --git a/client/packages/lowcoder/src/constants/themeConstants.ts b/client/packages/lowcoder/src/constants/themeConstants.ts
index 20cd5f7fc..dfd101540 100644
--- a/client/packages/lowcoder/src/constants/themeConstants.ts
+++ b/client/packages/lowcoder/src/constants/themeConstants.ts
@@ -55,17 +55,6 @@ const rating = {
   }
 }
 
-const time = {
-  style: {
-    background: 'transparent',
-    borderWidth:'1px'
-  },
-  inputFieldStyle: {
-    borderStyle: 'solid',
-    borderWidth: '1px',
-  },
-};
-
 const segmentedControl = {
   style: {
     borderWidth: '0px',
@@ -110,8 +99,8 @@ export const defaultTheme: ThemeDetail = {
     radio: input,
     date: input,
     dateRange: input,
-    time,
-    timeRange: time,
+    time: input,
+    timeRange: input,
     slider: input,
     rangeSlider: input,
     segmentedControl,
diff --git a/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx b/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
index de0eb629d..8ff05023d 100644
--- a/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
+++ b/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
@@ -44,7 +44,7 @@ import { messageInstance } from "lowcoder-design/src/components/GlobalInstances"
 import { Card, Collapse, CollapseProps, Divider, Flex, List, Tooltip } from 'antd';
 
 import { ThemeCompPanel } from "pages/setting/theme/ThemeCompPanel";
-import { JSONObject } from "@lowcoder-ee/index.sdk";
+import { JSONObject } from "@lowcoder-ee/util/jsonTypes";
 
 const ThemeSettingsView = styled.div`
   font-size: 14px;

From 727630a9ddcc295ac491cad83237ff553f907892 Mon Sep 17 00:00:00 2001
From: Mac <mac@192.168.1.8>
Date: Mon, 17 Jun 2024 14:14:55 +0500
Subject: [PATCH 29/57] responsiveLayout component

---
 .../responsiveLayout/responsiveLayout.tsx     | 29 ++++++++++++++++---
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx b/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx
index fe3509aba..5e82dd463 100644
--- a/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx
+++ b/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx
@@ -21,7 +21,7 @@ import { NameGenerator } from "comps/utils";
 import { Section, controlItem, sectionNames } from "lowcoder-design";
 import { HintPlaceHolder } from "lowcoder-design";
 import _ from "lodash";
-import React from "react";
+import React, { useEffect } from "react";
 import styled from "styled-components";
 import { IContainer } from "../containerBase/iContainer";
 import { SimpleContainerComp } from "../containerBase/simpleContainerComp";
@@ -42,6 +42,9 @@ import { EditorContext } from "comps/editorState";
 
 import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
 import { DisabledContext } from "comps/generators/uiCompBuilder";
+import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
 
 const RowWrapper = styled(Row)<{
   $style: ResponsiveLayoutRowStyleType;
@@ -91,9 +94,9 @@ const childrenMap = {
   autoHeight: AutoHeightControl,
   rowBreak: withDefault(BoolControl, false),
   matchColumnsHeight: withDefault(BoolControl, true),
-  style: withDefault(styleControl(ResponsiveLayoutRowStyle), {}),
-  columnStyle: withDefault(styleControl(ResponsiveLayoutColStyle), {}),
-  animationStyle:styleControl(AnimationStyle),
+  style: styleControl(ResponsiveLayoutRowStyle , 'style'),
+  columnStyle: styleControl(ResponsiveLayoutColStyle , 'columnStyle'),
+  animationStyle:styleControl(AnimationStyle , 'animationStyle'),
   columnPerRowLG: withDefault(NumberControl, 4),
   columnPerRowMD: withDefault(NumberControl, 2),
   columnPerRowSM: withDefault(NumberControl, 1),
@@ -185,6 +188,24 @@ const ResponsiveLayout = (props: ResponsiveLayoutProps) => {
 
 export const ResponsiveLayoutBaseComp = (function () {
   return new UICompBuilder(childrenMap, (props, dispatch) => {
+
+    const theme = useContext(ThemeContext);
+    const compType = useContext(CompTypeContext);
+    const compTheme = theme?.theme?.components?.[compType];
+    const styleProps: Record<string, any> = {};
+    ['style', 'animationStyle', 'columnStyle'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []);
+
+    
     return (
       <ResponsiveLayout {...props} dispatch={dispatch} />
     );

From 9cc5c45ddebf84a36b3313a8b24ddaca02439a17 Mon Sep 17 00:00:00 2001
From: Mac <mac@192.168.1.8>
Date: Mon, 17 Jun 2024 14:41:34 +0500
Subject: [PATCH 30/57] card component

---
 .../comps/comps/containerComp/cardComp.tsx    | 28 ++++++++++++++++---
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx
index 7c8bea425..dbd6c1791 100644
--- a/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx
@@ -20,6 +20,9 @@ import { ButtonEventHandlerControl, CardEventHandlerControl, clickEvent, refresh
 import { optionsControl } from "comps/controls/optionsControl";
 import { dropdownControl } from "comps/controls/dropdownControl";
 import { styleControl } from "comps/controls/styleControl";
+import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
 const { Meta } = Card;
 
 const Wrapper = styled.div<{
@@ -186,13 +189,30 @@ export const ContainerBaseComp = (function () {
     actionOptions: ActionOptionControl,
 
     onEvent: CardEventHandlerControl,
-    style: styleControl(CardStyle),
-    headerStyle: styleControl(CardHeaderStyle),
-    bodyStyle: styleControl(CardHeaderStyle),
-    animationStyle: styleControl(AnimationStyle),
+    style: styleControl(CardStyle , 'style'),
+    headerStyle: styleControl(CardHeaderStyle , 'headerStyle'),
+    bodyStyle: styleControl(CardHeaderStyle , 'bodyStyle'),
+    animationStyle: styleControl(AnimationStyle , 'animationStyle'),
   };
 
   return new ContainerCompBuilder(childrenMap, (props, dispatch) => {
+
+    const theme = useContext(ThemeContext);
+    const compType = useContext(CompTypeContext);
+    const compTheme = theme?.theme?.components?.[compType];
+    const styleProps: Record<string, any> = {};
+    ['style', 'headerStyle', 'bodyStyle', 'animationStyle'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []);
+    
     props.container.showHeader = false;
     // 注入容器参数
     props.container.style = Object.assign(props.container.style, {

From 9ee311e154b310b6c4b8eefa1f7148b2babd7bb8 Mon Sep 17 00:00:00 2001
From: Mac <mac@192.168.1.8>
Date: Mon, 17 Jun 2024 14:44:00 +0500
Subject: [PATCH 31/57] column layout component

---
 .../comps/comps/columnLayout/columnLayout.tsx | 26 ++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/columnLayout/columnLayout.tsx b/client/packages/lowcoder/src/comps/comps/columnLayout/columnLayout.tsx
index 2302d31e5..65d9d83c2 100644
--- a/client/packages/lowcoder/src/comps/comps/columnLayout/columnLayout.tsx
+++ b/client/packages/lowcoder/src/comps/comps/columnLayout/columnLayout.tsx
@@ -35,11 +35,14 @@ import { messageInstance } from "lowcoder-design/src/components/GlobalInstances"
 import { BoolControl } from "comps/controls/boolControl";
 import { BoolCodeControl, NumberControl, StringControl } from "comps/controls/codeControl";
 
-import { useContext } from "react";
+import { useContext, useEffect } from "react";
 import { EditorContext } from "comps/editorState";
 
 import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
 import { DisabledContext } from "comps/generators/uiCompBuilder";
+import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
 
 const ContainWrapper = styled.div<{
   $style: ContainerStyleType & {
@@ -95,8 +98,8 @@ const childrenMap = {
   rowGap: withDefault(StringControl, "20px"),
   templateColumns: withDefault(StringControl, "1fr 1fr"),
   columnGap: withDefault(StringControl, "20px"),
-  style: withDefault(styleControl(ContainerStyle), {}),
-  columnStyle: withDefault(styleControl(ResponsiveLayoutColStyle),{borderWidth:'1px'})
+  style: styleControl(ContainerStyle, 'style'),
+  columnStyle: styleControl(ResponsiveLayoutColStyle , 'columnStyle')
 };
 
 type ViewProps = RecordConstructorToView<typeof childrenMap>;
@@ -178,6 +181,23 @@ const ColumnLayout = (props: ColumnLayoutProps) => {
 
 export const ResponsiveLayoutBaseComp = (function () {
   return new UICompBuilder(childrenMap, (props, dispatch) => {
+
+    const theme = useContext(ThemeContext);
+    const compType = useContext(CompTypeContext);
+    const compTheme = theme?.theme?.components?.[compType];
+    const styleProps: Record<string, any> = {};
+    ['style', 'columnStyle'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []);
+    
     return (
       <ColumnLayout {...props} dispatch={dispatch} />
     );

From a5ec6968c2ac0913f39c5c6f8b13de90e56b98b6 Mon Sep 17 00:00:00 2001
From: Mac <mac@192.168.1.8>
Date: Mon, 17 Jun 2024 14:54:15 +0500
Subject: [PATCH 32/57] tabbed container component

---
 .../comps/comps/tabs/tabbedContainerComp.tsx  | 30 +++++++++++++++----
 1 file changed, 25 insertions(+), 5 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx
index 613032f90..2c346e67d 100644
--- a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx
@@ -15,7 +15,7 @@ import { NameGenerator } from "comps/utils";
 import { ScrollBar, Section, sectionNames } from "lowcoder-design";
 import { HintPlaceHolder } from "lowcoder-design";
 import _ from "lodash";
-import React, { useCallback, useContext } from "react";
+import React, { useCallback, useContext, useEffect } from "react";
 import styled, { css } from "styled-components";
 import { IContainer } from "../containerBase/iContainer";
 import { SimpleContainerComp } from "../containerBase/simpleContainerComp";
@@ -35,6 +35,9 @@ import { checkIsMobile } from "util/commonUtils";
 import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
 import { BoolControl } from "comps/controls/boolControl";
 import { PositionControl } from "comps/controls/dropdownControl";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
+import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
 
 const EVENT_OPTIONS = [
   {
@@ -57,10 +60,10 @@ const childrenMap = {
   onEvent: eventHandlerControl(EVENT_OPTIONS),
   disabled: BoolCodeControl,
   showHeader: withDefault(BoolControl, true),
-  style: withDefault(styleControl(TabContainerStyle),{borderWidth:'1px'}),
-  headerStyle: styleControl(ContainerHeaderStyle),
-  bodyStyle: styleControl(TabBodyStyle),
-  animationStyle: styleControl(AnimationStyle),
+  style: styleControl(TabContainerStyle , 'style'),
+  headerStyle: styleControl(ContainerHeaderStyle , 'headerStyle'),
+  bodyStyle: styleControl(TabBodyStyle , 'bodyStyle'),
+  animationStyle: styleControl(AnimationStyle , 'animationStyle'),
   tabsGutter: withDefault(NumberControl, 32),
   tabsCentered: withDefault(BoolControl, false),
 };
@@ -288,6 +291,23 @@ const TabbedContainer = (props: TabbedContainerProps) => {
 
 export const TabbedContainerBaseComp = (function () {
   return new UICompBuilder(childrenMap, (props, dispatch) => {
+
+    const theme = useContext(ThemeContext);
+    const compType = useContext(CompTypeContext);
+    const compTheme = theme?.theme?.components?.[compType];
+    const styleProps: Record<string, any> = {};
+    ['style', 'headerStyle', 'bodyStyle', 'animationStyle'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []);
+    
     return (
       <DisabledContext.Provider value={props.disabled}>
         <TabbedContainer {...props} dispatch={dispatch} />

From 22ae427f94aec54924a197d81cfbd8fc416e8fe1 Mon Sep 17 00:00:00 2001
From: Mac <mac@192.168.1.8>
Date: Mon, 17 Jun 2024 15:55:14 +0500
Subject: [PATCH 33/57] step control

---
 .../comps/selectInputComp/stepControl.tsx     | 25 ++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx
index ab3a3e95c..6a1699f7c 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx
@@ -18,6 +18,9 @@ import { RefControl } from "comps/controls/refControl";
 import { dropdownControl } from "comps/controls/dropdownControl";
 import { useContext, useState, useEffect } from "react";
 import { EditorContext } from "comps/editorState";
+import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
 
 
 const sizeOptions = [
@@ -91,13 +94,29 @@ const StepsChildrenMap = {
   disabled: BoolCodeControl,
   onEvent: ChangeEventHandlerControl,
   options: StepOptionControl,
-  style: withDefault( styleControl(StepsStyle), {text:'#D7D9E0'}),
+  style: styleControl(StepsStyle , 'style'),
   viewRef: RefControl<HTMLDivElement>,
-  animationStyle: styleControl(AnimationStyle)
+  animationStyle: styleControl(AnimationStyle ,'animationStyle' )
 };
 
 let StepControlBasicComp = (function () {
-  return new UICompBuilder(StepsChildrenMap, (props) => {
+  return new UICompBuilder(StepsChildrenMap, (props , dispatch) => {
+
+    const theme = useContext(ThemeContext);
+    const compType = useContext(CompTypeContext);
+    const compTheme = theme?.theme?.components?.[compType];
+    const styleProps: Record<string, any> = {};
+    ['style', 'animationStyle'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []);
 
     const StyledWrapper = styled.div<{ style: StepsStyleType, $animationStyle: AnimationStyleType }>`
     ${props=>props.$animationStyle}

From 11abdfa42fbdac1cdbf5e15b11992c3d0f04d591 Mon Sep 17 00:00:00 2001
From: Mac <mac@192.168.1.8>
Date: Mon, 17 Jun 2024 16:00:02 +0500
Subject: [PATCH 34/57] cascader

---
 .../comps/selectInputComp/cascaderComp.tsx    | 23 ++++++++++++++++++-
 .../selectInputComp/cascaderContants.tsx      |  8 +++----
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx
index 095e85f74..136f19367 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx
@@ -7,6 +7,10 @@ import { UICompBuilder, withDefault } from "../../generators";
 import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generators/withExposing";
 import { CascaderChildren, CascaderPropertyView, defaultDataSource } from "./cascaderContants";
 import { refMethods } from "comps/generators/withMethodExposing";
+import { useContext, useEffect } from "react";
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
+import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
 
 const CascaderStyle = styled(Cascader)<{ $style: CascaderStyleType,$childrenInputFieldStyle:ChildrenMultiSelectStyleType }>`
   width: 100%;
@@ -37,7 +41,24 @@ const DropdownRenderStyle = styled.div<{ $childrenInputFieldStyle: ChildrenMulti
 let CascaderBasicComp = (function () {
   const childrenMap = CascaderChildren;
 
-  return new UICompBuilder(childrenMap, (props) => {
+  return new UICompBuilder(childrenMap, (props , dispatch) => {
+
+    const theme = useContext(ThemeContext);
+    const compType = useContext(CompTypeContext);
+    const compTheme = theme?.theme?.components?.[compType];
+    const styleProps: Record<string, any> = {};
+    ['style','inputFieldStyle','labelStyle', 'animationStyle'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []);
+    
     return props.label({
       style: props.style,
       labelStyle: props.labelStyle,
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx
index d0327419c..db101e6d9 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx
@@ -34,15 +34,15 @@ export const CascaderChildren = {
   onEvent: SelectEventHandlerControl,
   allowClear: BoolControl,
   options: JSONObjectArrayControl,
-  style: styleControl(InputFieldStyle),
-  labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)),
+  style: styleControl(InputFieldStyle , 'style'),
+  labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false), 'labelStyle'),
   showSearch: BoolControl.DEFAULT_TRUE,
   viewRef: RefControl<CascaderRef>,
   margin: MarginControl,
   padding: PaddingControl,
-  inputFieldStyle:styleControl(CascaderStyle),
+  inputFieldStyle:styleControl(CascaderStyle , 'inputFieldStyle'),
   childrenInputFieldStyle:styleControl(ChildrenMultiSelectStyle),
-  animationStyle:styleControl(AnimationStyle)
+  animationStyle:styleControl(AnimationStyle ,'animationStyle')
 };
 
 export const CascaderPropertyView = (

From 1587f0b0ef111e9e4291463c5f204d3e7f762c01 Mon Sep 17 00:00:00 2001
From: Mac <mac@192.168.1.8>
Date: Mon, 17 Jun 2024 16:04:32 +0500
Subject: [PATCH 35/57] float component

---
 .../comps/buttonComp/floatButtonComp.tsx      | 29 ++++++++++++++++---
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/floatButtonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/floatButtonComp.tsx
index 1797dd070..0d9382e64 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/floatButtonComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/floatButtonComp.tsx
@@ -16,6 +16,10 @@ import { IconControl } from "comps/controls/iconControl";
 import styled from "styled-components";
 import { ButtonEventHandlerControl } from "comps/controls/eventHandlerControl";
 import { manualOptionsControl } from "comps/controls/optionsControl";
+import { useContext, useEffect } from "react";
+import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
 
 const StyledFloatButton = styled(FloatButton)<{
   $animationStyle: AnimationStyleType;
@@ -83,8 +87,8 @@ const childrenMap = {
     image: StringControl,
     icon: withDefault(IconControl, '/icon:antd/questioncircleoutlined'),
     badgeStyle: styleControl(BadgeStyle),
-    style: styleControl(FloatButtonStyle),
-    animationStyle: styleControl(AnimationStyle),
+    style: styleControl(FloatButtonStyle , 'style'),
+    animationStyle: styleControl(AnimationStyle , 'animationStyle'),
     buttons: manualOptionsControl(buttonGroupOption, {
         initOptions: [
             { id: 0, label: trans("optionsControl.optionI", { i: '1' }), icon: "/icon:antd/filetextoutlined", badge: '1' },
@@ -131,9 +135,26 @@ const FloatButtonView = (props: RecordConstructorToView<typeof childrenMap>) =>
 };
 
 let FloatButtonBasicComp = (function () {
-    return new UICompBuilder(childrenMap, (props) => (
+    return new UICompBuilder(childrenMap, (props , dispatch) => {
+        const theme = useContext(ThemeContext);
+        const compType = useContext(CompTypeContext);
+        const compTheme = theme?.theme?.components?.[compType];
+        const styleProps: Record<string, any> = {};
+        ['style', 'animationStyle'].forEach((key: string) => {
+          styleProps[key] = (props as any)[key];
+        });
+    
+        useEffect(() => {
+          setInitialCompStyles({
+            dispatch,
+            compTheme,
+            styleProps,
+          });
+        }, []);
+    
+        return(
       <FloatButtonView {...props} />
-    ))
+    )})
       .setPropertyViewFn((children) => (
         <>
           <Section name={sectionNames.basic}>

From 3ed4344de9d44a0aba927bcb9865deade2abc21c Mon Sep 17 00:00:00 2001
From: Mac <mac@192.168.1.8>
Date: Mon, 17 Jun 2024 16:27:40 +0500
Subject: [PATCH 36/57] treeSelect Component

---
 .../src/comps/comps/treeComp/treeComp.tsx     | 31 ++++++++++++++++---
 .../comps/comps/treeComp/treeSelectComp.tsx   | 31 ++++++++++++++++---
 2 files changed, 53 insertions(+), 9 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx b/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx
index d6063652f..9f71d2ccb 100644
--- a/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx
@@ -33,6 +33,9 @@ import { SelectEventHandlerControl } from "comps/controls/eventHandlerControl";
 import { trans } from "i18n";
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
+import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
 
 type TreeStyleType = StyleConfigType<typeof TreeStyle>;
 
@@ -76,9 +79,9 @@ const childrenMap = {
   label: withDefault(LabelControl, { position: "column" }),
   // TODO: more event
   onEvent: SelectEventHandlerControl,
-  style: styleControl(InputFieldStyle),
-  labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)),
-  inputFieldStyle:styleControl(TreeStyle)
+  style: styleControl(InputFieldStyle , 'style'),
+  labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false), 'labelStyle'),
+  inputFieldStyle:styleControl(TreeStyle, 'inputFieldStyle')
 };
 
 const TreeCompView = (props: RecordConstructorToView<typeof childrenMap>) => {
@@ -150,7 +153,27 @@ const TreeCompView = (props: RecordConstructorToView<typeof childrenMap>) => {
 };
 
 let TreeBasicComp = (function () {
-  return new UICompBuilder(childrenMap, (props) => <TreeCompView {...props} />)
+  return new UICompBuilder(childrenMap, (props , dispatch) => {
+
+    const theme = useContext(ThemeContext);
+    const compType = useContext(CompTypeContext);
+    const compTheme = theme?.theme?.components?.[compType];
+    const styleProps: Record<string, any> = {};
+    ['style', 'labelStyle', 'inputFieldStyle'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []);
+
+    
+    return(<TreeCompView {...props} />)}
+)
     .setPropertyViewFn((children) => (
       <>
         <Section name={sectionNames.basic}>
diff --git a/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx b/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx
index a9036be7c..d1d2e5f44 100644
--- a/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx
@@ -36,6 +36,9 @@ import { BaseSelectRef } from "rc-select";
 import { RefControl } from "comps/controls/refControl";
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
+import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
 
 const StyledTreeSelect = styled(TreeSelect)<{ $style: TreeSelectStyleType }>`
   width: 100%;
@@ -65,9 +68,9 @@ const childrenMap = {
   allowClear: BoolControl,
   showSearch: BoolControl.DEFAULT_TRUE,
   inputValue: stateComp<string>(""), // search value
-  style:styleControl(InputFieldStyle),
-  labelStyle:styleControl(LabelStyle),
-  inputFieldStyle: withDefault(styleControl(TreeSelectStyle), {borderWidth: '1px'}),
+  style:styleControl(InputFieldStyle , 'style'),
+  labelStyle:styleControl(LabelStyle  , 'labelStyle'),
+  inputFieldStyle: styleControl(TreeSelectStyle, 'inputFieldStyle'),
   viewRef: RefControl<BaseSelectRef>,
 };
 
@@ -145,9 +148,27 @@ const TreeCompView = (
 };
 
 let TreeBasicComp = (function () {
-  return new UICompBuilder(childrenMap, (props, dispatch) => (
+  return new UICompBuilder(childrenMap, (props, dispatch) => {
+    
+    const theme = useContext(ThemeContext);
+    const compType = useContext(CompTypeContext);
+    console.log("compType", compType)
+    const compTheme = theme?.theme?.components?.[compType];
+    const styleProps: Record<string, any> = {};
+    ['style', 'labelStyle', 'inputFieldStyle'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []);
+    return(
     <TreeCompView {...props} dispatch={dispatch} />
-  ))
+  )})
     .setPropertyViewFn((children) => (
       <>
         <Section name={sectionNames.basic}>

From 98e48ec31aecc5037f8007467bb9d5128f22c380 Mon Sep 17 00:00:00 2001
From: Mac <mac@192.168.1.8>
Date: Mon, 17 Jun 2024 17:14:56 +0500
Subject: [PATCH 37/57] pageLayout component

---
 .../comps/containerComp/pageLayoutComp.tsx    | 21 +++++++++++-
 .../comps/pageLayoutComp/pageLayoutComp.tsx   | 33 ++++++++++++++++---
 2 files changed, 48 insertions(+), 6 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx
index 982e288e9..7dcc0c109 100644
--- a/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx
@@ -20,17 +20,36 @@ import {
 import { PageLayout } from "../pageLayoutComp/pageLayout";
 import { AnimationStyle } from "@lowcoder-ee/comps/controls/styleControlConstants";
 import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
 
 export const ContainerBaseComp = (function () {
   const childrenMap = {
     disabled: BoolCodeControl,
-    animationStyle: styleControl(AnimationStyle),
+    animationStyle: styleControl(AnimationStyle , 'animationStyle'),
   };
 
   return new ContainerCompBuilder(childrenMap, (props, dispatch) => {
 
     const [siderCollapsed, setSiderCollapsed] = useState(false);
 
+    const theme = useContext(ThemeContext);
+    const compType = useContext(CompTypeContext);
+    const compTheme = theme?.theme?.components?.[compType];
+    const styleProps: Record<string, any> = {};
+    ['animationStyle'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []);
+
     return (
       <DisabledContext.Provider value={props.disabled}>
         <PageLayout {...props} siderCollapsed={siderCollapsed} setSiderCollapsed={setSiderCollapsed} />
diff --git a/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx b/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx
index dbe0e6111..0fc06f50c 100644
--- a/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx
@@ -28,6 +28,10 @@ import { ContainerBodyChildComp } from "./containerBodyChildComp";
 import { trans } from "i18n";
 import { ControlNode } from "lowcoder-design";
 import { StringControl } from "comps/controls/codeControl";
+import { useContext, useEffect } from "react";
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
+import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
 
 const childrenMap = {
   header: SimpleContainerComp,
@@ -51,16 +55,35 @@ const childrenMap = {
   autoHeight: AutoHeightControl,
   siderScrollbars: withDefault(BoolControl, false),
   contentScrollbars: withDefault(BoolControl, false),
-  style: withDefault(styleControl(ContainerStyle),{borderWidth:'1px'}),
-  headerStyle: styleControl(ContainerHeaderStyle),
-  siderStyle: styleControl(ContainerSiderStyle),
-  bodyStyle: styleControl(ContainerBodyStyle),
-  footerStyle: styleControl(ContainerFooterStyle),
+  style: styleControl(ContainerStyle , 'style'),
+  headerStyle: styleControl(ContainerHeaderStyle , 'headerStyle'),
+  siderStyle: styleControl(ContainerSiderStyle , 'siderStyle'),
+  bodyStyle: styleControl(ContainerBodyStyle , 'bodyStyle'),
+  footerStyle: styleControl(ContainerFooterStyle , 'footerStyle'),
 };
 
 // Compatible with old style data 2022-8-15
 const layoutBaseComp = migrateOldData(
   new MultiCompBuilder(childrenMap, (props, dispatch) => {
+
+    const theme = useContext(ThemeContext);
+    const compType = useContext(CompTypeContext);
+    console.log("compType", compType)
+    const compTheme = theme?.theme?.components?.[compType];
+    const styleProps: Record<string, any> = {};
+    ['style' , 'footerStyle', 'bodyStyle' , 'siderStyle', 'headerStyle'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []);
+
+
     return { ...props, dispatch };
   }).build(),
   fixOldStyleData

From df63d5ffe015ef0f3c645d58454f5493171f7a6e Mon Sep 17 00:00:00 2001
From: Mac <mac@192.168.1.8>
Date: Mon, 17 Jun 2024 17:25:06 +0500
Subject: [PATCH 38/57] themeConstants

---
 .../lowcoder/src/constants/themeConstants.ts  | 33 ++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/client/packages/lowcoder/src/constants/themeConstants.ts b/client/packages/lowcoder/src/constants/themeConstants.ts
index dfd101540..5357f8987 100644
--- a/client/packages/lowcoder/src/constants/themeConstants.ts
+++ b/client/packages/lowcoder/src/constants/themeConstants.ts
@@ -60,8 +60,34 @@ const segmentedControl = {
     borderWidth: '0px',
   }
 };
-;
 
+const columnLayout = {
+  columnStyle: {
+    borderWidth: '1px',
+  }
+};
+
+const tabbedContainer  = {
+  style: {
+    borderWidth: '1px',
+  }
+};
+
+const step  = {
+  style: {text:'#D7D9E0'}
+};
+
+const treeSelect  = {
+  inputFieldStyle: {
+    borderWidth: '1px',
+  }
+};
+
+const pageLayout  = {
+  style: {
+    borderWidth: '1px',
+  }
+};
 export const defaultTheme: ThemeDetail = {
   primary: "#3377FF",
   textDark: "#222222",
@@ -90,6 +116,11 @@ export const defaultTheme: ThemeDetail = {
     table,
     link,
     rating,
+    columnLayout,
+    tabbedContainer,
+    step,
+    treeSelect,
+    pageLayout,
     password: input,
     numberInput: input,
     textArea: input,

From 400c25ff5f056c7d1a6130bc2e8bb8bf58900b14 Mon Sep 17 00:00:00 2001
From: FalkWolsky <fw@falkwolsky.com>
Date: Mon, 17 Jun 2024 16:40:47 +0200
Subject: [PATCH 39/57] Fixes in Style Properties Display in Theme Settings

---
 .../components/ThemeSettingsCompStyles.tsx    | 53 +++++++-------
 .../pages/setting/theme/ThemeCompPanel.tsx    | 69 ++++++++++---------
 .../src/pages/setting/theme/detail/index.tsx  | 10 +--
 3 files changed, 70 insertions(+), 62 deletions(-)

diff --git a/client/packages/lowcoder/src/components/ThemeSettingsCompStyles.tsx b/client/packages/lowcoder/src/components/ThemeSettingsCompStyles.tsx
index ca8c295e8..9f2b0abe5 100644
--- a/client/packages/lowcoder/src/components/ThemeSettingsCompStyles.tsx
+++ b/client/packages/lowcoder/src/components/ThemeSettingsCompStyles.tsx
@@ -284,19 +284,19 @@ export default function ThemeSettingsCompStyles(props: CompStyleProps) {
       case 'radius':
       case 'cardRadius':
       case 'gap': {
-        icon = <BorderRadiusIcon style={{width: "16px", margin: "-2px 0 2px -2px", padding: "0px"}}/>;
+        icon = <BorderRadiusIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
         break;
       }
       case 'borderWidth': {
-        icon = <BorderWidthIcon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
+        icon = <BorderWidthIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
         break;
       }
       case 'borderStyle': {
-        icon = <BorderStyleIcon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
+        icon = <BorderStyleIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
         break;
       }
       case 'margin': {
-        icon = <ExpandIcon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
+        icon = <ExpandIcon style={{width: "16px", margin: "3px 0 0 5px", padding: "0px"}}/>;
         break;
       }
       case 'padding':
@@ -304,75 +304,75 @@ export default function ThemeSettingsCompStyles(props: CompStyleProps) {
       case 'containerSiderPadding':
       case 'containerFooterPadding':
       case 'containerBodyPadding': {
-        icon = <CompressIcon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
+        icon = <CompressIcon style={{width: "16px", margin: "3px 0 0 5px", padding: "0px"}}/>;
         break;
       }
       case 'opacity': {
-        icon = <OpacityIcon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
+        icon = <OpacityIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
         break;
       }
       case 'boxShadowColor': {
-        icon = <BorderWidthIcon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
+        icon = <BorderWidthIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
         break;
       }
       case 'boxShadow': {
-        icon = <ShadowIcon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
+        icon = <ShadowIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
         break;
       }
       case 'animationIterationCount': {
-        icon = <RefreshLineIcon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
+        icon = <RefreshLineIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
         break;
       }
       case 'animation': {
-        icon = <StarSmileIcon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
+        icon = <StarSmileIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
         break;
       }
       case 'animationDelay': {
-        icon = <TimerFlashIcon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
+        icon = <TimerFlashIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
         break;
       }
       case 'animationDuration': {
-        icon = <Timer2Icon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
+        icon = <Timer2Icon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
         break;
       }
       case 'textSize': {
-        icon = <TextSizeIcon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
+        icon = <TextSizeIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
         break;
       }
       case 'textWeight': {
-        icon = <TextWeightIcon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
+        icon = <TextWeightIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
         break;
       }
       case 'fontFamily': {
-        icon = <FontFamilyIcon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
+        icon = <FontFamilyIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
         break;
       }
       case 'textDecoration': {
-        icon = <TextDecorationIcon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
+        icon = <TextDecorationIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
         break;
       }
       case 'textTransform': {
-        icon = <TextTransformationIcon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
+        icon = <TextTransformationIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
         break;
       }
       case 'fontStyle': {
-        icon = <TextStyleIcon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
+        icon = <TextStyleIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
         break;
       }
       case 'backgroundImage':
       case 'headerBackgroundImage':
       case 'footerBackgroundImage': {
-        icon = <ImageCompIconSmall style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
+        icon = <ImageCompIconSmall style={{width: "16px", margin: "1px 0 0 5px", padding: "0px"}}/>;
         break;
       }
       case 'backgroundImageRepeat':
       case 'headerBackgroundImageRepeat':
       case 'footerBackgroundImageRepeat': {
-        icon = <ImageCompIconSmall style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
+        icon = <ImageCompIconSmall style={{width: "16px", margin: "1px 0 0 5px", padding: "0px"}}/>;
         break;
       }
       case 'rotation': {
-        icon = <RotationIcon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
+        icon = <RotationIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
         break;
       }
     }
@@ -382,7 +382,7 @@ export default function ThemeSettingsCompStyles(props: CompStyleProps) {
   return (
     <div style={{
       border: "1px solid lightgray",
-      borderRadius: "6px",
+      borderRadius: "4px",
       marginBottom: "16px",
     }}>
       {styleOptions.map((styleKey: string) => (
@@ -398,10 +398,11 @@ export default function ThemeSettingsCompStyles(props: CompStyleProps) {
         >
           <div className="text-desc" style={{
             width: "100px",
-            minWidth: "auto",
-            marginRight: "10px",
+            minWidth: "100px",
+            maxWidth: "100px",
+            marginRight: "5px",
           }}>
-            <div className="name">
+            <div className="name" >
               { getLabelByStyle(styleKey) }
             </div>
           </div>
@@ -417,6 +418,7 @@ export default function ThemeSettingsCompStyles(props: CompStyleProps) {
                 trigger="hover"
               />
               <TacoInput
+                style={{width: "80%", marginLeft: "5px"}}
                 value={compStyle[styleKey]}
                 onChange={(e) => handleChange(styleKey, e.target.value)}
                 // onChange={(e) => setColor(e.target.value)}
@@ -432,6 +434,7 @@ export default function ThemeSettingsCompStyles(props: CompStyleProps) {
                 </div>
               {/* </Radius> */}
               <TacoInput
+                style={{width: "80%", marginLeft: "5px"}}
                 placeholder={getPlaceholderByStyle(styleKey)}
                 defaultValue={compStyle[styleKey]}
                 onChange={(e) => handleChange(styleKey, e.target.value)}
diff --git a/client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx b/client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx
index 537730571..e420550ae 100644
--- a/client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx
+++ b/client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx
@@ -22,7 +22,7 @@ import {
   labelCss,
   sectionNames,
 } from "lowcoder-design";
-import { Flex, Input } from "antd";
+import { Card, Divider, Flex, Input } from "antd";
 import { genRandomKey } from "comps/utils/idGenerator";
 import dsl from "./detail/previewDsl";
 import { NameGenerator } from "comps/utils";
@@ -305,7 +305,7 @@ export const ThemeCompPanel = (props: any) => {
     return (
       <PreviewApp
         style={{
-          height: "600px",
+          height: "630px",
           minWidth: "auto",
           width: "100%",
         }}
@@ -322,36 +322,41 @@ export const ThemeCompPanel = (props: any) => {
   // )
 
   return (
-    <Flex style={{
-      height: "600px",
-      overflow: "hidden",
-    }}>
-      <RightPanelContentWrapper style={{
-        padding: "12px",
-        overflow: "auto",
+    <Card style={{ marginBottom: "20px", minHeight : "200px" }}>
+      <Flex style={{
+        height: "650px",
+        overflow: "hidden",
+        gap: "middle",
       }}>
-        <Input.Search
-          placeholder="Search components"
-          value={searchValue}
-          onChange={(e) => setSearchValue(e.target.value)}
-          style={{ marginBottom: 16 }}
-        />
-        <PropertySectionContext.Provider
-          value={propertySectionContextValue}
-        >
-          {compList}
-        </PropertySectionContext.Provider>
-      </RightPanelContentWrapper>
-      <div style={{flex: "1"}}>
-        {appPreview}
-      </div>
-      <div style={{
-        width: "280px",
-        padding: "12px",
-        overflow: "auto",
-      }}>
-        {stylePropertyView}
-      </div>
-    </Flex>
+        <RightPanelContentWrapper style={{
+          padding: "12px",
+          overflow: "auto",
+        }}>
+          <Input.Search
+            placeholder="Search components"
+            value={searchValue}
+            onChange={(e) => setSearchValue(e.target.value)}
+            style={{ marginBottom: 16 }}
+          />
+          <PropertySectionContext.Provider
+            value={propertySectionContextValue}
+          >
+            {compList}
+          </PropertySectionContext.Provider>
+        </RightPanelContentWrapper>
+        <Divider type="vertical" style={{height: "630px"}}/>
+        <div style={{flex: "1"}}>
+          {appPreview}
+        </div>
+        <Divider type="vertical" style={{height: "630px"}}/>
+        <div style={{
+          width: "280px",
+          padding: "12px",
+          overflow: "auto",
+        }}>
+          {stylePropertyView}
+        </div>
+      </Flex>
+    </Card>
   );
 };
diff --git a/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx b/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
index 8ff05023d..a48f4352b 100644
--- a/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
+++ b/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
@@ -346,7 +346,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
           </Header>
 
           <DetailContent>
-            {/* <ThemeSettingsView>
+            <ThemeSettingsView>
               <StyleThemeSettingsCover>
                 <ColorPickerCompIcon width={"36px"} style={{marginRight : "10px"}}/> <h2 style={{color: "#ffffff", marginTop : "8px"}}> {trans("theme.mainColor")}</h2>
               </StyleThemeSettingsCover>
@@ -386,7 +386,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
               </Card>
             </ThemeSettingsView>
 
-            <ThemeSettingsView>
+            {/* <ThemeSettingsView>
               <StyleThemeSettingsCover>
                 <TextSizeIcon width={"36px"} style={{marginRight : "10px"}}/> <h2 style={{color: "#ffffff", marginTop : "8px"}}> {trans("theme.fonts")}</h2>
               </StyleThemeSettingsCover>
@@ -425,7 +425,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
                   <PreviewApp style={{marginTop: '3px', height: "620px", width: "100%"}} theme={this.state.theme} dsl={dsl} />
                 </Flex>
               </Card>
-            </ThemeSettingsView>
+            </ThemeSettingsView> */}
 
             <ThemeSettingsView>
               <StyleThemeSettingsCover>
@@ -506,7 +506,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
                   <PreviewApp style={{marginTop: '3px', height: "620px", width: "100%"}} theme={this.state.theme} dsl={dsl} />
                 </Flex>
               </Card>
-            </ThemeSettingsView> */}
+            </ThemeSettingsView>
 
             <ThemeSettingsView>
               <StyleThemeSettingsCover>
@@ -514,7 +514,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
               </StyleThemeSettingsCover>
               <Card
                 bodyStyle={{
-                  padding: '0px'
+                  padding: '20px'
                 }}
                 style={{
                   marginBottom: "20px",

From 33ec7916935ad5cb2bd6de635f96fa9745884ce9 Mon Sep 17 00:00:00 2001
From: Mac <mac@192.168.1.8>
Date: Mon, 17 Jun 2024 21:29:21 +0500
Subject: [PATCH 40/57] Integration & Extension component

---
 .../src/comps/comps/customComp/customComp.tsx | 25 ++++++++++++++--
 .../lowcoder/src/comps/comps/iframeComp.tsx   | 29 ++++++++++++++++---
 2 files changed, 48 insertions(+), 6 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx b/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx
index 23874777f..45283b196 100644
--- a/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx
@@ -14,6 +14,9 @@ import { trans } from "i18n";
 import { EditorContext } from "comps/editorState";
 import { AnimationStyle, AnimationStyleType, CustomStyle, CustomStyleType } from "@lowcoder-ee/comps/controls/styleControlConstants";
 import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
+import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
 
 // TODO: eventually to embedd in container so we have styling?
 // TODO: support different starter templates for different frameworks (react, ANT, Flutter, Angular, etc)
@@ -219,11 +222,29 @@ function InnerCustomComponent(props: IProps) {
 const childrenMap = {
   model: jsonObjectStateControl(defaultModel),
   code: withDefault(StringControl, defaultCode),
-  style: styleControl(CustomStyle),
-  animationStyle:styleControl(AnimationStyle),
+  style: styleControl(CustomStyle , 'style'),
+  animationStyle:styleControl(AnimationStyle , 'animationStyle'),
 };
 
 const CustomCompBase = new UICompBuilder(childrenMap, (props, dispatch) => {
+
+
+  const theme = useContext(ThemeContext);
+  const compType = useContext(CompTypeContext);
+  const compTheme = theme?.theme?.components?.[compType];
+  const styleProps: Record<string, any> = {};
+  ['style','animationStyle'].forEach((key: string) => {
+    styleProps[key] = (props as any)[key];
+  });
+
+  useEffect(() => {
+    setInitialCompStyles({
+      dispatch,
+      compTheme,
+      styleProps,
+    });
+  }, []);
+  
   const { code, model } = props;
   return (
     <InnerCustomComponent
diff --git a/client/packages/lowcoder/src/comps/comps/iframeComp.tsx b/client/packages/lowcoder/src/comps/comps/iframeComp.tsx
index db65a1057..c412b8be0 100644
--- a/client/packages/lowcoder/src/comps/comps/iframeComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/iframeComp.tsx
@@ -10,8 +10,11 @@ import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import log from "loglevel";
 
-import { useContext } from "react";
+import { useContext, useEffect } from "react";
 import { EditorContext } from "comps/editorState";
+import { CompTypeContext } from "../utils/compTypeContext";
+import { ThemeContext } from "@lowcoder-ee/index.sdk";
+import { setInitialCompStyles } from "../utils/themeUtil";
 
 const Wrapper = styled.div<{$style: IframeStyleType; $animationStyle:AnimationStyleType}>`
   width: 100%;
@@ -45,10 +48,28 @@ let IFrameCompBase = new UICompBuilder(
     allowMicrophone: BoolControl,
     allowCamera: BoolControl,
     allowPopup: BoolControl,
-    style: styleControl(IframeStyle),
-    animationStyle: styleControl(AnimationStyle),
+    style: styleControl(IframeStyle , 'style'),
+    animationStyle: styleControl(AnimationStyle , 'animationStyle'),
   },
-  (props) => {
+  (props , dispatch) => {
+
+    const theme = useContext(ThemeContext);
+    const compType = useContext(CompTypeContext);
+    const compTheme = theme?.theme?.components?.[compType];
+    const styleProps: Record<string, any> = {};
+    ['style','animationStyle'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []);
+
+
     const sandbox = ["allow-scripts", "allow-same-origin"];
     props.allowSubmitForm && sandbox.push("allow-forms");
     props.allowDownload && sandbox.push("allow-downloads");

From 7c01f10da57e4e226258cc4b54976e91e52ebb82 Mon Sep 17 00:00:00 2001
From: Mac <mac@192.168.1.8>
Date: Mon, 17 Jun 2024 22:07:34 +0500
Subject: [PATCH 41/57] Multimedia & Animation

---
 .../lowcoder/src/comps/comps/carouselComp.tsx | 28 +++++++++++++---
 .../lowcoder/src/comps/comps/iconComp.tsx     | 27 +++++++++++++--
 .../lowcoder/src/comps/comps/imageComp.tsx    | 26 +++++++++++++--
 .../comps/comps/jsonComp/jsonLottieComp.tsx   | 28 +++++++++++++---
 .../src/comps/comps/mediaComp/audioComp.tsx   | 28 +++++++++++++---
 .../comps/comps/mediaComp/colorPickerComp.tsx | 25 ++++++++++++--
 .../src/comps/comps/mediaComp/videoComp.tsx   | 33 +++++++++++++++----
 .../comps/textInputComp/passwordComp.tsx      |  7 ++--
 8 files changed, 173 insertions(+), 29 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/carouselComp.tsx b/client/packages/lowcoder/src/comps/comps/carouselComp.tsx
index 6ad2edf60..53a809e13 100644
--- a/client/packages/lowcoder/src/comps/comps/carouselComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/carouselComp.tsx
@@ -9,7 +9,7 @@ import { trans } from "i18n";
 import { ChangeEventHandlerControl } from "comps/controls/eventHandlerControl";
 import { formDataChildren, FormDataPropertyView } from "./formComp/formDataConstants";
 import { PositionControl } from "comps/controls/dropdownControl";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import ReactResizeDetector from "react-resize-detector";
 import { ArrayStringControl } from "comps/controls/codeControl";
 import { styleControl } from "comps/controls/styleControl";
@@ -17,6 +17,9 @@ import { AnimationStyle, AnimationStyleType, CarouselStyle } from "comps/control
 
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
+import { ThemeContext } from "@lowcoder-ee/index.sdk";
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
 
 // TODO: dots at top position needs proper margin (should be the same as bottom position)
 
@@ -44,11 +47,28 @@ let CarouselBasicComp = (function () {
     onEvent: ChangeEventHandlerControl,
     showDots: withDefault(BoolControl, true),
     dotPosition: withDefault(PositionControl, "bottom"),
-    style: styleControl(CarouselStyle),
-    animationStyle: styleControl(AnimationStyle),
+    style: styleControl(CarouselStyle , 'style'),
+    animationStyle: styleControl(AnimationStyle , 'animationStyle'),
     ...formDataChildren,
   };
-  return new UICompBuilder(childrenMap, (props) => {
+  return new UICompBuilder(childrenMap, (props , dispatch) => {
+
+    const theme = useContext(ThemeContext);
+    const compType = useContext(CompTypeContext);
+    const compTheme = theme?.theme?.components?.[compType];
+    const styleProps: Record<string, any> = {};
+    ['style','animationStyle'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+  
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []);
+
     const containerRef = useRef<HTMLDivElement>(null);
     const [height, setHeight] = useState(0);
     const onResize = () => {
diff --git a/client/packages/lowcoder/src/comps/comps/iconComp.tsx b/client/packages/lowcoder/src/comps/comps/iconComp.tsx
index d0ea40cf5..c25d3d9f7 100644
--- a/client/packages/lowcoder/src/comps/comps/iconComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/iconComp.tsx
@@ -30,6 +30,9 @@ import {
 } from "../controls/eventHandlerControl";
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
+import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
 
 const Container = styled.div<{
   $style: IconStyleType | undefined;
@@ -62,8 +65,8 @@ ${props=>props.$animationStyle}
 const EventOptions = [clickEvent] as const;
 
 const childrenMap = {
-  style: styleControl(IconStyle),
-  animationStyle: styleControl(AnimationStyle),
+  style: styleControl(IconStyle,'style'),
+  animationStyle: styleControl(AnimationStyle,'animationStyle'),
   icon: withDefault(IconControl, "/icon:antd/homefilled"),
   autoHeight: withDefault(AutoHeightControl, "auto"),
   iconSize: withDefault(NumberControl, 20),
@@ -112,7 +115,25 @@ const IconView = (props: RecordConstructorToView<typeof childrenMap>) => {
 };
 
 let IconBasicComp = (function () {
-  return new UICompBuilder(childrenMap, (props) => <IconView {...props} />)
+  return new UICompBuilder(childrenMap, (props , dispatch) => { 
+    
+    const theme = useContext(ThemeContext);
+    const compType = useContext(CompTypeContext);
+    const compTheme = theme?.theme?.components?.[compType];
+    const styleProps: Record<string, any> = {};
+    ['style', 'animationStyle'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []);
+
+    return(<IconView {...props} />)})
     .setPropertyViewFn((children) => (
       <>
         <Section name={sectionNames.basic}>
diff --git a/client/packages/lowcoder/src/comps/comps/imageComp.tsx b/client/packages/lowcoder/src/comps/comps/imageComp.tsx
index 4b571764c..5ec8edd44 100644
--- a/client/packages/lowcoder/src/comps/comps/imageComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/imageComp.tsx
@@ -34,6 +34,9 @@ import { DEFAULT_IMG_URL } from "util/stringUtils";
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
 import { StringControl } from "../controls/codeControl";
+import { ThemeContext } from "@lowcoder-ee/index.sdk";
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
 
 const Container = styled.div<{ $style: ImageStyleType | undefined,$animationStyle:AnimationStyleType }>`
   height: 100%;
@@ -166,14 +169,31 @@ const ContainerImg = (props: RecordConstructorToView<typeof childrenMap>) => {
 const childrenMap = {
   src: withDefault(StringStateControl, "https://temp.im/350x400"),
   onEvent: eventHandlerControl(EventOptions),
-  style: styleControl(ImageStyle),
-  animationStyle: styleControl(AnimationStyle),
+  style: styleControl(ImageStyle , 'style'),
+  animationStyle: styleControl(AnimationStyle , 'animationStyle'),
   autoHeight: withDefault(AutoHeightControl, "fixed"),
   supportPreview: BoolControl,
   restrictPaddingOnRotation:withDefault(StringControl, 'image')
 };
 
-let ImageBasicComp = new UICompBuilder(childrenMap, (props) => {
+let ImageBasicComp = new UICompBuilder(childrenMap, (props , dispatch) => {
+
+  const theme = useContext(ThemeContext);
+  const compType = useContext(CompTypeContext);
+  const compTheme = theme?.theme?.components?.[compType];
+  const styleProps: Record<string, any> = {};
+  ['style','animationStyle'].forEach((key: string) => {
+    styleProps[key] = (props as any)[key];
+  });
+
+  useEffect(() => {
+    setInitialCompStyles({
+      dispatch,
+      compTheme,
+      styleProps,
+    });
+  }, []);
+  
   return <ContainerImg {...props} />;
 })
   .setPropertyViewFn((children) => {
diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx
index 078228642..d74ec5836 100644
--- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx
@@ -9,7 +9,7 @@ import { styleControl } from "comps/controls/styleControl";
 import { AnimationStyle, LottieStyle } from "comps/controls/styleControlConstants";
 import { trans } from "i18n";
 import { Section, sectionNames } from "lowcoder-design";
-import { useContext, lazy } from "react";  
+import { useContext, lazy, useEffect } from "react";  
 import { UICompBuilder, withDefault } from "../../generators";
 import {
   NameConfig,
@@ -18,6 +18,9 @@ import {
 } from "../../generators/withExposing";
 import { defaultLottie } from "./jsonConstants";
 import { EditorContext } from "comps/editorState";
+import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
 
 const Player = lazy(
   () => import('@lottiefiles/react-lottie-player')
@@ -93,13 +96,30 @@ let JsonLottieTmpComp = (function () {
     speed: dropdownControl(speedOptions, "1"),
     width: withDefault(NumberControl, 100),
     height: withDefault(NumberControl, 100),
-    container: styleControl(LottieStyle),
-    animationStyle: styleControl(AnimationStyle),
+    container: styleControl(LottieStyle , 'container'),
+    animationStyle: styleControl(AnimationStyle , 'animationStyle'),
     animationStart: dropdownControl(animationStartOptions, "auto"),
     loop: dropdownControl(loopOptions, "single"),
     keepLastFrame: BoolControl.DEFAULT_TRUE,
   };
-  return new UICompBuilder(childrenMap, (props) => {
+  return new UICompBuilder(childrenMap, (props , dispatch) => {
+
+    const theme = useContext(ThemeContext);
+    const compType = useContext(CompTypeContext);
+    const compTheme = theme?.theme?.components?.[compType];
+    const styleProps: Record<string, any> = {};
+    ['container', 'animationStyle'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []);
+
     return (
       <div
         style={{
diff --git a/client/packages/lowcoder/src/comps/comps/mediaComp/audioComp.tsx b/client/packages/lowcoder/src/comps/comps/mediaComp/audioComp.tsx
index 9ed308493..82f47233e 100644
--- a/client/packages/lowcoder/src/comps/comps/mediaComp/audioComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/mediaComp/audioComp.tsx
@@ -13,8 +13,11 @@ import { withDefault } from "../../generators/simpleGenerators";
 import { trans } from "i18n";
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { mediaCommonChildren, mediaMethods } from "./mediaUtils";
-import { useContext } from "react";
+import { useContext, useEffect } from "react";
 import { EditorContext } from "comps/editorState";
+import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
 
 const Container = styled.div<{ $style: any; $animationStyle: AnimationStyleType }>`
 ${props => props.$style};
@@ -66,15 +69,32 @@ const ContainerAudio = (props: RecordConstructorToView<typeof childrenMap>) => {
 const childrenMap = {
   src: withDefault(StringStateControl, trans("audio.defaultSrcUrl")),
   onEvent: eventHandlerControl(EventOptions),
-  style: styleControl(AudioStyle),
-  animationStyle: styleControl(AnimationStyle),
+  style: styleControl(AudioStyle , 'style'),
+  animationStyle: styleControl(AnimationStyle , 'animationStyle'),
   autoPlay: BoolControl,
   loop: BoolControl,
   ...mediaCommonChildren,
 };
 
 let AudioBasicComp = (function () {
-  return new UICompBuilder(childrenMap, (props) => {
+  return new UICompBuilder(childrenMap, (props , dispatch) => {
+
+    const theme = useContext(ThemeContext);
+    const compType = useContext(CompTypeContext);
+    const compTheme = theme?.theme?.components?.[compType];
+    const styleProps: Record<string, any> = {};
+    ['style', 'animationStyle'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []);
+
     return <ContainerAudio {...props} />;
   })
     .setPropertyViewFn((children) => {
diff --git a/client/packages/lowcoder/src/comps/comps/mediaComp/colorPickerComp.tsx b/client/packages/lowcoder/src/comps/comps/mediaComp/colorPickerComp.tsx
index cbe6cf749..41143d337 100644
--- a/client/packages/lowcoder/src/comps/comps/mediaComp/colorPickerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/mediaComp/colorPickerComp.tsx
@@ -16,6 +16,10 @@ import { changeEvent, eventHandlerControl } from "comps/controls/eventHandlerCon
 import { jsonObjectExposingStateControl, stringExposingStateControl } from "comps/controls/codeStateControl";
 import { dropdownControl } from "comps/controls/dropdownControl";
 import { ArrayOrJSONObjectControl } from "comps/controls/codeControl";
+import { useContext, useEffect } from "react";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
+import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
 
 export function getStyle(style: ColorPickerStyleType) {
   return css`
@@ -60,7 +64,7 @@ export const colorPickerEvent = eventHandlerControl([
 const childrenMap = {
   ...textInputChildren,
   value: stringExposingStateControl('value', '#3377ff'),
-  style: styleControl(ColorPickerStyle),
+  style: styleControl(ColorPickerStyle , 'style'),
   color: jsonObjectExposingStateControl('color', {}),
   trigger: dropdownControl(colorPickerTriggerOption, 'click'),
   disabledAlpha: BoolControl,
@@ -69,7 +73,24 @@ const childrenMap = {
   presets: withDefault(ArrayOrJSONObjectControl, JSON.stringify(presets, null, 2)),
 };
 
-export const ColorPickerComp = new UICompBuilder(childrenMap, (props) => {
+export const ColorPickerComp = new UICompBuilder(childrenMap, (props , dispatch) => {
+
+  const theme = useContext(ThemeContext);
+  const compType = useContext(CompTypeContext);
+  const compTheme = theme?.theme?.components?.[compType];
+  const styleProps: Record<string, any> = {};
+  ['style'].forEach((key: string) => {
+    styleProps[key] = (props as any)[key];
+  });
+
+  useEffect(() => {
+    setInitialCompStyles({
+      dispatch,
+      compTheme,
+      styleProps,
+    });
+  }, []);
+
   return props.label({
     children: (
       <ColorPickerWrapper
diff --git a/client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx b/client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx
index 7130c84e0..5de975d2b 100644
--- a/client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx
@@ -4,7 +4,7 @@ import { StringStateControl, numberExposingStateControl } from "../../controls/c
 import { UICompBuilder } from "../../generators";
 import { NameConfig, NameConfigHidden, withExposingConfigs } from "../../generators/withExposing";
 import { RecordConstructorToView } from "lowcoder-core";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { styleControl } from "comps/controls/styleControl";
 import {
   AnimationStyle,
@@ -24,6 +24,9 @@ import { mediaCommonChildren, mediaMethods } from "./mediaUtils";
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
 import styled, { css } from "styled-components";
+import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
 
 const EventOptions = [
   { label: trans("video.play"), value: "play", description: trans("video.playDesc") },
@@ -115,8 +118,8 @@ const childrenMap = {
   src: withDefault(StringStateControl, trans('video.defaultSrcUrl')),
   poster: withDefault(StringStateControl, trans('video.defaultPosterUrl')),
   onEvent: eventHandlerControl(EventOptions),
-  style: styleControl(VideoStyle),
-  animationStyle: styleControl(AnimationStyle),
+  style: styleControl(VideoStyle , 'style'),
+  animationStyle: styleControl(AnimationStyle , 'animationStyle'),
   autoPlay: BoolControl,
   loop: BoolControl,
   controls: BoolControl,
@@ -128,7 +131,25 @@ const childrenMap = {
 };
  
 let VideoBasicComp = (function () {
-  return new UICompBuilder(childrenMap, (props) => {
+  return new UICompBuilder(childrenMap, (props , dispatch) => {
+
+    const theme = useContext(ThemeContext);
+    const compType = useContext(CompTypeContext);
+    const compTheme = theme?.theme?.components?.[compType];
+    const styleProps: Record<string, any> = {};
+    ['style', 'animationStyle'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []);
+
+
     return <ContainerVideo {...props} />;
   })
     .setPropertyViewFn((children) => {
@@ -176,9 +197,9 @@ let VideoBasicComp = (function () {
               <Section name={sectionNames.style}>
                 {children.style.getPropertyView()}
               </Section>
-              <Section name={sectionNames.animationStyle} hasTooltip={true}>
+              {/* <Section name={sectionNames.animationStyle} hasTooltip={true}>
                 {children.animationStyle.getPropertyView()}
-              </Section>
+              </Section> */}
             </>
           )}
         </>
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx
index c67743c76..8e2a047fe 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx
@@ -25,7 +25,7 @@ import {
 } from "./textInputConstants";
 import { withMethodExposing } from "../../generators/withMethodExposing";
 import { styleControl } from "comps/controls/styleControl";
-import styled, { ThemeContext } from "styled-components";
+import styled from "styled-components";
 import {  AnimationStyle, InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle } from "comps/controls/styleControlConstants";
 import {
   hiddenPropertyView,
@@ -42,8 +42,9 @@ import { RefControl } from "comps/controls/refControl";
 import React, { useContext, useEffect } from "react";
 import { EditorContext } from "comps/editorState";
 import { migrateOldData } from "comps/generators/simpleGenerators";
-import { CompTypeContext } from "../../utils/compTypeContext";
-import { setInitialCompStyles } from "../../utils/themeUtil";
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
+import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
 
 const PasswordStyle = styled(InputPassword)<{
   $style: InputLikeStyleType;

From 9cb02405997a67c4ee4edbc35472f75f6b6fb114 Mon Sep 17 00:00:00 2001
From: Mac <mac@192.168.1.8>
Date: Mon, 17 Jun 2024 22:41:50 +0500
Subject: [PATCH 42/57] Item & Signature

---
 .../comps/comps/buttonComp/scannerComp.tsx    | 25 ++++++++++++++--
 .../lowcoder/src/comps/comps/qrCodeComp.tsx   | 28 ++++++++++++++---
 .../src/comps/comps/signatureComp.tsx         | 28 ++++++++++++++---
 .../lowcoder/src/comps/comps/transferComp.tsx | 30 ++++++++++++++++---
 .../lowcoder/src/constants/themeConstants.ts  |  9 ++++++
 5 files changed, 106 insertions(+), 14 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx
index 4f497fb68..28121ccbe 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx
@@ -24,6 +24,9 @@ import { BoolControl } from "comps/controls/boolControl";
 import type { ItemType } from "antd/es/menu/hooks/useItems";
 import { RefControl } from "comps/controls/refControl";
 import { EditorContext } from "comps/editorState"; 
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
+import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
 
 const Error = styled.div`
   color: #f5222d;
@@ -70,10 +73,28 @@ const ScannerTmpComp = (function () {
     maskClosable: withDefault(BoolControl, true),
     onEvent: ScannerEventHandlerControl,
     disabled: BoolCodeControl,
-    style: styleControl(DropdownStyle),
+    style: styleControl(DropdownStyle, 'style'),
     viewRef: RefControl<HTMLElement>,
   };
-  return new UICompBuilder(childrenMap, (props) => {
+  return new UICompBuilder(childrenMap, (props ,dispatch) => {
+
+    const theme = useContext(ThemeContext);
+    const compType = useContext(CompTypeContext);
+    const compTheme = theme?.theme?.components?.[compType];
+    const styleProps: Record<string, any> = {};
+    ['style'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []);
+
+
     const [showModal, setShowModal] = useState(false);
     const [errMessage, setErrMessage] = useState("");
     const [videoConstraints, setVideoConstraints] = useState<MediaTrackConstraints>({
diff --git a/client/packages/lowcoder/src/comps/comps/qrCodeComp.tsx b/client/packages/lowcoder/src/comps/comps/qrCodeComp.tsx
index 0c4341c2a..eda7b415b 100644
--- a/client/packages/lowcoder/src/comps/comps/qrCodeComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/qrCodeComp.tsx
@@ -12,9 +12,12 @@ import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { StringControl } from "comps/controls/codeControl";
 
-import { useContext } from "react";
+import { useContext, useEffect } from "react";
 import { EditorContext } from "comps/editorState";
 import { withDefault } from "../generators";
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
+import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
 
 // TODO: add styling for image (size)
 // TODO: add styling for bouding box (individual backround)
@@ -31,8 +34,8 @@ const childrenMap = {
   level: dropdownControl(levelOptions, 'L'),
   includeMargin: BoolControl.DEFAULT_TRUE,
   image: StringControl,
-  style: withDefault(styleControl(QRCodeStyle),{background:'transparent'}),
-  animationStyle: styleControl(AnimationStyle),
+  style: styleControl(QRCodeStyle , 'style'),
+  animationStyle: styleControl(AnimationStyle  , 'animationStyle'),
   restrictPaddingOnRotation: withDefault(StringControl, 'qrCode'),
 };
 
@@ -78,7 +81,24 @@ const QRCodeView = (props: RecordConstructorToView<typeof childrenMap>) => {
 };
 
 let QRCodeBasicComp = (function () {
-  return new UICompBuilder(childrenMap, (props) => <QRCodeView {...props} />)
+  return new UICompBuilder(childrenMap, (props , dispatch) =>{
+
+    const theme = useContext(ThemeContext);
+    const compType = useContext(CompTypeContext);
+    const compTheme = theme?.theme?.components?.[compType];
+    const styleProps: Record<string, any> = {};
+    ['style' , 'animationStyle'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []);
+    return( <QRCodeView {...props} />)})
     .setPropertyViewFn((children) => (
       <>
         <Section name={sectionNames.basic}>
diff --git a/client/packages/lowcoder/src/comps/comps/signatureComp.tsx b/client/packages/lowcoder/src/comps/comps/signatureComp.tsx
index ed7a87dea..3fa2c4d02 100644
--- a/client/packages/lowcoder/src/comps/comps/signatureComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/signatureComp.tsx
@@ -19,7 +19,7 @@ import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { changeValueAction, multiChangeAction } from "lowcoder-core";
 import { Section, sectionNames, UndoIcon } from "lowcoder-design";
-import React, { Suspense, useState } from "react";
+import React, { Suspense, useEffect, useState } from "react";
 import ReactResizeDetector from "react-resize-detector";
 import type SignatureCanvasType from "react-signature-canvas";
 import styled from "styled-components";
@@ -29,6 +29,9 @@ import { formDataChildren, FormDataPropertyView } from "./formComp/formDataConst
 
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
+import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
 
 const Wrapper = styled.div<{ $style: SignatureStyleType; $isEmpty: boolean }>`
   height: 100%;
@@ -99,12 +102,12 @@ const childrenMap = {
   tips: withDefault(StringControl, trans('signature.signHere')),
   onEvent: ChangeEventHandlerControl,
   label: withDefault(LabelControl, {position: 'column', text: ''}),
-  style: styleControl(SignatureContainerStyle),
-  labelStyle: styleControl(LabelStyle),
+  style: styleControl(SignatureContainerStyle , 'style'),
+  labelStyle: styleControl(LabelStyle , 'labelStyle'),
   showUndo: withDefault(BoolControl, true),
   showClear: withDefault(BoolControl, true),
   value: stateComp(''),
-  inputFieldStyle: styleControl(SignatureStyle),
+  inputFieldStyle: styleControl(SignatureStyle , 'inputFieldStyle'),
   ...formDataChildren,
 };
 
@@ -112,6 +115,23 @@ const SignatureCanvas = React.lazy(() => import("react-signature-canvas"));
 
 let SignatureTmpComp = (function () {
   return new UICompBuilder(childrenMap, (props, dispatch) => {
+
+    const theme = useContext(ThemeContext);
+    const compType = useContext(CompTypeContext);
+    const compTheme = theme?.theme?.components?.[compType];
+    const styleProps: Record<string, any> = {};
+    ['style', 'labelStyle', 'inputFieldStyle'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []);
+    
     let canvas: SignatureCanvasType | null = null;
     const [isBegin, setIsBegin] = useState(false);
     const [canvasSize, setCanvasSize] = useState([0, 0]);
diff --git a/client/packages/lowcoder/src/comps/comps/transferComp.tsx b/client/packages/lowcoder/src/comps/comps/transferComp.tsx
index 1edaff06e..0756b7afe 100644
--- a/client/packages/lowcoder/src/comps/comps/transferComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/transferComp.tsx
@@ -13,11 +13,13 @@ import { Transfer } from "antd";
 import ReactResizeDetector from "react-resize-detector";
 import { changeEvent, eventHandlerControl, searchEvent, selectedChangeEvent } from "../controls/eventHandlerControl";
 import styled, { css } from "styled-components";
-import { useEffect, useRef, useState } from "react";
+import { useContext, useEffect, useRef, useState } from "react";
 import { valueComp, withDefault } from "../generators";
 import type { TransferDirection } from 'antd/es/transfer';
 import { _ } from "core-js";
-
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
+import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
 
 const Container = styled.div<{ $style: TransferStyleType }>`
   height: 100%;
@@ -57,7 +59,7 @@ const defaultItems = [
 const EventOptions = [changeEvent, searchEvent, selectedChangeEvent] as const;
 
 const childrenMap = {
-  style: styleControl(TransferStyle),
+  style: styleControl(TransferStyle , 'style'),
   onEvent: eventHandlerControl(EventOptions),
   sourceTitle: withDefault(StringControl, trans('transfer.sourceTitle')),
   targetTitle: withDefault(StringControl, trans('transfer.targetTitle')),
@@ -140,7 +142,27 @@ const TransferView = (props: RecordConstructorToView<typeof childrenMap> & {
 };
 
 let TransferBasicComp = (function () {
-  return new UICompBuilder(childrenMap, (props, dispatch) => <TransferView {...props} dispatch={dispatch} />)
+  return new UICompBuilder(childrenMap, (props, dispatch) => {
+
+    const theme = useContext(ThemeContext);
+    const compType = useContext(CompTypeContext);
+    const compTheme = theme?.theme?.components?.[compType];
+    const styleProps: Record<string, any> = {};
+    ['style'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []);
+
+
+    return (
+    <TransferView {...props} dispatch={dispatch} />)})
     .setPropertyViewFn((children) => (
       <>
         <Section name={sectionNames.basic}>
diff --git a/client/packages/lowcoder/src/constants/themeConstants.ts b/client/packages/lowcoder/src/constants/themeConstants.ts
index 5357f8987..45fd7a01e 100644
--- a/client/packages/lowcoder/src/constants/themeConstants.ts
+++ b/client/packages/lowcoder/src/constants/themeConstants.ts
@@ -88,6 +88,14 @@ const pageLayout  = {
     borderWidth: '1px',
   }
 };
+
+const qrCode  = {
+  style: {
+    background:'transparent'
+  }
+};
+
+
 export const defaultTheme: ThemeDetail = {
   primary: "#3377FF",
   textDark: "#222222",
@@ -119,6 +127,7 @@ export const defaultTheme: ThemeDetail = {
     columnLayout,
     tabbedContainer,
     step,
+    qrCode,
     treeSelect,
     pageLayout,
     password: input,

From ad6d03a1132e12aa3617ea974b749f5727cd4d00 Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Mon, 17 Jun 2024 22:52:12 +0500
Subject: [PATCH 43/57] Theme: allow overwrite theme styles

---
 .../lowcoder/src/api/commonSettingApi.ts      |   1 +
 .../comps/containerComp/containerView.tsx     |   3 +-
 .../lowcoder/src/comps/comps/rootComp.tsx     |   5 +-
 .../lowcoder/src/comps/comps/textComp.tsx     |   3 +
 .../src/comps/controls/styleControl.tsx       |   7 +-
 .../lowcoder/src/comps/utils/compContext.tsx  |   6 +
 .../lowcoder/src/comps/utils/themeContext.tsx |   1 +
 .../lowcoder/src/comps/utils/themeUtil.ts     |   1 +
 .../lowcoder/src/layout/gridLayout.tsx        | 104 +++++++++---------
 client/packages/lowcoder/src/layout/utils.ts  |   1 +
 .../src/pages/setting/theme/detail/index.tsx  |  46 +++++++-
 .../pages/setting/theme/styledComponents.tsx  |   5 +-
 12 files changed, 127 insertions(+), 56 deletions(-)
 create mode 100644 client/packages/lowcoder/src/comps/utils/compContext.tsx

diff --git a/client/packages/lowcoder/src/api/commonSettingApi.ts b/client/packages/lowcoder/src/api/commonSettingApi.ts
index 6bbcd0a09..6e49656d4 100644
--- a/client/packages/lowcoder/src/api/commonSettingApi.ts
+++ b/client/packages/lowcoder/src/api/commonSettingApi.ts
@@ -35,6 +35,7 @@ export interface ThemeType {
   id: string;
   updateTime: number;
   theme: ThemeDetail;
+  overwriteStyles?: boolean;
 }
 
 export interface ThemeDetail {
diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx
index 1bb216a44..39d71c630 100644
--- a/client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx
@@ -293,9 +293,10 @@ const getExtraLayout = (
     const autoHeight = item.autoHeight;
     const name = item.name;
     const compType = item.compType;
+    const comp = item.comp;
     const isSelected = selectedCompNames.has(name) || dragSelectedNames?.has?.(name);
     const hidden = item.hidden;
-    return { autoHeight, isSelected, name, hidden, compType };
+    return { autoHeight, isSelected, name, hidden, compType, comp };
   });
 };
 
diff --git a/client/packages/lowcoder/src/comps/comps/rootComp.tsx b/client/packages/lowcoder/src/comps/comps/rootComp.tsx
index c39f340b8..ea48aae9e 100644
--- a/client/packages/lowcoder/src/comps/comps/rootComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/rootComp.tsx
@@ -70,7 +70,9 @@ function RootView(props: RootViewProps) {
     previewTheme?.previewTheme ||
     getCurrentTheme(themeList, appThemeId)?.theme ||
     localDefaultTheme;
-
+  
+  const overwriteStyles = Boolean(getCurrentTheme(themeList, appThemeId)?.overwriteStyles);
+  
   useEffect(() => {
     const newEditorState = new EditorState(comp, (changeEditorStateFn) => {
       setEditorState((oldState) => (oldState ? changeEditorStateFn(oldState) : undefined));
@@ -90,6 +92,7 @@ function RootView(props: RootViewProps) {
   const themeContextValue = useMemo(
     () => ({
       theme,
+      overwriteStyles,
     }),
     [theme]
   );
diff --git a/client/packages/lowcoder/src/comps/comps/textComp.tsx b/client/packages/lowcoder/src/comps/comps/textComp.tsx
index 09c4c7b65..42e16da5a 100644
--- a/client/packages/lowcoder/src/comps/comps/textComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textComp.tsx
@@ -27,6 +27,7 @@ import { ThemeContext } from "../utils/themeContext";
 import { CompTypeContext } from "../utils/compTypeContext";
 import { changeChildAction } from "lowcoder-core";
 import { setInitialCompStyles } from "../utils/themeUtil";
+import { BoolControl } from "../controls/boolControl";
 
 const getStyle = (style: TextStyleType) => {
   return css`
@@ -141,6 +142,7 @@ let TextTmpComp = (function () {
     animationStyle: styleControl(AnimationStyle, 'animationStyle'),
     margin: MarginControl,
     padding: PaddingControl,
+    themeApplied: BoolControl,
   };
   return new UICompBuilder(childrenMap, (props, dispatch) => {
     const value = props.text.value;
@@ -154,6 +156,7 @@ let TextTmpComp = (function () {
     });
 
     useEffect(() => {
+      if (props.themeApplied) return;
       setInitialCompStyles({
         dispatch,
         compTheme,
diff --git a/client/packages/lowcoder/src/comps/controls/styleControl.tsx b/client/packages/lowcoder/src/comps/controls/styleControl.tsx
index 48a4b9c0b..097d18a26 100644
--- a/client/packages/lowcoder/src/comps/controls/styleControl.tsx
+++ b/client/packages/lowcoder/src/comps/controls/styleControl.tsx
@@ -82,6 +82,7 @@ import appSelectControl from "./appSelectControl";
 import { JSONObject, JSONValue } from "@lowcoder-ee/util/jsonTypes";
 import { CompTypeContext } from "../utils/compTypeContext";
 import { defaultTheme } from "@lowcoder-ee/constants/themeConstants";
+import { CompContext } from "../utils/compContext";
 
 function isSimpleColorConfig(config: SingleColorConfig): config is SimpleColorConfig {
   return config.hasOwnProperty("color");
@@ -856,9 +857,11 @@ export function styleControl<T extends readonly SingleColorConfig[]>(
   return new ControlItemCompBuilder(
     childrenMap as ToConstructor<{ [K in Names<T>]: ColorControl }>,
     (props) => {
-      const compType = useContext(CompTypeContext);
+      // const compType = useContext(CompTypeContext);
+      const {comp, compType} = useContext(CompContext);
       const theme = useContext(ThemeContext);
       const bgColor = useContext(BackgroundColorContext);
+      const { overwriteStyles } = theme || {}; 
       const compTheme = compType
         ? {
             ...(defaultTheme.components?.[compType]?.[styleKey] || {}) as unknown as Record<string, string>,
@@ -867,7 +870,7 @@ export function styleControl<T extends readonly SingleColorConfig[]>(
         : undefined;
 
       return calcColors(
-        props as ColorMap,
+        overwriteStyles && !Boolean(comp?.comp?.themeApplied) ? {} as ColorMap : props as ColorMap,
         colorConfigs,
         theme?.theme,
         bgColor,
diff --git a/client/packages/lowcoder/src/comps/utils/compContext.tsx b/client/packages/lowcoder/src/comps/utils/compContext.tsx
new file mode 100644
index 000000000..5b744b3e3
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/utils/compContext.tsx
@@ -0,0 +1,6 @@
+import React from "react";
+
+export const CompContext = React.createContext<{
+  comp?: any;
+  compType: string;
+}>({ comp: undefined, compType: '' });
diff --git a/client/packages/lowcoder/src/comps/utils/themeContext.tsx b/client/packages/lowcoder/src/comps/utils/themeContext.tsx
index 04bf81048..ce352cfb0 100644
--- a/client/packages/lowcoder/src/comps/utils/themeContext.tsx
+++ b/client/packages/lowcoder/src/comps/utils/themeContext.tsx
@@ -4,5 +4,6 @@ import React from "react";
 export class Theme {
   readonly theme?: ThemeDetail;
   readonly previewTheme?: ThemeDetail;
+  readonly overwriteStyles?: boolean;
 }
 export const ThemeContext = React.createContext<Theme | undefined>(undefined);
diff --git a/client/packages/lowcoder/src/comps/utils/themeUtil.ts b/client/packages/lowcoder/src/comps/utils/themeUtil.ts
index 4bace9959..0356dda40 100644
--- a/client/packages/lowcoder/src/comps/utils/themeUtil.ts
+++ b/client/packages/lowcoder/src/comps/utils/themeUtil.ts
@@ -40,6 +40,7 @@ export function setInitialCompStyles({
       ...styleProps[styleKey],
     }, false);
   })
+  actions['themeApplied'] = changeValueAction(true, false);
 
   dispatch(
     multiChangeAction(actions),
diff --git a/client/packages/lowcoder/src/layout/gridLayout.tsx b/client/packages/lowcoder/src/layout/gridLayout.tsx
index e7d4d150f..29bd5238c 100644
--- a/client/packages/lowcoder/src/layout/gridLayout.tsx
+++ b/client/packages/lowcoder/src/layout/gridLayout.tsx
@@ -52,6 +52,7 @@ import {
   updateInCanvasCount,
 } from "./utils";
 import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { CompContext } from "@lowcoder-ee/comps/utils/compContext";
 
 type GridLayoutState = {
   layout: Layout;
@@ -443,55 +444,60 @@ class GridLayout extends React.Component<GridLayoutProps, GridLayoutState> {
     const selectable = isSelectable;
     const positionParams = genPositionParams(this.props);
     return (
-      <CompTypeContext.Provider value={extraItem?.compType}>
-        <GridItem
-          compType={extraItem?.compType}
-          key={item.i}
-          containerWidth={width}
-          cols={cols}
-          margin={margin}
-          containerPadding={positionParams.containerPadding}
-          maxRows={maxRows}
-          rowHeight={rowHeight}
-          onDragStart={this.onDragStart}
-          onDrag={this.onDrag}
-          onDragEnd={this.onDragEnd}
-          onResizeStart={this.onResizeStart}
-          onResize={this.onResize}
-          onResizeStop={this.onResizeStop}
-          onHeightChange={this.onHeightChange}
-          isDraggable={isDraggable && isItemDraggable(item)}
-          isResizable={isResizable && isItemResizable(item)}
-          isSelectable={selectable}
-          transformScale={transformScale}
-          w={item.w}
-          h={extraItem?.hidden && !extraItem?.isSelected ? 0 : item.h}
-          x={item.x}
-          y={item.y}
-          i={item.i}
-          minH={item.minH}
-          minW={item.minW}
-          maxH={item.maxH}
-          maxW={item.maxW}
-          placeholder={item.placeholder}
-          layoutHide={item.hide}
-          static={item.static}
-          resizeHandles={getItemResizeHandles(item, extraItem)}
-          name={extraItem?.name}
-          autoHeight={extraItem?.autoHeight}
-          isSelected={extraItem?.isSelected}
-          hidden={extraItem?.hidden}
-          selectedSize={selectedSize}
-          clickItem={clickItem}
-          showName={{
-            top: showName?.top ?? 0,
-            bottom: (showName?.bottom ?? 0) + (this.ref.current?.scrollHeight ?? 0),
-          }}
-          zIndex={zIndex}
-        >
-          {child}
-        </GridItem>
-      </CompTypeContext.Provider>
+      <CompContext.Provider value={{
+        compType: extraItem?.compType,
+        comp: extraItem?.comp?.toJsonValue(),
+      }}>
+        <CompTypeContext.Provider value={extraItem?.compType}>
+          <GridItem
+            compType={extraItem?.compType}
+            key={item.i}
+            containerWidth={width}
+            cols={cols}
+            margin={margin}
+            containerPadding={positionParams.containerPadding}
+            maxRows={maxRows}
+            rowHeight={rowHeight}
+            onDragStart={this.onDragStart}
+            onDrag={this.onDrag}
+            onDragEnd={this.onDragEnd}
+            onResizeStart={this.onResizeStart}
+            onResize={this.onResize}
+            onResizeStop={this.onResizeStop}
+            onHeightChange={this.onHeightChange}
+            isDraggable={isDraggable && isItemDraggable(item)}
+            isResizable={isResizable && isItemResizable(item)}
+            isSelectable={selectable}
+            transformScale={transformScale}
+            w={item.w}
+            h={extraItem?.hidden && !extraItem?.isSelected ? 0 : item.h}
+            x={item.x}
+            y={item.y}
+            i={item.i}
+            minH={item.minH}
+            minW={item.minW}
+            maxH={item.maxH}
+            maxW={item.maxW}
+            placeholder={item.placeholder}
+            layoutHide={item.hide}
+            static={item.static}
+            resizeHandles={getItemResizeHandles(item, extraItem)}
+            name={extraItem?.name}
+            autoHeight={extraItem?.autoHeight}
+            isSelected={extraItem?.isSelected}
+            hidden={extraItem?.hidden}
+            selectedSize={selectedSize}
+            clickItem={clickItem}
+            showName={{
+              top: showName?.top ?? 0,
+              bottom: (showName?.bottom ?? 0) + (this.ref.current?.scrollHeight ?? 0),
+            }}
+            zIndex={zIndex}
+          >
+            {child}
+          </GridItem>
+        </CompTypeContext.Provider>
+      </CompContext.Provider>
     );
   }
 
diff --git a/client/packages/lowcoder/src/layout/utils.ts b/client/packages/lowcoder/src/layout/utils.ts
index 5527d52b8..44a77d15e 100644
--- a/client/packages/lowcoder/src/layout/utils.ts
+++ b/client/packages/lowcoder/src/layout/utils.ts
@@ -33,6 +33,7 @@ export type LayoutItem = {
 };
 export type ExtraItem = {
   name: string;
+  comp: any;
   compType: UICompType;
   autoHeight?: boolean;
   isSelected?: boolean;
diff --git a/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx b/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
index a48f4352b..6a64753f0 100644
--- a/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
+++ b/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
@@ -45,6 +45,7 @@ import { Card, Collapse, CollapseProps, Divider, Flex, List, Tooltip } from 'ant
 
 import { ThemeCompPanel } from "pages/setting/theme/ThemeCompPanel";
 import { JSONObject } from "@lowcoder-ee/util/jsonTypes";
+import Switch from "antd/es/switch";
 
 const ThemeSettingsView = styled.div`
   font-size: 14px;
@@ -75,6 +76,7 @@ type LocationProp = {
   name: string;
   id: string;
   type: DETAIL_TYPE;
+  overwriteStyles?: boolean;
 };
 
 type ThemeDetailPageProps = {
@@ -97,6 +99,7 @@ type ThemeDetailPageState = {
 
 class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailPageState> {
   themeDefault: ThemeDetail;
+  overwriteStyles: boolean;
   readonly id: string;
   readonly type: string;
   readonly inputRef: React.RefObject<InputRef>;
@@ -104,8 +107,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
 
   constructor(props: ThemeDetailPageProps) {
     super(props);
-    const { name, id, theme, type } = props.location.state || {};
-    console.log("defaultTheme", theme);
+    const { name, id, theme, type, overwriteStyles } = props.location.state || {};
     if (!name || !id || !theme || !type) {
       history.replace(BASE_URL);
       window.location.reload();
@@ -122,6 +124,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
 
     this.id = id;
     this.type = type;
+    this.overwriteStyles = Boolean(overwriteStyles);
     this.state = {
       theme,
       name,
@@ -135,6 +138,36 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
     this.setState({ theme: this.themeDefault });
   }
 
+  handleOverwriteStyles(overwriteStyles: boolean) {
+    this.props.fetchCommonSettings(this.props.orgId, ({ themeList }) => {
+      let list = [];
+      const currentTheme = {
+        name: this.state.name,
+        id: this.id,
+        updateTime: new Date().getTime(),
+        theme: this.themeDefault,
+        overwriteStyles: overwriteStyles,
+      };
+      list = themeList!.map((theme) => {
+        if (theme.id === this.id) {
+          return currentTheme;
+        } else {
+          return theme;
+        }
+      });
+
+      this.props.setCommonSettings({
+        orgId: this.props.orgId,
+        data: { key: "themeList", value: list },
+        onSuccess: () => {
+          messageInstance.success(trans("theme.saveSuccessMsg"));
+          this.themeDefault = this.state.theme;
+          this.overwriteStyles = overwriteStyles;
+        },
+      });
+    });
+  }
+
   handleSave() {
     this.props.fetchCommonSettings(this.props.orgId, ({ themeList }) => {
       let list = [];
@@ -343,6 +376,15 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
               <ArrowIcon />
               <span>{this.state.name}</span>
             </HeaderBack>
+            <Flex gap={8}>
+              <b style={{margin: 0}}>
+                Overwrite styles
+              </b>
+              <Switch defaultValue={this.overwriteStyles} onChange={() => {
+                console.log('change');
+                this.handleOverwriteStyles(!this.overwriteStyles)
+              }}/>
+            </Flex>
           </Header>
 
           <DetailContent>
diff --git a/client/packages/lowcoder/src/pages/setting/theme/styledComponents.tsx b/client/packages/lowcoder/src/pages/setting/theme/styledComponents.tsx
index 5d4a016d0..42513c143 100644
--- a/client/packages/lowcoder/src/pages/setting/theme/styledComponents.tsx
+++ b/client/packages/lowcoder/src/pages/setting/theme/styledComponents.tsx
@@ -134,7 +134,10 @@ export const Footer = styled.div`
 `;
 
 export const Header = styled.div`
-  margin: 0 0 37px 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0 24px 37px 24px;
 `;
 
 export const DetailTitle = styled.div`

From 391bb051ea7d4bf0f1b57e5259b2c33cad9147d9 Mon Sep 17 00:00:00 2001
From: FalkWolsky <fw@falkwolsky.com>
Date: Mon, 17 Jun 2024 19:58:47 +0200
Subject: [PATCH 44/57] Fixes in Style Properties Display in Theme Settings 2

---
 .../lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx b/client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx
index e420550ae..c34443c68 100644
--- a/client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx
+++ b/client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx
@@ -305,7 +305,7 @@ export const ThemeCompPanel = (props: any) => {
     return (
       <PreviewApp
         style={{
-          height: "630px",
+          height: "680px",
           minWidth: "auto",
           width: "100%",
         }}

From d05691aa2ad57f42d5c10df8788734cba7d24609 Mon Sep 17 00:00:00 2001
From: Mac <mac@192.168.1.15>
Date: Sat, 22 Jun 2024 19:42:51 +0500
Subject: [PATCH 45/57] Doc & File

---
 .../src/comps/comps/fileComp/fileComp.tsx     | 30 +++++++++++++++----
 .../src/comps/comps/fileViewerComp.tsx        | 28 ++++++++++++++---
 2 files changed, 49 insertions(+), 9 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx b/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx
index a44895642..fddc5fba9 100644
--- a/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx
@@ -42,7 +42,9 @@ import { messageInstance } from "lowcoder-design/src/components/GlobalInstances"
 
 import React, { useContext } from "react";
 import { EditorContext } from "comps/editorState";
-
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
+import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
 const FileSizeControl = codeControl((value) => {
   if (typeof value === "number") {
     return value;
@@ -100,8 +102,8 @@ const commonChildren = {
   showUploadList: BoolControl.DEFAULT_TRUE,
   disabled: BoolCodeControl,
   onEvent: eventHandlerControl(EventOptions),
-  style: styleControl(FileStyle),
-  animationStyle: styleControl(AnimationStyle),
+  style: styleControl(FileStyle , 'style'),
+  animationStyle: styleControl(AnimationStyle , 'animationStyle'),
   parseFiles: BoolPureControl,
   parsedValue: stateComp<Array<JSONValue | null>>([]),
   prefixIcon: withDefault(IconControl, "/icon:solid/arrow-up-from-bracket"),
@@ -379,9 +381,27 @@ const childrenMap = {
   ...formDataChildren,
 };
 
-let FileTmpComp = new UICompBuilder(childrenMap, (props, dispatch) => (
+let FileTmpComp = new UICompBuilder(childrenMap, (props, dispatch) => {
+
+  const theme = useContext(ThemeContext);
+  const compType = useContext(CompTypeContext);
+  const compTheme = theme?.theme?.components?.[compType];
+  const styleProps: Record<string, any> = {};
+  ['style', 'animationStyle'].forEach((key: string) => {
+    styleProps[key] = (props as any)[key];
+  });
+
+  useEffect(() => {
+    setInitialCompStyles({
+      dispatch,
+      compTheme,
+      styleProps,
+    });
+  }, []);
+  return(
+
   <Upload {...props} dispatch={dispatch} />
-))
+)})
   .setPropertyViewFn((children) => (
     <>
       <Section name={sectionNames.basic}>
diff --git a/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx b/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx
index 5f4ada67a..3a06b19fa 100644
--- a/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx
@@ -1,7 +1,7 @@
 import { styleControl } from "comps/controls/styleControl";
 import { AnimationStyle, AnimationStyleType, FileViewerStyle, FileViewerStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
 import { isEmpty } from "lodash";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { DocumentViewer } from "react-documents";
 import styled, { css } from "styled-components";
 import { Section, sectionNames } from "lowcoder-design";
@@ -13,6 +13,9 @@ import { trans } from "i18n";
 
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
+import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
 
 const getStyle = (style: FileViewerStyleType) => {
   return css`
@@ -67,10 +70,27 @@ const DraggableFileViewer = (props: { src: string; style: FileViewerStyleType,an
 let FileViewerBasicComp = (function () {
   const childrenMap = {
     src: StringControl,
-    style: styleControl(FileViewerStyle),
-    animationStyle: styleControl(AnimationStyle),
+    style: styleControl(FileViewerStyle , 'style'),
+    animationStyle: styleControl(AnimationStyle , 'animationStyle'),
   };
-  return new UICompBuilder(childrenMap, (props) => {
+  return new UICompBuilder(childrenMap, (props , dispatch) => {
+
+    const theme = useContext(ThemeContext);
+    const compType = useContext(CompTypeContext);
+    const compTheme = theme?.theme?.components?.[compType];
+    const styleProps: Record<string, any> = {};
+    ['style', 'animationStyle'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []);
+    
     if (isEmpty(props.src)) {
       return (
         <ErrorWrapper

From 0d883a6a206c0bb1a5b6d5517216df116565e66c Mon Sep 17 00:00:00 2001
From: Mac <mac@192.168.1.15>
Date: Sat, 22 Jun 2024 20:51:50 +0500
Subject: [PATCH 46/57] Meeting & Colaboration

---
 .../lowcoder/src/comps/comps/avatar.tsx       | 32 +++++++++++++++----
 .../lowcoder/src/comps/comps/avatarGroup.tsx  | 28 +++++++++++++---
 .../comps/comps/commentComp/commentComp.tsx   | 32 ++++++++++++++++---
 .../columnTypeComps/columnAvatarsComp.tsx     | 26 +++++++++++++--
 .../comps/comps/textInputComp/mentionComp.tsx | 28 ++++++++++++++--
 5 files changed, 126 insertions(+), 20 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/avatar.tsx b/client/packages/lowcoder/src/comps/comps/avatar.tsx
index d97e3fed9..0358df339 100644
--- a/client/packages/lowcoder/src/comps/comps/avatar.tsx
+++ b/client/packages/lowcoder/src/comps/comps/avatar.tsx
@@ -32,8 +32,11 @@ import { stringExposingStateControl } from "../controls/codeStateControl";
 import { BoolControl } from "../controls/boolControl";
 import { BadgeBasicSection, badgeChildren } from "./badgeComp/badgeConstants";
 import { DropdownOptionControl } from "../controls/optionsControl";
-import { ReactElement, useContext } from "react";
+import { ReactElement, useContext, useEffect } from "react";
 import { CompNameContext, EditorContext } from "../editorState";
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
+import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
 
 const AvatarWrapper = styled(Avatar) <AvatarProps & { $cursorPointer?: boolean, $style: AvatarStyleType }>`
   background: ${(props) => props.$style.background};
@@ -118,10 +121,10 @@ const sideOptions = [
 ] as const;
 
 const childrenMap = {
-  style: styleControl(avatarContainerStyle),
-  avatarStyle: styleControl(AvatarStyle),
-  labelStyle: styleControl(avatarLabelStyle),
-  captionStyle: styleControl(avatarLabelStyle),
+  style: styleControl(avatarContainerStyle , 'style'),
+  avatarStyle: styleControl(AvatarStyle , 'avatarStyle'),
+  labelStyle: styleControl(avatarLabelStyle , 'labelStyle'),
+  captionStyle: styleControl(avatarLabelStyle , 'captionStyle'),
   icon: withDefault(IconControl, "/icon:solid/user"),
   iconSize: withDefault(NumberControl, 40),
   onEvent: eventHandlerControl(EventOptions),
@@ -197,7 +200,24 @@ const AvatarView = (props: RecordConstructorToView<typeof childrenMap>) => {
 };
 
 let AvatarBasicComp = (function () {
-  return new UICompBuilder(childrenMap, (props) => <AvatarView {...props} />)
+  return new UICompBuilder(childrenMap, (props , dispatch) => { 
+
+    const theme = useContext(ThemeContext);
+    const compType = useContext(CompTypeContext);
+    const compTheme = theme?.theme?.components?.[compType];
+    const styleProps: Record<string, any> = {};
+    ['style', 'labelStyle', 'inputFieldStyle', 'animationStyle'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []);
+    return(<AvatarView {...props} />)})
     .setPropertyViewFn((children) => (
       <>
         <Section name={sectionNames.basic}>
diff --git a/client/packages/lowcoder/src/comps/comps/avatarGroup.tsx b/client/packages/lowcoder/src/comps/comps/avatarGroup.tsx
index 3e2e5d258..34d3b6d4a 100644
--- a/client/packages/lowcoder/src/comps/comps/avatarGroup.tsx
+++ b/client/packages/lowcoder/src/comps/comps/avatarGroup.tsx
@@ -10,7 +10,7 @@ import { NumberControl, StringControl } from "comps/controls/codeControl";
 import { Avatar, Tooltip } from "antd";
 import { clickEvent, eventHandlerControl, refreshEvent } from "../controls/eventHandlerControl";
 import styled from "styled-components";
-import { useContext, ReactElement } from "react";
+import { useContext, ReactElement, useEffect } from "react";
 import { MultiCompBuilder, stateComp, withDefault } from "../generators";
 import { EditorContext } from "comps/editorState";
 import { IconControl } from "../controls/iconControl";
@@ -19,6 +19,9 @@ import { optionsControl } from "../controls/optionsControl";
 import { BoolControl } from "../controls/boolControl";
 import { dropdownControl } from "../controls/dropdownControl";
 import { JSONObject } from "util/jsonTypes";
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
+import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
 
 const MacaroneList = [
   '#fde68a',
@@ -86,8 +89,8 @@ export const alignOptions = [
 ] as const;
 
 const childrenMap = {
-  avatar: styleControl(avatarGroupStyle),
-  style: styleControl(avatarContainerStyle),
+  avatar: styleControl(avatarGroupStyle , 'avatar'),
+  style: styleControl(avatarContainerStyle , 'style'),
   maxCount: withDefault(NumberControl, 3),
   avatarSize: withDefault(NumberControl, 40),
   alignment: dropdownControl(alignOptions, "center"),
@@ -142,7 +145,24 @@ const AvatarGroupView = (props: RecordConstructorToView<typeof childrenMap> & {
 };
 
 let AvatarGroupBasicComp = (function () {
-  return new UICompBuilder(childrenMap, (props, dispatch) => <AvatarGroupView {...props} dispatch={dispatch} />)
+  return new UICompBuilder(childrenMap, (props, dispatch) =>{
+    const theme = useContext(ThemeContext);
+    const compType = useContext(CompTypeContext);
+    const compTheme = theme?.theme?.components?.[compType];
+    const styleProps: Record<string, any> = {};
+    ['style', 'avatar'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+  
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []); 
+    return( <AvatarGroupView {...props} dispatch={dispatch} />
+)}) 
     .setPropertyViewFn((children) => (
       <>
         {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
diff --git a/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx b/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx
index d927b6795..f732bc095 100644
--- a/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx
@@ -66,6 +66,12 @@ import dayjs from "dayjs";
 // import "dayjs/locale/zh-cn";
 import { getInitialsAndColorCode } from "util/stringUtils";
 import { default as CloseOutlined } from "@ant-design/icons/CloseOutlined";
+
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
+import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+
+
 dayjs.extend(relativeTime);
 // dayjs.locale("zh-cn");
 
@@ -100,8 +106,8 @@ const childrenMap = {
     "#": ["123", "456", "789"],
   }),
   onEvent: eventHandlerControl(EventOptions),
-  style: styleControl(CommentStyle),
-  animationStyle: styleControl(AnimationStyle),
+  style: styleControl(CommentStyle , 'style'),
+  animationStyle: styleControl(AnimationStyle , 'animationStyle'),
   commentList: jsonValueExposingStateControl("commentList", []),
   deletedItem: jsonValueExposingStateControl("deletedItem", []),
   submitedItem: jsonValueExposingStateControl("submitedItem", []),
@@ -370,9 +376,27 @@ const CommentCompBase = (
 };
 
 let CommentBasicComp = (function () {
-  return new UICompBuilder(childrenMap, (props, dispatch) => (
+  return new UICompBuilder(childrenMap, (props, dispatch) =>{ 
+
+    const theme = useContext(ThemeContext);
+    const compType = useContext(CompTypeContext);
+    const compTheme = theme?.theme?.components?.[compType];
+    const styleProps: Record<string, any> = {};
+    ['style', 'animationStyle'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []);
+
+    return (
     <CommentCompBase {...props} dispatch={dispatch} />
-  ))
+  )})
     .setPropertyViewFn((children) => (
       <>
         <Section name={sectionNames.basic}>
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnAvatarsComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnAvatarsComp.tsx
index 82f261a14..690ef6e37 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnAvatarsComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnAvatarsComp.tsx
@@ -10,13 +10,16 @@ import { AlignCenter, AlignLeft, AlignRight } from "lowcoder-design";
 import { NumberControl } from "comps/controls/codeControl";
 import { Avatar, Tooltip } from "antd";
 import { clickEvent, eventHandlerControl, refreshEvent } from "comps/controls/eventHandlerControl";
-import { ReactElement } from "react";
+import { ReactElement, useContext, useEffect } from "react";
 import { IconControl } from "comps/controls/iconControl";
 import { ColorControl } from "comps/controls/colorControl";
 import { optionsControl } from "comps/controls/optionsControl";
 import { BoolControl } from "comps/controls/boolControl";
 import { dropdownControl } from "comps/controls/dropdownControl";
 import { JSONObject } from "util/jsonTypes";
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
+import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
 
 const MenuLinkWrapper = styled.div`
   > a {
@@ -88,7 +91,7 @@ export const alignOptions = [
 
 export const ColumnAvatarsComp = (function () {
   const childrenMap = {
-    style: styleControl(avatarGroupStyle),
+    style: styleControl(avatarGroupStyle , 'style'),
     maxCount: withDefault(NumberControl, 3),
     avatarSize: withDefault(NumberControl, 40),
     alignment: dropdownControl(alignOptions, "center"),
@@ -107,7 +110,24 @@ export const ColumnAvatarsComp = (function () {
 
   return new ColumnTypeCompBuilder(
     childrenMap,
-    (props) => {
+    (props , dispatch) => {
+
+      const theme = useContext(ThemeContext);
+      const compType = useContext(CompTypeContext);
+      const compTheme = theme?.theme?.components?.[compType];
+      const styleProps: Record<string, any> = {};
+      ['style'].forEach((key: string) => {
+        styleProps[key] = (props as any)[key];
+      });
+  
+      useEffect(() => {
+        setInitialCompStyles({
+          dispatch,
+          compTheme,
+          styleProps,
+        });
+      }, []);
+
       return (
         <Container
           $style={props.style}
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx
index 18972f975..d4a613d3f 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx
@@ -58,6 +58,10 @@ import React, { useContext } from "react";
 import { EditorContext } from "comps/editorState";
 import { migrateOldData } from "comps/generators/simpleGenerators";
 
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
+import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+
 const Wrapper = styled.div<{
   $style: InputLikeStyleType;
 }>`
@@ -96,8 +100,8 @@ let MentionTmpComp = (function () {
     viewRef: RefControl<TextAreaRef>,
     allowClear: BoolControl,
     autoHeight: AutoHeightControl,
-    style: styleControl(InputLikeStyle),
-    animationStyle: styleControl(AnimationStyle),
+    style: styleControl(InputLikeStyle , 'style'),
+    animationStyle: styleControl(AnimationStyle , 'animationStyle'),
     mentionList: jsonControl(checkMentionListData, {
       "@": ["Li Lei", "Han Meimei"],
       "#": ["123", "456", "789"],
@@ -106,7 +110,25 @@ let MentionTmpComp = (function () {
     invalid: booleanExposingStateControl("invalid"),
   };
 
-  return new UICompBuilder(childrenMap, (props) => {
+  return new UICompBuilder(childrenMap, (props , dispatch) => {
+
+    const theme = useContext(ThemeContext);
+    const compType = useContext(CompTypeContext);
+    const compTheme = theme?.theme?.components?.[compType];
+    const styleProps: Record<string, any> = {};
+    ['style', 'animationStyle'].forEach((key: string) => {
+      styleProps[key] = (props as any)[key];
+    });
+
+    useEffect(() => {
+      setInitialCompStyles({
+        dispatch,
+        compTheme,
+        styleProps,
+      });
+    }, []);
+
+
     const { mentionList } = props;
     const [validateState, setvalidateState] = useState({});
     const [activationFlag, setActivationFlag] = useState(false);

From b4cd202f8e263bf0fcf54bdc6244ce5125dd47e9 Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Wed, 26 Jun 2024 12:50:21 +0500
Subject: [PATCH 47/57] Theme: created a hook to merge styles initially

---
 client/packages/lowcoder/src/util/hooks.ts | 30 ++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/client/packages/lowcoder/src/util/hooks.ts b/client/packages/lowcoder/src/util/hooks.ts
index ca67a902f..4c9227423 100644
--- a/client/packages/lowcoder/src/util/hooks.ts
+++ b/client/packages/lowcoder/src/util/hooks.ts
@@ -17,6 +17,10 @@ import { EditorContext } from "comps/editorState";
 import { getDataSourceStructures } from "redux/selectors/datasourceSelectors";
 import { DatasourceStructure } from "api/datasourceApi";
 import { loadAuthSearchParams } from "pages/userAuth/authUtils";
+import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
+import { CompAction, changeChildAction } from "lowcoder-core";
 
 export const ForceViewModeContext = React.createContext<boolean>(false);
 
@@ -162,3 +166,29 @@ export function useMetaData(datasourceId: string) {
     [datasourceStructure, datasourceId]
   );
 }
+
+
+export function useMergeCompStyles(
+  props: Record<string, any>,
+  dispatch: (action: CompAction) => void
+) {
+  const theme = useContext(ThemeContext);
+  const compType = useContext(CompTypeContext);
+  const compTheme = theme?.theme?.components?.[compType];
+  const themeId = theme?.themeId;
+
+  const styleKeys = Object.keys(props).filter(key => key.toLowerCase().endsWith('style'));
+  const styleProps: Record<string, any> = {};
+  styleKeys.forEach((key: string) => {
+    styleProps[key] = (props as any)[key];
+  });
+
+  useEffect(() => {
+    setInitialCompStyles({
+      dispatch,
+      compTheme,
+      styleProps,
+      themeId,
+    });
+  }, []);
+}
\ No newline at end of file

From 3cc61894ad856703a46370e9a4c1033e633b82d4 Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Wed, 26 Jun 2024 12:51:41 +0500
Subject: [PATCH 48/57] Theme: replacing code with custom hook

---
 .../lowcoder/src/comps/comps/textComp.tsx     | 22 +++++--------------
 1 file changed, 5 insertions(+), 17 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/textComp.tsx b/client/packages/lowcoder/src/comps/comps/textComp.tsx
index 42e16da5a..81c880e77 100644
--- a/client/packages/lowcoder/src/comps/comps/textComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textComp.tsx
@@ -28,6 +28,7 @@ import { CompTypeContext } from "../utils/compTypeContext";
 import { changeChildAction } from "lowcoder-core";
 import { setInitialCompStyles } from "../utils/themeUtil";
 import { BoolControl } from "../controls/boolControl";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 const getStyle = (style: TextStyleType) => {
   return css`
@@ -142,27 +143,14 @@ let TextTmpComp = (function () {
     animationStyle: styleControl(AnimationStyle, 'animationStyle'),
     margin: MarginControl,
     padding: PaddingControl,
-    themeApplied: BoolControl,
   };
   return new UICompBuilder(childrenMap, (props, dispatch) => {
     const value = props.text.value;
-    const theme = useContext(ThemeContext);
-    const compType = useContext(CompTypeContext);
-    const compTheme = theme?.theme?.components?.[compType];
-  
-    const styleProps: Record<string, any> = {};
-    ['style', 'animationStyle'].forEach((key: string) => {
-      styleProps[key] = (props as any)[key];
-    });
 
-    useEffect(() => {
-      if (props.themeApplied) return;
-      setInitialCompStyles({
-        dispatch,
-        compTheme,
-        styleProps,
-      });
-    }, []);
+    useMergeCompStyles(
+      props as Record<string, any>,
+      dispatch
+    );
   
     return (
       <TextContainer

From de35ab7b5939a919724f005a87728ae6904c9f7e Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Wed, 26 Jun 2024 12:52:48 +0500
Subject: [PATCH 49/57] Theme: added preventStyleOverwriting switches in app
 and component settings + set priority for comp styling

---
 .../lowcoder/src/api/commonSettingApi.ts      |  1 -
 .../src/comps/comps/appSettingsComp.tsx       |  7 ++++
 .../lowcoder/src/comps/comps/rootComp.tsx     | 11 ++++--
 .../src/comps/controls/styleControl.tsx       | 24 +++++++++---
 .../src/comps/generators/uiCompBuilder.tsx    | 10 ++++-
 .../lowcoder/src/comps/utils/themeContext.tsx |  2 +-
 .../lowcoder/src/comps/utils/themeUtil.ts     | 21 ++++++----
 .../packages/lowcoder/src/i18n/locales/en.ts  |  1 +
 .../lowcoder/src/layout/gridLayout.tsx        | 11 ++++--
 .../pages/editor/right/styledComponent.tsx    | 13 ++++++-
 .../pages/setting/theme/ThemeCompPanel.tsx    | 38 ++++++++++++-------
 11 files changed, 100 insertions(+), 39 deletions(-)

diff --git a/client/packages/lowcoder/src/api/commonSettingApi.ts b/client/packages/lowcoder/src/api/commonSettingApi.ts
index 6e49656d4..6bbcd0a09 100644
--- a/client/packages/lowcoder/src/api/commonSettingApi.ts
+++ b/client/packages/lowcoder/src/api/commonSettingApi.ts
@@ -35,7 +35,6 @@ export interface ThemeType {
   id: string;
   updateTime: number;
   theme: ThemeDetail;
-  overwriteStyles?: boolean;
 }
 
 export interface ThemeDetail {
diff --git a/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx b/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx
index f30a951ea..b77c619ef 100644
--- a/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx
@@ -186,6 +186,7 @@ const childrenMap = {
   showHeaderInPublic: withDefault(BoolControl, true),
   maxWidth: dropdownInputSimpleControl(OPTIONS, USER_DEFINE, "1920"),
   themeId: valueComp<string>(DEFAULT_THEMEID),
+  preventAppStylesOverwriting: withDefault(BoolControl, false),
   customShortcuts: CustomShortcutsComp,
   disableCollision: valueComp<boolean>(false),
 };
@@ -205,6 +206,7 @@ function AppSettingsModal(props: ChildrenInstance) {
     icon,
     category,
     showHeaderInPublic,
+    preventAppStylesOverwriting,
   } = props;
   const THEME_OPTIONS = themeList?.map((theme) => ({
     label: theme.name,
@@ -300,6 +302,11 @@ function AppSettingsModal(props: ChildrenInstance) {
             );
           }}
         />
+        <div style={{ margin: '20px 0'}}>
+          {preventAppStylesOverwriting.propertyView({
+            label: trans("prop.preventOverwriting"),
+          })}
+        </div>
       </DivStyled>
       {props.customShortcuts.getPropertyView()}
     </SettingsStyled>
diff --git a/client/packages/lowcoder/src/comps/comps/rootComp.tsx b/client/packages/lowcoder/src/comps/comps/rootComp.tsx
index ea48aae9e..4ed578d3b 100644
--- a/client/packages/lowcoder/src/comps/comps/rootComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/rootComp.tsx
@@ -65,14 +65,17 @@ function RootView(props: RootViewProps) {
   const appThemeId = comp.children.settings.getView().themeId;
   const { orgCommonSettings } = getGlobalSettings();
   const themeList = orgCommonSettings?.themeList || [];
+  const selectedTheme = getCurrentTheme(themeList, appThemeId);
 
   const theme =
     previewTheme?.previewTheme ||
-    getCurrentTheme(themeList, appThemeId)?.theme ||
+    selectedTheme?.theme ||
     localDefaultTheme;
   
-  const overwriteStyles = Boolean(getCurrentTheme(themeList, appThemeId)?.overwriteStyles);
-  
+  const themeId = selectedTheme ? selectedTheme.id : (
+    previewTheme ? "" : 'default-theme-id'
+  ); 
+
   useEffect(() => {
     const newEditorState = new EditorState(comp, (changeEditorStateFn) => {
       setEditorState((oldState) => (oldState ? changeEditorStateFn(oldState) : undefined));
@@ -92,7 +95,7 @@ function RootView(props: RootViewProps) {
   const themeContextValue = useMemo(
     () => ({
       theme,
-      overwriteStyles,
+      themeId,
     }),
     [theme]
   );
diff --git a/client/packages/lowcoder/src/comps/controls/styleControl.tsx b/client/packages/lowcoder/src/comps/controls/styleControl.tsx
index 097d18a26..fc9c640db 100644
--- a/client/packages/lowcoder/src/comps/controls/styleControl.tsx
+++ b/client/packages/lowcoder/src/comps/controls/styleControl.tsx
@@ -83,6 +83,7 @@ import { JSONObject, JSONValue } from "@lowcoder-ee/util/jsonTypes";
 import { CompTypeContext } from "../utils/compTypeContext";
 import { defaultTheme } from "@lowcoder-ee/constants/themeConstants";
 import { CompContext } from "../utils/compContext";
+import { EditorContext } from "../editorState";
 
 function isSimpleColorConfig(config: SingleColorConfig): config is SimpleColorConfig {
   return config.hasOwnProperty("color");
@@ -358,7 +359,7 @@ function calcColors<ColorMap extends Record<string, string>>(
 ) {
   // let themeWithDefault = (theme || defaultTheme) as unknown as Record<string, string>;
   let themeWithDefault = {
-    ...defaultTheme,
+    // ...defaultTheme,
     ...(theme || {}),
     ...(compTheme || {}),
   } as unknown as Record<string, string>;
@@ -858,21 +859,32 @@ export function styleControl<T extends readonly SingleColorConfig[]>(
     childrenMap as ToConstructor<{ [K in Names<T>]: ColorControl }>,
     (props) => {
       // const compType = useContext(CompTypeContext);
+      const editorState = useContext(EditorContext);
       const {comp, compType} = useContext(CompContext);
       const theme = useContext(ThemeContext);
       const bgColor = useContext(BackgroundColorContext);
-      const { overwriteStyles } = theme || {}; 
-      const compTheme = compType
+
+      const appSettingsComp = editorState.getAppSettingsComp();
+      const { preventAppStylesOverwriting } = appSettingsComp.getView();
+      const { themeId } = theme || {}; 
+      const { appliedThemeId, preventStyleOverwriting } = comp?.comp || {};
+      const appTheme = !preventStyleOverwriting && !preventAppStylesOverwriting
+        ? theme?.theme
+        : undefined;
+      const compTheme = compType && !preventStyleOverwriting && !preventAppStylesOverwriting
         ? {
-            ...(defaultTheme.components?.[compType]?.[styleKey] || {}) as unknown as Record<string, string>,
             ...(theme?.theme?.components?.[compType]?.[styleKey] || {}) as unknown as Record<string, string>
           }
         : undefined;
+      const styleProps = preventStyleOverwriting || preventAppStylesOverwriting || appliedThemeId === themeId
+        ? props as ColorMap
+        : {} as ColorMap;
+      
 
       return calcColors(
-        overwriteStyles && !Boolean(comp?.comp?.themeApplied) ? {} as ColorMap : props as ColorMap,
+        styleProps,
         colorConfigs,
-        theme?.theme,
+        appTheme,
         bgColor,
         compTheme as Record<string, string> | undefined,
       );
diff --git a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
index 465341f57..559f93945 100644
--- a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
+++ b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
@@ -24,12 +24,15 @@ import {
 } from "./withMethodExposing";
 import { Section } from "lowcoder-design";
 import { trans } from "i18n";
+import { BoolControl } from "../controls/boolControl";
+import { valueComp, withDefault } from "./simpleGenerators";
 
 export type NewChildren<ChildrenCompMap extends Record<string, Comp<unknown>>> =
   ChildrenCompMap & {
     hidden: InstanceType<typeof BoolCodeControl>;
     className: InstanceType<typeof StringControl>;
     dataTestId: InstanceType<typeof StringControl>;
+    preventStyleOverwriting: InstanceType<typeof BoolControl>;
   };
 
 export function HidableView(props: {
@@ -67,6 +70,7 @@ export function ExtendedPropertyView<
       <Section name={trans("prop.component")}>
         {props.childrenMap.className?.propertyView({ label: trans("prop.className") })}
         {props.childrenMap.dataTestId?.propertyView({ label: trans("prop.dataTestId") })}
+        {props.childrenMap.preventStyleOverwriting?.propertyView({ label: trans("prop.preventOverwriting") })}
       </Section>
     </>
   );
@@ -81,7 +85,9 @@ export function uiChildren<
     ...childrenMap,
     hidden: BoolCodeControl,
     className: StringControl,
-    dataTestId: StringControl
+    dataTestId: StringControl,
+    preventStyleOverwriting: withDefault(BoolControl, false),
+    appliedThemeId: valueComp<string>(''),
   } as any;
 }
 
@@ -149,7 +155,7 @@ export class UICompBuilder<
   }
 
   build() {
-    const reservedProps = ["hidden", "className", "dataTestId"];
+    const reservedProps = ["hidden", "className", "dataTestId", "preventStyleOverwriting", "appliedThemeId"];
     for (const reservedProp of reservedProps) {
       if (this.childrenMap.hasOwnProperty(reservedProp)) {
         throw new Error(`Property »${reservedProp}« is reserved and must not be implemented in components!`);
diff --git a/client/packages/lowcoder/src/comps/utils/themeContext.tsx b/client/packages/lowcoder/src/comps/utils/themeContext.tsx
index ce352cfb0..3f6760ff7 100644
--- a/client/packages/lowcoder/src/comps/utils/themeContext.tsx
+++ b/client/packages/lowcoder/src/comps/utils/themeContext.tsx
@@ -4,6 +4,6 @@ import React from "react";
 export class Theme {
   readonly theme?: ThemeDetail;
   readonly previewTheme?: ThemeDetail;
-  readonly overwriteStyles?: boolean;
+  readonly themeId?: string;
 }
 export const ThemeContext = React.createContext<Theme | undefined>(undefined);
diff --git a/client/packages/lowcoder/src/comps/utils/themeUtil.ts b/client/packages/lowcoder/src/comps/utils/themeUtil.ts
index 0356dda40..f5e574bab 100644
--- a/client/packages/lowcoder/src/comps/utils/themeUtil.ts
+++ b/client/packages/lowcoder/src/comps/utils/themeUtil.ts
@@ -1,7 +1,7 @@
 import { ThemeType } from "api/commonSettingApi";
 import { getLocalThemeId } from "util/localStorageUtil";
 import { getGlobalSettings } from "./globalSettings";
-import { CompAction, multiChangeAction, changeValueAction } from "lowcoder-core";
+import { CompAction, multiChangeAction, changeValueAction, deferAction } from "lowcoder-core";
 import { JSONObject, JSONValue } from "@lowcoder-ee/util/jsonTypes";
 
 export const DEFAULT_THEMEID = "default";
@@ -27,22 +27,29 @@ export function setInitialCompStyles({
   dispatch,
   compTheme,
   styleProps,
+  themeId,
 }: {
   dispatch: (action: CompAction) => void,
   compTheme?: JSONObject,
   styleProps: Record<string, any>,
+  themeId?: string,
 }) {
   const styleKeys = Object.keys(styleProps);
-  const actions: Record<string, any> = {};
+  const actions: Record<string, any> = {
+    appliedThemeId: changeValueAction(themeId || '', true),
+  };
   styleKeys.forEach(styleKey => {
     actions[styleKey] = changeValueAction({
       ...(compTheme?.[styleKey] as object || {}),
       ...styleProps[styleKey],
-    }, false);
+    }, true);
   })
-  actions['themeApplied'] = changeValueAction(true, false);
 
-  dispatch(
-    multiChangeAction(actions),
-  );
+  setTimeout(() => {
+    dispatch(
+      deferAction(
+        multiChangeAction(actions),
+      )
+    );
+  }, 1000)
 }
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
index cbd6486b0..8896a631f 100644
--- a/client/packages/lowcoder/src/i18n/locales/en.ts
+++ b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -216,6 +216,7 @@ export const en = {
     "component": "Own Component Identifiers",
     "className": "CSS Class name",
     "dataTestId": "Individual ID",
+    "preventOverwriting": "Prevent overwriting styles",
   },
   "autoHeightProp": {
     "auto": "Auto",
diff --git a/client/packages/lowcoder/src/layout/gridLayout.tsx b/client/packages/lowcoder/src/layout/gridLayout.tsx
index 29bd5238c..28e2e6220 100644
--- a/client/packages/lowcoder/src/layout/gridLayout.tsx
+++ b/client/packages/lowcoder/src/layout/gridLayout.tsx
@@ -444,10 +444,13 @@ class GridLayout extends React.Component<GridLayoutProps, GridLayoutState> {
     const selectable = isSelectable;
     const positionParams = genPositionParams(this.props);
     return (
-      <CompContext.Provider value={{
-        compType: extraItem?.compType,
-        comp: extraItem?.comp?.toJsonValue(),
-      }}>
+      <CompContext.Provider
+        key={item.i}
+        value={{
+          compType: extraItem?.compType,
+          comp: extraItem?.comp?.toJsonValue(),
+        }}
+      >
         <CompTypeContext.Provider value={extraItem?.compType}>
           <GridItem
             compType={extraItem?.compType}
diff --git a/client/packages/lowcoder/src/pages/editor/right/styledComponent.tsx b/client/packages/lowcoder/src/pages/editor/right/styledComponent.tsx
index 536d73470..177ad9cdd 100644
--- a/client/packages/lowcoder/src/pages/editor/right/styledComponent.tsx
+++ b/client/packages/lowcoder/src/pages/editor/right/styledComponent.tsx
@@ -11,7 +11,7 @@ const NoShake = css`
   transform-style: preserve-3d;
 `;
 
-export const CompIconDiv = styled.div<{ $h: number; $w: number }>`
+export const CompIconDiv = styled.div<{ $h: number; $w: number, $isSelected?: boolean }>`
   ${NoShake};
   padding: 3px;
   background: #ffffff;
@@ -39,6 +39,17 @@ export const CompIconDiv = styled.div<{ $h: number; $w: number }>`
     transform-style: preserve-3d;
     backface-visibility: hidden;
   }
+  
+  ${(props) => props.$isSelected && `
+    ${NoShake};
+    padding: 0;
+    transform: scale(1.05);
+    transition: all 0.2s ease;
+    border: 2px solid #b3c4ff;
+    box-shadow: 0 0 5px 0 rgba(51, 119, 255, 0.15);
+    transform-style: preserve-3d;
+    backface-visibility: hidden;
+  `}
 `;
 
 export const RightPanelContentWrapper = styled.div`
diff --git a/client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx b/client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx
index c34443c68..baa914c10 100644
--- a/client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx
+++ b/client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx
@@ -11,7 +11,6 @@ import {
   EmptyCompContent,
   RightPanelContentWrapper,
 } from "pages/editor/right/styledComponent";
-import { tableDragClassName } from "pages/tutorials/tutorialsConstant";
 import React, { Fragment, useEffect, useMemo, useState } from "react";
 import styled from "styled-components";
 import {
@@ -68,12 +67,21 @@ const HovDiv = styled.div`
   &:hover + ${CompNameLabel} {
     color: #315efb;
   }
+  
+  &.selected + ${CompNameLabel} {
+    font-weight: 500;
+    color: #315efb;
+  }
 `;
 
-const IconContain = (props: { Icon: React.FunctionComponent<React.SVGProps<SVGSVGElement>> }) => {
-  const { Icon } = props;
+const IconContain = (props: {
+  Icon: React.FunctionComponent<React.SVGProps<SVGSVGElement>>,
+  isSelected: boolean,
+}) => {
+  const { Icon, isSelected } = props;
+  console.log(isSelected);
   return (
-    <CompIconDiv $w={64} $h={64}>
+    <CompIconDiv $w={64} $h={64} $isSelected={isSelected}>
       <Icon />
     </CompIconDiv>
   );
@@ -85,6 +93,7 @@ const InsertContain = styled.div`
   padding: 4px 0 0 0;
   box-sizing: border-box;
   gap: 8px;
+  margin: 0 1px;
 `;
 
 const SectionWrapper = styled.div`
@@ -218,11 +227,11 @@ export const ThemeCompPanel = (props: any) => {
         layout: {
           [compKey]: {
             ...compInfo.layoutInfo,
-            w: (compInfo?.layoutInfo?.w || 5) * 1.5,
+            w: (compInfo?.layoutInfo?.w || 5) * 2,
             h: (compInfo?.layoutInfo?.h || 5),
             i: compKey,
-            x: 2,
-            y: 2,
+            x: 1,
+            y: 1,
           }
         }
       }
@@ -256,9 +265,9 @@ export const ThemeCompPanel = (props: any) => {
               >
                 <InsertContain>
                   {infos.map((info) => (
-                    <CompDiv key={info[0]} className={info[0] === "table" ? tableDragClassName : ""} onClick={() => onCompSelect(info)}>
-                      <HovDiv>
-                        <IconContain Icon={info[1].icon}></IconContain>
+                    <CompDiv key={info[0]} onClick={() => onCompSelect(info)}>
+                      <HovDiv className={info[0] === selectedComp ? 'selected' : ''}>
+                        <IconContain isSelected={info[0] === selectedComp} Icon={info[1].icon}></IconContain>
                       </HovDiv>
                       <CompNameLabel>{info[1].name}</CompNameLabel>
                       {language !== "en" && <CompEnNameLabel>{info[1].enName}</CompEnNameLabel>}
@@ -270,7 +279,7 @@ export const ThemeCompPanel = (props: any) => {
           );
         })
         .filter((t) => t != null),
-    [categories, searchValue]
+    [categories, searchValue, selectedComp]
   );
 
   const stylePropertyView = useMemo(() => {
@@ -322,14 +331,17 @@ export const ThemeCompPanel = (props: any) => {
   // )
 
   return (
-    <Card style={{ marginBottom: "20px", minHeight : "200px" }}>
+    <Card
+      style={{ marginBottom: "20px", minHeight : "200px" }}
+      bodyStyle={{ padding: '24px 14px'}}
+    >
       <Flex style={{
         height: "650px",
         overflow: "hidden",
         gap: "middle",
       }}>
         <RightPanelContentWrapper style={{
-          padding: "12px",
+          padding: "0",
           overflow: "auto",
         }}>
           <Input.Search

From d58be235518bd4b1009d6e185639f0707a033013 Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Wed, 26 Jun 2024 15:49:10 +0500
Subject: [PATCH 50/57] Theme: remove overwriteStyles switch

---
 .../src/pages/setting/theme/detail/index.tsx  | 48 ++-----------------
 1 file changed, 3 insertions(+), 45 deletions(-)

diff --git a/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx b/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
index 6a64753f0..61b821d0d 100644
--- a/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
+++ b/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
@@ -76,7 +76,6 @@ type LocationProp = {
   name: string;
   id: string;
   type: DETAIL_TYPE;
-  overwriteStyles?: boolean;
 };
 
 type ThemeDetailPageProps = {
@@ -99,7 +98,6 @@ type ThemeDetailPageState = {
 
 class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailPageState> {
   themeDefault: ThemeDetail;
-  overwriteStyles: boolean;
   readonly id: string;
   readonly type: string;
   readonly inputRef: React.RefObject<InputRef>;
@@ -107,7 +105,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
 
   constructor(props: ThemeDetailPageProps) {
     super(props);
-    const { name, id, theme, type, overwriteStyles } = props.location.state || {};
+    const { name, id, theme, type } = props.location.state || {};
     if (!name || !id || !theme || !type) {
       history.replace(BASE_URL);
       window.location.reload();
@@ -124,7 +122,6 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
 
     this.id = id;
     this.type = type;
-    this.overwriteStyles = Boolean(overwriteStyles);
     this.state = {
       theme,
       name,
@@ -138,36 +135,6 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
     this.setState({ theme: this.themeDefault });
   }
 
-  handleOverwriteStyles(overwriteStyles: boolean) {
-    this.props.fetchCommonSettings(this.props.orgId, ({ themeList }) => {
-      let list = [];
-      const currentTheme = {
-        name: this.state.name,
-        id: this.id,
-        updateTime: new Date().getTime(),
-        theme: this.themeDefault,
-        overwriteStyles: overwriteStyles,
-      };
-      list = themeList!.map((theme) => {
-        if (theme.id === this.id) {
-          return currentTheme;
-        } else {
-          return theme;
-        }
-      });
-
-      this.props.setCommonSettings({
-        orgId: this.props.orgId,
-        data: { key: "themeList", value: list },
-        onSuccess: () => {
-          messageInstance.success(trans("theme.saveSuccessMsg"));
-          this.themeDefault = this.state.theme;
-          this.overwriteStyles = overwriteStyles;
-        },
-      });
-    });
-  }
-
   handleSave() {
     this.props.fetchCommonSettings(this.props.orgId, ({ themeList }) => {
       let list = [];
@@ -376,15 +343,6 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
               <ArrowIcon />
               <span>{this.state.name}</span>
             </HeaderBack>
-            <Flex gap={8}>
-              <b style={{margin: 0}}>
-                Overwrite styles
-              </b>
-              <Switch defaultValue={this.overwriteStyles} onChange={() => {
-                console.log('change');
-                this.handleOverwriteStyles(!this.overwriteStyles)
-              }}/>
-            </Flex>
           </Header>
 
           <DetailContent>
@@ -586,7 +544,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
               </Card>
             </ThemeSettingsView>
 
-            {/* <ThemeSettingsView>
+            <ThemeSettingsView>
               <StyleThemeSettingsCover>
                 <ChartCompIcon width={"36px"} style={{marginRight : "10px"}}/> <h2 style={{color: "#ffffff", marginTop : "8px"}}> {trans("theme.charts")}</h2>
               </StyleThemeSettingsCover>
@@ -618,7 +576,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
                   <PreviewApp style={{ height: "380px", width: "100%", margin: "0" }} theme={this.state.theme} dsl={chartDsl} />
                 </Flex>
               </Card>
-            </ThemeSettingsView> */}
+            </ThemeSettingsView>
 
           </DetailContent>
 

From be6c8611b68471c9b4c79a9844e774be13daec94 Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Wed, 26 Jun 2024 20:29:32 +0500
Subject: [PATCH 51/57] Theme: added comp theme styling in candleStickChart

---
 .../src/comps/candleStickChartComp/candleStickChartComp.tsx   | 1 -
 .../comps/candleStickChartComp/candleStickChartConstants.tsx  | 2 +-
 .../src/comps/candleStickChartComp/candleStickChartUtils.ts   | 2 +-
 client/packages/lowcoder/src/comps/controls/styleControl.tsx  | 4 ++--
 .../lowcoder/src/pages/setting/theme/detail/index.tsx         | 4 ++--
 5 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartComp.tsx b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartComp.tsx
index 2d17a36f9..45a49b65c 100644
--- a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartComp.tsx
@@ -63,7 +63,6 @@ CandleStickChartTmpComp = withViewFn(CandleStickChartTmpComp, (comp) => {
     color: chartColorPalette,
     backgroundColor: "#fff",
   };
-
   let themeConfig = defaultChartTheme;
   try {
     themeConfig = theme?.theme.chart ? JSON.parse(theme?.theme.chart) : defaultChartTheme;
diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx
index 1de9ffdb3..cee782aab 100644
--- a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx
+++ b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx
@@ -253,7 +253,7 @@ const chartJsonModeChildren = {
   echartsLegendConfig: EchartsLegendConfig,
   echartsLabelConfig: EchartsLabelConfig,
   echartsConfig: EchartsOptionComp,
-  style: styleControl(EchartsStyle),
+  style: styleControl(EchartsStyle, 'style'),
   tooltip: withDefault(BoolControl, true),
   legendVisibility: withDefault(BoolControl, true),
 }
diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts
index 3c6611ba9..8d94c105f 100644
--- a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts
@@ -141,7 +141,7 @@ export function getEchartsConfig(
     'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom',
     "left":"center"
   },
-  "backgroundColor": props?.style?.background || theme.background,
+  "backgroundColor": props?.style?.background || theme?.style?.background,
   "color": props.echartsOption.data?.map(data => data.color),
    "tooltip": props.tooltip&&{
     "trigger": "axis",
diff --git a/client/packages/lowcoder/src/comps/controls/styleControl.tsx b/client/packages/lowcoder/src/comps/controls/styleControl.tsx
index fc9c640db..0d03f8bd5 100644
--- a/client/packages/lowcoder/src/comps/controls/styleControl.tsx
+++ b/client/packages/lowcoder/src/comps/controls/styleControl.tsx
@@ -864,8 +864,8 @@ export function styleControl<T extends readonly SingleColorConfig[]>(
       const theme = useContext(ThemeContext);
       const bgColor = useContext(BackgroundColorContext);
 
-      const appSettingsComp = editorState.getAppSettingsComp();
-      const { preventAppStylesOverwriting } = appSettingsComp.getView();
+      const appSettingsComp = editorState?.getAppSettingsComp();
+      const preventAppStylesOverwriting = appSettingsComp?.getView()?.preventAppStylesOverwriting;
       const { themeId } = theme || {}; 
       const { appliedThemeId, preventStyleOverwriting } = comp?.comp || {};
       const appTheme = !preventStyleOverwriting && !preventAppStylesOverwriting
diff --git a/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx b/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
index 61b821d0d..c227c2ae5 100644
--- a/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
+++ b/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
@@ -386,7 +386,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
               </Card>
             </ThemeSettingsView>
 
-            {/* <ThemeSettingsView>
+            <ThemeSettingsView>
               <StyleThemeSettingsCover>
                 <TextSizeIcon width={"36px"} style={{marginRight : "10px"}}/> <h2 style={{color: "#ffffff", marginTop : "8px"}}> {trans("theme.fonts")}</h2>
               </StyleThemeSettingsCover>
@@ -425,7 +425,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
                   <PreviewApp style={{marginTop: '3px', height: "620px", width: "100%"}} theme={this.state.theme} dsl={dsl} />
                 </Flex>
               </Card>
-            </ThemeSettingsView> */}
+            </ThemeSettingsView>
 
             <ThemeSettingsView>
               <StyleThemeSettingsCover>

From 13fbb074b2ac8575b5fcbeeaca7b1cccb9e7ae18 Mon Sep 17 00:00:00 2001
From: Meenam Afzal <meenamafzal1@gmail.com>
Date: Fri, 28 Jun 2024 23:56:42 +0500
Subject: [PATCH 52/57] custom hook used

---
 .../autoCompleteComp/autoCompleteComp.tsx     | 17 ++--------
 .../lowcoder/src/comps/comps/avatar.tsx       | 17 ++--------
 .../lowcoder/src/comps/comps/avatarGroup.tsx  | 18 ++--------
 .../src/comps/comps/buttonComp/buttonComp.tsx | 17 ++--------
 .../comps/comps/buttonComp/dropdownComp.tsx   | 17 ++--------
 .../src/comps/comps/buttonComp/linkComp.tsx   | 17 ++--------
 .../comps/comps/buttonComp/scannerComp.tsx    | 21 ++----------
 .../comps/buttonComp/toggleButtonComp.tsx     | 17 ++--------
 .../lowcoder/src/comps/comps/carouselComp.tsx | 21 ++----------
 .../comps/comps/columnLayout/columnLayout.tsx | 18 ++--------
 .../comps/comps/commentComp/commentComp.tsx   | 18 ++--------
 .../comps/comps/containerComp/cardComp.tsx    | 18 ++--------
 .../comps/containerComp/pageLayoutComp.tsx    | 18 ++--------
 .../src/comps/comps/customComp/customComp.tsx | 19 ++---------
 .../src/comps/comps/dateComp/dateComp.tsx     | 34 ++-----------------
 .../src/comps/comps/dateComp/timeComp.tsx     | 34 ++-----------------
 .../src/comps/comps/fileViewerComp.tsx        | 20 ++---------
 .../lowcoder/src/comps/comps/iconComp.tsx     | 20 ++---------
 .../lowcoder/src/comps/comps/iframeComp.tsx   | 22 ++----------
 .../lowcoder/src/comps/comps/imageComp.tsx    | 21 ++----------
 .../comps/comps/jsonComp/jsonEditorComp.tsx   | 17 ++--------
 .../comps/comps/jsonComp/jsonExplorerComp.tsx | 17 ++--------
 .../comps/comps/jsonComp/jsonLottieComp.tsx   | 20 ++---------
 .../jsonSchemaFormComp/jsonSchemaFormComp.tsx | 17 ++--------
 .../src/comps/comps/mediaComp/audioComp.tsx   | 20 ++---------
 .../comps/comps/mediaComp/colorPickerComp.tsx | 20 ++---------
 .../src/comps/comps/mediaComp/videoComp.tsx   | 21 ++----------
 .../comps/numberInputComp/numberInputComp.tsx | 17 ++--------
 .../comps/numberInputComp/sliderComp.tsx      | 18 ++--------
 .../src/comps/comps/progressCircleComp.tsx    | 18 ++--------
 .../lowcoder/src/comps/comps/progressComp.tsx | 18 ++--------
 .../lowcoder/src/comps/comps/qrCodeComp.tsx   | 21 +++---------
 .../lowcoder/src/comps/comps/ratingComp.tsx   | 18 ++--------
 .../responsiveLayout/responsiveLayout.tsx     | 20 ++---------
 .../src/comps/comps/richTextEditorComp.tsx    | 16 ++-------
 .../comps/selectInputComp/cascaderComp.tsx    | 18 ++--------
 .../comps/selectInputComp/checkboxComp.tsx    | 17 ++--------
 .../comps/selectInputComp/multiSelectComp.tsx | 17 ++--------
 .../comps/comps/selectInputComp/radioComp.tsx | 17 ++--------
 .../selectInputComp/segmentedControl.tsx      | 17 ++--------
 .../comps/selectInputComp/selectComp.tsx      | 17 ++--------
 .../comps/selectInputComp/stepControl.tsx     | 17 ++--------
 .../src/comps/comps/signatureComp.tsx         | 18 ++--------
 .../lowcoder/src/comps/comps/switchComp.tsx   | 17 ++--------
 .../comps/comps/tabs/tabbedContainerComp.tsx  | 18 ++--------
 .../comps/comps/textInputComp/inputComp.tsx   | 19 ++---------
 .../comps/comps/textInputComp/mentionComp.tsx | 19 ++---------
 .../comps/textInputComp/passwordComp.tsx      | 17 ++--------
 .../comps/textInputComp/textAreaComp.tsx      | 17 ++--------
 .../comps/comps/timelineComp/timelineComp.tsx | 18 ++--------
 .../lowcoder/src/comps/comps/transferComp.tsx | 19 ++---------
 .../src/comps/comps/treeComp/treeComp.tsx     | 21 ++----------
 .../comps/comps/treeComp/treeSelectComp.tsx   | 18 ++--------
 53 files changed, 122 insertions(+), 881 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx
index 925dc1870..ff278182d 100644
--- a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx
@@ -58,6 +58,7 @@ import {
 import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
 import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
 import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
 
 
 const InputStyle = styled(Input) <{ $style: InputLikeStyleType }>`
@@ -107,21 +108,7 @@ const getValidate = (value: any): "" | "warning" | "error" | undefined => {
 
 let AutoCompleteCompBase = (function () {
   return new UICompBuilder(childrenMap, (props, dispatch) => {
-    const theme = useContext(ThemeContext);
-    const compType = useContext(CompTypeContext);
-    const compTheme = theme?.theme?.components?.[compType];
-    const styleProps: Record<string, any> = {};
-    ['style', 'labelStyle', 'inputFieldStyle', 'animationStyle'].forEach((key: string) => {
-      styleProps[key] = (props as any)[key];
-    });
-
-    useEffect(() => {
-      setInitialCompStyles({
-        dispatch,
-        compTheme,
-        styleProps,
-      });
-    }, []);
+   useMergeCompStyles(props as Record<string, any>, dispatch);
 
     const {
       items,
diff --git a/client/packages/lowcoder/src/comps/comps/avatar.tsx b/client/packages/lowcoder/src/comps/comps/avatar.tsx
index 0358df339..63bb24856 100644
--- a/client/packages/lowcoder/src/comps/comps/avatar.tsx
+++ b/client/packages/lowcoder/src/comps/comps/avatar.tsx
@@ -37,6 +37,7 @@ import { CompNameContext, EditorContext } from "../editorState";
 import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
 import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
 import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
 
 const AvatarWrapper = styled(Avatar) <AvatarProps & { $cursorPointer?: boolean, $style: AvatarStyleType }>`
   background: ${(props) => props.$style.background};
@@ -201,22 +202,8 @@ const AvatarView = (props: RecordConstructorToView<typeof childrenMap>) => {
 
 let AvatarBasicComp = (function () {
   return new UICompBuilder(childrenMap, (props , dispatch) => { 
+    useMergeCompStyles(props as Record<string, any>, dispatch);    
 
-    const theme = useContext(ThemeContext);
-    const compType = useContext(CompTypeContext);
-    const compTheme = theme?.theme?.components?.[compType];
-    const styleProps: Record<string, any> = {};
-    ['style', 'labelStyle', 'inputFieldStyle', 'animationStyle'].forEach((key: string) => {
-      styleProps[key] = (props as any)[key];
-    });
-
-    useEffect(() => {
-      setInitialCompStyles({
-        dispatch,
-        compTheme,
-        styleProps,
-      });
-    }, []);
     return(<AvatarView {...props} />)})
     .setPropertyViewFn((children) => (
       <>
diff --git a/client/packages/lowcoder/src/comps/comps/avatarGroup.tsx b/client/packages/lowcoder/src/comps/comps/avatarGroup.tsx
index 34d3b6d4a..1b74f16dd 100644
--- a/client/packages/lowcoder/src/comps/comps/avatarGroup.tsx
+++ b/client/packages/lowcoder/src/comps/comps/avatarGroup.tsx
@@ -22,6 +22,7 @@ import { JSONObject } from "util/jsonTypes";
 import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
 import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
 import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
 
 const MacaroneList = [
   '#fde68a',
@@ -146,21 +147,8 @@ const AvatarGroupView = (props: RecordConstructorToView<typeof childrenMap> & {
 
 let AvatarGroupBasicComp = (function () {
   return new UICompBuilder(childrenMap, (props, dispatch) =>{
-    const theme = useContext(ThemeContext);
-    const compType = useContext(CompTypeContext);
-    const compTheme = theme?.theme?.components?.[compType];
-    const styleProps: Record<string, any> = {};
-    ['style', 'avatar'].forEach((key: string) => {
-      styleProps[key] = (props as any)[key];
-    });
-  
-    useEffect(() => {
-      setInitialCompStyles({
-        dispatch,
-        compTheme,
-        styleProps,
-      });
-    }, []); 
+    useMergeCompStyles(props as Record<string, any>, dispatch);    
+
     return( <AvatarGroupView {...props} dispatch={dispatch} />
 )}) 
     .setPropertyViewFn((children) => (
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx
index e3b0d96a3..e783f689b 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx
@@ -30,6 +30,7 @@ import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
 import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
 import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
 import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
 
 const FormLabel = styled(CommonBlueLabel)`
   font-size: 13px;
@@ -138,21 +139,7 @@ const ButtonTmpComp = (function () {
     viewRef: RefControl<HTMLElement>,
   };
   return new UICompBuilder(childrenMap, (props , dispatch) => {
-    const theme = useContext(ThemeContext);
-    const compType = useContext(CompTypeContext);
-    const compTheme = theme?.theme?.components?.[compType];
-    const styleProps: Record<string, any> = {};
-    ['style', 'animationStyle'].forEach((key: string) => {
-      styleProps[key] = (props as any)[key];
-    });
-
-    useEffect(() => {
-      setInitialCompStyles({
-        dispatch,
-        compTheme,
-        styleProps,
-      });
-    }, []);
+    useMergeCompStyles(props as Record<string, any>, dispatch);
 
     return(
       <ButtonCompWrapper disabled={props.disabled}>
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx
index 4368af2ee..41ef3aa8b 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx
@@ -25,6 +25,7 @@ import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
 import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
 import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
 import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
+import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
 
 const StyledDropdownButton = styled(DropdownButton)`
   width: 100%;
@@ -91,21 +92,7 @@ const DropdownTmpComp = (function () {
     style: styleControl(DropdownStyle, 'style'),
   };
   return new UICompBuilder(childrenMap, (props, dispatch) => {
-    const theme = useContext(ThemeContext);
-    const compType = useContext(CompTypeContext);
-    const compTheme = theme?.theme?.components?.[compType];
-    const styleProps: Record<string, any> = {};
-    ['style'].forEach((key: string) => {
-      styleProps[key] = (props as any)[key];
-    });
-
-    useEffect(() => {
-      setInitialCompStyles({
-        dispatch,
-        compTheme,
-        styleProps,
-      });
-    }, []);
+   useMergeCompStyles(props as Record<string, any>, dispatch);
 
     const hasIcon =
       props.options.findIndex((option) => (option.prefixIcon as ReactElement)?.props.value) > -1;
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx
index 8d2e6c74f..726e531d6 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx
@@ -25,6 +25,7 @@ import React, { useContext, useEffect } from "react";
 import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
 import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
 import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
+import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
 
 const Link = styled(Button)<{
   $style: LinkStyleType;
@@ -95,22 +96,8 @@ const LinkTmpComp = (function () {
     viewRef: RefControl<HTMLElement>,
   };
   return new UICompBuilder(childrenMap, (props, dispatch) => {
-    const theme = useContext(ThemeContext);
-    const compType = useContext(CompTypeContext);
-    const compTheme = theme?.theme?.components?.[compType];
+    useMergeCompStyles(props as Record<string, any>, dispatch);    
 
-    const styleProps: Record<string, any> = {};
-    ['style', 'animationStyle'].forEach((key: string) => {
-      styleProps[key] = (props as any)[key];
-    });
-
-    useEffect(() => {
-      setInitialCompStyles({
-        dispatch,
-        compTheme,
-        styleProps,
-      });
-    }, []);
 
     // chrome86 bug: button children should not contain only empty span
     const hasChildren = hasIcon(props.prefixIcon) || !!props.text || hasIcon(props.suffixIcon);
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx
index 28121ccbe..1489697fb 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx
@@ -27,6 +27,7 @@ import { EditorContext } from "comps/editorState";
 import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
 import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
 import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
 
 const Error = styled.div`
   color: #f5222d;
@@ -76,24 +77,8 @@ const ScannerTmpComp = (function () {
     style: styleControl(DropdownStyle, 'style'),
     viewRef: RefControl<HTMLElement>,
   };
-  return new UICompBuilder(childrenMap, (props ,dispatch) => {
-
-    const theme = useContext(ThemeContext);
-    const compType = useContext(CompTypeContext);
-    const compTheme = theme?.theme?.components?.[compType];
-    const styleProps: Record<string, any> = {};
-    ['style'].forEach((key: string) => {
-      styleProps[key] = (props as any)[key];
-    });
-
-    useEffect(() => {
-      setInitialCompStyles({
-        dispatch,
-        compTheme,
-        styleProps,
-      });
-    }, []);
-
+  return new UICompBuilder(childrenMap, (props, dispatch) => {
+    useMergeCompStyles(props as Record<string, any>, dispatch);
 
     const [showModal, setShowModal] = useState(false);
     const [errMessage, setErrMessage] = useState("");
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx
index bc2829d9c..e4715407b 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx
@@ -28,6 +28,7 @@ import { EditorContext } from "comps/editorState";
 import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
 import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
 import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
+import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
 
 const IconWrapper = styled.div`
   display: flex;
@@ -72,21 +73,7 @@ const ToggleTmpComp = (function () {
     const text = props.showText
       ? (props.value.value ? props.trueText : props.falseText) || undefined
       : undefined;
-    const theme = useContext(ThemeContext);
-    const compType = useContext(CompTypeContext);
-    const compTheme = theme?.theme?.components?.[compType];
-    const styleProps: Record<string, any> = {};
-    ['style',  'animationStyle'].forEach((key: string) => {
-      styleProps[key] = (props as any)[key];
-    });
-
-    useEffect(() => {
-      setInitialCompStyles({
-        dispatch,
-        compTheme,
-        styleProps,
-      });
-    }, []);
+    useMergeCompStyles(props as Record<string, any>, dispatch);
 
     return (
       <ButtonCompWrapperStyled
diff --git a/client/packages/lowcoder/src/comps/comps/carouselComp.tsx b/client/packages/lowcoder/src/comps/comps/carouselComp.tsx
index 53a809e13..a0b826b2a 100644
--- a/client/packages/lowcoder/src/comps/comps/carouselComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/carouselComp.tsx
@@ -17,7 +17,7 @@ import { AnimationStyle, AnimationStyleType, CarouselStyle } from "comps/control
 
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
-import { ThemeContext } from "@lowcoder-ee/index.sdk";
+import { ThemeContext, useMergeCompStyles } from "@lowcoder-ee/index.sdk";
 import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
 import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
 
@@ -51,23 +51,8 @@ let CarouselBasicComp = (function () {
     animationStyle: styleControl(AnimationStyle , 'animationStyle'),
     ...formDataChildren,
   };
-  return new UICompBuilder(childrenMap, (props , dispatch) => {
-
-    const theme = useContext(ThemeContext);
-    const compType = useContext(CompTypeContext);
-    const compTheme = theme?.theme?.components?.[compType];
-    const styleProps: Record<string, any> = {};
-    ['style','animationStyle'].forEach((key: string) => {
-      styleProps[key] = (props as any)[key];
-    });
-  
-    useEffect(() => {
-      setInitialCompStyles({
-        dispatch,
-        compTheme,
-        styleProps,
-      });
-    }, []);
+  return new UICompBuilder(childrenMap, (props, dispatch) => {
+    useMergeCompStyles(props as Record<string, any>, dispatch);
 
     const containerRef = useRef<HTMLDivElement>(null);
     const [height, setHeight] = useState(0);
diff --git a/client/packages/lowcoder/src/comps/comps/columnLayout/columnLayout.tsx b/client/packages/lowcoder/src/comps/comps/columnLayout/columnLayout.tsx
index 65d9d83c2..ac0977af2 100644
--- a/client/packages/lowcoder/src/comps/comps/columnLayout/columnLayout.tsx
+++ b/client/packages/lowcoder/src/comps/comps/columnLayout/columnLayout.tsx
@@ -43,6 +43,7 @@ import { DisabledContext } from "comps/generators/uiCompBuilder";
 import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
 import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
 import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
+import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
 
 const ContainWrapper = styled.div<{
   $style: ContainerStyleType & {
@@ -181,23 +182,8 @@ const ColumnLayout = (props: ColumnLayoutProps) => {
 
 export const ResponsiveLayoutBaseComp = (function () {
   return new UICompBuilder(childrenMap, (props, dispatch) => {
+    useMergeCompStyles(props as Record<string, any>, dispatch);    
 
-    const theme = useContext(ThemeContext);
-    const compType = useContext(CompTypeContext);
-    const compTheme = theme?.theme?.components?.[compType];
-    const styleProps: Record<string, any> = {};
-    ['style', 'columnStyle'].forEach((key: string) => {
-      styleProps[key] = (props as any)[key];
-    });
-
-    useEffect(() => {
-      setInitialCompStyles({
-        dispatch,
-        compTheme,
-        styleProps,
-      });
-    }, []);
-    
     return (
       <ColumnLayout {...props} dispatch={dispatch} />
     );
diff --git a/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx b/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx
index f732bc095..d7f2dadd5 100644
--- a/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx
@@ -70,6 +70,7 @@ import { default as CloseOutlined } from "@ant-design/icons/CloseOutlined";
 import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
 import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
 import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
 
 
 dayjs.extend(relativeTime);
@@ -377,22 +378,7 @@ const CommentCompBase = (
 
 let CommentBasicComp = (function () {
   return new UICompBuilder(childrenMap, (props, dispatch) =>{ 
-
-    const theme = useContext(ThemeContext);
-    const compType = useContext(CompTypeContext);
-    const compTheme = theme?.theme?.components?.[compType];
-    const styleProps: Record<string, any> = {};
-    ['style', 'animationStyle'].forEach((key: string) => {
-      styleProps[key] = (props as any)[key];
-    });
-
-    useEffect(() => {
-      setInitialCompStyles({
-        dispatch,
-        compTheme,
-        styleProps,
-      });
-    }, []);
+    useMergeCompStyles(props as Record<string, any>, dispatch);    
 
     return (
     <CommentCompBase {...props} dispatch={dispatch} />
diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx
index dbd6c1791..42a9cb62e 100644
--- a/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx
@@ -23,6 +23,7 @@ import { styleControl } from "comps/controls/styleControl";
 import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
 import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
 import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
+import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
 const { Meta } = Card;
 
 const Wrapper = styled.div<{
@@ -196,22 +197,7 @@ export const ContainerBaseComp = (function () {
   };
 
   return new ContainerCompBuilder(childrenMap, (props, dispatch) => {
-
-    const theme = useContext(ThemeContext);
-    const compType = useContext(CompTypeContext);
-    const compTheme = theme?.theme?.components?.[compType];
-    const styleProps: Record<string, any> = {};
-    ['style', 'headerStyle', 'bodyStyle', 'animationStyle'].forEach((key: string) => {
-      styleProps[key] = (props as any)[key];
-    });
-
-    useEffect(() => {
-      setInitialCompStyles({
-        dispatch,
-        compTheme,
-        styleProps,
-      });
-    }, []);
+    useMergeCompStyles(props as Record<string, any>, dispatch);    
     
     props.container.showHeader = false;
     // 注入容器参数
diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx
index 7dcc0c109..ff291827c 100644
--- a/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx
@@ -23,6 +23,7 @@ import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
 import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
 import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
 import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
 
 export const ContainerBaseComp = (function () {
   const childrenMap = {
@@ -33,22 +34,7 @@ export const ContainerBaseComp = (function () {
   return new ContainerCompBuilder(childrenMap, (props, dispatch) => {
 
     const [siderCollapsed, setSiderCollapsed] = useState(false);
-
-    const theme = useContext(ThemeContext);
-    const compType = useContext(CompTypeContext);
-    const compTheme = theme?.theme?.components?.[compType];
-    const styleProps: Record<string, any> = {};
-    ['animationStyle'].forEach((key: string) => {
-      styleProps[key] = (props as any)[key];
-    });
-
-    useEffect(() => {
-      setInitialCompStyles({
-        dispatch,
-        compTheme,
-        styleProps,
-      });
-    }, []);
+    useMergeCompStyles(props as Record<string, any>, dispatch);    
 
     return (
       <DisabledContext.Provider value={props.disabled}>
diff --git a/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx b/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx
index 45283b196..1364b8da6 100644
--- a/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx
@@ -17,6 +17,7 @@ import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
 import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
 import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
 import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
+import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
 
 // TODO: eventually to embedd in container so we have styling?
 // TODO: support different starter templates for different frameworks (react, ANT, Flutter, Angular, etc)
@@ -227,23 +228,7 @@ const childrenMap = {
 };
 
 const CustomCompBase = new UICompBuilder(childrenMap, (props, dispatch) => {
-
-
-  const theme = useContext(ThemeContext);
-  const compType = useContext(CompTypeContext);
-  const compTheme = theme?.theme?.components?.[compType];
-  const styleProps: Record<string, any> = {};
-  ['style','animationStyle'].forEach((key: string) => {
-    styleProps[key] = (props as any)[key];
-  });
-
-  useEffect(() => {
-    setInitialCompStyles({
-      dispatch,
-      compTheme,
-      styleProps,
-    });
-  }, []);
+  useMergeCompStyles(props as Record<string, any>, dispatch);
   
   const { code, model } = props;
   return (
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx
index 3c8ab59cb..dcb08bfd9 100644
--- a/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx
@@ -43,7 +43,7 @@ import { hasIcon } from "comps/utils";
 import { Section, sectionNames } from "components/Section";
 import { dateRefMethods, disabledTime, handleDateChange } from "comps/comps/dateComp/dateCompUtil";
 import { DateUIView } from "./dateUIView";
-import { useIsMobile } from "util/hooks";
+import { useIsMobile, useMergeCompStyles } from "util/hooks";
 import { RefControl } from "comps/controls/refControl";
 import { CommonPickerMethods } from "antd/es/date-picker/generatePicker/interface";
 import { DateRangeUIView } from "comps/comps/dateComp/dateRangeUIView";
@@ -172,21 +172,7 @@ export type DateCompViewProps = Pick<
 };
 
 export const datePickerControl = new UICompBuilder(childrenMap, (props, dispatch) => {
-  const theme = useContext(ThemeContext);
-  const compType = useContext(CompTypeContext);
-  const compTheme = theme?.theme?.components?.[compType];
-  const styleProps: Record<string, any> = {};
-  ['style', 'labelStyle', 'inputFieldStyle', 'animationStyle'].forEach((key: string) => {
-    styleProps[key] = (props as any)[key];
-  });
-
-  useEffect(() => {
-    setInitialCompStyles({
-      dispatch,
-      compTheme,
-      styleProps,
-    });
-  }, []);
+ useMergeCompStyles(props as Record<string, any>, dispatch);
 
   let time = null;
   if (props.value.value !== '') {
@@ -307,21 +293,7 @@ export const dateRangeControl = (function () {
   };
 
   return new UICompBuilder(childrenMap, (props, dispatch) => {
-    const theme = useContext(ThemeContext);
-    const compType = useContext(CompTypeContext);
-    const compTheme = theme?.theme?.components?.[compType];
-    const styleProps: Record<string, any> = {};
-    ['style', 'labelStyle', 'inputFieldStyle', 'animationStyle'].forEach((key: string) => {
-      styleProps[key] = (props as any)[key];
-    });
-
-    useEffect(() => {
-      setInitialCompStyles({
-        dispatch,
-        compTheme,
-        styleProps,
-      });
-    }, []);
+    useMergeCompStyles(props as Record<string, any>, dispatch);
 
     let start = null;
     let end = null;
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx
index 7dbd00051..8b8ec1b60 100644
--- a/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx
@@ -55,6 +55,7 @@ import { EditorContext } from "comps/editorState";
 import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
 import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
 import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
+import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
 
 const EventOptions = [changeEvent, focusEvent, blurEvent] as const;
 
@@ -146,21 +147,7 @@ export type TimeCompViewProps = Pick<
 };
 
 export const timePickerControl = new UICompBuilder(childrenMap, (props, dispatch) => {
-  const theme = useContext(ThemeContext);
-  const compType = useContext(CompTypeContext);
-  const compTheme = theme?.theme?.components?.[compType];
-  const styleProps: Record<string, any> = {};
-  ['style', 'labelStyle', 'inputFieldStyle', 'animationStyle'].forEach((key: string) => {
-    styleProps[key] = (props as any)[key];
-  });
-
-  useEffect(() => {
-    setInitialCompStyles({
-      dispatch,
-      compTheme,
-      styleProps,
-    });
-  }, []);
+  useMergeCompStyles(props as Record<string, any>, dispatch);
 
   let time = null;
   if(props.value.value !== '') {
@@ -271,22 +258,7 @@ export const timeRangeControl = (function () {
   };
 
   return new UICompBuilder(childrenMap, (props, dispatch) => {
-    const theme = useContext(ThemeContext);
-    const compType = useContext(CompTypeContext);
-    const compTheme = theme?.theme?.components?.[compType];
-    const styleProps: Record<string, any> = {};
-    ['style', 'labelStyle', 'inputFieldStyle', 'animationStyle'].forEach((key: string) => {
-      styleProps[key] = (props as any)[key];
-    });
-
-    useEffect(() => {
-      setInitialCompStyles({
-        dispatch,
-        compTheme,
-        styleProps,
-      });
-    }, []);
-
+    useMergeCompStyles(props as Record<string, any>, dispatch);
 
     let start = null;
     if(props.start.value !== '') {
diff --git a/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx b/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx
index 3a06b19fa..969ee0ee3 100644
--- a/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx
@@ -16,6 +16,7 @@ import { EditorContext } from "comps/editorState";
 import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
 import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
 import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
 
 const getStyle = (style: FileViewerStyleType) => {
   return css`
@@ -73,23 +74,8 @@ let FileViewerBasicComp = (function () {
     style: styleControl(FileViewerStyle , 'style'),
     animationStyle: styleControl(AnimationStyle , 'animationStyle'),
   };
-  return new UICompBuilder(childrenMap, (props , dispatch) => {
-
-    const theme = useContext(ThemeContext);
-    const compType = useContext(CompTypeContext);
-    const compTheme = theme?.theme?.components?.[compType];
-    const styleProps: Record<string, any> = {};
-    ['style', 'animationStyle'].forEach((key: string) => {
-      styleProps[key] = (props as any)[key];
-    });
-
-    useEffect(() => {
-      setInitialCompStyles({
-        dispatch,
-        compTheme,
-        styleProps,
-      });
-    }, []);
+  return new UICompBuilder(childrenMap, (props, dispatch) => {
+    useMergeCompStyles(props as Record<string, any>, dispatch);
     
     if (isEmpty(props.src)) {
       return (
diff --git a/client/packages/lowcoder/src/comps/comps/iconComp.tsx b/client/packages/lowcoder/src/comps/comps/iconComp.tsx
index c25d3d9f7..602252f5f 100644
--- a/client/packages/lowcoder/src/comps/comps/iconComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/iconComp.tsx
@@ -33,6 +33,7 @@ import { EditorContext } from "comps/editorState";
 import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
 import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
 import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
+import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
 
 const Container = styled.div<{
   $style: IconStyleType | undefined;
@@ -115,23 +116,8 @@ const IconView = (props: RecordConstructorToView<typeof childrenMap>) => {
 };
 
 let IconBasicComp = (function () {
-  return new UICompBuilder(childrenMap, (props , dispatch) => { 
-    
-    const theme = useContext(ThemeContext);
-    const compType = useContext(CompTypeContext);
-    const compTheme = theme?.theme?.components?.[compType];
-    const styleProps: Record<string, any> = {};
-    ['style', 'animationStyle'].forEach((key: string) => {
-      styleProps[key] = (props as any)[key];
-    });
-
-    useEffect(() => {
-      setInitialCompStyles({
-        dispatch,
-        compTheme,
-        styleProps,
-      });
-    }, []);
+  return new UICompBuilder(childrenMap, (props, dispatch) => {
+    useMergeCompStyles(props as Record<string, any>, dispatch);
 
     return(<IconView {...props} />)})
     .setPropertyViewFn((children) => (
diff --git a/client/packages/lowcoder/src/comps/comps/iframeComp.tsx b/client/packages/lowcoder/src/comps/comps/iframeComp.tsx
index c412b8be0..b85bff57a 100644
--- a/client/packages/lowcoder/src/comps/comps/iframeComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/iframeComp.tsx
@@ -13,7 +13,7 @@ import log from "loglevel";
 import { useContext, useEffect } from "react";
 import { EditorContext } from "comps/editorState";
 import { CompTypeContext } from "../utils/compTypeContext";
-import { ThemeContext } from "@lowcoder-ee/index.sdk";
+import { ThemeContext, useMergeCompStyles } from "@lowcoder-ee/index.sdk";
 import { setInitialCompStyles } from "../utils/themeUtil";
 
 const Wrapper = styled.div<{$style: IframeStyleType; $animationStyle:AnimationStyleType}>`
@@ -51,24 +51,8 @@ let IFrameCompBase = new UICompBuilder(
     style: styleControl(IframeStyle , 'style'),
     animationStyle: styleControl(AnimationStyle , 'animationStyle'),
   },
-  (props , dispatch) => {
-
-    const theme = useContext(ThemeContext);
-    const compType = useContext(CompTypeContext);
-    const compTheme = theme?.theme?.components?.[compType];
-    const styleProps: Record<string, any> = {};
-    ['style','animationStyle'].forEach((key: string) => {
-      styleProps[key] = (props as any)[key];
-    });
-
-    useEffect(() => {
-      setInitialCompStyles({
-        dispatch,
-        compTheme,
-        styleProps,
-      });
-    }, []);
-
+  (props, dispatch) => {
+    useMergeCompStyles(props as Record<string, any>, dispatch);
 
     const sandbox = ["allow-scripts", "allow-same-origin"];
     props.allowSubmitForm && sandbox.push("allow-forms");
diff --git a/client/packages/lowcoder/src/comps/comps/imageComp.tsx b/client/packages/lowcoder/src/comps/comps/imageComp.tsx
index 5ec8edd44..078913039 100644
--- a/client/packages/lowcoder/src/comps/comps/imageComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/imageComp.tsx
@@ -34,7 +34,7 @@ import { DEFAULT_IMG_URL } from "util/stringUtils";
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
 import { StringControl } from "../controls/codeControl";
-import { ThemeContext } from "@lowcoder-ee/index.sdk";
+import { ThemeContext, useMergeCompStyles } from "@lowcoder-ee/index.sdk";
 import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
 import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
 
@@ -176,23 +176,8 @@ const childrenMap = {
   restrictPaddingOnRotation:withDefault(StringControl, 'image')
 };
 
-let ImageBasicComp = new UICompBuilder(childrenMap, (props , dispatch) => {
-
-  const theme = useContext(ThemeContext);
-  const compType = useContext(CompTypeContext);
-  const compTheme = theme?.theme?.components?.[compType];
-  const styleProps: Record<string, any> = {};
-  ['style','animationStyle'].forEach((key: string) => {
-    styleProps[key] = (props as any)[key];
-  });
-
-  useEffect(() => {
-    setInitialCompStyles({
-      dispatch,
-      compTheme,
-      styleProps,
-    });
-  }, []);
+let ImageBasicComp = new UICompBuilder(childrenMap, (props, dispatch) => {
+  useMergeCompStyles(props as Record<string, any>, dispatch);
   
   return <ContainerImg {...props} />;
 })
diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx
index 6d35de35c..6bde13166 100644
--- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx
@@ -23,6 +23,7 @@ import { EditorContext } from "comps/editorState";
 import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
 import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
 import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
 
 /**
  * JsonEditor Comp
@@ -75,21 +76,7 @@ const childrenMap = {
 
 let JsonEditorTmpComp = (function () {
   return new UICompBuilder(childrenMap, (props, dispatch) => {
-    const theme = useContext(ThemeContext);
-    const compType = useContext(CompTypeContext);
-    const compTheme = theme?.theme?.components?.[compType];
-    const styleProps: Record<string, any> = {};
-    ['style', 'animationStyle'].forEach((key: string) => {
-      styleProps[key] = (props as any)[key];
-    });
-
-    useEffect(() => {
-      setInitialCompStyles({
-        dispatch,
-        compTheme,
-        styleProps,
-      });
-    }, []);
+    useMergeCompStyles(props as Record<string, any>, dispatch);    
 
     const wrapperRef = useRef<HTMLDivElement>(null);
     const view = useRef<EditorViewType | null>(null);
diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx
index e7e15ffe0..92bbcded5 100644
--- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx
@@ -16,6 +16,7 @@ import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
 import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
 import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
 import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
+import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
 
 /**
  * JsonExplorer Comp
@@ -61,21 +62,7 @@ let JsonExplorerTmpComp = (function () {
     animationStyle:styleControl(AnimationStyle, 'animationStyle'),
   };
   return new UICompBuilder(childrenMap, (props, dispatch) => {
-    const theme = useContext(ThemeContext);
-    const compType = useContext(CompTypeContext);
-    const compTheme = theme?.theme?.components?.[compType];
-    const styleProps: Record<string, any> = {};
-    ['animationStyle'].forEach((key: string) => {
-      styleProps[key] = (props as any)[key];
-    });
-
-    useEffect(() => {
-      setInitialCompStyles({
-        dispatch,
-        compTheme,
-        styleProps,
-      });
-    }, []);
+    useMergeCompStyles(props as Record<string, any>, dispatch);
 
     return (
       <JsonExplorerContainer
diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx
index d74ec5836..15bb17c36 100644
--- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx
@@ -21,6 +21,7 @@ import { EditorContext } from "comps/editorState";
 import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
 import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
 import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
 
 const Player = lazy(
   () => import('@lottiefiles/react-lottie-player')
@@ -102,23 +103,8 @@ let JsonLottieTmpComp = (function () {
     loop: dropdownControl(loopOptions, "single"),
     keepLastFrame: BoolControl.DEFAULT_TRUE,
   };
-  return new UICompBuilder(childrenMap, (props , dispatch) => {
-
-    const theme = useContext(ThemeContext);
-    const compType = useContext(CompTypeContext);
-    const compTheme = theme?.theme?.components?.[compType];
-    const styleProps: Record<string, any> = {};
-    ['container', 'animationStyle'].forEach((key: string) => {
-      styleProps[key] = (props as any)[key];
-    });
-
-    useEffect(() => {
-      setInitialCompStyles({
-        dispatch,
-        compTheme,
-        styleProps,
-      });
-    }, []);
+  return new UICompBuilder(childrenMap, (props, dispatch) => {
+    useMergeCompStyles(props as Record<string, any>, dispatch);
 
     return (
       <div
diff --git a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx
index 6acfbb084..e9b46f853 100644
--- a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx
@@ -28,6 +28,7 @@ import { EditorContext } from "comps/editorState";
 import { ThemeContext } from '../../utils/themeContext';
 import { CompTypeContext } from '../../utils/compTypeContext';
 import { setInitialCompStyles } from '../../utils/themeUtil';
+import { useMergeCompStyles } from '@lowcoder-ee/index.sdk';
 
 Theme.widgets.DateWidget = DateWidget(false);
 Theme.widgets.DateTimeWidget = DateWidget(true);
@@ -198,21 +199,7 @@ let FormBasicComp = (function () {
     animationStyle: styleControl(AnimationStyle , 'animationStyle'),
   };
   return new UICompBuilder(childrenMap, (props, dispatch) => {
-    const theme = useContext(ThemeContext);
-    const compType = useContext(CompTypeContext);
-    const compTheme = theme?.theme?.components?.[compType];
-    const styleProps: Record<string, any> = {};
-    ['style','animationStyle'].forEach((key: string) => {
-      styleProps[key] = (props as any)[key];
-    });
-
-    useEffect(() => {
-      setInitialCompStyles({
-        dispatch,
-        compTheme,
-        styleProps,
-      });
-    }, []);
+    useMergeCompStyles(props as Record<string, any>, dispatch);    
 
     // rjsf 4.20 supports ui:submitButtonOptions, but if the button is customized, it will not take effect. Here we implement it ourselves
     const buttonOptions = props?.uiSchema?.[
diff --git a/client/packages/lowcoder/src/comps/comps/mediaComp/audioComp.tsx b/client/packages/lowcoder/src/comps/comps/mediaComp/audioComp.tsx
index 82f47233e..f5ad4a583 100644
--- a/client/packages/lowcoder/src/comps/comps/mediaComp/audioComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/mediaComp/audioComp.tsx
@@ -18,6 +18,7 @@ import { EditorContext } from "comps/editorState";
 import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
 import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
 import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
+import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
 
 const Container = styled.div<{ $style: any; $animationStyle: AnimationStyleType }>`
 ${props => props.$style};
@@ -77,23 +78,8 @@ const childrenMap = {
 };
 
 let AudioBasicComp = (function () {
-  return new UICompBuilder(childrenMap, (props , dispatch) => {
-
-    const theme = useContext(ThemeContext);
-    const compType = useContext(CompTypeContext);
-    const compTheme = theme?.theme?.components?.[compType];
-    const styleProps: Record<string, any> = {};
-    ['style', 'animationStyle'].forEach((key: string) => {
-      styleProps[key] = (props as any)[key];
-    });
-
-    useEffect(() => {
-      setInitialCompStyles({
-        dispatch,
-        compTheme,
-        styleProps,
-      });
-    }, []);
+  return new UICompBuilder(childrenMap, (props, dispatch) => {
+    useMergeCompStyles(props as Record<string, any>, dispatch);
 
     return <ContainerAudio {...props} />;
   })
diff --git a/client/packages/lowcoder/src/comps/comps/mediaComp/colorPickerComp.tsx b/client/packages/lowcoder/src/comps/comps/mediaComp/colorPickerComp.tsx
index 41143d337..32b9dc6ec 100644
--- a/client/packages/lowcoder/src/comps/comps/mediaComp/colorPickerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/mediaComp/colorPickerComp.tsx
@@ -20,6 +20,7 @@ import { useContext, useEffect } from "react";
 import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
 import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
 import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
 
 export function getStyle(style: ColorPickerStyleType) {
   return css`
@@ -73,23 +74,8 @@ const childrenMap = {
   presets: withDefault(ArrayOrJSONObjectControl, JSON.stringify(presets, null, 2)),
 };
 
-export const ColorPickerComp = new UICompBuilder(childrenMap, (props , dispatch) => {
-
-  const theme = useContext(ThemeContext);
-  const compType = useContext(CompTypeContext);
-  const compTheme = theme?.theme?.components?.[compType];
-  const styleProps: Record<string, any> = {};
-  ['style'].forEach((key: string) => {
-    styleProps[key] = (props as any)[key];
-  });
-
-  useEffect(() => {
-    setInitialCompStyles({
-      dispatch,
-      compTheme,
-      styleProps,
-    });
-  }, []);
+export const ColorPickerComp = new UICompBuilder(childrenMap, (props, dispatch) => {
+  useMergeCompStyles(props as Record<string, any>, dispatch);
 
   return props.label({
     children: (
diff --git a/client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx b/client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx
index 5de975d2b..f5f6596a0 100644
--- a/client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx
@@ -27,6 +27,7 @@ import styled, { css } from "styled-components";
 import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
 import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
 import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
+import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
 
 const EventOptions = [
   { label: trans("video.play"), value: "play", description: trans("video.playDesc") },
@@ -131,24 +132,8 @@ const childrenMap = {
 };
  
 let VideoBasicComp = (function () {
-  return new UICompBuilder(childrenMap, (props , dispatch) => {
-
-    const theme = useContext(ThemeContext);
-    const compType = useContext(CompTypeContext);
-    const compTheme = theme?.theme?.components?.[compType];
-    const styleProps: Record<string, any> = {};
-    ['style', 'animationStyle'].forEach((key: string) => {
-      styleProps[key] = (props as any)[key];
-    });
-
-    useEffect(() => {
-      setInitialCompStyles({
-        dispatch,
-        compTheme,
-        styleProps,
-      });
-    }, []);
-
+  return new UICompBuilder(childrenMap, (props, dispatch) => {
+    useMergeCompStyles(props as Record<string, any>, dispatch);
 
     return <ContainerVideo {...props} />;
   })
diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx
index 36e96d241..5256b743d 100644
--- a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx
@@ -57,6 +57,7 @@ import { fixOldInputCompData } from "../textInputComp/textInputConstants";
 import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
 import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
 import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
+import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
 
 const getStyle = (style: InputLikeStyleType) => {
   return css`
@@ -384,21 +385,7 @@ const CustomInputNumber = (props: RecordConstructorToView<typeof childrenMap>) =
 
 let NumberInputTmpComp = (function () {
   return new UICompBuilder(childrenMap, (props, dispatch) => {
-    const theme = useContext(ThemeContext);
-    const compType = useContext(CompTypeContext);
-    const compTheme = theme?.theme?.components?.[compType];
-    const styleProps: Record<string, any> = {};
-    ['style', 'labelStyle', 'inputFieldStyle', 'animationStyle'].forEach((key: string) => {
-      styleProps[key] = (props as any)[key];
-    });
-
-    useEffect(() => {
-      setInitialCompStyles({
-        dispatch,
-        compTheme,
-        styleProps,
-      });
-    }, []);
+    useMergeCompStyles(props as Record<string, any>, dispatch);    
 
     return props.label({
       required: props.required,
diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx
index e320ef79c..507ca22d8 100644
--- a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx
@@ -11,6 +11,7 @@ import { ThemeContext } from "../../utils/themeContext";
 import { useContext, useEffect } from "react";
 import { CompTypeContext } from "../../utils/compTypeContext";
 import { setInitialCompStyles } from "../../utils/themeUtil";
+import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
 
 const SliderBasicComp = (function () {
   /**
@@ -23,22 +24,7 @@ const SliderBasicComp = (function () {
     ...formDataChildren,
   };
   return new UICompBuilder(childrenMap, (props, dispatch) => {
-    const theme = useContext(ThemeContext);
-    const compType = useContext(CompTypeContext);
-    console.log("compType", compType)
-    const compTheme = theme?.theme?.components?.[compType];
-    const styleProps: Record<string, any> = {};
-    ['style', 'labelStyle', 'inputFieldStyle', 'animationStyle'].forEach((key: string) => {
-      styleProps[key] = (props as any)[key];
-    });
-
-    useEffect(() => {
-      setInitialCompStyles({
-        dispatch,
-        compTheme,
-        styleProps,
-      });
-    }, []);
+    useMergeCompStyles(props as Record<string, any>, dispatch);
 
     return props.label({
       style: props.style,
diff --git a/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx b/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx
index 9184bb259..ec7736cb4 100644
--- a/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx
@@ -14,6 +14,7 @@ import { EditorContext } from "comps/editorState";
 import { ThemeContext } from "../utils/themeContext";
 import { CompTypeContext } from "../utils/compTypeContext";
 import { setInitialCompStyles } from "../utils/themeUtil";
+import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
 
 // TODO: after Update of ANTd, introduce Size attribute to ProgressCircle
 
@@ -76,22 +77,7 @@ let ProgressCircleTmpComp = (function () {
     animationStyle: styleControl(AnimationStyle, 'animationStyle'),
   };
   return new UICompBuilder(childrenMap, (props, dispatch) => {
-    const theme = useContext(ThemeContext);
-    const compType = useContext(CompTypeContext);
-    const compTheme = theme?.theme?.components?.[compType];
-  
-    const styleProps: Record<string, any> = {};
-    ['style', 'animationStyle'].forEach((key: string) => {
-      styleProps[key] = (props as any)[key];
-    });
-
-    useEffect(() => {
-      setInitialCompStyles({
-        dispatch,
-        compTheme,
-        styleProps,
-      });
-    }, []);
+    useMergeCompStyles(props as Record<string, any>, dispatch);
 
     return (
       <StyledProgressCircle
diff --git a/client/packages/lowcoder/src/comps/comps/progressComp.tsx b/client/packages/lowcoder/src/comps/comps/progressComp.tsx
index 20b2747ce..57704c7c1 100644
--- a/client/packages/lowcoder/src/comps/comps/progressComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/progressComp.tsx
@@ -15,6 +15,7 @@ import { EditorContext } from "comps/editorState";
 import { ThemeContext } from "../utils/themeContext";
 import { CompTypeContext } from "../utils/compTypeContext";
 import { setInitialCompStyles } from "../utils/themeUtil";
+import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
 
 const getStyle = (style: ProgressStyleType) => {
   return css`
@@ -60,22 +61,7 @@ const ProgressBasicComp = (function () {
     animationStyle: styleControl(AnimationStyle, 'animationStyle'),
   };
   return new UICompBuilder(childrenMap, (props, dispatch) => {
-    const theme = useContext(ThemeContext);
-    const compType = useContext(CompTypeContext);
-    const compTheme = theme?.theme?.components?.[compType];
-  
-    const styleProps: Record<string, any> = {};
-    ['style', 'animationStyle'].forEach((key: string) => {
-      styleProps[key] = (props as any)[key];
-    });
-
-    useEffect(() => {
-      setInitialCompStyles({
-        dispatch,
-        compTheme,
-        styleProps,
-      });
-    }, []);
+    useMergeCompStyles(props as Record<string, any>, dispatch);
 
     return (
       <ProgressStyled
diff --git a/client/packages/lowcoder/src/comps/comps/qrCodeComp.tsx b/client/packages/lowcoder/src/comps/comps/qrCodeComp.tsx
index eda7b415b..53e6a9f94 100644
--- a/client/packages/lowcoder/src/comps/comps/qrCodeComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/qrCodeComp.tsx
@@ -18,6 +18,7 @@ import { withDefault } from "../generators";
 import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
 import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
 import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
 
 // TODO: add styling for image (size)
 // TODO: add styling for bouding box (individual backround)
@@ -81,23 +82,9 @@ const QRCodeView = (props: RecordConstructorToView<typeof childrenMap>) => {
 };
 
 let QRCodeBasicComp = (function () {
-  return new UICompBuilder(childrenMap, (props , dispatch) =>{
-
-    const theme = useContext(ThemeContext);
-    const compType = useContext(CompTypeContext);
-    const compTheme = theme?.theme?.components?.[compType];
-    const styleProps: Record<string, any> = {};
-    ['style' , 'animationStyle'].forEach((key: string) => {
-      styleProps[key] = (props as any)[key];
-    });
-
-    useEffect(() => {
-      setInitialCompStyles({
-        dispatch,
-        compTheme,
-        styleProps,
-      });
-    }, []);
+  return new UICompBuilder(childrenMap, (props, dispatch) => {
+    useMergeCompStyles(props as Record<string, any>, dispatch);
+    
     return( <QRCodeView {...props} />)})
     .setPropertyViewFn((children) => (
       <>
diff --git a/client/packages/lowcoder/src/comps/comps/ratingComp.tsx b/client/packages/lowcoder/src/comps/comps/ratingComp.tsx
index d8b83d9dd..61c0108cf 100644
--- a/client/packages/lowcoder/src/comps/comps/ratingComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/ratingComp.tsx
@@ -20,6 +20,7 @@ import { EditorContext } from "comps/editorState";
 import { CompTypeContext } from "../utils/compTypeContext";
 import { ThemeContext } from "../utils/themeContext";
 import { setInitialCompStyles } from "../utils/themeUtil";
+import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
 
 
 const EventOptions = [changeEvent] as const;
@@ -62,22 +63,7 @@ const RatingBasicComp = (function () {
     const defaultValue = { ...props.defaultValue }.value;
     const value = { ...props.value }.value;
     const changeRef = useRef(false);
-    const theme = useContext(ThemeContext);
-    const compType = useContext(CompTypeContext);
-    const compTheme = theme?.theme?.components?.[compType];
-  
-    const styleProps: Record<string, any> = {};
-    ['style', 'animationStyle', 'labelStyle', 'inputFieldStyle'].forEach((key: string) => {
-      styleProps[key] = (props as any)[key];
-    });
-
-    useEffect(() => {
-      setInitialCompStyles({
-        dispatch,
-        compTheme,
-        styleProps,
-      });
-    }, []);
+    useMergeCompStyles(props as Record<string, any>, dispatch);
 
     useEffect(() => {
       props.value.onChange(defaultValue);
diff --git a/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx b/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx
index 5e82dd463..658feeb84 100644
--- a/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx
+++ b/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx
@@ -45,6 +45,7 @@ import { DisabledContext } from "comps/generators/uiCompBuilder";
 import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
 import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
 import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
+import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
 
 const RowWrapper = styled(Row)<{
   $style: ResponsiveLayoutRowStyleType;
@@ -188,24 +189,7 @@ const ResponsiveLayout = (props: ResponsiveLayoutProps) => {
 
 export const ResponsiveLayoutBaseComp = (function () {
   return new UICompBuilder(childrenMap, (props, dispatch) => {
-
-    const theme = useContext(ThemeContext);
-    const compType = useContext(CompTypeContext);
-    const compTheme = theme?.theme?.components?.[compType];
-    const styleProps: Record<string, any> = {};
-    ['style', 'animationStyle', 'columnStyle'].forEach((key: string) => {
-      styleProps[key] = (props as any)[key];
-    });
-
-    useEffect(() => {
-      setInitialCompStyles({
-        dispatch,
-        compTheme,
-        styleProps,
-      });
-    }, []);
-
-    
+    useMergeCompStyles(props as Record<string, any>, dispatch);    
     return (
       <ResponsiveLayout {...props} dispatch={dispatch} />
     );
diff --git a/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx b/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx
index ceb75ea71..8a56c14b4 100644
--- a/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx
@@ -29,6 +29,7 @@ import { EditorContext } from "comps/editorState";
 import { setInitialCompStyles } from "../utils/themeUtil";
 import { ThemeContext } from "../utils/themeContext";
 import { CompTypeContext } from "../utils/compTypeContext";
+import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
 
 const localizeStyle = css`
   & .ql-snow {
@@ -294,21 +295,8 @@ function RichTextEditor(props: IProps) {
 }
 
 const RichTextEditorCompBase = new UICompBuilder(childrenMap, (props, dispatch) => {
-  const theme = useContext(ThemeContext);
-  const compType = useContext(CompTypeContext);
-  const compTheme = theme?.theme?.components?.[compType];
-  const styleProps: Record<string, any> = {};
-  ['style'].forEach((key: string) => {
-    styleProps[key] = (props as any)[key];
-  });
+  useMergeCompStyles(props as Record<string, any>, dispatch);    
 
-  useEffect(() => {
-    setInitialCompStyles({
-      dispatch,
-      compTheme,
-      styleProps,
-    });
-  }, []);
 
   const handleChange = (v: string) => {
     props.value.onChange(v);
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx
index 136f19367..ed2445b20 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx
@@ -11,6 +11,7 @@ import { useContext, useEffect } from "react";
 import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
 import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
 import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
 
 const CascaderStyle = styled(Cascader)<{ $style: CascaderStyleType,$childrenInputFieldStyle:ChildrenMultiSelectStyleType }>`
   width: 100%;
@@ -42,22 +43,7 @@ let CascaderBasicComp = (function () {
   const childrenMap = CascaderChildren;
 
   return new UICompBuilder(childrenMap, (props , dispatch) => {
-
-    const theme = useContext(ThemeContext);
-    const compType = useContext(CompTypeContext);
-    const compTheme = theme?.theme?.components?.[compType];
-    const styleProps: Record<string, any> = {};
-    ['style','inputFieldStyle','labelStyle', 'animationStyle'].forEach((key: string) => {
-      styleProps[key] = (props as any)[key];
-    });
-
-    useEffect(() => {
-      setInitialCompStyles({
-        dispatch,
-        compTheme,
-        styleProps,
-      });
-    }, []);
+    useMergeCompStyles(props as Record<string, any>, dispatch);    
     
     return props.label({
       style: props.style,
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx
index 2803b3532..bb03a1f54 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx
@@ -28,6 +28,7 @@ import { useContext, useEffect } from "react";
 import { setInitialCompStyles } from "../../utils/themeUtil";
 import { ThemeContext } from "../../utils/themeContext";
 import { CompTypeContext } from "../../utils/compTypeContext";
+import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
 
 export const getStyle = (style: CheckboxStyleType) => {
   return css`
@@ -163,21 +164,7 @@ let CheckboxBasicComp = (function () {
     ...formDataChildren,
   };
   return new UICompBuilder(childrenMap, (props, dispatch) => {
-    const theme = useContext(ThemeContext);
-    const compType = useContext(CompTypeContext);
-    const compTheme = theme?.theme?.components?.[compType];
-    const styleProps: Record<string, any> = {};
-    ['style', 'labelStyle', 'inputFieldStyle', 'animationStyle'].forEach((key: string) => {
-      styleProps[key] = (props as any)[key];
-    });
-
-    useEffect(() => {
-      setInitialCompStyles({
-        dispatch,
-        compTheme,
-        styleProps,
-      });
-    }, []);
+    useMergeCompStyles(props as Record<string, any>, dispatch);
 
     const [
       validateState,
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx
index 805d0a67b..deb63e3b9 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx
@@ -20,6 +20,7 @@ import { useContext, useEffect } from "react";
 import { setInitialCompStyles } from "../../utils/themeUtil";
 import { ThemeContext } from "../../utils/themeContext";
 import { CompTypeContext } from "../../utils/compTypeContext";
+import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
 
 let MultiSelectBasicComp = (function () {
   const childrenMap = {
@@ -34,21 +35,7 @@ let MultiSelectBasicComp = (function () {
     padding: PaddingControl,
   };
   return new UICompBuilder(childrenMap, (props, dispatch) => {
-    const theme = useContext(ThemeContext);
-    const compType = useContext(CompTypeContext);
-    const compTheme = theme?.theme?.components?.[compType];
-    const styleProps: Record<string, any> = {};
-    ['style', 'labelStyle', 'inputFieldStyle'].forEach((key: string) => {
-      styleProps[key] = (props as any)[key];
-    });
-
-    useEffect(() => {
-      setInitialCompStyles({
-        dispatch,
-        compTheme,
-        styleProps,
-      });
-    }, []);
+    useMergeCompStyles(props as Record<string, any>, dispatch);
 
     const valueSet = new Set<any>(props.options.map((o) => o.value)); // Filter illegal default values entered by the user
     const [
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx
index b35ec1b2a..bbf1773d7 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx
@@ -17,6 +17,7 @@ import { ThemeContext } from "../../utils/themeContext";
 import { useContext, useEffect } from "react";
 import { CompTypeContext } from "../../utils/compTypeContext";
 import { setInitialCompStyles } from "../../utils/themeUtil";
+import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
 
 const getStyle = (style: RadioStyleType, inputFieldStyle?:RadioStyleType ) => {
   return css`
@@ -102,21 +103,7 @@ const Radio = styled(AntdRadioGroup)<{
 
 let RadioBasicComp = (function () {
   return new UICompBuilder(RadioChildrenMap, (props, dispatch) => {
-    const theme = useContext(ThemeContext);
-    const compType = useContext(CompTypeContext);
-    const compTheme = theme?.theme?.components?.[compType];
-    const styleProps: Record<string, any> = {};
-    ['style', 'labelStyle', 'inputFieldStyle', 'animationStyle'].forEach((key: string) => {
-      styleProps[key] = (props as any)[key];
-    });
-
-    useEffect(() => {
-      setInitialCompStyles({
-        dispatch,
-        compTheme,
-        styleProps,
-      });
-    }, []);
+    useMergeCompStyles(props as Record<string, any>, dispatch);
 
     const [
       validateState,
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx
index 82719f9e0..7bdf72e8e 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx
@@ -30,6 +30,7 @@ import { fixOldInputCompData } from "../textInputComp/textInputConstants";
 import { ThemeContext } from "../../utils/themeContext";
 import { CompTypeContext } from "../../utils/compTypeContext";
 import { setInitialCompStyles } from "../../utils/themeUtil";
+import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
 
 
 const getStyle = (style: SegmentStyleType) => {
@@ -90,21 +91,7 @@ const SegmentChildrenMap = {
 
 let SegmentedControlBasicComp = (function () {
   return new UICompBuilder(SegmentChildrenMap, (props, dispatch) => {
-    const theme = useContext(ThemeContext);
-    const compType = useContext(CompTypeContext);
-    const compTheme = theme?.theme?.components?.[compType];
-    const styleProps: Record<string, any> = {};
-    ['style', 'animationStyle'].forEach((key: string) => {
-      styleProps[key] = (props as any)[key];
-    });
-
-    useEffect(() => {
-      setInitialCompStyles({
-        dispatch,
-        compTheme,
-        styleProps,
-      });
-    }, []);
+    useMergeCompStyles(props as Record<string, any>, dispatch);
   
     const [
       validateState,
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx
index 7c620ec97..4f4adac3f 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx
@@ -22,6 +22,7 @@ import { migrateOldData, withDefault } from "comps/generators/simpleGenerators";
 import { setInitialCompStyles } from "../../utils/themeUtil";
 import { ThemeContext } from "../../utils/themeContext";
 import { CompTypeContext } from "../../utils/compTypeContext";
+import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
 
 let SelectBasicComp = (function () {
   const childrenMap = {
@@ -34,21 +35,7 @@ let SelectBasicComp = (function () {
     childrenInputFieldStyle: styleControl(ChildrenMultiSelectStyle, 'childrenInputFieldStyle')
   };
   return new UICompBuilder(childrenMap, (props, dispatch) => {
-    const theme = useContext(ThemeContext);
-    const compType = useContext(CompTypeContext);
-    const compTheme = theme?.theme?.components?.[compType];
-    const styleProps: Record<string, any> = {};
-    ['style', 'labelStyle', 'inputFieldStyle', 'childrenInputFieldStyle'].forEach((key: string) => {
-      styleProps[key] = (props as any)[key];
-    });
-
-    useEffect(() => {
-      setInitialCompStyles({
-        dispatch,
-        compTheme,
-        styleProps,
-      });
-    }, []);
+    useMergeCompStyles(props as Record<string, any>, dispatch);
 
     const [
       validateState,
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx
index 6a1699f7c..adc29e082 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx
@@ -21,6 +21,7 @@ import { EditorContext } from "comps/editorState";
 import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
 import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
 import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
 
 
 const sizeOptions = [
@@ -101,22 +102,8 @@ const StepsChildrenMap = {
 
 let StepControlBasicComp = (function () {
   return new UICompBuilder(StepsChildrenMap, (props , dispatch) => {
+    useMergeCompStyles(props as Record<string, any>, dispatch);    
 
-    const theme = useContext(ThemeContext);
-    const compType = useContext(CompTypeContext);
-    const compTheme = theme?.theme?.components?.[compType];
-    const styleProps: Record<string, any> = {};
-    ['style', 'animationStyle'].forEach((key: string) => {
-      styleProps[key] = (props as any)[key];
-    });
-
-    useEffect(() => {
-      setInitialCompStyles({
-        dispatch,
-        compTheme,
-        styleProps,
-      });
-    }, []);
 
     const StyledWrapper = styled.div<{ style: StepsStyleType, $animationStyle: AnimationStyleType }>`
     ${props=>props.$animationStyle}
diff --git a/client/packages/lowcoder/src/comps/comps/signatureComp.tsx b/client/packages/lowcoder/src/comps/comps/signatureComp.tsx
index 3fa2c4d02..5dc3c5423 100644
--- a/client/packages/lowcoder/src/comps/comps/signatureComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/signatureComp.tsx
@@ -32,6 +32,7 @@ import { EditorContext } from "comps/editorState";
 import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
 import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
 import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
 
 const Wrapper = styled.div<{ $style: SignatureStyleType; $isEmpty: boolean }>`
   height: 100%;
@@ -115,22 +116,7 @@ const SignatureCanvas = React.lazy(() => import("react-signature-canvas"));
 
 let SignatureTmpComp = (function () {
   return new UICompBuilder(childrenMap, (props, dispatch) => {
-
-    const theme = useContext(ThemeContext);
-    const compType = useContext(CompTypeContext);
-    const compTheme = theme?.theme?.components?.[compType];
-    const styleProps: Record<string, any> = {};
-    ['style', 'labelStyle', 'inputFieldStyle'].forEach((key: string) => {
-      styleProps[key] = (props as any)[key];
-    });
-
-    useEffect(() => {
-      setInitialCompStyles({
-        dispatch,
-        compTheme,
-        styleProps,
-      });
-    }, []);
+    useMergeCompStyles(props as Record<string, any>, dispatch);
     
     let canvas: SignatureCanvasType | null = null;
     const [isBegin, setIsBegin] = useState(false);
diff --git a/client/packages/lowcoder/src/comps/comps/switchComp.tsx b/client/packages/lowcoder/src/comps/comps/switchComp.tsx
index 2ca60cdc9..f2169f772 100644
--- a/client/packages/lowcoder/src/comps/comps/switchComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/switchComp.tsx
@@ -22,6 +22,7 @@ import { EditorContext } from "comps/editorState";
 import { setInitialCompStyles } from "../utils/themeUtil";
 import { ThemeContext } from "../utils/themeContext";
 import { CompTypeContext } from "../utils/compTypeContext";
+import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
 
 const EventOptions = [
   changeEvent,
@@ -105,21 +106,7 @@ let SwitchTmpComp = (function () {
     ...formDataChildren,
   };
   return new UICompBuilder(childrenMap, (props, dispatch) => {
-    const theme = useContext(ThemeContext);
-    const compType = useContext(CompTypeContext);
-    const compTheme = theme?.theme?.components?.[compType];
-    const styleProps: Record<string, any> = {};
-    ['style', 'labelStyle', 'inputFieldStyle', 'animationStyle'].forEach((key: string) => {
-      styleProps[key] = (props as any)[key];
-    });
-
-    useEffect(() => {
-      setInitialCompStyles({
-        dispatch,
-        compTheme,
-        styleProps,
-      });
-    }, []);
+    useMergeCompStyles(props as Record<string, any>, dispatch);
 
     return props.label({
       style: props.style,
diff --git a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx
index 2c346e67d..13d2dfd7a 100644
--- a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx
@@ -38,6 +38,7 @@ import { PositionControl } from "comps/controls/dropdownControl";
 import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
 import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
 import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
 
 const EVENT_OPTIONS = [
   {
@@ -291,22 +292,7 @@ const TabbedContainer = (props: TabbedContainerProps) => {
 
 export const TabbedContainerBaseComp = (function () {
   return new UICompBuilder(childrenMap, (props, dispatch) => {
-
-    const theme = useContext(ThemeContext);
-    const compType = useContext(CompTypeContext);
-    const compTheme = theme?.theme?.components?.[compType];
-    const styleProps: Record<string, any> = {};
-    ['style', 'headerStyle', 'bodyStyle', 'animationStyle'].forEach((key: string) => {
-      styleProps[key] = (props as any)[key];
-    });
-
-    useEffect(() => {
-      setInitialCompStyles({
-        dispatch,
-        compTheme,
-        styleProps,
-      });
-    }, []);
+    useMergeCompStyles(props as Record<string, any>, dispatch);    
     
     return (
       <DisabledContext.Provider value={props.disabled}>
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx
index 00c3b7612..957d5799d 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx
@@ -38,6 +38,7 @@ import { EditorContext } from "comps/editorState";
 import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
 import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
 import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
+import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
 
 /**
  * Input Comp
@@ -64,23 +65,7 @@ const childrenMap = {
 
 let InputBasicComp = new UICompBuilder(childrenMap, (props, dispatch) => {
   const [inputProps, validateState] = useTextInputProps(props);
-
-  const theme = useContext(ThemeContext);
-  const compType = useContext(CompTypeContext);
-  const compTheme = theme?.theme?.components?.[compType];
-
-  const styleProps: Record<string, any> = {};
-  ['style', 'labelStyle', 'inputFieldStyle', 'animationStyle'].forEach((key: string) => {
-    styleProps[key] = (props as any)[key];
-  });
-
-  useEffect(() => {
-    setInitialCompStyles({
-      dispatch,
-      compTheme,
-      styleProps,
-    });
-  }, []);
+  useMergeCompStyles(props as Record<string, any>, dispatch);
 
   return props.label({
     required: props.required,
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx
index d4a613d3f..b4441f25b 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx
@@ -61,6 +61,7 @@ import { migrateOldData } from "comps/generators/simpleGenerators";
 import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
 import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
 import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
 
 const Wrapper = styled.div<{
   $style: InputLikeStyleType;
@@ -111,23 +112,7 @@ let MentionTmpComp = (function () {
   };
 
   return new UICompBuilder(childrenMap, (props , dispatch) => {
-
-    const theme = useContext(ThemeContext);
-    const compType = useContext(CompTypeContext);
-    const compTheme = theme?.theme?.components?.[compType];
-    const styleProps: Record<string, any> = {};
-    ['style', 'animationStyle'].forEach((key: string) => {
-      styleProps[key] = (props as any)[key];
-    });
-
-    useEffect(() => {
-      setInitialCompStyles({
-        dispatch,
-        compTheme,
-        styleProps,
-      });
-    }, []);
-
+    useMergeCompStyles(props as Record<string, any>, dispatch);    
 
     const { mentionList } = props;
     const [validateState, setvalidateState] = useState({});
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx
index 8e2a047fe..b15050ab2 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx
@@ -45,6 +45,7 @@ import { migrateOldData } from "comps/generators/simpleGenerators";
 import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
 import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
 import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
 
 const PasswordStyle = styled(InputPassword)<{
   $style: InputLikeStyleType;
@@ -69,21 +70,7 @@ let PasswordTmpComp = (function () {
   };
   return new UICompBuilder(childrenMap, (props, dispatch) => {
     const [inputProps, validateState] = useTextInputProps(props);
-    const theme = useContext(ThemeContext);
-    const compType = useContext(CompTypeContext);
-    const compTheme = theme?.theme?.components?.[compType];
-    const styleProps: Record<string, any> = {};
-    ['style', 'labelStyle', 'inputFieldStyle', 'animationStyle'].forEach((key: string) => {
-      styleProps[key] = (props as any)[key];
-    });
-
-    useEffect(() => {
-      setInitialCompStyles({
-        dispatch,
-        compTheme,
-        styleProps,
-      });
-    }, []);
+    useMergeCompStyles(props as Record<string, any>, dispatch);    
 
     return props.label({
       required: props.required,
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx
index 40fc92e40..80cf33a1a 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx
@@ -40,6 +40,7 @@ import { migrateOldData } from "comps/generators/simpleGenerators";
 import { setInitialCompStyles } from "../../utils/themeUtil";
 import { ThemeContext } from "../../utils/themeContext";
 import { CompTypeContext } from "../../utils/compTypeContext";
+import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
 
 const TextAreaStyled = styled(TextArea)<{
   $style: InputLikeStyleType;
@@ -83,21 +84,7 @@ let TextAreaTmpComp = (function () {
   };
   return new UICompBuilder(childrenMap, (props, dispatch) => {
     const [inputProps, validateState] = useTextInputProps(props);
-    const theme = useContext(ThemeContext);
-    const compType = useContext(CompTypeContext);
-    const compTheme = theme?.theme?.components?.[compType];
-    const styleProps: Record<string, any> = {};
-    ['style', 'labelStyle', 'inputFieldStyle', 'animationStyle'].forEach((key: string) => {
-      styleProps[key] = (props as any)[key];
-    });
-
-    useEffect(() => {
-      setInitialCompStyles({
-        dispatch,
-        compTheme,
-        styleProps,
-      });
-    }, []);
+    useMergeCompStyles(props as Record<string, any>, dispatch);
 
     return props.label({
       required: props.required,
diff --git a/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx b/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx
index ab2b4d22f..7d1e00ec8 100644
--- a/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx
@@ -50,6 +50,7 @@ import { EditorContext } from "comps/editorState";
 import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
 import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
 import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
+import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
 
 const EventOptions = [
   clickEvent,
@@ -92,22 +93,7 @@ const TimelineComp = (
 ) => {
   const { value, dispatch, style, mode, reverse, onEvent } = props;
   const [icons, setIcons] = useState<React.ReactNode[]>([]);
-  const theme = useContext(ThemeContext);
-  const compType = useContext(CompTypeContext);
-  const compTheme = theme?.theme?.components?.[compType];
-
-  const styleProps: Record<string, any> = {};
-  ['style'].forEach((key: string) => {
-    styleProps[key] = (props as any)[key];
-  });
-
-  useEffect(() => {
-    setInitialCompStyles({
-      dispatch,
-      compTheme,
-      styleProps,
-    });
-  }, []);
+  useMergeCompStyles(props as Record<string, any>, dispatch);
 
   useEffect(() => {
     const loadIcons = async () => {
diff --git a/client/packages/lowcoder/src/comps/comps/transferComp.tsx b/client/packages/lowcoder/src/comps/comps/transferComp.tsx
index 0756b7afe..34355fb83 100644
--- a/client/packages/lowcoder/src/comps/comps/transferComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/transferComp.tsx
@@ -20,6 +20,7 @@ import { _ } from "core-js";
 import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
 import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
 import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
 
 const Container = styled.div<{ $style: TransferStyleType }>`
   height: 100%;
@@ -143,23 +144,7 @@ const TransferView = (props: RecordConstructorToView<typeof childrenMap> & {
 
 let TransferBasicComp = (function () {
   return new UICompBuilder(childrenMap, (props, dispatch) => {
-
-    const theme = useContext(ThemeContext);
-    const compType = useContext(CompTypeContext);
-    const compTheme = theme?.theme?.components?.[compType];
-    const styleProps: Record<string, any> = {};
-    ['style'].forEach((key: string) => {
-      styleProps[key] = (props as any)[key];
-    });
-
-    useEffect(() => {
-      setInitialCompStyles({
-        dispatch,
-        compTheme,
-        styleProps,
-      });
-    }, []);
-
+    useMergeCompStyles(props as Record<string, any>, dispatch);
 
     return (
     <TransferView {...props} dispatch={dispatch} />)})
diff --git a/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx b/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx
index 9f71d2ccb..fc514323b 100644
--- a/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx
@@ -36,6 +36,7 @@ import { EditorContext } from "comps/editorState";
 import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
 import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
 import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
 
 type TreeStyleType = StyleConfigType<typeof TreeStyle>;
 
@@ -153,24 +154,8 @@ const TreeCompView = (props: RecordConstructorToView<typeof childrenMap>) => {
 };
 
 let TreeBasicComp = (function () {
-  return new UICompBuilder(childrenMap, (props , dispatch) => {
-
-    const theme = useContext(ThemeContext);
-    const compType = useContext(CompTypeContext);
-    const compTheme = theme?.theme?.components?.[compType];
-    const styleProps: Record<string, any> = {};
-    ['style', 'labelStyle', 'inputFieldStyle'].forEach((key: string) => {
-      styleProps[key] = (props as any)[key];
-    });
-
-    useEffect(() => {
-      setInitialCompStyles({
-        dispatch,
-        compTheme,
-        styleProps,
-      });
-    }, []);
-
+  return new UICompBuilder(childrenMap, (props, dispatch) => {
+    useMergeCompStyles(props as Record<string, any>, dispatch);
     
     return(<TreeCompView {...props} />)}
 )
diff --git a/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx b/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx
index d1d2e5f44..679b4213c 100644
--- a/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx
@@ -39,6 +39,7 @@ import { EditorContext } from "comps/editorState";
 import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
 import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
 import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
+import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
 
 const StyledTreeSelect = styled(TreeSelect)<{ $style: TreeSelectStyleType }>`
   width: 100%;
@@ -149,23 +150,8 @@ const TreeCompView = (
 
 let TreeBasicComp = (function () {
   return new UICompBuilder(childrenMap, (props, dispatch) => {
+    useMergeCompStyles(props as Record<string, any>, dispatch);
     
-    const theme = useContext(ThemeContext);
-    const compType = useContext(CompTypeContext);
-    console.log("compType", compType)
-    const compTheme = theme?.theme?.components?.[compType];
-    const styleProps: Record<string, any> = {};
-    ['style', 'labelStyle', 'inputFieldStyle'].forEach((key: string) => {
-      styleProps[key] = (props as any)[key];
-    });
-
-    useEffect(() => {
-      setInitialCompStyles({
-        dispatch,
-        compTheme,
-        styleProps,
-      });
-    }, []);
     return(
     <TreeCompView {...props} dispatch={dispatch} />
   )})

From 05f89e158b563dacd6782d108c05a138360d375b Mon Sep 17 00:00:00 2001
From: Meenam Afzal <meenamafzal1@gmail.com>
Date: Tue, 2 Jul 2024 04:16:09 +0500
Subject: [PATCH 53/57] theme for chart components

---
 .../src/comps/basicChartComp/chartConstants.tsx               | 4 ++--
 .../lowcoder-comps/src/comps/basicChartComp/chartUtils.ts     | 2 +-
 .../src/comps/funnelChartComp/funnelChartConstants.tsx        | 2 +-
 .../src/comps/funnelChartComp/funnelChartUtils.ts             | 2 +-
 .../src/comps/gaugeChartComp/gaugeChartConstants.tsx          | 2 +-
 .../src/comps/gaugeChartComp/gaugeChartUtils.ts               | 2 +-
 .../src/comps/graphChartComp/graphChartConstants.tsx          | 2 +-
 .../src/comps/graphChartComp/graphChartUtils.ts               | 2 +-
 .../src/comps/heatmapChartComp/heatmapChartConstants.tsx      | 2 +-
 .../src/comps/heatmapChartComp/heatmapChartUtils.ts           | 2 +-
 .../src/comps/radarChartComp/radarChartConstants.tsx          | 2 +-
 .../src/comps/radarChartComp/radarChartUtils.ts               | 2 +-
 .../src/comps/sankeyChartComp/sankeyChartConstants.tsx        | 2 +-
 .../src/comps/sankeyChartComp/sankeyChartUtils.ts             | 2 +-
 .../src/comps/sunburstChartComp/sunburstChartConstants.tsx    | 2 +-
 .../src/comps/sunburstChartComp/sunburstChartUtils.ts         | 2 +-
 .../comps/themeriverChartComp/themeriverChartConstants.tsx    | 2 +-
 .../src/comps/themeriverChartComp/themeriverChartUtils.ts     | 2 +-
 .../src/comps/treeChartComp/treeChartConstants.tsx            | 2 +-
 .../lowcoder-comps/src/comps/treeChartComp/treeChartUtils.ts  | 2 +-
 .../src/comps/treemapChartComp/treemapChartConstants.tsx      | 2 +-
 .../src/comps/treemapChartComp/treemapChartUtils.ts           | 2 +-
 22 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConstants.tsx b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConstants.tsx
index d43134234..a216e5a49 100644
--- a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConstants.tsx
+++ b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConstants.tsx
@@ -251,11 +251,11 @@ export const chartUiModeChildren = {
 
 const chartJsonModeChildren = {
   echartsOption: jsonControl(toObject, i18nObjs.defaultEchartsJsonOption),
-  echartsTitle: withDefault(StringControl, trans("echarts.defaultTitle")),
+ echartsTitle: withDefault(StringControl, trans("echarts.defaultTitle")),
   echartsLegendConfig: EchartsLegendConfig,
   echartsLabelConfig: EchartsLabelConfig,
   echartsConfig: EchartsOptionComp,
-  style: styleControl(EchartsStyle),
+  style: styleControl(EchartsStyle, 'style'),
   tooltip: withDefault(BoolControl, true),
   legendVisibility: withDefault(BoolControl, true),
 }
diff --git a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartUtils.ts b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartUtils.ts
index 57b908be5..f63a582c2 100644
--- a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartUtils.ts
@@ -136,7 +136,7 @@ export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSiz
     'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom',
     "left":"center"
   },
-  "backgroundColor": props?.style?.background,
+  "backgroundColor": props?.style?.background || theme?.style?.background,
       "color": props.echartsOption.data?.map(data => data.color),
   "tooltip": props.tooltip&&{
     "trigger": "item",
diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx
index 36e55cf52..e668de39a 100644
--- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx
+++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx
@@ -255,7 +255,7 @@ const chartJsonModeChildren = {
   echartsLabelConfig: EchartsLabelConfig,
   echartsConfig: EchartsOptionComp,
   echartsTitleConfig:EchartsTitleConfig,
-  style: styleControl(EchartsStyle),
+  style: styleControl(EchartsStyle, 'style'),
   tooltip: withDefault(BoolControl, true),
   label: withDefault(BoolControl, true),
   legendVisibility: withDefault(BoolControl, true),
diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts
index 2f2b33505..879d94ac8 100644
--- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts
@@ -136,7 +136,7 @@ export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSiz
     'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom',
     "left":props.echartsTitleConfig.top
   },
-  "backgroundColor": props?.style?.background,
+  "backgroundColor": props?.style?.background || theme?.style?.background,
   "color": props.echartsOption.data?.map(data => data.color),
   "tooltip": props.tooltip&&{
     "trigger": "item",
diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx
index 5f128faec..23f14ce77 100644
--- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx
+++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx
@@ -255,7 +255,7 @@ const chartJsonModeChildren = {
   echartsLabelConfig: EchartsLabelConfig,
   echartsConfig: EchartsOptionComp,
   echartsTitleConfig:EchartsTitleConfig,
-  style: styleControl(EchartsStyle),
+  style: styleControl(EchartsStyle, 'style'),
   tooltip: withDefault(BoolControl, true),
   legendVisibility: withDefault(BoolControl, true),
   label: withDefault(BoolControl, true),
diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts
index 4babbe7c7..9b6528566 100644
--- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts
@@ -136,7 +136,7 @@ export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSiz
     'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom',
     "left":props.echartsTitleConfig.top
   },
-  "backgroundColor": props?.style?.background,
+  "backgroundColor": props?.style?.background || theme?.style?.background,
   "color": props.echartsOption.data?.map(data => data.color),
   "tooltip": props.tooltip&&{
     "trigger": "item",
diff --git a/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartConstants.tsx
index a3c5c0095..a643affc4 100644
--- a/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartConstants.tsx
+++ b/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartConstants.tsx
@@ -253,7 +253,7 @@ const chartJsonModeChildren = {
   echartsLegendConfig: EchartsLegendConfig,
   echartsLabelConfig: EchartsLabelConfig,
   echartsConfig: EchartsOptionComp,
-  style: styleControl(EchartsStyle),
+  style: styleControl(EchartsStyle, 'style'),
   tooltip: withDefault(BoolControl, true),
   legendVisibility: withDefault(BoolControl, true),
 }
diff --git a/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartUtils.ts b/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartUtils.ts
index df231bd0d..db0b38c60 100644
--- a/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartUtils.ts
@@ -136,7 +136,7 @@ export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSiz
     'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom',
     "left":"center"
   },
-  "backgroundColor": props?.style?.background,
+  "backgroundColor": props?.style?.background || theme?.style?.background,
   "color": props.echartsOption.data?.map(data => data.color),
      "tooltip": props.tooltip&& {
     "trigger": "item"
diff --git a/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartConstants.tsx
index d4a8a9a29..2ecfd3091 100644
--- a/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartConstants.tsx
+++ b/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartConstants.tsx
@@ -253,7 +253,7 @@ const chartJsonModeChildren = {
   echartsLegendConfig: EchartsLegendConfig,
   echartsLabelConfig: EchartsLabelConfig,
   echartsConfig: EchartsOptionComp,
-  style: styleControl(EchartsStyle),
+  style: styleControl(EchartsStyle, 'style'),
   tooltip: withDefault(BoolControl, true),
   legendVisibility: withDefault(BoolControl, true),
 }
diff --git a/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartUtils.ts b/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartUtils.ts
index 6d9c0bef9..b70cc8a21 100644
--- a/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartUtils.ts
@@ -136,7 +136,7 @@ export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSiz
     'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom',
     "left":"center"
   },
-  "backgroundColor": props?.style?.background,
+  "backgroundColor": props?.style?.background || theme?.style?.background,
   "color": props.echartsOption.data?.map(data => data.color),
      "tooltip": props.tooltip&&{
     "position": "top"
diff --git a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartConstants.tsx
index a96f7a36d..be9ed1ec1 100644
--- a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartConstants.tsx
+++ b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartConstants.tsx
@@ -253,7 +253,7 @@ const chartJsonModeChildren = {
   echartsLegendConfig: EchartsLegendConfig,
   echartsLabelConfig: EchartsLabelConfig,
   echartsConfig: EchartsOptionComp,
-  style: styleControl(EchartsStyle),
+  style: styleControl(EchartsStyle, 'style'),
   tooltip: withDefault(BoolControl, true),
   legendVisibility: withDefault(BoolControl, true),
 }
diff --git a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartUtils.ts b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartUtils.ts
index 3ce2d0f7b..9dba28d19 100644
--- a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartUtils.ts
@@ -136,7 +136,7 @@ export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSiz
     'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom',
     "left":"center"
   },
-  "backgroundColor": props?.style?.background,
+  "backgroundColor": props?.style?.background || theme?.style?.background,
   "color": props.echartsOption.data?.map(data => data.color),
    "tooltip": {
     "trigger": "axis",
diff --git a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartConstants.tsx
index bc106cebe..7d834e9d7 100644
--- a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartConstants.tsx
+++ b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartConstants.tsx
@@ -253,7 +253,7 @@ const chartJsonModeChildren = {
   echartsLegendConfig: EchartsLegendConfig,
   echartsLabelConfig: EchartsLabelConfig,
   echartsConfig: EchartsOptionComp,
-  style: styleControl(EchartsStyle),
+  style: styleControl(EchartsStyle, 'style'),
   tooltip: withDefault(BoolControl, true),
   legendVisibility: withDefault(BoolControl, true),
 }
diff --git a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartUtils.ts b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartUtils.ts
index 819fa4e67..4a720b52d 100644
--- a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartUtils.ts
@@ -136,7 +136,7 @@ export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSiz
     'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom',
     "left":"center"
   },
-  "backgroundColor": props?.style?.background,
+  "backgroundColor": props?.style?.background || theme?.style?.background,
   "color": props.echartsOption.data?.map(data => data.color),
   "tooltip": props.tooltip&&{
     "trigger": "item",
diff --git a/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartConstants.tsx
index c4e7aa539..51aa6ae0e 100644
--- a/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartConstants.tsx
+++ b/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartConstants.tsx
@@ -253,7 +253,7 @@ const chartJsonModeChildren = {
   echartsLegendConfig: EchartsLegendConfig,
   echartsLabelConfig: EchartsLabelConfig,
   echartsConfig: EchartsOptionComp,
-  style: styleControl(EchartsStyle),
+  style: styleControl(EchartsStyle, 'style'),
   tooltip: withDefault(BoolControl, true),
   legendVisibility: withDefault(BoolControl, true),
 }
diff --git a/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartUtils.ts b/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartUtils.ts
index 85bbb9676..ad4d8cb51 100644
--- a/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartUtils.ts
@@ -136,7 +136,7 @@ export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSiz
     'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom',
     "left":"center"
   },
-  "backgroundColor": props?.style?.background,
+  "backgroundColor": props?.style?.background || theme?.style?.background,
   "color": props.echartsOption.data?.map(data => data.color),
   "tooltip": props.tooltip&&{
     "trigger": "item",
diff --git a/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartConstants.tsx
index 589634148..e2f973ea2 100644
--- a/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartConstants.tsx
+++ b/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartConstants.tsx
@@ -253,7 +253,7 @@ const chartJsonModeChildren = {
   echartsLegendConfig: EchartsLegendConfig,
   echartsLabelConfig: EchartsLabelConfig,
   echartsConfig: EchartsOptionComp,
-  style: styleControl(EchartsStyle),
+  style: styleControl(EchartsStyle, 'style'),
   tooltip: withDefault(BoolControl, true),
   legendVisibility: withDefault(BoolControl, true),
 }
diff --git a/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartUtils.ts b/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartUtils.ts
index 5d9195e3c..9961a34f9 100644
--- a/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartUtils.ts
@@ -136,7 +136,7 @@ export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSiz
     'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom',
     "left":"center"
   },
-  "backgroundColor": props.style.background,
+  "backgroundColor": props?.style?.background || theme?.style?.background,
   "tooltip": props.tooltip&&{
     "trigger": "axis",
     "axisPointer": {
diff --git a/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartConstants.tsx
index 573cc03db..8dfe7f49c 100644
--- a/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartConstants.tsx
+++ b/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartConstants.tsx
@@ -253,7 +253,7 @@ const chartJsonModeChildren = {
   echartsLegendConfig: EchartsLegendConfig,
   echartsLabelConfig: EchartsLabelConfig,
   echartsConfig: EchartsOptionComp,
-  style: styleControl(EchartsStyle),
+  style: styleControl(EchartsStyle, 'style'),
   tooltip: withDefault(BoolControl, true),
   legendVisibility: withDefault(BoolControl, true),
 }
diff --git a/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartUtils.ts b/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartUtils.ts
index c7719fdb7..266966853 100644
--- a/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartUtils.ts
@@ -136,7 +136,7 @@ export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSiz
     'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom',
     "left":"center"
   },
-  "backgroundColor": props?.style?.background,
+  "backgroundColor": props?.style?.background || theme?.style?.background,
   "color": props.echartsOption.data?.map(data => data.color),
   "tooltip": props.tooltip&&{
     "trigger": "item",
diff --git a/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartConstants.tsx
index a5c302b2b..45ff3ad5d 100644
--- a/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartConstants.tsx
+++ b/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartConstants.tsx
@@ -253,7 +253,7 @@ const chartJsonModeChildren = {
   echartsLegendConfig: EchartsLegendConfig,
   echartsLabelConfig: EchartsLabelConfig,
   echartsConfig: EchartsOptionComp,
-  style: styleControl(EchartsStyle),
+  style: styleControl(EchartsStyle, 'style'),
   tooltip: withDefault(BoolControl, true),
   legendVisibility: withDefault(BoolControl, true),
 }
diff --git a/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartUtils.ts b/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartUtils.ts
index 81f033597..049d89034 100644
--- a/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartUtils.ts
@@ -136,7 +136,7 @@ export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSiz
     'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom',
     "left":"center"
   },
-  "backgroundColor": props?.style?.background,
+  "backgroundColor": props?.style?.background || theme?.style?.background,
   "color": [],
   "tooltip": props.tooltip&&{
     "trigger": "item",

From b466297603a7b93f5e35e492c080e32a36186a4d Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Tue, 2 Jul 2024 12:12:15 +0500
Subject: [PATCH 54/57] Theme: fixed chart themes

---
 .../lowcoder-comps/src/comps/basicChartComp/chartUtils.ts  | 6 +++++-
 .../src/comps/chartsGeoMapComp/chartsGeoMapComp.tsx        | 3 ++-
 .../src/comps/funnelChartComp/funnelChartComp.tsx          | 3 ++-
 .../src/comps/funnelChartComp/funnelChartUtils.ts          | 6 +++++-
 .../src/comps/gaugeChartComp/gaugeChartComp.tsx            | 3 ++-
 .../src/comps/gaugeChartComp/gaugeChartUtils.ts            | 6 +++++-
 .../src/comps/graphChartComp/graphChartComp.tsx            | 3 ++-
 .../src/comps/graphChartComp/graphChartUtils.ts            | 6 +++++-
 .../src/comps/heatmapChartComp/heatmapChartComp.tsx        | 3 ++-
 .../src/comps/heatmapChartComp/heatmapChartUtils.ts        | 6 +++++-
 .../src/comps/radarChartComp/radarChartComp.tsx            | 3 ++-
 .../src/comps/radarChartComp/radarChartUtils.ts            | 6 +++++-
 .../src/comps/sankeyChartComp/sankeyChartComp.tsx          | 3 ++-
 .../src/comps/sankeyChartComp/sankeyChartUtils.ts          | 6 +++++-
 .../src/comps/sunburstChartComp/sunburstChartComp.tsx      | 3 ++-
 .../src/comps/sunburstChartComp/sunburstChartUtils.ts      | 6 +++++-
 .../src/comps/themeriverChartComp/themeriverChartComp.tsx  | 3 ++-
 .../src/comps/themeriverChartComp/themeriverChartUtils.ts  | 6 +++++-
 .../src/comps/treeChartComp/treeChartUtils.ts              | 6 +++++-
 .../src/comps/treeChartComp/treechartComp.tsx              | 3 ++-
 .../src/comps/treemapChartComp/treemapChartComp.tsx        | 3 ++-
 .../src/comps/treemapChartComp/treemapChartUtils.ts        | 6 +++++-
 client/packages/lowcoder/src/util/hooks.ts                 | 7 ++++++-
 23 files changed, 83 insertions(+), 23 deletions(-)

diff --git a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartUtils.ts b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartUtils.ts
index f63a582c2..ffe0459e8 100644
--- a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartUtils.ts
@@ -128,7 +128,11 @@ export function getSeriesConfig(props: EchartsConfigProps) {
 }
 
 // https://echarts.apache.org/en/option.html
-export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSize): EChartsOptionWithMap {
+export function getEchartsConfig(
+  props: EchartsConfigProps,
+  chartSize?: ChartSize,
+  theme?: any,
+): EChartsOptionWithMap {
   if (props.mode === "json") {
     let opt={
   "title": {
diff --git a/client/packages/lowcoder-comps/src/comps/chartsGeoMapComp/chartsGeoMapComp.tsx b/client/packages/lowcoder-comps/src/comps/chartsGeoMapComp/chartsGeoMapComp.tsx
index 2fa1ddf7e..1eb91fc26 100644
--- a/client/packages/lowcoder-comps/src/comps/chartsGeoMapComp/chartsGeoMapComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/chartsGeoMapComp/chartsGeoMapComp.tsx
@@ -119,7 +119,8 @@ MapTmpComp = withViewFn(MapTmpComp, (comp) => {
   const option = useMemo(() => {
     return getEchartsConfig(
       childrenToProps(echartsConfigChildren) as ToViewReturn<typeof echartsConfigChildren>,
-      chartSize
+      chartSize,
+      theme?.theme?.components?.candleStickChart || {},
     );
   }, [chartSize, ...Object.values(echartsConfigChildren)]);
 
diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartComp.tsx b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartComp.tsx
index f26078335..994c64675 100644
--- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartComp.tsx
@@ -144,7 +144,8 @@ FunnelChartTmpComp = withViewFn(FunnelChartTmpComp, (comp) => {
   const option = useMemo(() => {
     return getEchartsConfig(
       childrenToProps(echartsConfigChildren) as ToViewReturn<typeof echartsConfigChildren>,
-      chartSize
+      chartSize,
+      theme?.theme?.components?.candleStickChart || {},
     );
   }, [chartSize, ...Object.values(echartsConfigChildren)]);
 
diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts
index 879d94ac8..2f2b814cc 100644
--- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts
@@ -128,7 +128,11 @@ export function getSeriesConfig(props: EchartsConfigProps) {
 }
 
 // https://echarts.apache.org/en/option.html
-export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSize): EChartsOptionWithMap {
+export function getEchartsConfig(
+  props: EchartsConfigProps,
+  chartSize?: ChartSize,
+  theme?: any,
+): EChartsOptionWithMap {
   if (props.mode === "json") {
     let opt={
   "title": {
diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartComp.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartComp.tsx
index 3823dd888..b81985935 100644
--- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartComp.tsx
@@ -145,7 +145,8 @@ GaugeChartTmpComp = withViewFn(GaugeChartTmpComp, (comp) => {
   const option = useMemo(() => {
     return getEchartsConfig(
       childrenToProps(echartsConfigChildren) as ToViewReturn<typeof echartsConfigChildren>,
-      chartSize
+      chartSize,
+      theme?.theme?.components?.candleStickChart || {},
     );
   }, [chartSize, ...Object.values(echartsConfigChildren)]);
 
diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts
index 9b6528566..eb16f1a86 100644
--- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts
@@ -128,7 +128,11 @@ export function getSeriesConfig(props: EchartsConfigProps) {
 }
 
 // https://echarts.apache.org/en/option.html
-export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSize): EChartsOptionWithMap {
+export function getEchartsConfig(
+  props: EchartsConfigProps,
+  chartSize?: ChartSize,
+  theme?: any,
+): EChartsOptionWithMap {
   if (props.mode === "json") {
     let opt={
   "title": {
diff --git a/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartComp.tsx b/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartComp.tsx
index 7b395901c..67dd615cf 100644
--- a/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartComp.tsx
@@ -145,7 +145,8 @@ GraphChartTmpComp = withViewFn(GraphChartTmpComp, (comp) => {
   const option = useMemo(() => {
     return getEchartsConfig(
       childrenToProps(echartsConfigChildren) as ToViewReturn<typeof echartsConfigChildren>,
-      chartSize
+      chartSize,
+      theme?.theme?.components?.candleStickChart || {},
     );
   }, [chartSize, ...Object.values(echartsConfigChildren)]);
 
diff --git a/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartUtils.ts b/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartUtils.ts
index db0b38c60..a75b6a8c2 100644
--- a/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartUtils.ts
@@ -128,7 +128,11 @@ export function getSeriesConfig(props: EchartsConfigProps) {
 }
 
 // https://echarts.apache.org/en/option.html
-export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSize): EChartsOptionWithMap {
+export function getEchartsConfig(
+  props: EchartsConfigProps,
+  chartSize?: ChartSize,
+  theme?: any,
+): EChartsOptionWithMap {
   if (props.mode === "json") {
     let opt={
   "title": {
diff --git a/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartComp.tsx b/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartComp.tsx
index 760b79dca..2b4fe8d73 100644
--- a/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartComp.tsx
@@ -144,7 +144,8 @@ HeatmapChartTmpComp = withViewFn(HeatmapChartTmpComp, (comp) => {
   const option = useMemo(() => {
     return getEchartsConfig(
       childrenToProps(echartsConfigChildren) as ToViewReturn<typeof echartsConfigChildren>,
-      chartSize
+      chartSize,
+      theme?.theme?.components?.candleStickChart || {},
     );
   }, [chartSize, ...Object.values(echartsConfigChildren)]);
 
diff --git a/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartUtils.ts b/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartUtils.ts
index b70cc8a21..43bd48e03 100644
--- a/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartUtils.ts
@@ -128,7 +128,11 @@ export function getSeriesConfig(props: EchartsConfigProps) {
 }
 
 // https://echarts.apache.org/en/option.html
-export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSize): EChartsOptionWithMap {
+export function getEchartsConfig(
+  props: EchartsConfigProps,
+  chartSize?: ChartSize,
+  theme?: any,
+): EChartsOptionWithMap {
   if (props.mode === "json") {
     let opt={
   "title": {
diff --git a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartComp.tsx b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartComp.tsx
index b9a9af5be..c43a1bd76 100644
--- a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartComp.tsx
@@ -144,7 +144,8 @@ RadarChartTmpComp = withViewFn(RadarChartTmpComp, (comp) => {
   const option = useMemo(() => {
     return getEchartsConfig(
       childrenToProps(echartsConfigChildren) as ToViewReturn<typeof echartsConfigChildren>,
-      chartSize
+      chartSize,
+      theme?.theme?.components?.candleStickChart || {},
     );
   }, [chartSize, ...Object.values(echartsConfigChildren)]);
 
diff --git a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartUtils.ts b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartUtils.ts
index 9dba28d19..904910a35 100644
--- a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartUtils.ts
@@ -128,7 +128,11 @@ export function getSeriesConfig(props: EchartsConfigProps) {
 }
 
 // https://echarts.apache.org/en/option.html
-export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSize): EChartsOptionWithMap {
+export function getEchartsConfig(
+  props: EchartsConfigProps,
+  chartSize?: ChartSize,
+  theme?: any,
+): EChartsOptionWithMap {
   if (props.mode === "json") {
     let opt={
   "title": {
diff --git a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartComp.tsx b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartComp.tsx
index 680f47771..4e5756b97 100644
--- a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartComp.tsx
@@ -144,7 +144,8 @@ SankeyChartTmpComp = withViewFn(SankeyChartTmpComp, (comp) => {
   const option = useMemo(() => {
     return getEchartsConfig(
       childrenToProps(echartsConfigChildren) as ToViewReturn<typeof echartsConfigChildren>,
-      chartSize
+      chartSize,
+      theme?.theme?.components?.candleStickChart || {},
     );
   }, [chartSize, ...Object.values(echartsConfigChildren)]);
 
diff --git a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartUtils.ts b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartUtils.ts
index 4a720b52d..16b3679a1 100644
--- a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartUtils.ts
@@ -128,7 +128,11 @@ export function getSeriesConfig(props: EchartsConfigProps) {
 }
 
 // https://echarts.apache.org/en/option.html
-export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSize): EChartsOptionWithMap {
+export function getEchartsConfig(
+  props: EchartsConfigProps,
+  chartSize?: ChartSize,
+  theme?: any,
+): EChartsOptionWithMap {
   if (props.mode === "json") {
     let opt={
   "title": {
diff --git a/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartComp.tsx b/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartComp.tsx
index a136b12b6..5b12a7880 100644
--- a/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartComp.tsx
@@ -144,7 +144,8 @@ SunburstChartTmpComp = withViewFn(SunburstChartTmpComp, (comp) => {
   const option = useMemo(() => {
     return getEchartsConfig(
       childrenToProps(echartsConfigChildren) as ToViewReturn<typeof echartsConfigChildren>,
-      chartSize
+      chartSize,
+      theme?.theme?.components?.candleStickChart || {},
     );
   }, [chartSize, ...Object.values(echartsConfigChildren)]);
 
diff --git a/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartUtils.ts b/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartUtils.ts
index ad4d8cb51..dda543eaa 100644
--- a/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartUtils.ts
@@ -128,7 +128,11 @@ export function getSeriesConfig(props: EchartsConfigProps) {
 }
 
 // https://echarts.apache.org/en/option.html
-export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSize): EChartsOptionWithMap {
+export function getEchartsConfig(
+  props: EchartsConfigProps,
+  chartSize?: ChartSize,
+  theme?: any,
+): EChartsOptionWithMap {
   if (props.mode === "json") {
     let opt={
   "title": {
diff --git a/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartComp.tsx b/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartComp.tsx
index 225c65cc6..6f2752136 100644
--- a/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartComp.tsx
@@ -144,7 +144,8 @@ ThemeriverChartTmpComp = withViewFn(ThemeriverChartTmpComp, (comp) => {
   const option = useMemo(() => {
     return getEchartsConfig(
       childrenToProps(echartsConfigChildren) as ToViewReturn<typeof echartsConfigChildren>,
-      chartSize
+      chartSize,
+      theme?.theme?.components?.candleStickChart || {},
     );
   }, [chartSize, ...Object.values(echartsConfigChildren)]);
 
diff --git a/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartUtils.ts b/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartUtils.ts
index 9961a34f9..8eb9f8629 100644
--- a/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartUtils.ts
@@ -128,7 +128,11 @@ export function getSeriesConfig(props: EchartsConfigProps) {
 }
 
 // https://echarts.apache.org/en/option.html
-export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSize): EChartsOptionWithMap {
+export function getEchartsConfig(
+  props: EchartsConfigProps,
+  chartSize?: ChartSize,
+  theme?: any,
+): EChartsOptionWithMap {
   if (props.mode === "json") {
     let opt={
   "title": {
diff --git a/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartUtils.ts b/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartUtils.ts
index 266966853..35490fcb1 100644
--- a/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartUtils.ts
@@ -128,7 +128,11 @@ export function getSeriesConfig(props: EchartsConfigProps) {
 }
 
 // https://echarts.apache.org/en/option.html
-export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSize): EChartsOptionWithMap {
+export function getEchartsConfig(
+  props: EchartsConfigProps,
+  chartSize?: ChartSize,
+  theme?: any,
+): EChartsOptionWithMap {
   if (props.mode === "json") {
     let opt={
   "title": {
diff --git a/client/packages/lowcoder-comps/src/comps/treeChartComp/treechartComp.tsx b/client/packages/lowcoder-comps/src/comps/treeChartComp/treechartComp.tsx
index 91bb602e8..00429e0e4 100644
--- a/client/packages/lowcoder-comps/src/comps/treeChartComp/treechartComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/treeChartComp/treechartComp.tsx
@@ -144,7 +144,8 @@ TreeChartTmpComp = withViewFn(TreeChartTmpComp, (comp) => {
   const option = useMemo(() => {
     return getEchartsConfig(
       childrenToProps(echartsConfigChildren) as ToViewReturn<typeof echartsConfigChildren>,
-      chartSize
+      chartSize,
+      theme?.theme?.components?.candleStickChart || {},
     );
   }, [chartSize, ...Object.values(echartsConfigChildren)]);
 
diff --git a/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartComp.tsx b/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartComp.tsx
index fa0d6f078..4e97310ee 100644
--- a/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartComp.tsx
@@ -144,7 +144,8 @@ TreemapChartTmpComp = withViewFn(TreemapChartTmpComp, (comp) => {
   const option = useMemo(() => {
     return getEchartsConfig(
       childrenToProps(echartsConfigChildren) as ToViewReturn<typeof echartsConfigChildren>,
-      chartSize
+      chartSize,
+      theme?.theme?.components?.candleStickChart || {},
     );
   }, [chartSize, ...Object.values(echartsConfigChildren)]);
 
diff --git a/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartUtils.ts b/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartUtils.ts
index 049d89034..a323e2803 100644
--- a/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartUtils.ts
@@ -128,7 +128,11 @@ export function getSeriesConfig(props: EchartsConfigProps) {
 }
 
 // https://echarts.apache.org/en/option.html
-export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSize): EChartsOptionWithMap {
+export function getEchartsConfig(
+  props: EchartsConfigProps,
+  chartSize?: ChartSize,
+  theme?: any,
+): EChartsOptionWithMap {
   if (props.mode === "json") {
     let opt={
   "title": {
diff --git a/client/packages/lowcoder/src/util/hooks.ts b/client/packages/lowcoder/src/util/hooks.ts
index 4c9227423..40fc90d8d 100644
--- a/client/packages/lowcoder/src/util/hooks.ts
+++ b/client/packages/lowcoder/src/util/hooks.ts
@@ -36,7 +36,12 @@ export function isUserViewMode(params?: AppPathParams) {
  * whether it's user view mode (not editing)
  */
 export function useUserViewMode() {
-  const params = useParams<AppPathParams>();
+  let params;
+  try {
+    params = useParams<AppPathParams>();
+  } catch(error) {
+    console.error(error);
+  }
   return isUserViewMode(params);
 }
 

From 65f6ec6db544843d1c59b81f18cd2fed7b0a6da3 Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Tue, 2 Jul 2024 14:27:09 +0500
Subject: [PATCH 55/57] Theme: removed unused dependencies + apply themes in
 charts

---
 client/packages/lowcoder-comps/package.json   | 48 +++++++++----------
 .../src/comps/basicChartComp/chartComp.tsx    |  8 +++-
 .../src/comps/basicChartComp/chartUtils.ts    |  4 +-
 .../src/comps/calendarComp/calendarComp.tsx   | 11 +++--
 .../candleStickChartComp.tsx                  |  5 +-
 .../src/comps/chartComp/chartUtils.ts         |  6 ++-
 .../chartsGeoMapComp/chartsGeoMapComp.tsx     |  5 +-
 .../comps/funnelChartComp/funnelChartComp.tsx |  5 +-
 .../comps/gaugeChartComp/gaugeChartComp.tsx   |  5 +-
 .../comps/graphChartComp/graphChartComp.tsx   |  5 +-
 .../heatmapChartComp/heatmapChartComp.tsx     |  5 +-
 .../comps/radarChartComp/radarChartComp.tsx   |  5 +-
 .../comps/sankeyChartComp/sankeyChartComp.tsx |  5 +-
 .../sunburstChartComp/sunburstChartComp.tsx   |  5 +-
 .../themeriverChartComp.tsx                   |  5 +-
 .../src/comps/treeChartComp/treechartComp.tsx |  5 +-
 .../treemapChartComp/treemapChartComp.tsx     |  5 +-
 .../autoCompleteComp/autoCompleteComp.tsx     |  5 +-
 .../lowcoder/src/comps/comps/avatar.tsx       |  5 +-
 .../lowcoder/src/comps/comps/avatarGroup.tsx  |  5 +-
 .../src/comps/comps/buttonComp/buttonComp.tsx |  5 +-
 .../comps/comps/buttonComp/dropdownComp.tsx   |  5 +-
 .../comps/buttonComp/floatButtonComp.tsx      | 27 ++---------
 .../src/comps/comps/buttonComp/linkComp.tsx   |  5 +-
 .../comps/comps/buttonComp/scannerComp.tsx    |  5 +-
 .../comps/buttonComp/toggleButtonComp.tsx     |  5 +-
 .../lowcoder/src/comps/comps/carouselComp.tsx |  4 +-
 .../comps/comps/columnLayout/columnLayout.tsx |  5 +-
 .../comps/comps/commentComp/commentComp.tsx   |  5 +-
 .../comps/comps/containerComp/cardComp.tsx    |  5 +-
 .../comps/containerComp/pageLayoutComp.tsx    |  5 +-
 .../src/comps/comps/customComp/customComp.tsx |  5 +-
 .../src/comps/comps/dateComp/dateComp.tsx     |  7 +--
 .../src/comps/comps/dateComp/timeComp.tsx     |  5 +-
 .../src/comps/comps/fileComp/fileComp.tsx     | 27 ++---------
 .../src/comps/comps/fileViewerComp.tsx        |  5 +-
 .../lowcoder/src/comps/comps/iconComp.tsx     |  5 +-
 .../lowcoder/src/comps/comps/iframeComp.tsx   |  6 +--
 .../lowcoder/src/comps/comps/imageComp.tsx    |  4 +-
 .../comps/comps/jsonComp/jsonEditorComp.tsx   |  5 +-
 .../comps/comps/jsonComp/jsonExplorerComp.tsx |  5 +-
 .../comps/comps/jsonComp/jsonLottieComp.tsx   |  5 +-
 .../jsonSchemaFormComp/jsonSchemaFormComp.tsx |  5 +-
 .../src/comps/comps/listViewComp/listView.tsx | 20 +-------
 .../src/comps/comps/mediaComp/audioComp.tsx   |  5 +-
 .../comps/comps/mediaComp/colorPickerComp.tsx |  6 +--
 .../src/comps/comps/mediaComp/videoComp.tsx   |  5 +-
 .../comps/numberInputComp/numberInputComp.tsx |  5 +-
 .../comps/numberInputComp/sliderComp.tsx      |  6 +--
 .../comps/pageLayoutComp/pageLayoutComp.tsx   | 24 +---------
 .../src/comps/comps/progressCircleComp.tsx    |  5 +-
 .../lowcoder/src/comps/comps/progressComp.tsx |  5 +-
 .../lowcoder/src/comps/comps/qrCodeComp.tsx   |  5 +-
 .../lowcoder/src/comps/comps/ratingComp.tsx   |  5 +-
 .../responsiveLayout/responsiveLayout.tsx     |  5 +-
 .../src/comps/comps/richTextEditorComp.tsx    |  5 +-
 .../comps/selectInputComp/cascaderComp.tsx    |  6 +--
 .../comps/selectInputComp/checkboxComp.tsx    |  6 +--
 .../comps/selectInputComp/multiSelectComp.tsx |  5 +-
 .../comps/comps/selectInputComp/radioComp.tsx |  6 +--
 .../selectInputComp/segmentedControl.tsx      |  5 +-
 .../comps/selectInputComp/selectComp.tsx      |  5 +-
 .../src/comps/comps/signatureComp.tsx         |  5 +-
 .../lowcoder/src/comps/comps/switchComp.tsx   |  5 +-
 .../columnTypeComps/columnAvatarsComp.tsx     | 22 ++-------
 .../comps/comps/tableComp/tableCompView.tsx   | 22 ++-------
 .../comps/comps/tabs/tabbedContainerComp.tsx  |  5 +-
 .../comps/comps/textInputComp/inputComp.tsx   |  5 +-
 .../comps/comps/textInputComp/mentionComp.tsx |  6 +--
 .../comps/textInputComp/passwordComp.tsx      |  5 +-
 .../comps/textInputComp/textAreaComp.tsx      |  5 +-
 .../comps/comps/timelineComp/timelineComp.tsx |  5 +-
 .../lowcoder/src/comps/comps/transferComp.tsx |  6 +--
 .../src/comps/comps/treeComp/treeComp.tsx     |  5 +-
 .../comps/comps/treeComp/treeSelectComp.tsx   |  5 +-
 .../triContainerComp/triContainerComp.tsx     | 21 +-------
 client/packages/lowcoder/src/util/hooks.ts    |  7 +--
 77 files changed, 168 insertions(+), 407 deletions(-)

diff --git a/client/packages/lowcoder-comps/package.json b/client/packages/lowcoder-comps/package.json
index 7a31785b7..5da1fff1f 100644
--- a/client/packages/lowcoder-comps/package.json
+++ b/client/packages/lowcoder-comps/package.json
@@ -34,30 +34,6 @@
   "lowcoder": {
     "description": "",
     "comps": {
-      "meetingController": {
-        "name": "Agora Meeting Controller",
-        "icon": "./icons/icon-comp-calendar.svg",
-        "layoutInfo": {
-          "w": 1,
-          "h": 1
-        }
-      },
-      "meetingSharing": {
-        "name": "Agora Meeting Sharing",
-        "icon": "./icons/icon-comp-calendar.svg",
-        "layoutInfo": {
-          "w": 6,
-          "h": 40
-        }
-      },
-      "meetingStream": {
-        "name": "Video Stream",
-        "icon": "./icons/icon-comp-calendar.svg",
-        "layoutInfo": {
-          "w": 6,
-          "h": 40
-        }
-      },
       "calendar": {
         "name": "Calendar",
         "icon": "./icons/icon-comp-calendar.svg",
@@ -193,6 +169,30 @@
           "w": 19,
           "h": 60
         }
+      },
+      "meetingController": {
+        "name": "Agora Meeting Controller",
+        "icon": "./icons/icon-comp-calendar.svg",
+        "layoutInfo": {
+          "w": 1,
+          "h": 1
+        }
+      },
+      "meetingSharing": {
+        "name": "Agora Meeting Sharing",
+        "icon": "./icons/icon-comp-calendar.svg",
+        "layoutInfo": {
+          "w": 6,
+          "h": 40
+        }
+      },
+      "meetingStream": {
+        "name": "Video Stream",
+        "icon": "./icons/icon-comp-calendar.svg",
+        "layoutInfo": {
+          "w": 6,
+          "h": 40
+        }
       }
     }
   },
diff --git a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartComp.tsx b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartComp.tsx
index e2eb34577..e2a162810 100644
--- a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartComp.tsx
@@ -25,7 +25,8 @@ import {
   ThemeContext,
   chartColorPalette,
   getPromiseAfterDispatch,
-  dropdownControl
+  dropdownControl,
+  useMergeCompStyles,
 } from "lowcoder-sdk";
 import { getEchartsLocale, trans } from "i18n/comps";
 import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig";
@@ -73,6 +74,8 @@ BasicChartTmpComp = withViewFn(BasicChartTmpComp, (comp) => {
     log.error('theme chart error: ', error);
   }
 
+  useMergeCompStyles(childrenToProps(comp.children), comp.dispatch);
+
   const triggerClickEvent = async (dispatch: any, action: CompAction<JSONValue>) => {
     await getPromiseAfterDispatch(
       dispatch,
@@ -123,7 +126,8 @@ BasicChartTmpComp = withViewFn(BasicChartTmpComp, (comp) => {
   const option = useMemo(() => {
     return getEchartsConfig(
       childrenToProps(echartsConfigChildren) as ToViewReturn<typeof echartsConfigChildren>,
-      chartSize
+      chartSize,
+      theme?.theme?.components?.candleStickChart || {},
     );
   }, [chartSize, ...Object.values(echartsConfigChildren)]);
 
diff --git a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartUtils.ts b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartUtils.ts
index ffe0459e8..8bb44e041 100644
--- a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartUtils.ts
@@ -141,8 +141,8 @@ export function getEchartsConfig(
     "left":"center"
   },
   "backgroundColor": props?.style?.background || theme?.style?.background,
-      "color": props.echartsOption.data?.map(data => data.color),
-  "tooltip": props.tooltip&&{
+  "color": props.echartsOption.data?.map(data => data.color),
+  "tooltip": props.tooltip && {
     "trigger": "item",
     "formatter": "{a} <br/>{b} : {c}%"
   },
diff --git a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx
index b6d1b912a..2b512507c 100644
--- a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx
@@ -42,7 +42,8 @@ import {
   CustomModal,
   jsonValueExposingStateControl,
   CalendarDeleteIcon,
-  Tooltip
+  Tooltip,
+  useMergeCompStyles,
 } from "lowcoder-sdk";
 
 import {
@@ -87,7 +88,7 @@ const childrenMap = {
   firstDay: dropdownControl(FirstDayOptions, "1"),
   dayMaxEvents: withDefault(NumberControl, 2),
   eventMaxStack: withDefault(NumberControl, 0),
-  style: styleControl(CalendarStyle),
+  style: styleControl(CalendarStyle, 'style'),
   licenseKey: withDefault( StringControl, "" ),
   currentFreeView: dropdownControl(DefaultWithFreeViewOptions, "timeGridWeek"),
   currentPremiumView: dropdownControl(DefaultWithPremiumViewOptions, "resourceTimelineDay"),
@@ -114,7 +115,7 @@ let CalendarBasicComp = (function () {
     licensed?: boolean;
     currentFreeView?: string; 
     currentPremiumView?: string; 
-  }) => {
+  }, dispatch: any) => {
 
     const theme = useContext(ThemeContext);
     const ref = createRef<HTMLDivElement>();
@@ -123,6 +124,8 @@ let CalendarBasicComp = (function () {
     const [left, setLeft] = useState<number | undefined>(undefined);
     const [licensed, setLicensed] = useState<boolean>(props.licenseKey !== "");
 
+    useMergeCompStyles(props, dispatch);
+
     useEffect(() => {
       setLicensed(props.licenseKey !== "");
     }, [props.licenseKey]);
@@ -130,8 +133,6 @@ let CalendarBasicComp = (function () {
     let currentView = licensed ? props.currentPremiumView : props.currentFreeView;
     let currentEvents = currentView == "resourceTimelineDay" || currentView == "resourceTimeGridDay" ? props.resourcesEvents : props.events;
 
-    console.log("currentEvents", currentEvents);
-
     // we use one central stack of events for all views
     let events = Array.isArray(currentEvents.value) ? currentEvents.value.map((item: EventType) => {
       return {
diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartComp.tsx b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartComp.tsx
index 45a49b65c..2e02f78ce 100644
--- a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartComp.tsx
@@ -24,7 +24,8 @@ import {
   ThemeContext,
   chartColorPalette,
   getPromiseAfterDispatch,
-  dropdownControl
+  dropdownControl,
+  useMergeCompStyles,
 } from "lowcoder-sdk";
 import { getEchartsLocale, trans } from "i18n/comps";
 import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig";
@@ -70,6 +71,8 @@ CandleStickChartTmpComp = withViewFn(CandleStickChartTmpComp, (comp) => {
     log.error('theme chart error: ', error);
   }
 
+  useMergeCompStyles(childrenToProps(comp.children), comp.dispatch);
+
   const triggerClickEvent = async (dispatch: any, action: CompAction<JSONValue>) => {
     await getPromiseAfterDispatch(
       dispatch,
diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartUtils.ts b/client/packages/lowcoder-comps/src/comps/chartComp/chartUtils.ts
index 5b652ef94..d71dd7f56 100644
--- a/client/packages/lowcoder-comps/src/comps/chartComp/chartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartUtils.ts
@@ -128,7 +128,11 @@ export function getSeriesConfig(props: EchartsConfigProps) {
 }
 
 // https://echarts.apache.org/en/option.html
-export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSize): EChartsOptionWithMap {
+export function getEchartsConfig(
+  props: EchartsConfigProps,
+  chartSize?: ChartSize,
+  theme?: any,  
+): EChartsOptionWithMap {
   if (props.mode === "json") {
     return props.echartsOption ? props.echartsOption : {};
   }
diff --git a/client/packages/lowcoder-comps/src/comps/chartsGeoMapComp/chartsGeoMapComp.tsx b/client/packages/lowcoder-comps/src/comps/chartsGeoMapComp/chartsGeoMapComp.tsx
index 1eb91fc26..88da3b89c 100644
--- a/client/packages/lowcoder-comps/src/comps/chartsGeoMapComp/chartsGeoMapComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/chartsGeoMapComp/chartsGeoMapComp.tsx
@@ -25,7 +25,8 @@ import {
   ThemeContext,
   chartColorPalette,
   getPromiseAfterDispatch,
-  dropdownControl
+  dropdownControl,
+  useMergeCompStyles,
 } from "lowcoder-sdk";
 import { getEchartsLocale, trans } from "i18n/comps";
 import { ItemColorComp } from "comps/basicChartComp/chartConfigs/lineChartConfig";
@@ -82,6 +83,8 @@ MapTmpComp = withViewFn(MapTmpComp, (comp) => {
     log.error('theme chart error: ', error);
   }
 
+  useMergeCompStyles(childrenToProps(comp.children), comp.dispatch);
+
   const triggerClickEvent = async (dispatch: any, action: CompAction<JSONValue>) => {
     await getPromiseAfterDispatch(
       dispatch,
diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartComp.tsx b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartComp.tsx
index 994c64675..afa7ae13d 100644
--- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartComp.tsx
@@ -24,7 +24,8 @@ import {
   ThemeContext,
   chartColorPalette,
   getPromiseAfterDispatch,
-  dropdownControl
+  dropdownControl,
+  useMergeCompStyles,
 } from "lowcoder-sdk";
 import { getEchartsLocale, trans } from "i18n/comps";
 import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig";
@@ -71,6 +72,8 @@ FunnelChartTmpComp = withViewFn(FunnelChartTmpComp, (comp) => {
     log.error('theme chart error: ', error);
   }
 
+  useMergeCompStyles(childrenToProps(comp.children), comp.dispatch);
+
   const triggerClickEvent = async (dispatch: any, action: CompAction<JSONValue>) => {
     await getPromiseAfterDispatch(
       dispatch,
diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartComp.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartComp.tsx
index b81985935..1793dd634 100644
--- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartComp.tsx
@@ -25,7 +25,8 @@ import {
   chartColorPalette,
   getPromiseAfterDispatch,
   dropdownControl,
-  JSONObject
+  JSONObject,
+  useMergeCompStyles,
 } from "lowcoder-sdk";
 import { getEchartsLocale, trans } from "i18n/comps";
 import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig";
@@ -72,6 +73,8 @@ GaugeChartTmpComp = withViewFn(GaugeChartTmpComp, (comp) => {
     log.error('theme chart error: ', error);
   }
 
+  useMergeCompStyles(childrenToProps(comp.children), comp.dispatch);
+
   const triggerClickEvent = async (dispatch: any, action: CompAction<JSONValue>) => {
     await getPromiseAfterDispatch(
       dispatch,
diff --git a/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartComp.tsx b/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartComp.tsx
index 67dd615cf..5f68c050c 100644
--- a/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartComp.tsx
@@ -25,7 +25,8 @@ import {
   chartColorPalette,
   getPromiseAfterDispatch,
   dropdownControl,
-  JSONObject
+  JSONObject,
+  useMergeCompStyles,
 } from "lowcoder-sdk";
 import { getEchartsLocale, trans } from "i18n/comps";
 import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig";
@@ -72,6 +73,8 @@ GraphChartTmpComp = withViewFn(GraphChartTmpComp, (comp) => {
     log.error('theme chart error: ', error);
   }
 
+  useMergeCompStyles(childrenToProps(comp.children), comp.dispatch);
+
   const triggerClickEvent = async (dispatch: any, action: CompAction<JSONValue>) => {
     await getPromiseAfterDispatch(
       dispatch,
diff --git a/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartComp.tsx b/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartComp.tsx
index 2b4fe8d73..80b3da4ab 100644
--- a/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartComp.tsx
@@ -24,7 +24,8 @@ import {
   ThemeContext,
   chartColorPalette,
   getPromiseAfterDispatch,
-  dropdownControl
+  dropdownControl,
+  useMergeCompStyles,
 } from "lowcoder-sdk";
 import { getEchartsLocale, trans } from "i18n/comps";
 import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig";
@@ -71,6 +72,8 @@ HeatmapChartTmpComp = withViewFn(HeatmapChartTmpComp, (comp) => {
     log.error('theme chart error: ', error);
   }
 
+  useMergeCompStyles(childrenToProps(comp.children), comp.dispatch);
+
   const triggerClickEvent = async (dispatch: any, action: CompAction<JSONValue>) => {
     await getPromiseAfterDispatch(
       dispatch,
diff --git a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartComp.tsx b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartComp.tsx
index c43a1bd76..950f5cad2 100644
--- a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartComp.tsx
@@ -24,7 +24,8 @@ import {
   ThemeContext,
   chartColorPalette,
   getPromiseAfterDispatch,
-  dropdownControl
+  dropdownControl,
+  useMergeCompStyles,
 } from "lowcoder-sdk";
 import { getEchartsLocale, trans } from "i18n/comps";
 import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig";
@@ -71,6 +72,8 @@ RadarChartTmpComp = withViewFn(RadarChartTmpComp, (comp) => {
     log.error('theme chart error: ', error);
   }
 
+  useMergeCompStyles(childrenToProps(comp.children), comp.dispatch);
+
   const triggerClickEvent = async (dispatch: any, action: CompAction<JSONValue>) => {
     await getPromiseAfterDispatch(
       dispatch,
diff --git a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartComp.tsx b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartComp.tsx
index 4e5756b97..45b751926 100644
--- a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartComp.tsx
@@ -24,7 +24,8 @@ import {
   ThemeContext,
   chartColorPalette,
   getPromiseAfterDispatch,
-  dropdownControl
+  dropdownControl,
+  useMergeCompStyles,
 } from "lowcoder-sdk";
 import { getEchartsLocale, trans } from "i18n/comps";
 import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig";
@@ -71,6 +72,8 @@ SankeyChartTmpComp = withViewFn(SankeyChartTmpComp, (comp) => {
     log.error('theme chart error: ', error);
   }
 
+  useMergeCompStyles(childrenToProps(comp.children), comp.dispatch);
+
   const triggerClickEvent = async (dispatch: any, action: CompAction<JSONValue>) => {
     await getPromiseAfterDispatch(
       dispatch,
diff --git a/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartComp.tsx b/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartComp.tsx
index 5b12a7880..6cfa5a90c 100644
--- a/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartComp.tsx
@@ -24,7 +24,8 @@ import {
   ThemeContext,
   chartColorPalette,
   getPromiseAfterDispatch,
-  dropdownControl
+  dropdownControl,
+  useMergeCompStyles,
 } from "lowcoder-sdk";
 import { getEchartsLocale, trans } from "i18n/comps";
 import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig";
@@ -71,6 +72,8 @@ SunburstChartTmpComp = withViewFn(SunburstChartTmpComp, (comp) => {
     log.error('theme chart error: ', error);
   }
 
+  useMergeCompStyles(childrenToProps(comp.children), comp.dispatch);
+
   const triggerClickEvent = async (dispatch: any, action: CompAction<JSONValue>) => {
     await getPromiseAfterDispatch(
       dispatch,
diff --git a/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartComp.tsx b/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartComp.tsx
index 6f2752136..143286741 100644
--- a/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartComp.tsx
@@ -24,7 +24,8 @@ import {
   ThemeContext,
   chartColorPalette,
   getPromiseAfterDispatch,
-  dropdownControl
+  dropdownControl,
+  useMergeCompStyles,
 } from "lowcoder-sdk";
 import { getEchartsLocale, trans } from "i18n/comps";
 import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig";
@@ -71,6 +72,8 @@ ThemeriverChartTmpComp = withViewFn(ThemeriverChartTmpComp, (comp) => {
     log.error('theme chart error: ', error);
   }
 
+  useMergeCompStyles(childrenToProps(comp.children), comp.dispatch);
+
   const triggerClickEvent = async (dispatch: any, action: CompAction<JSONValue>) => {
     await getPromiseAfterDispatch(
       dispatch,
diff --git a/client/packages/lowcoder-comps/src/comps/treeChartComp/treechartComp.tsx b/client/packages/lowcoder-comps/src/comps/treeChartComp/treechartComp.tsx
index 00429e0e4..193e055ee 100644
--- a/client/packages/lowcoder-comps/src/comps/treeChartComp/treechartComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/treeChartComp/treechartComp.tsx
@@ -24,7 +24,8 @@ import {
   ThemeContext,
   chartColorPalette,
   getPromiseAfterDispatch,
-  dropdownControl
+  dropdownControl,
+  useMergeCompStyles,
 } from "lowcoder-sdk";
 import { getEchartsLocale, trans } from "i18n/comps";
 import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig";
@@ -71,6 +72,8 @@ TreeChartTmpComp = withViewFn(TreeChartTmpComp, (comp) => {
     log.error('theme chart error: ', error);
   }
 
+  useMergeCompStyles(childrenToProps(comp.children), comp.dispatch);
+
   const triggerClickEvent = async (dispatch: any, action: CompAction<JSONValue>) => {
     await getPromiseAfterDispatch(
       dispatch,
diff --git a/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartComp.tsx b/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartComp.tsx
index 4e97310ee..460a538f8 100644
--- a/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartComp.tsx
@@ -24,7 +24,8 @@ import {
   ThemeContext,
   chartColorPalette,
   getPromiseAfterDispatch,
-  dropdownControl
+  dropdownControl,
+  useMergeCompStyles,
 } from "lowcoder-sdk";
 import { getEchartsLocale, trans } from "i18n/comps";
 import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig";
@@ -71,6 +72,8 @@ TreemapChartTmpComp = withViewFn(TreemapChartTmpComp, (comp) => {
     log.error('theme chart error: ', error);
   }
 
+  useMergeCompStyles(childrenToProps(comp.children), comp.dispatch);
+
   const triggerClickEvent = async (dispatch: any, action: CompAction<JSONValue>) => {
     await getPromiseAfterDispatch(
       dispatch,
diff --git a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx
index ff278182d..207de58d1 100644
--- a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx
@@ -55,10 +55,7 @@ import {
   autocompleteIconColor,
   componentSize,
 } from "./autoCompleteConstants";
-import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
-import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
-import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
-import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 
 const InputStyle = styled(Input) <{ $style: InputLikeStyleType }>`
diff --git a/client/packages/lowcoder/src/comps/comps/avatar.tsx b/client/packages/lowcoder/src/comps/comps/avatar.tsx
index 63bb24856..4643e9c5e 100644
--- a/client/packages/lowcoder/src/comps/comps/avatar.tsx
+++ b/client/packages/lowcoder/src/comps/comps/avatar.tsx
@@ -34,10 +34,7 @@ import { BadgeBasicSection, badgeChildren } from "./badgeComp/badgeConstants";
 import { DropdownOptionControl } from "../controls/optionsControl";
 import { ReactElement, useContext, useEffect } from "react";
 import { CompNameContext, EditorContext } from "../editorState";
-import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
-import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
-import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
-import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 const AvatarWrapper = styled(Avatar) <AvatarProps & { $cursorPointer?: boolean, $style: AvatarStyleType }>`
   background: ${(props) => props.$style.background};
diff --git a/client/packages/lowcoder/src/comps/comps/avatarGroup.tsx b/client/packages/lowcoder/src/comps/comps/avatarGroup.tsx
index 1b74f16dd..5f3a57d88 100644
--- a/client/packages/lowcoder/src/comps/comps/avatarGroup.tsx
+++ b/client/packages/lowcoder/src/comps/comps/avatarGroup.tsx
@@ -19,10 +19,7 @@ import { optionsControl } from "../controls/optionsControl";
 import { BoolControl } from "../controls/boolControl";
 import { dropdownControl } from "../controls/dropdownControl";
 import { JSONObject } from "util/jsonTypes";
-import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
-import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
-import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
-import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 const MacaroneList = [
   '#fde68a',
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx
index e783f689b..9807f27e7 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx
@@ -27,10 +27,7 @@ import { RefControl } from "comps/controls/refControl";
 import React, { useContext, useEffect } from "react";
 import { AnimationStyle } from "@lowcoder-ee/comps/controls/styleControlConstants";
 import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
-import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
-import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
-import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
-import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 const FormLabel = styled(CommonBlueLabel)`
   font-size: 13px;
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx
index 41ef3aa8b..dc6d5e51d 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx
@@ -22,10 +22,7 @@ import {
   getButtonStyle,
 } from "./buttonCompConstants";
 import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
-import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
-import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
-import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
-import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 const StyledDropdownButton = styled(DropdownButton)`
   width: 100%;
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/floatButtonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/floatButtonComp.tsx
index 0d9382e64..1445edef1 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/floatButtonComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/floatButtonComp.tsx
@@ -17,9 +17,7 @@ import styled from "styled-components";
 import { ButtonEventHandlerControl } from "comps/controls/eventHandlerControl";
 import { manualOptionsControl } from "comps/controls/optionsControl";
 import { useContext, useEffect } from "react";
-import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
-import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
-import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 const StyledFloatButton = styled(FloatButton)<{
   $animationStyle: AnimationStyleType;
@@ -136,25 +134,10 @@ const FloatButtonView = (props: RecordConstructorToView<typeof childrenMap>) =>
 
 let FloatButtonBasicComp = (function () {
     return new UICompBuilder(childrenMap, (props , dispatch) => {
-        const theme = useContext(ThemeContext);
-        const compType = useContext(CompTypeContext);
-        const compTheme = theme?.theme?.components?.[compType];
-        const styleProps: Record<string, any> = {};
-        ['style', 'animationStyle'].forEach((key: string) => {
-          styleProps[key] = (props as any)[key];
-        });
-    
-        useEffect(() => {
-          setInitialCompStyles({
-            dispatch,
-            compTheme,
-            styleProps,
-          });
-        }, []);
-    
-        return(
-      <FloatButtonView {...props} />
-    )})
+      useMergeCompStyles(props, dispatch);
+      return(
+        <FloatButtonView {...props} />
+      )})
       .setPropertyViewFn((children) => (
         <>
           <Section name={sectionNames.basic}>
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx
index 726e531d6..95ec1a5df 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx
@@ -22,10 +22,7 @@ import { RefControl } from "comps/controls/refControl";
 
 import { EditorContext } from "comps/editorState";
 import React, { useContext, useEffect } from "react";
-import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
-import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
-import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
-import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 const Link = styled(Button)<{
   $style: LinkStyleType;
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx
index 1489697fb..97c5124f5 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx
@@ -24,10 +24,7 @@ import { BoolControl } from "comps/controls/boolControl";
 import type { ItemType } from "antd/es/menu/hooks/useItems";
 import { RefControl } from "comps/controls/refControl";
 import { EditorContext } from "comps/editorState"; 
-import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
-import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
-import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
-import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 const Error = styled.div`
   color: #f5222d;
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx
index e4715407b..c8df0e3e6 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx
@@ -25,10 +25,7 @@ import { BoolControl } from "comps/controls/boolControl";
 import { RefControl } from "comps/controls/refControl";
 import React, { useContext, useEffect } from "react";
 import { EditorContext } from "comps/editorState"; 
-import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
-import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
-import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
-import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 const IconWrapper = styled.div`
   display: flex;
diff --git a/client/packages/lowcoder/src/comps/comps/carouselComp.tsx b/client/packages/lowcoder/src/comps/comps/carouselComp.tsx
index a0b826b2a..c11b9290d 100644
--- a/client/packages/lowcoder/src/comps/comps/carouselComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/carouselComp.tsx
@@ -17,9 +17,7 @@ import { AnimationStyle, AnimationStyleType, CarouselStyle } from "comps/control
 
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
-import { ThemeContext, useMergeCompStyles } from "@lowcoder-ee/index.sdk";
-import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
-import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 // TODO: dots at top position needs proper margin (should be the same as bottom position)
 
diff --git a/client/packages/lowcoder/src/comps/comps/columnLayout/columnLayout.tsx b/client/packages/lowcoder/src/comps/comps/columnLayout/columnLayout.tsx
index ac0977af2..4db9ab4cf 100644
--- a/client/packages/lowcoder/src/comps/comps/columnLayout/columnLayout.tsx
+++ b/client/packages/lowcoder/src/comps/comps/columnLayout/columnLayout.tsx
@@ -40,10 +40,7 @@ import { EditorContext } from "comps/editorState";
 
 import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
 import { DisabledContext } from "comps/generators/uiCompBuilder";
-import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
-import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
-import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
-import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 const ContainWrapper = styled.div<{
   $style: ContainerStyleType & {
diff --git a/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx b/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx
index d7f2dadd5..2c37ba6dd 100644
--- a/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx
@@ -67,10 +67,7 @@ import dayjs from "dayjs";
 import { getInitialsAndColorCode } from "util/stringUtils";
 import { default as CloseOutlined } from "@ant-design/icons/CloseOutlined";
 
-import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
-import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
-import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
-import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 
 dayjs.extend(relativeTime);
diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx
index 42a9cb62e..5791d09fa 100644
--- a/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx
@@ -20,10 +20,7 @@ import { ButtonEventHandlerControl, CardEventHandlerControl, clickEvent, refresh
 import { optionsControl } from "comps/controls/optionsControl";
 import { dropdownControl } from "comps/controls/dropdownControl";
 import { styleControl } from "comps/controls/styleControl";
-import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
-import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
-import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
-import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 const { Meta } = Card;
 
 const Wrapper = styled.div<{
diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx
index ff291827c..369a5ecfe 100644
--- a/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx
@@ -20,10 +20,7 @@ import {
 import { PageLayout } from "../pageLayoutComp/pageLayout";
 import { AnimationStyle } from "@lowcoder-ee/comps/controls/styleControlConstants";
 import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
-import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
-import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
-import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
-import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 export const ContainerBaseComp = (function () {
   const childrenMap = {
diff --git a/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx b/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx
index 1364b8da6..362b1d1eb 100644
--- a/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx
@@ -14,10 +14,7 @@ import { trans } from "i18n";
 import { EditorContext } from "comps/editorState";
 import { AnimationStyle, AnimationStyleType, CustomStyle, CustomStyleType } from "@lowcoder-ee/comps/controls/styleControlConstants";
 import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
-import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
-import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
-import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
-import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 // TODO: eventually to embedd in container so we have styling?
 // TODO: support different starter templates for different frameworks (react, ANT, Flutter, Angular, etc)
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx
index dcb08bfd9..08f660086 100644
--- a/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx
@@ -43,15 +43,12 @@ import { hasIcon } from "comps/utils";
 import { Section, sectionNames } from "components/Section";
 import { dateRefMethods, disabledTime, handleDateChange } from "comps/comps/dateComp/dateCompUtil";
 import { DateUIView } from "./dateUIView";
-import { useIsMobile, useMergeCompStyles } from "util/hooks";
+import { useIsMobile } from "util/hooks";
 import { RefControl } from "comps/controls/refControl";
 import { CommonPickerMethods } from "antd/es/date-picker/generatePicker/interface";
 import { DateRangeUIView } from "comps/comps/dateComp/dateRangeUIView";
-
 import { EditorContext } from "comps/editorState";
-import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
-import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
-import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 const defaultStyle = {
   borderStyle: 'solid',
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx
index 8b8ec1b60..28875e798 100644
--- a/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx
@@ -52,10 +52,7 @@ import { CommonPickerMethods } from "antd/es/date-picker/generatePicker/interfac
 import { TimePickerProps } from "antd/es/time-picker";
 
 import { EditorContext } from "comps/editorState";
-import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
-import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
-import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
-import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 const EventOptions = [changeEvent, focusEvent, blurEvent] as const;
 
diff --git a/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx b/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx
index fddc5fba9..005edaefc 100644
--- a/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx
@@ -42,9 +42,8 @@ import { messageInstance } from "lowcoder-design/src/components/GlobalInstances"
 
 import React, { useContext } from "react";
 import { EditorContext } from "comps/editorState";
-import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
-import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
-import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
+
 const FileSizeControl = codeControl((value) => {
   if (typeof value === "number") {
     return value;
@@ -382,26 +381,10 @@ const childrenMap = {
 };
 
 let FileTmpComp = new UICompBuilder(childrenMap, (props, dispatch) => {
-
-  const theme = useContext(ThemeContext);
-  const compType = useContext(CompTypeContext);
-  const compTheme = theme?.theme?.components?.[compType];
-  const styleProps: Record<string, any> = {};
-  ['style', 'animationStyle'].forEach((key: string) => {
-    styleProps[key] = (props as any)[key];
-  });
-
-  useEffect(() => {
-    setInitialCompStyles({
-      dispatch,
-      compTheme,
-      styleProps,
-    });
-  }, []);
+  useMergeCompStyles(props, dispatch);
   return(
-
-  <Upload {...props} dispatch={dispatch} />
-)})
+    <Upload {...props} dispatch={dispatch} />
+  )})
   .setPropertyViewFn((children) => (
     <>
       <Section name={sectionNames.basic}>
diff --git a/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx b/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx
index 969ee0ee3..b04238f1b 100644
--- a/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx
@@ -13,10 +13,7 @@ import { trans } from "i18n";
 
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
-import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
-import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
-import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
-import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 const getStyle = (style: FileViewerStyleType) => {
   return css`
diff --git a/client/packages/lowcoder/src/comps/comps/iconComp.tsx b/client/packages/lowcoder/src/comps/comps/iconComp.tsx
index 602252f5f..63b8855a2 100644
--- a/client/packages/lowcoder/src/comps/comps/iconComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/iconComp.tsx
@@ -30,10 +30,7 @@ import {
 } from "../controls/eventHandlerControl";
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
-import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
-import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
-import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
-import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 const Container = styled.div<{
   $style: IconStyleType | undefined;
diff --git a/client/packages/lowcoder/src/comps/comps/iframeComp.tsx b/client/packages/lowcoder/src/comps/comps/iframeComp.tsx
index b85bff57a..187edd993 100644
--- a/client/packages/lowcoder/src/comps/comps/iframeComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/iframeComp.tsx
@@ -10,11 +10,9 @@ import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import log from "loglevel";
 
-import { useContext, useEffect } from "react";
+import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
-import { CompTypeContext } from "../utils/compTypeContext";
-import { ThemeContext, useMergeCompStyles } from "@lowcoder-ee/index.sdk";
-import { setInitialCompStyles } from "../utils/themeUtil";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 const Wrapper = styled.div<{$style: IframeStyleType; $animationStyle:AnimationStyleType}>`
   width: 100%;
diff --git a/client/packages/lowcoder/src/comps/comps/imageComp.tsx b/client/packages/lowcoder/src/comps/comps/imageComp.tsx
index 078913039..e4a8b8b69 100644
--- a/client/packages/lowcoder/src/comps/comps/imageComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/imageComp.tsx
@@ -34,9 +34,7 @@ import { DEFAULT_IMG_URL } from "util/stringUtils";
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
 import { StringControl } from "../controls/codeControl";
-import { ThemeContext, useMergeCompStyles } from "@lowcoder-ee/index.sdk";
-import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
-import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 const Container = styled.div<{ $style: ImageStyleType | undefined,$animationStyle:AnimationStyleType }>`
   height: 100%;
diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx
index 6bde13166..b6f3c4a26 100644
--- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx
@@ -20,10 +20,7 @@ import {
 } from "base/codeEditor/codeMirror";
 import { useExtensions } from "base/codeEditor/extensions";
 import { EditorContext } from "comps/editorState";
-import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
-import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
-import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
-import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 /**
  * JsonEditor Comp
diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx
index 92bbcded5..ceb6adff2 100644
--- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx
@@ -13,10 +13,7 @@ import { EditorContext } from "comps/editorState";
 import { useContext, useEffect } from "react";
 import { AnimationStyle, AnimationStyleType } from "@lowcoder-ee/comps/controls/styleControlConstants";
 import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
-import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
-import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
-import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
-import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 /**
  * JsonExplorer Comp
diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx
index 15bb17c36..6e35d7716 100644
--- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx
@@ -18,10 +18,7 @@ import {
 } from "../../generators/withExposing";
 import { defaultLottie } from "./jsonConstants";
 import { EditorContext } from "comps/editorState";
-import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
-import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
-import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
-import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 const Player = lazy(
   () => import('@lottiefiles/react-lottie-player')
diff --git a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx
index e9b46f853..4c5898e9b 100644
--- a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx
@@ -25,10 +25,7 @@ import { hiddenPropertyView } from "comps/utils/propertyUtils";
 
 import { useContext, useEffect } from "react";
 import { EditorContext } from "comps/editorState";
-import { ThemeContext } from '../../utils/themeContext';
-import { CompTypeContext } from '../../utils/compTypeContext';
-import { setInitialCompStyles } from '../../utils/themeUtil';
-import { useMergeCompStyles } from '@lowcoder-ee/index.sdk';
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 Theme.widgets.DateWidget = DateWidget(false);
 Theme.widgets.DateTimeWidget = DateWidget(true);
diff --git a/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx b/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx
index a58b62944..e4ce05d00 100644
--- a/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx
@@ -18,9 +18,7 @@ import {
 import { ContextContainerComp } from "./contextContainerComp";
 import { ListViewImplComp } from "./listViewComp";
 import { getCurrentItemParams, getData } from "./listViewUtils";
-import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
-import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
-import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 import { childrenToProps } from "@lowcoder-ee/comps/generators/multi";
 import { AnimationStyleType } from "@lowcoder-ee/comps/controls/styleControlConstants";
 
@@ -280,22 +278,8 @@ export function ListView(props: Props) {
   const paddingWidth = isMobile ? "4px" : "16px";
 
   const childrenProps = childrenToProps(comp.children);
-  const theme = useContext(ThemeContext);
-  const compType = useContext(CompTypeContext);
-  const compTheme = theme?.theme?.components?.[compType];
 
-  const styleProps: Record<string, any> = {};
-  ['style', 'animationStyle'].forEach((key: string) => {
-    styleProps[key] = (childrenProps as any)[key];
-  });
-
-  useEffect(() => {
-    setInitialCompStyles({
-      dispatch: comp.dispatch,
-      compTheme,
-      styleProps,
-    });
-  }, []);
+  useMergeCompStyles(childrenProps, comp.dispatch);
 
   // log.debug("renders: ", renders);
   return (
diff --git a/client/packages/lowcoder/src/comps/comps/mediaComp/audioComp.tsx b/client/packages/lowcoder/src/comps/comps/mediaComp/audioComp.tsx
index f5ad4a583..eb725ff44 100644
--- a/client/packages/lowcoder/src/comps/comps/mediaComp/audioComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/mediaComp/audioComp.tsx
@@ -15,10 +15,7 @@ import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { mediaCommonChildren, mediaMethods } from "./mediaUtils";
 import { useContext, useEffect } from "react";
 import { EditorContext } from "comps/editorState";
-import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
-import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
-import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
-import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 const Container = styled.div<{ $style: any; $animationStyle: AnimationStyleType }>`
 ${props => props.$style};
diff --git a/client/packages/lowcoder/src/comps/comps/mediaComp/colorPickerComp.tsx b/client/packages/lowcoder/src/comps/comps/mediaComp/colorPickerComp.tsx
index 32b9dc6ec..80b1218d1 100644
--- a/client/packages/lowcoder/src/comps/comps/mediaComp/colorPickerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/mediaComp/colorPickerComp.tsx
@@ -16,11 +16,7 @@ import { changeEvent, eventHandlerControl } from "comps/controls/eventHandlerCon
 import { jsonObjectExposingStateControl, stringExposingStateControl } from "comps/controls/codeStateControl";
 import { dropdownControl } from "comps/controls/dropdownControl";
 import { ArrayOrJSONObjectControl } from "comps/controls/codeControl";
-import { useContext, useEffect } from "react";
-import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
-import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
-import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
-import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 export function getStyle(style: ColorPickerStyleType) {
   return css`
diff --git a/client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx b/client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx
index f5f6596a0..2091bf20f 100644
--- a/client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx
@@ -24,10 +24,7 @@ import { mediaCommonChildren, mediaMethods } from "./mediaUtils";
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
 import styled, { css } from "styled-components";
-import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
-import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
-import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
-import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 const EventOptions = [
   { label: trans("video.play"), value: "play", description: trans("video.playDesc") },
diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx
index 5256b743d..ee736cfd2 100644
--- a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx
@@ -54,10 +54,7 @@ import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
 import { migrateOldData } from "comps/generators/simpleGenerators";
 import { fixOldInputCompData } from "../textInputComp/textInputConstants";
-import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
-import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
-import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
-import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 const getStyle = (style: InputLikeStyleType) => {
   return css`
diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx
index 507ca22d8..142290acd 100644
--- a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx
@@ -7,11 +7,7 @@ import { formDataChildren, FormDataPropertyView } from "../formComp/formDataCons
 import { SliderChildren, SliderPropertyView, SliderStyled, SliderWrapper } from "./sliderCompConstants";
 import { hasIcon } from "comps/utils";
 import { BoolControl } from "comps/controls/boolControl";
-import { ThemeContext } from "../../utils/themeContext";
-import { useContext, useEffect } from "react";
-import { CompTypeContext } from "../../utils/compTypeContext";
-import { setInitialCompStyles } from "../../utils/themeUtil";
-import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 const SliderBasicComp = (function () {
   /**
diff --git a/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx b/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx
index 0fc06f50c..3df89b524 100644
--- a/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx
@@ -28,10 +28,7 @@ import { ContainerBodyChildComp } from "./containerBodyChildComp";
 import { trans } from "i18n";
 import { ControlNode } from "lowcoder-design";
 import { StringControl } from "comps/controls/codeControl";
-import { useContext, useEffect } from "react";
-import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
-import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
-import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 const childrenMap = {
   header: SimpleContainerComp,
@@ -65,24 +62,7 @@ const childrenMap = {
 // Compatible with old style data 2022-8-15
 const layoutBaseComp = migrateOldData(
   new MultiCompBuilder(childrenMap, (props, dispatch) => {
-
-    const theme = useContext(ThemeContext);
-    const compType = useContext(CompTypeContext);
-    console.log("compType", compType)
-    const compTheme = theme?.theme?.components?.[compType];
-    const styleProps: Record<string, any> = {};
-    ['style' , 'footerStyle', 'bodyStyle' , 'siderStyle', 'headerStyle'].forEach((key: string) => {
-      styleProps[key] = (props as any)[key];
-    });
-
-    useEffect(() => {
-      setInitialCompStyles({
-        dispatch,
-        compTheme,
-        styleProps,
-      });
-    }, []);
-
+    useMergeCompStyles(props, dispatch);
 
     return { ...props, dispatch };
   }).build(),
diff --git a/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx b/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx
index ec7736cb4..207feb6c5 100644
--- a/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx
@@ -11,10 +11,7 @@ import { trans } from "i18n";
 
 import { useContext, useEffect } from "react";
 import { EditorContext } from "comps/editorState";
-import { ThemeContext } from "../utils/themeContext";
-import { CompTypeContext } from "../utils/compTypeContext";
-import { setInitialCompStyles } from "../utils/themeUtil";
-import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 // TODO: after Update of ANTd, introduce Size attribute to ProgressCircle
 
diff --git a/client/packages/lowcoder/src/comps/comps/progressComp.tsx b/client/packages/lowcoder/src/comps/comps/progressComp.tsx
index 57704c7c1..9703c8f64 100644
--- a/client/packages/lowcoder/src/comps/comps/progressComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/progressComp.tsx
@@ -12,10 +12,7 @@ import { trans } from "i18n";
 
 import { useContext, useEffect } from "react";
 import { EditorContext } from "comps/editorState";
-import { ThemeContext } from "../utils/themeContext";
-import { CompTypeContext } from "../utils/compTypeContext";
-import { setInitialCompStyles } from "../utils/themeUtil";
-import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 const getStyle = (style: ProgressStyleType) => {
   return css`
diff --git a/client/packages/lowcoder/src/comps/comps/qrCodeComp.tsx b/client/packages/lowcoder/src/comps/comps/qrCodeComp.tsx
index 53e6a9f94..099ab1d6d 100644
--- a/client/packages/lowcoder/src/comps/comps/qrCodeComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/qrCodeComp.tsx
@@ -15,10 +15,7 @@ import { StringControl } from "comps/controls/codeControl";
 import { useContext, useEffect } from "react";
 import { EditorContext } from "comps/editorState";
 import { withDefault } from "../generators";
-import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
-import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
-import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
-import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 // TODO: add styling for image (size)
 // TODO: add styling for bouding box (individual backround)
diff --git a/client/packages/lowcoder/src/comps/comps/ratingComp.tsx b/client/packages/lowcoder/src/comps/comps/ratingComp.tsx
index 61c0108cf..75a4e2b84 100644
--- a/client/packages/lowcoder/src/comps/comps/ratingComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/ratingComp.tsx
@@ -17,10 +17,7 @@ import { trans } from "i18n";
 
 import { useContext, useEffect, useRef } from "react";
 import { EditorContext } from "comps/editorState";
-import { CompTypeContext } from "../utils/compTypeContext";
-import { ThemeContext } from "../utils/themeContext";
-import { setInitialCompStyles } from "../utils/themeUtil";
-import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 
 const EventOptions = [changeEvent] as const;
diff --git a/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx b/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx
index 658feeb84..451f47365 100644
--- a/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx
+++ b/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx
@@ -42,10 +42,7 @@ import { EditorContext } from "comps/editorState";
 
 import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
 import { DisabledContext } from "comps/generators/uiCompBuilder";
-import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
-import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
-import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
-import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 const RowWrapper = styled(Row)<{
   $style: ResponsiveLayoutRowStyleType;
diff --git a/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx b/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx
index 8a56c14b4..92acbe340 100644
--- a/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx
@@ -26,10 +26,7 @@ import { RichTextEditorStyle, RichTextEditorStyleType } from "comps/controls/sty
 
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
-import { setInitialCompStyles } from "../utils/themeUtil";
-import { ThemeContext } from "../utils/themeContext";
-import { CompTypeContext } from "../utils/compTypeContext";
-import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 const localizeStyle = css`
   & .ql-snow {
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx
index ed2445b20..366264b44 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx
@@ -7,11 +7,7 @@ import { UICompBuilder, withDefault } from "../../generators";
 import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generators/withExposing";
 import { CascaderChildren, CascaderPropertyView, defaultDataSource } from "./cascaderContants";
 import { refMethods } from "comps/generators/withMethodExposing";
-import { useContext, useEffect } from "react";
-import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
-import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
-import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
-import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 const CascaderStyle = styled(Cascader)<{ $style: CascaderStyleType,$childrenInputFieldStyle:ChildrenMultiSelectStyleType }>`
   width: 100%;
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx
index bb03a1f54..30137c366 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx
@@ -24,11 +24,7 @@ import { trans } from "i18n";
 import { RefControl } from "comps/controls/refControl";
 import { migrateOldData } from "comps/generators/simpleGenerators";
 import { fixOldInputCompData } from "../textInputComp/textInputConstants";
-import { useContext, useEffect } from "react";
-import { setInitialCompStyles } from "../../utils/themeUtil";
-import { ThemeContext } from "../../utils/themeContext";
-import { CompTypeContext } from "../../utils/compTypeContext";
-import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 export const getStyle = (style: CheckboxStyleType) => {
   return css`
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx
index deb63e3b9..b71750320 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx
@@ -17,10 +17,7 @@ import { MarginControl } from "../../controls/marginControl";
 import { migrateOldData, withDefault } from "comps/generators/simpleGenerators";
 import { fixOldInputCompData } from "../textInputComp/textInputConstants";
 import { useContext, useEffect } from "react";
-import { setInitialCompStyles } from "../../utils/themeUtil";
-import { ThemeContext } from "../../utils/themeContext";
-import { CompTypeContext } from "../../utils/compTypeContext";
-import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 let MultiSelectBasicComp = (function () {
   const childrenMap = {
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx
index bbf1773d7..5c24ebe3f 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx
@@ -13,11 +13,7 @@ import { EllipsisTextCss, ValueFromOption } from "lowcoder-design";
 import { trans } from "i18n";
 import { fixOldInputCompData } from "../textInputComp/textInputConstants";
 import { migrateOldData } from "comps/generators/simpleGenerators";
-import { ThemeContext } from "../../utils/themeContext";
-import { useContext, useEffect } from "react";
-import { CompTypeContext } from "../../utils/compTypeContext";
-import { setInitialCompStyles } from "../../utils/themeUtil";
-import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 const getStyle = (style: RadioStyleType, inputFieldStyle?:RadioStyleType ) => {
   return css`
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx
index 7bdf72e8e..c1061cc66 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx
@@ -27,10 +27,7 @@ import { useContext, useEffect } from "react";
 import { EditorContext } from "comps/editorState";
 import { migrateOldData, withDefault } from "comps/generators/simpleGenerators";
 import { fixOldInputCompData } from "../textInputComp/textInputConstants";
-import { ThemeContext } from "../../utils/themeContext";
-import { CompTypeContext } from "../../utils/compTypeContext";
-import { setInitialCompStyles } from "../../utils/themeUtil";
-import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 
 const getStyle = (style: SegmentStyleType) => {
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx
index 4f4adac3f..cbb772fb1 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx
@@ -19,10 +19,7 @@ import { useContext, useEffect, useRef } from "react";
 import { RecordConstructorToView } from "lowcoder-core";
 import { fixOldInputCompData } from "../textInputComp/textInputConstants";
 import { migrateOldData, withDefault } from "comps/generators/simpleGenerators";
-import { setInitialCompStyles } from "../../utils/themeUtil";
-import { ThemeContext } from "../../utils/themeContext";
-import { CompTypeContext } from "../../utils/compTypeContext";
-import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 let SelectBasicComp = (function () {
   const childrenMap = {
diff --git a/client/packages/lowcoder/src/comps/comps/signatureComp.tsx b/client/packages/lowcoder/src/comps/comps/signatureComp.tsx
index 5dc3c5423..b5b3c5131 100644
--- a/client/packages/lowcoder/src/comps/comps/signatureComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/signatureComp.tsx
@@ -29,10 +29,7 @@ import { formDataChildren, FormDataPropertyView } from "./formComp/formDataConst
 
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
-import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
-import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
-import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
-import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 const Wrapper = styled.div<{ $style: SignatureStyleType; $isEmpty: boolean }>`
   height: 100%;
diff --git a/client/packages/lowcoder/src/comps/comps/switchComp.tsx b/client/packages/lowcoder/src/comps/comps/switchComp.tsx
index f2169f772..120d4ca25 100644
--- a/client/packages/lowcoder/src/comps/comps/switchComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/switchComp.tsx
@@ -19,10 +19,7 @@ import { blurMethod, clickMethod, focusWithOptions } from "comps/utils/methodUti
 
 import { useContext, useEffect } from "react";
 import { EditorContext } from "comps/editorState";
-import { setInitialCompStyles } from "../utils/themeUtil";
-import { ThemeContext } from "../utils/themeContext";
-import { CompTypeContext } from "../utils/compTypeContext";
-import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 const EventOptions = [
   changeEvent,
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnAvatarsComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnAvatarsComp.tsx
index 690ef6e37..59ff4668a 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnAvatarsComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnAvatarsComp.tsx
@@ -17,9 +17,7 @@ import { optionsControl } from "comps/controls/optionsControl";
 import { BoolControl } from "comps/controls/boolControl";
 import { dropdownControl } from "comps/controls/dropdownControl";
 import { JSONObject } from "util/jsonTypes";
-import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
-import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
-import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 const MenuLinkWrapper = styled.div`
   > a {
@@ -111,22 +109,8 @@ export const ColumnAvatarsComp = (function () {
   return new ColumnTypeCompBuilder(
     childrenMap,
     (props , dispatch) => {
-
-      const theme = useContext(ThemeContext);
-      const compType = useContext(CompTypeContext);
-      const compTheme = theme?.theme?.components?.[compType];
-      const styleProps: Record<string, any> = {};
-      ['style'].forEach((key: string) => {
-        styleProps[key] = (props as any)[key];
-      });
-  
-      useEffect(() => {
-        setInitialCompStyles({
-          dispatch,
-          compTheme,
-          styleProps,
-        });
-      }, []);
+      
+      useMergeCompStyles(props, dispatch);
 
       return (
         <Container
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
index 59a748dad..14c910fe9 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
@@ -41,9 +41,7 @@ import { messageInstance } from "lowcoder-design/src/components/GlobalInstances"
 import { ReactRef, ResizeHandleAxis } from "layout/gridLayoutPropTypes";
 import { CellColorViewType } from "./column/tableColumnComp";
 import { defaultTheme } from "@lowcoder-ee/constants/themeConstants";
-import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
-import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
-import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 import { childrenToProps } from "@lowcoder-ee/comps/generators/multi";
 
 
@@ -779,22 +777,8 @@ export function TableCompView(props: {
   }, [pagination, data]);
 
   const childrenProps = childrenToProps(comp.children);
-  const theme = useContext(ThemeContext);
-  const compType = useContext(CompTypeContext);
-  const compTheme = theme?.theme?.components?.[compType];
-
-  const styleProps: Record<string, any> = {};
-  ['style', 'rowStyle', 'toolbarStyle', 'headerStyle', 'columnsStyle'].forEach((key: string) => {
-    styleProps[key] = (childrenProps as any)[key];
-  });
-
-  useEffect(() => {
-    setInitialCompStyles({
-      dispatch: comp.dispatch,
-      compTheme,
-      styleProps,
-    });
-  }, []);
+  
+  useMergeCompStyles(childrenProps, comp.dispatch)
 
   const handleChangeEvent = useCallback(
     (eventName: TableEventOptionValues) => {
diff --git a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx
index 13d2dfd7a..9d77152cb 100644
--- a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx
@@ -35,10 +35,7 @@ import { checkIsMobile } from "util/commonUtils";
 import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
 import { BoolControl } from "comps/controls/boolControl";
 import { PositionControl } from "comps/controls/dropdownControl";
-import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
-import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
-import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
-import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 const EVENT_OPTIONS = [
   {
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx
index 957d5799d..eb38451f3 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx
@@ -35,10 +35,7 @@ import { migrateOldData, withDefault } from "comps/generators/simpleGenerators";
 
 import React, { useContext, useEffect } from "react";
 import { EditorContext } from "comps/editorState";
-import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
-import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
-import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
-import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 /**
  * Input Comp
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx
index b4441f25b..4796961b9 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx
@@ -57,11 +57,7 @@ import {
 import React, { useContext } from "react";
 import { EditorContext } from "comps/editorState";
 import { migrateOldData } from "comps/generators/simpleGenerators";
-
-import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
-import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
-import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
-import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 const Wrapper = styled.div<{
   $style: InputLikeStyleType;
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx
index b15050ab2..238f1e7ec 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx
@@ -42,10 +42,7 @@ import { RefControl } from "comps/controls/refControl";
 import React, { useContext, useEffect } from "react";
 import { EditorContext } from "comps/editorState";
 import { migrateOldData } from "comps/generators/simpleGenerators";
-import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
-import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
-import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
-import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 const PasswordStyle = styled(InputPassword)<{
   $style: InputLikeStyleType;
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx
index 80cf33a1a..75028b40c 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx
@@ -37,10 +37,7 @@ import { blurMethod, focusWithOptions } from "comps/utils/methodUtils";
 import React, { useContext, useEffect } from "react";
 import { EditorContext } from "comps/editorState";
 import { migrateOldData } from "comps/generators/simpleGenerators";
-import { setInitialCompStyles } from "../../utils/themeUtil";
-import { ThemeContext } from "../../utils/themeContext";
-import { CompTypeContext } from "../../utils/compTypeContext";
-import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 const TextAreaStyled = styled(TextArea)<{
   $style: InputLikeStyleType;
diff --git a/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx b/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx
index 7d1e00ec8..8f24b2cf8 100644
--- a/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx
@@ -47,10 +47,7 @@ import { timelineDate, timelineNode, TimelineDataTooltip } from "./timelineConst
 import { convertTimeLineData } from "./timelineUtils";
 import { default as Timeline } from "antd/es/timeline";
 import { EditorContext } from "comps/editorState";
-import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
-import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
-import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
-import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 const EventOptions = [
   clickEvent,
diff --git a/client/packages/lowcoder/src/comps/comps/transferComp.tsx b/client/packages/lowcoder/src/comps/comps/transferComp.tsx
index 34355fb83..d124e8410 100644
--- a/client/packages/lowcoder/src/comps/comps/transferComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/transferComp.tsx
@@ -16,11 +16,7 @@ import styled, { css } from "styled-components";
 import { useContext, useEffect, useRef, useState } from "react";
 import { valueComp, withDefault } from "../generators";
 import type { TransferDirection } from 'antd/es/transfer';
-import { _ } from "core-js";
-import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
-import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
-import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
-import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 const Container = styled.div<{ $style: TransferStyleType }>`
   height: 100%;
diff --git a/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx b/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx
index fc514323b..4e3419ffe 100644
--- a/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx
@@ -33,10 +33,7 @@ import { SelectEventHandlerControl } from "comps/controls/eventHandlerControl";
 import { trans } from "i18n";
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
-import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
-import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
-import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
-import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 type TreeStyleType = StyleConfigType<typeof TreeStyle>;
 
diff --git a/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx b/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx
index 679b4213c..5eb322d0a 100644
--- a/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx
@@ -36,10 +36,7 @@ import { BaseSelectRef } from "rc-select";
 import { RefControl } from "comps/controls/refControl";
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
-import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
-import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
-import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
-import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 const StyledTreeSelect = styled(TreeSelect)<{ $style: TreeSelectStyleType }>`
   width: 100%;
diff --git a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainerComp.tsx
index 4b293c335..50e62055a 100644
--- a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainerComp.tsx
@@ -27,9 +27,7 @@ import { SimpleContainerComp } from "../containerBase/simpleContainerComp";
 import { ContainerBodyChildComp } from "./containerBodyChildComp";
 import { trans } from "i18n";
 import { ControlNode } from "lowcoder-design";
-import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
-import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
-import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 const childrenMap = {
   header: SimpleContainerComp,
@@ -52,22 +50,7 @@ const childrenMap = {
 // Compatible with old style data 2022-8-15
 const TriContainerBaseComp = migrateOldData(
   new MultiCompBuilder(childrenMap, (props, dispatch) => {
-    const theme = useContext(ThemeContext);
-    const compType = useContext(CompTypeContext);
-    const compTheme = theme?.theme?.components?.[compType];
-    // Filter style props from children props
-    const styleProps: Record<string, any> = {};
-    ['style', 'headerStyle', 'bodyStyle', 'footerStyle'].forEach((key: string) => {
-      styleProps[key] = (props as any)[key];
-    });
-    // Update comp styles with combination of default style and comp theme style 
-    useEffect(() => {
-      setInitialCompStyles({
-        dispatch,
-        compTheme,
-        styleProps,
-      });
-    }, []);
+    useMergeCompStyles(props, dispatch);
 
     return { ...props, dispatch };
   }).build(),
diff --git a/client/packages/lowcoder/src/util/hooks.ts b/client/packages/lowcoder/src/util/hooks.ts
index 40fc90d8d..4c9227423 100644
--- a/client/packages/lowcoder/src/util/hooks.ts
+++ b/client/packages/lowcoder/src/util/hooks.ts
@@ -36,12 +36,7 @@ export function isUserViewMode(params?: AppPathParams) {
  * whether it's user view mode (not editing)
  */
 export function useUserViewMode() {
-  let params;
-  try {
-    params = useParams<AppPathParams>();
-  } catch(error) {
-    console.error(error);
-  }
+  const params = useParams<AppPathParams>();
   return isUserViewMode(params);
 }
 

From 086334c5a4b5e17abfdb70cb952f819297584a6e Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Wed, 3 Jul 2024 14:27:47 +0500
Subject: [PATCH 56/57] fixed imports

---
 .../lowcoder/src/comps/comps/layout/mobileTabLayout.tsx     | 2 +-
 .../packages/lowcoder/src/comps/comps/layout/navLayout.tsx  | 2 +-
 .../src/comps/comps/selectInputComp/stepControl.tsx         | 6 +-----
 client/packages/lowcoder/src/comps/comps/textComp.tsx       | 5 -----
 4 files changed, 3 insertions(+), 12 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx b/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx
index 63de78fd3..e76ef8c0b 100644
--- a/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx
+++ b/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx
@@ -31,8 +31,8 @@ import { AlignCenter } from "lowcoder-design";
 import { AlignLeft } from "lowcoder-design";
 import { AlignRight } from "lowcoder-design";
 import { LayoutActionComp } from "./layoutActionComp";
-import { clickEvent, eventHandlerControl } from "@lowcoder-ee/index.sdk";
 import { defaultTheme } from "@lowcoder-ee/constants/themeConstants";
+import { clickEvent, eventHandlerControl } from "@lowcoder-ee/comps/controls/eventHandlerControl";
 
 const TabBar = React.lazy(() => import("antd-mobile/es/components/tab-bar"));
 const TabBarItem = React.lazy(() =>
diff --git a/client/packages/lowcoder/src/comps/comps/layout/navLayout.tsx b/client/packages/lowcoder/src/comps/comps/layout/navLayout.tsx
index 9000cf528..c40870c1f 100644
--- a/client/packages/lowcoder/src/comps/comps/layout/navLayout.tsx
+++ b/client/packages/lowcoder/src/comps/comps/layout/navLayout.tsx
@@ -40,7 +40,7 @@ import {
   jsonMenuItems,
   menuItemStyleOptions
 } from "./navLayoutConstants";
-import { clickEvent, eventHandlerControl } from "@lowcoder-ee/index.sdk";
+import { clickEvent, eventHandlerControl } from "@lowcoder-ee/comps/controls/eventHandlerControl";
 
 const { Header } = Layout;
 
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx
index adc29e082..72e0f4f2e 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx
@@ -18,11 +18,7 @@ import { RefControl } from "comps/controls/refControl";
 import { dropdownControl } from "comps/controls/dropdownControl";
 import { useContext, useState, useEffect } from "react";
 import { EditorContext } from "comps/editorState";
-import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
-import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
-import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
-import { useMergeCompStyles } from "@lowcoder-ee/index.sdk";
-
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 const sizeOptions = [
   {
diff --git a/client/packages/lowcoder/src/comps/comps/textComp.tsx b/client/packages/lowcoder/src/comps/comps/textComp.tsx
index 81c880e77..52dc8355a 100644
--- a/client/packages/lowcoder/src/comps/comps/textComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textComp.tsx
@@ -23,11 +23,6 @@ import { EditorContext } from "comps/editorState";
 import { clickEvent, eventHandlerControl } from "../controls/eventHandlerControl";
 
 const EventOptions = [clickEvent] as const;
-import { ThemeContext } from "../utils/themeContext";
-import { CompTypeContext } from "../utils/compTypeContext";
-import { changeChildAction } from "lowcoder-core";
-import { setInitialCompStyles } from "../utils/themeUtil";
-import { BoolControl } from "../controls/boolControl";
 import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 const getStyle = (style: TextStyleType) => {

From f1077464ba389db6fa7aef2c2837cfe2abb42099 Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Wed, 3 Jul 2024 14:30:59 +0500
Subject: [PATCH 57/57] small fix

---
 client/packages/lowcoder/src/comps/comps/textComp.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/packages/lowcoder/src/comps/comps/textComp.tsx b/client/packages/lowcoder/src/comps/comps/textComp.tsx
index 52dc8355a..f5ea00949 100644
--- a/client/packages/lowcoder/src/comps/comps/textComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textComp.tsx
@@ -21,9 +21,9 @@ import { PaddingControl } from "../controls/paddingControl";
 import React, { useContext, useEffect } from "react";
 import { EditorContext } from "comps/editorState";
 import { clickEvent, eventHandlerControl } from "../controls/eventHandlerControl";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 const EventOptions = [clickEvent] as const;
-import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 const getStyle = (style: TextStyleType) => {
   return css`