From f57fbda2d65234d388593f7147a688e653f673ef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sedat=20=C3=96ZT=C3=9CRK?=
 <76204082+iamsedatozturk@users.noreply.github.com>
Date: Fri, 27 Mar 2026 16:49:15 +0300
Subject: [PATCH] Theme Configuration

---
 .../Seeds/LanguagesData.json                  |  16 ++-
 .../ThemeConfigurator/LayoutSwitcher.tsx      |   3 +-
 .../ThemeConfigurator/NavModeSwitcher.tsx     |  28 +++--
 .../ThemeConfigurator/StyleSwitcher.tsx       | 113 ++++++++++++++++++
 .../ThemeConfigurator/ThemeConfigurator.tsx   |  76 ++++++------
 ui/src/constants/theme.constant.ts            |   4 +-
 ui/src/proxy/theme/models.ts                  |   1 +
 ui/src/proxy/theme/theme.config.ts            |   5 +-
 ui/src/store/theme.model.ts                   |  68 +++--------
 ui/src/views/admin/listForm/edit/options.ts   | 101 ++++++++++++++++
 ui/src/views/settings/Settings.tsx            |  15 +--
 11 files changed, 315 insertions(+), 115 deletions(-)
 create mode 100644 ui/src/components/template/ThemeConfigurator/StyleSwitcher.tsx

diff --git a/api/src/Sozsoft.Platform.DbMigrator/Seeds/LanguagesData.json b/api/src/Sozsoft.Platform.DbMigrator/Seeds/LanguagesData.json
index f173874..25a54ac 100644
--- a/api/src/Sozsoft.Platform.DbMigrator/Seeds/LanguagesData.json
+++ b/api/src/Sozsoft.Platform.DbMigrator/Seeds/LanguagesData.json
@@ -5349,14 +5349,14 @@
         {
             "resourceName": "Platform",
             "key": "SidePanel.Mode",
-            "en": "Mode",
-            "tr": "Mod"
+            "en": "Dark Mode",
+            "tr": "Karanlık Mod"
         },
         {
             "resourceName": "Platform",
             "key": "SidePanel.Mode.Description",
             "en": "Switch theme to dark mode",
-            "tr": "Switch theme to dark mode"
+            "tr": "Tema karanlık moda geçiş yap"
         },
         {
             "resourceName": "Platform",
@@ -5373,8 +5373,8 @@
         {
             "resourceName": "Platform",
             "key": "SidePanel.NavMode",
-            "en": "Nav Mode",
-            "tr": "Nav Mod"
+            "en": "Navigation Mode",
+            "tr": "Gezinme Modu"
         },
         {
             "resourceName": "Platform",
@@ -17796,6 +17796,12 @@
             "key": "App.DeveloperKit.DynamicServices.Editor.CharCount",
             "en": "Char:",
             "tr": "Karakter:"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "SuccessfullySaved",
+            "en": "Successfully Saved",
+            "tr": "Başarıyla Kaydedildi"
         }
     ]
 }
diff --git a/ui/src/components/template/ThemeConfigurator/LayoutSwitcher.tsx b/ui/src/components/template/ThemeConfigurator/LayoutSwitcher.tsx
index 4b888c4..e4f920e 100644
--- a/ui/src/components/template/ThemeConfigurator/LayoutSwitcher.tsx
+++ b/ui/src/components/template/ThemeConfigurator/LayoutSwitcher.tsx
@@ -12,6 +12,7 @@ import {
   LAYOUT_TYPE_SIMPLE,
   LAYOUT_TYPE_DECKED,
   LAYOUT_TYPE_BLANK,
+  NAV_MODE_TRANSPARENT,
 } from '@/constants/theme.constant'
 import type { LayoutType } from '@/proxy/theme/models'
 import { useLocalization } from '@/utils/hooks/useLocalization'
@@ -57,7 +58,7 @@ const layouts = [
 
 const LayoutSwitcher = () => {
   const type = useStoreState((state) => state.theme.layout.type)
-  const { setLayout } = useStoreActions((actions) => actions.theme)
+  const { setLayout, setNavMode } = useStoreActions((actions) => actions.theme)
 
   const onLayoutSelect = (val: LayoutType) => {
     setLayout(val)
diff --git a/ui/src/components/template/ThemeConfigurator/NavModeSwitcher.tsx b/ui/src/components/template/ThemeConfigurator/NavModeSwitcher.tsx
index 3b640cc..71fcfbb 100644
--- a/ui/src/components/template/ThemeConfigurator/NavModeSwitcher.tsx
+++ b/ui/src/components/template/ThemeConfigurator/NavModeSwitcher.tsx
@@ -1,23 +1,31 @@
 import Radio from '@/components/ui/Radio'
 import { useStoreState, useStoreActions } from '@/store'
-import { NAV_MODE_THEMED } from '@/constants/theme.constant'
-
-type NavModeParam = 'default' | 'themed'
+import {
+  NAV_MODE_DARK,
+  NAV_MODE_LIGHT,
+  NAV_MODE_THEMED,
+  NAV_MODE_TRANSPARENT,
+} from '@/constants/theme.constant'
+import { NavMode } from '@/proxy/theme/models'
+import { availableNavColorLayouts } from '@/proxy/theme/theme.config'
 
 const NavModeSwitcher = () => {
-  const navMode = useStoreState((state) => state.theme.navMode)
+  const { navMode, layout } = useStoreState((state) => state.theme)
   const { setNavMode } = useStoreActions((actions) => actions.theme)
 
-  const onSetNavMode = (val: NavModeParam) => {
+  const onSetNavMode = (val: NavMode) => {
     setNavMode(val)
   }
 
   return (
-    <Radio.Group
-      value={navMode === NAV_MODE_THEMED ? NAV_MODE_THEMED : 'default'}
-      onChange={onSetNavMode}
-    >
-      <Radio value="default">Default</Radio>
+    <Radio.Group value={navMode} onChange={onSetNavMode}>
+      <Radio value={NAV_MODE_TRANSPARENT}>Transparent</Radio>
+      {!availableNavColorLayouts.includes(layout.type) && (
+        <>
+          <Radio value={NAV_MODE_LIGHT}>Light</Radio>
+          <Radio value={NAV_MODE_DARK}>Dark</Radio>
+        </>
+      )}
       <Radio value={NAV_MODE_THEMED}>Themed</Radio>
     </Radio.Group>
   )
diff --git a/ui/src/components/template/ThemeConfigurator/StyleSwitcher.tsx b/ui/src/components/template/ThemeConfigurator/StyleSwitcher.tsx
new file mode 100644
index 0000000..d559067
--- /dev/null
+++ b/ui/src/components/template/ThemeConfigurator/StyleSwitcher.tsx
@@ -0,0 +1,113 @@
+import { HiCheck } from 'react-icons/hi'
+import { components } from 'react-select'
+
+import { Select, toast } from '@/components/ui'
+import { styleMapOptions } from '@/views/admin/listForm/edit/options'
+import Notification from '@/components/ui/Notification'
+import { useLocalization } from '@/utils/hooks/useLocalization'
+import { useStoreActions, useStoreState } from '@/store'
+import { updateSettingValues } from '@/services/setting-ui.service'
+import React from 'react'
+
+const StyleSwitcher = () => {
+  const { translate } = useLocalization()
+  const { setMode, setStyle, abpConfig } = useStoreActions((actions) => ({
+    setMode: actions.theme.setMode,
+    setStyle: actions.theme.setStyle,
+    abpConfig: actions.abpConfig.getConfig,
+  }))
+  const { style } = useStoreState((state) => state.theme)
+
+  const onSetStyle = React.useCallback(
+    async (val: string) => {
+      setStyle(val)
+      setMode(val.includes('.dark') ? 'dark' : 'light')
+      const values: Record<string, string> = {
+        App_SiteManagement_Theme_Style: val,
+      }
+      const resp = await updateSettingValues(values)
+      if (resp.status !== 204) {
+        toast.push(<Notification title={resp?.error?.message} type="danger" />, {
+          placement: 'top-end',
+        })
+      }
+      abpConfig(false)
+    },
+    [setStyle, setMode, abpConfig, translate],
+  )
+
+  // Custom Option
+  const CustomSelectOption = ({ innerProps, label, data, isSelected }: any) => {
+    const { border, fill } = data.color
+    return (
+      <div
+        className={`flex items-center justify-between p-2 cursor-pointer ${
+          isSelected ? 'bg-gray-100 dark:bg-gray-500' : 'hover:bg-gray-50 dark:hover:bg-gray-600'
+        }`}
+        {...innerProps}
+      >
+        <div className="flex items-center">
+          <span
+            style={{
+              display: 'inline-block',
+              width: 20,
+              height: 20,
+              borderRadius: '50%',
+              background: fill,
+              border: `4px solid ${border}`,
+              boxSizing: 'border-box',
+              marginRight: 8,
+              boxShadow: '0 0 0 1px #ccc', // dış 1px border
+            }}
+          />
+          <span>{label}</span>
+        </div>
+        {isSelected && <HiCheck className="text-emerald-500 text-xl" />}
+      </div>
+    )
+  }
+
+  // Custom Control
+  const CustomControl = ({ children, ...props }: any) => {
+    const selected = props.getValue()[0]
+    const { border, fill } = selected?.color
+    return (
+      <components.Control {...props}>
+        {selected ? (
+          <div
+            className="flex items-center"
+            style={{ marginLeft: 8, border: '1px solid #ccc', borderRadius: '50%' }}
+          >
+            <span
+              style={{
+                display: 'inline-block',
+                width: 20,
+                height: 20,
+                borderRadius: '50%',
+                background: fill,
+                border: `4px solid ${border}`,
+              }}
+            />
+          </div>
+        ) : null}
+        {children}
+      </components.Control>
+    )
+  }
+
+  return (
+    <Select
+      value={styleMapOptions.find((o) => o.value === style)}
+      options={styleMapOptions}
+      onChange={(option: any) => {
+        onSetStyle(option.value)
+      }}
+      components={{
+        Option: CustomSelectOption,
+        Control: CustomControl,
+      }}
+    />
+  )
+}
+
+export default StyleSwitcher
diff --git a/ui/src/components/template/ThemeConfigurator/ThemeConfigurator.tsx b/ui/src/components/template/ThemeConfigurator/ThemeConfigurator.tsx
index 9ebf9a4..7ed4d78 100644
--- a/ui/src/components/template/ThemeConfigurator/ThemeConfigurator.tsx
+++ b/ui/src/components/template/ThemeConfigurator/ThemeConfigurator.tsx
@@ -5,47 +5,55 @@ import DirectionSwitcher from './DirectionSwitcher'
 import NavModeSwitcher from './NavModeSwitcher'
 import CopyButton from './CopyButton'
 import { useLocalization } from '@/utils/hooks/useLocalization'
+import { useStoreState } from '@/store'
+import StyleSwitcher from './StyleSwitcher'
 
 export type ThemeConfiguratorProps = {
-    callBackClose?: () => void
+  callBackClose?: () => void
 }
 
 const ThemeConfigurator = ({ callBackClose }: ThemeConfiguratorProps) => {
-    const { translate } = useLocalization()
+  const { translate } = useLocalization()
 
-    return (
-        <div className="flex flex-col h-full justify-between">
-            <div className="flex flex-col gap-y-10 mb-6">
-                <div className="flex items-center justify-between">
-                    <div>
-                        <h6>{translate('::SidePanel.Mode')}</h6>
-                        <span>{translate('::SidePanel.Mode.Description')}</span>
-                    </div>
-                    <ModeSwitcher />
-                </div>
-                <div className="flex items-center justify-between">
-                    <div>
-                        <h6>{translate('::SidePanel.Direction')}</h6>
-                        <span>{translate('::SidePanel.Direction.Description')}</span>
-                    </div>
-                    <DirectionSwitcher callBackClose={callBackClose} />
-                </div>
-                <div>
-                    <h6 className="mb-3">{translate('::SidePanel.NavMode')}</h6>
-                    <NavModeSwitcher />
-                </div>
-                <div>
-                    <h6 className="mb-3">{translate('::SidePanel.Themed')}</h6>
-                    <ThemeSwitcher />
-                </div>
-                <div>
-                    <h6 className="mb-3">{translate('::SidePanel.Layout')}</h6>
-                    <LayoutSwitcher />
-                </div>
-            </div>
-            <CopyButton />
+  const navMode = useStoreState((state) => state.theme.navMode)
+
+  return (
+    <div className="flex flex-col h-full justify-between">
+      <div className="flex flex-col gap-y-5 mb-6">
+        <div className="flex items-center justify-between">
+          <div>
+            <h6>{translate('::SidePanel.Mode')}</h6>
+            <span>{translate('::SidePanel.Mode.Description')}</span>
+          </div>
+          <ModeSwitcher />
         </div>
-    )
+        <div className="flex items-center justify-between">
+          <div>
+            <h6>{translate('::SidePanel.Direction')}</h6>
+            <span>{translate('::SidePanel.Direction.Description')}</span>
+          </div>
+          <DirectionSwitcher callBackClose={callBackClose} />
+        </div>
+        <div>
+          <h6 className="mb-3">{translate('::App.SiteManagement.Theme.Style')}</h6>
+          <StyleSwitcher />
+        </div>
+        <div>
+          <h6 className="mb-3">{translate('::SidePanel.Layout')}</h6>
+          <LayoutSwitcher />
+        </div>
+        <div>
+          <h6 className="mb-3">{translate('::SidePanel.NavMode')}</h6>
+          <NavModeSwitcher />
+        </div>
+        <div>
+          <h6 className="mb-3">{translate('::SidePanel.Themed')}</h6>
+          <ThemeSwitcher />
+        </div>
+      </div>
+      <CopyButton />
+    </div>
+  )
 }
 
 export default ThemeConfigurator
diff --git a/ui/src/constants/theme.constant.ts b/ui/src/constants/theme.constant.ts
index 3950af8..bb2b403 100644
--- a/ui/src/constants/theme.constant.ts
+++ b/ui/src/constants/theme.constant.ts
@@ -1,3 +1,5 @@
+export const PREFIX = "App";
+
 export const DIR_RTL = 'rtl'
 export const DIR_LTR = 'ltr'
 export const MODE_LIGHT = 'light'
@@ -43,4 +45,4 @@ export const THEME_ENUM = {
   NAV_MODE_DARK: NAV_MODE_DARK,
   NAV_MODE_THEMED: NAV_MODE_THEMED,
   NAV_MODE_TRANSPARENT: NAV_MODE_TRANSPARENT,
-} as const
+} as const
\ No newline at end of file
diff --git a/ui/src/proxy/theme/models.ts b/ui/src/proxy/theme/models.ts
index 6c9eb1c..da1c717 100644
--- a/ui/src/proxy/theme/models.ts
+++ b/ui/src/proxy/theme/models.ts
@@ -33,4 +33,5 @@ export type ThemeConfig = {
         type: LayoutType
         sideNavCollapse: boolean
     }
+    style: string
 }
\ No newline at end of file
diff --git a/ui/src/proxy/theme/theme.config.ts b/ui/src/proxy/theme/theme.config.ts
index efcf17d..dd67619 100644
--- a/ui/src/proxy/theme/theme.config.ts
+++ b/ui/src/proxy/theme/theme.config.ts
@@ -1,4 +1,4 @@
-import { THEME_ENUM } from '@/constants/theme.constant'
+import { LAYOUT_TYPE_BLANK, LAYOUT_TYPE_DECKED, LAYOUT_TYPE_SIMPLE, THEME_ENUM } from '@/constants/theme.constant'
 import { ThemeConfig } from '@/proxy/theme/models'
 
 export const themeConfig: ThemeConfig = {
@@ -14,4 +14,7 @@ export const themeConfig: ThemeConfig = {
     type: THEME_ENUM.LAYOUT_TYPE_SIMPLE,
     sideNavCollapse: false,
   },
+  style: 'dx.material.blue.light.compact',
 }
+
+export const availableNavColorLayouts = [LAYOUT_TYPE_DECKED, LAYOUT_TYPE_SIMPLE, LAYOUT_TYPE_BLANK]
diff --git a/ui/src/store/theme.model.ts b/ui/src/store/theme.model.ts
index 69d600c..871d365 100644
--- a/ui/src/store/theme.model.ts
+++ b/ui/src/store/theme.model.ts
@@ -1,16 +1,13 @@
 import type { Action } from 'easy-peasy'
 import { action } from 'easy-peasy'
-import { themeConfig } from '../proxy/theme/theme.config'
+import { availableNavColorLayouts, themeConfig } from '../proxy/theme/theme.config'
 import {
+  LAYOUT_TYPE_BLANK,
   LAYOUT_TYPE_CLASSIC,
   LAYOUT_TYPE_DECKED,
   LAYOUT_TYPE_MODERN,
+  LAYOUT_TYPE_SIMPLE,
   LAYOUT_TYPE_STACKED_SIDE,
-  MODE_DARK,
-  MODE_LIGHT,
-  NAV_MODE_DARK,
-  NAV_MODE_LIGHT,
-  NAV_MODE_THEMED,
   NAV_MODE_TRANSPARENT,
 } from '../constants/theme.constant'
 import { Direction, Mode, NavMode } from '../proxy/theme/models'
@@ -29,6 +26,7 @@ export interface ThemeStoreModel {
     type: string
     sideNavCollapse: boolean
   }
+  style: string
 }
 
 export interface ThemeStoreActions {
@@ -37,34 +35,26 @@ export interface ThemeStoreActions {
   setLayout: Action<ThemeStoreModel, string>
   setPreviousLayout: Action<ThemeStoreModel, string>
   setSideNavCollapse: Action<ThemeStoreModel, boolean>
-  setNavMode: Action<ThemeStoreModel, NavMode | 'default'>
+  setNavMode: Action<ThemeStoreModel, NavMode>
   setPanelExpand: Action<ThemeStoreModel, boolean>
   setThemeColor: Action<ThemeStoreModel, string>
   setThemeColorLevel: Action<ThemeStoreModel, number>
+  setStyle: Action<ThemeStoreModel, string>
 }
 
 export type ThemeModel = ThemeStoreModel & ThemeStoreActions
 
-const availableNavColorLayouts = [LAYOUT_TYPE_CLASSIC, LAYOUT_TYPE_STACKED_SIDE, LAYOUT_TYPE_DECKED]
-
-const initialNavMode = () => {
-  if (themeConfig.layout.type === LAYOUT_TYPE_MODERN && themeConfig.navMode !== NAV_MODE_THEMED) {
-    return NAV_MODE_TRANSPARENT
-  }
-
-  return themeConfig.navMode
-}
-
 const initialState: ThemeStoreModel = {
   themeColor: themeConfig.themeColor,
   direction: themeConfig.direction,
   mode: themeConfig.mode,
   primaryColorLevel: themeConfig.primaryColorLevel,
   panelExpand: themeConfig.panelExpand,
-  navMode: initialNavMode(),
+  navMode: NAV_MODE_TRANSPARENT,
   layout: themeConfig.layout,
   cardBordered: true,
   controlSize: 'md',
+  style: themeConfig.style,
 }
 
 export const themeModel: ThemeModel = {
@@ -73,32 +63,15 @@ export const themeModel: ThemeModel = {
     state.direction = payload
   }),
   setMode: action((state, payload) => {
-    const availableColorNav = availableNavColorLayouts.includes(state.layout.type)
-
-    if (availableColorNav && payload === MODE_DARK && state.navMode !== NAV_MODE_THEMED) {
-      state.navMode = NAV_MODE_DARK
-    }
-    if (availableColorNav && payload === MODE_LIGHT && state.navMode !== NAV_MODE_THEMED) {
-      state.navMode = NAV_MODE_LIGHT
-    }
     state.mode = payload
   }),
   setLayout: action((state, payload) => {
     state.cardBordered = payload === LAYOUT_TYPE_MODERN
-    if (payload === LAYOUT_TYPE_MODERN) {
+
+    if (availableNavColorLayouts.includes(payload)) {
       state.navMode = NAV_MODE_TRANSPARENT
     }
 
-    const availableColorNav = availableNavColorLayouts.includes(payload)
-
-    if (availableColorNav && state.mode === MODE_LIGHT) {
-      state.navMode = NAV_MODE_LIGHT
-    }
-
-    if (availableColorNav && state.mode === MODE_DARK) {
-      state.navMode = NAV_MODE_DARK
-    }
-
     state.layout.type = payload
   }),
   setPreviousLayout: action((state, payload) => {
@@ -108,23 +81,7 @@ export const themeModel: ThemeModel = {
     state.layout.sideNavCollapse = payload
   }),
   setNavMode: action((state, payload) => {
-    if (payload !== 'default') {
-      state.navMode = payload
-    } else {
-      if (state.layout.type === LAYOUT_TYPE_MODERN) {
-        state.navMode = NAV_MODE_TRANSPARENT
-      }
-
-      const availableColorNav = availableNavColorLayouts.includes(state.layout.type)
-
-      if (availableColorNav && state.mode === MODE_LIGHT) {
-        state.navMode = NAV_MODE_LIGHT
-      }
-
-      if (availableColorNav && state.mode === MODE_DARK) {
-        state.navMode = NAV_MODE_DARK
-      }
-    }
+    state.navMode = payload
   }),
   setPanelExpand: action((state, payload) => {
     state.panelExpand = payload
@@ -135,4 +92,7 @@ export const themeModel: ThemeModel = {
   setThemeColorLevel: action((state, payload) => {
     state.primaryColorLevel = payload
   }),
+  setStyle: action((state, payload) => {
+    state.style = payload
+  }),
 }
diff --git a/ui/src/views/admin/listForm/edit/options.ts b/ui/src/views/admin/listForm/edit/options.ts
index 8ba595b..5a41b23 100644
--- a/ui/src/views/admin/listForm/edit/options.ts
+++ b/ui/src/views/admin/listForm/edit/options.ts
@@ -27,6 +27,7 @@ import {
 } from '../../../../proxy/admin/list-form-field/models'
 import { enumToList } from '../../../../utils/enumUtils'
 import { colSpan, iconList, WidgetColorEnum } from '@/components/ui/Widget/iconList'
+import { PREFIX } from '@/constants/theme.constant'
 
 export const overflowWrapOptions = [
   { value: 'normal', label: 'Normal' },
@@ -457,6 +458,54 @@ export const sqlDataTypeToDbType = (sqlType: string): DbTypeEnum => {
   return DbTypeEnum.String
 }
 
+export const StyleEnum = {
+  [`${PREFIX}.Setting.light`]: 'dx.light',
+  [`${PREFIX}.Setting.light.compact`]: 'dx.light.compact',
+  [`${PREFIX}.Setting.dark`]: 'dx.dark',
+  [`${PREFIX}.Setting.dark.compact`]: 'dx.dark.compact',
+  [`${PREFIX}.Setting.contrast`]: 'dx.contrast',
+  [`${PREFIX}.Setting.contrast.compact`]: 'dx.contrast.compact',
+  [`${PREFIX}.Setting.carmine`]: 'dx.carmine',
+  [`${PREFIX}.Setting.darkmoon`]: 'dx.darkmoon',
+  [`${PREFIX}.Setting.softblue`]: 'dx.softblue',
+  [`${PREFIX}.Setting.darkviolet`]: 'dx.darkviolet',
+  [`${PREFIX}.Setting.greenmist`]: 'dx.greenmist',
+
+  // material
+  [`${PREFIX}.Setting.material.blue.light`]: 'dx.material.blue.light',
+  [`${PREFIX}.Setting.material.blue.dark`]: 'dx.material.blue.dark',
+  [`${PREFIX}.Setting.material.lime.light`]: 'dx.material.lime.light',
+  [`${PREFIX}.Setting.material.lime.dark`]: 'dx.material.lime.dark',
+  [`${PREFIX}.Setting.material.orange.light`]: 'dx.material.orange.light',
+  [`${PREFIX}.Setting.material.orange.dark`]: 'dx.material.orange.dark',
+  [`${PREFIX}.Setting.material.purple.light`]: 'dx.material.purple.light',
+  [`${PREFIX}.Setting.material.purple.dark`]: 'dx.material.purple.dark',
+  [`${PREFIX}.Setting.material.teal.light`]: 'dx.material.teal.light',
+  [`${PREFIX}.Setting.material.teal.dark`]: 'dx.material.teal.dark',
+
+  [`${PREFIX}.Setting.material.blue.light.compact`]: 'dx.material.blue.light.compact',
+  [`${PREFIX}.Setting.material.blue.dark.compact`]: 'dx.material.blue.dark.compact',
+  [`${PREFIX}.Setting.material.lime.light.compact`]: 'dx.material.lime.light.compact',
+  [`${PREFIX}.Setting.material.lime.dark.compact`]: 'dx.material.lime.dark.compact',
+  [`${PREFIX}.Setting.material.orange.light.compact`]: 'dx.material.orange.light.compact',
+  [`${PREFIX}.Setting.material.orange.dark.compact`]: 'dx.material.orange.dark.compact',
+  [`${PREFIX}.Setting.material.purple.light.compact`]: 'dx.material.purple.light.compact',
+  [`${PREFIX}.Setting.material.purple.dark.compact`]: 'dx.material.purple.dark.compact',
+  [`${PREFIX}.Setting.material.teal.light.compact`]: 'dx.material.teal.light.compact',
+  [`${PREFIX}.Setting.material.teal.dark.compact`]: 'dx.material.teal.dark.compact',
+
+  // fluent
+  [`${PREFIX}.Setting.fluent.blue.dark`]: 'dx.fluent.blue.dark',
+  [`${PREFIX}.Setting.fluent.blue.light`]: 'dx.fluent.blue.light',
+  [`${PREFIX}.Setting.fluent.saas.dark`]: 'dx.fluent.saas.dark',
+  [`${PREFIX}.Setting.fluent.saas.light`]: 'dx.fluent.saas.light',
+
+  [`${PREFIX}.Setting.fluent.blue.dark.compact`]: 'dx.fluent.blue.dark.compact',
+  [`${PREFIX}.Setting.fluent.blue.light.compact`]: 'dx.fluent.blue.light.compact',
+  [`${PREFIX}.Setting.fluent.saas.dark.compact`]: 'dx.fluent.saas.dark.compact',
+  [`${PREFIX}.Setting.fluent.saas.light.compact`]: 'dx.fluent.saas.light.compact',
+} as const
+
 export const dbSourceTypeOptions = enumToList(DbTypeEnum)
 export const dataSourceTypeOptions = enumToList(DataSourceTypeEnum)
 export const selectCommandTypeOptions = enumToList(SelectCommandTypeEnum)
@@ -485,3 +534,55 @@ export const widgetIconOptions = iconList.map((icon) => ({
   value: icon,
   label: icon,
 }))
+// Tema renk haritası (border ve fill)
+const styleColorMap: Record<string, { border: string; fill: string }> = {
+  'dx.light': { border: '#ffffff', fill: '#337ab7' },
+  'dx.dark': { border: '#4d4d4d', fill: '#1ca8dd' },
+  'dx.carmine': { border: '#ffffff', fill: '#f05b41' },
+  'dx.darkmoon': { border: '#465672', fill: '#3debd3' },
+  'dx.softblue': { border: '#ffffff', fill: '#7ab8eb' },
+  'dx.darkviolet': { border: '#17171f', fill: '#9c63ff' },
+  'dx.greenmist': { border: '#f5f5f5', fill: '#3cbab2' },
+  'dx.contrast': { border: '#000000', fill: '#ffffff' },
+
+  // Material
+  'dx.material.blue.light': { border: '#ffffff', fill: '#03a9f4' },
+  'dx.material.orange.light': { border: '#ffffff', fill: '#ff5722' },
+  'dx.material.lime.light': { border: '#ffffff', fill: '#cddc39' },
+  'dx.material.purple.light': { border: '#ffffff', fill: '#9c27b0' },
+  'dx.material.teal.light': { border: '#ffffff', fill: '#009688' },
+  'dx.material.blue.dark': { border: '#363640', fill: '#03a9f4' },
+  'dx.material.orange.dark': { border: '#363640', fill: '#ff5722' },
+  'dx.material.lime.dark': { border: '#363640', fill: '#cddc39' },
+  'dx.material.purple.dark': { border: '#363640', fill: '#9c27b0' },
+  'dx.material.teal.dark': { border: '#363640', fill: '#009688' },
+
+  // Fluent
+  'dx.fluent.blue.light': { border: '#ffffff', fill: '#0f6cbd' },
+  'dx.fluent.saas.light': { border: '#ffffff', fill: '#5486ff' },
+  'dx.fluent.blue.dark': { border: '#292929', fill: '#479ef5' },
+  'dx.fluent.saas.dark': { border: '#1e2832', fill: '#5492f6' },
+
+  'dx.light.compact': { border: '#ffffff', fill: '#337ab7' },
+  'dx.dark.compact': { border: '#4d4d4d', fill: '#1ca8dd' },
+  'dx.contrast.compact': { border: '#000000', fill: '#ffffff' },
+  'dx.material.blue.light.compact': { border: '#ffffff', fill: '#03a9f4' },
+  'dx.material.orange.light.compact': { border: '#ffffff', fill: '#ff5722' },
+  'dx.material.lime.light.compact': { border: '#ffffff', fill: '#cddc39' },
+  'dx.material.purple.light.compact': { border: '#ffffff', fill: '#9c27b0' },
+  'dx.material.teal.light.compact': { border: '#ffffff', fill: '#009688' },
+  'dx.material.blue.dark.compact': { border: '#363640', fill: '#03a9f4' },
+  'dx.material.orange.dark.compact': { border: '#363640', fill: '#ff5722' },
+  'dx.material.lime.dark.compact': { border: '#363640', fill: '#cddc39' },
+  'dx.material.purple.dark.compact': { border: '#363640', fill: '#9c27b0' },
+  'dx.material.teal.dark.compact': { border: '#363640', fill: '#009688' },
+  'dx.fluent.blue.light.compact': { border: '#ffffff', fill: '#0f6cbd' },
+  'dx.fluent.saas.light.compact': { border: '#ffffff', fill: '#5486ff' },
+  'dx.fluent.blue.dark.compact': { border: '#292929', fill: '#479ef5' },
+  'dx.fluent.saas.dark.compact': { border: '#1e2832', fill: '#5492f6' },
+}
+
+export const styleMapOptions = enumToList<string>(StyleEnum).map((opt) => ({
+  ...opt,
+  color: styleColorMap[opt.value],
+}))
diff --git a/ui/src/views/settings/Settings.tsx b/ui/src/views/settings/Settings.tsx
index 8961771..62715c8 100644
--- a/ui/src/views/settings/Settings.tsx
+++ b/ui/src/views/settings/Settings.tsx
@@ -17,6 +17,7 @@ import { APP_NAME } from '@/constants/app.constant'
 import { MainGroupedSettingDto } from '@/proxy/settings/models'
 import { getList, updateSettingValues } from '@/services/setting-ui.service'
 import { useStoreActions, useStoreState } from '@/store'
+import { SelectBoxOption } from '@/types/shared'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { Field, FieldProps, Form, Formik } from 'formik'
 import isEmpty from 'lodash/isEmpty'
@@ -24,13 +25,8 @@ import { useEffect, useMemo, useState } from 'react'
 import { Helmet } from 'react-helmet'
 import { FaQuestionCircle } from 'react-icons/fa'
 
-type Option = {
-  value: string
-  label: string
-}
-
 function getOptions(selectOptions?: Record<string, string>) {
-  const options: Option[] = []
+  const options: SelectBoxOption[] = []
 
   if (!selectOptions) {
     return options
@@ -64,11 +60,12 @@ const Settings = () => {
     activeGroupName?: string,
   ) => {
     //Dark Mode verildimi ?
-    if (values.App_Administration_SiteManagement_Theme_Style) {
+    if (values.App_SiteManagement_Theme_Style) {
       setMode(
-        values.App_Administration_SiteManagement_Theme_Style.includes('light') ? 'light' : 'dark',
+        values.App_SiteManagement_Theme_Style.includes('.dark') ? 'dark' : 'light',
       )
     }
+    console.log(values)
     const resp = await updateSettingValues(values)
     if (resp.status === 204) {
       await fetchData(activeGroupName)
@@ -77,7 +74,7 @@ const Settings = () => {
           title={
             translate('::' + activeGroupName) +
             ' ' +
-            translate('AbpSettingManagement::SuccessfullySaved')
+            translate('::SuccessfullySaved')
           }
           type="success"
         />,