sozsoft/sozsoft-platform
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Theme Configuration

Browse source
This commit is contained in:
Sedat ÖZTÜRK 2026-03-27 16:49:15 +03:00
parent 3baa7def61
commit f57fbda2d6
11 changed files with 315 additions and 115 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
api/src/Sozsoft.Platform.DbMigrator/Seeds/LanguagesData.json
View file

@ -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"
}
]
}

3
ui/src/components/template/ThemeConfigurator/LayoutSwitcher.tsx
View file

@ -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)

28
ui/src/components/template/ThemeConfigurator/NavModeSwitcher.tsx
View file

@ -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>
)

113
ui/src/components/template/ThemeConfigurator/StyleSwitcher.tsx Normal file
View file

@ -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

76
ui/src/components/template/ThemeConfigurator/ThemeConfigurator.tsx
View file

@ -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

4
ui/src/constants/theme.constant.ts
View file

@ -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

1
ui/src/proxy/theme/models.ts
View file

@ -33,4 +33,5 @@ export type ThemeConfig = {
type: LayoutType
sideNavCollapse: boolean
}
style: string
}

5
ui/src/proxy/theme/theme.config.ts
View file

@ -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]

68
ui/src/store/theme.model.ts
View file

@ -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
}),
}

101
ui/src/views/admin/listForm/edit/options.ts
View file

@ -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],
}))

15
ui/src/views/settings/Settings.tsx
View file

@ -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"
/>,