فایل src/configs/theme.config.ts شامل تنظیمات پیشفرض تم برای الگو است. این پیکربندیها از پیش تعریف شدهاند اما میتوانند برای برآورده کردن نیازهای شما سفارشی شوند. زیر، پیکربندی پیشفرض است:
اگر متوجه شدید که تم پس از تنظیم یک مقدار جدید برای پیکربندی تغییر نکرد، ممکن است بخواهید کلید theme را از cookies پاک کنید.
import { THEME_ENUM } from '@/constants/theme.constant'
import {
Direction,
Mode,
ControlSize,
LayoutType,
} from '@/@types/theme'
export type ThemeConfig = {
themeSchema: string
direction: Direction
mode: Mode
panelExpand: boolean
controlSize: ControlSize
layout: {
type: LayoutType
sideNavCollapse: boolean
}
}
export const themeConfig: ThemeConfig = {
themeSchema: '',
direction: THEME_ENUM.DIR_LTR,
mode: THEME_ENUM.MODE_LIGHT,
panelExpand: false,
controlSize: 'md',
layout: {
type: THEME_ENUM.LAYOUT_COLLAPSIBLE_SIDE,
sideNavCollapse: false,
},
}| ویژگی | توضیحات | نوع | پیشفرض |
|---|---|---|---|
| themeSchema | طرح رنگ الگو را تنظیم میکند. میتوانید این فیلد را خالی بگذارید اگر تم پویا در اپلیکیشن خود دارید | string | '' |
| direction | جهت متن برای الگو را تعریف میکند. | 'ltr' | 'rtl' | 'ltr' |
| mode | بین حالت روشن و تاریک جابهجا میکند. | 'light' | 'dark' | 'light' |
| panelExpand | تعیین میکند که پنل کناری به صورت پیشفرض گسترش یافته باشد یا نه. | boolean | false |
| controlSize | اندازه اولیه ورودیهای کنترل را تنظیم میکند. | 'xs' | 'sm' | 'md' | 'lg' | 'md' |
| layout.type | سبک کلی طرحبندی اپلیکیشن را تعریف میکند. | 'blank' | 'collapsibleSide' | 'stackedSide' | 'topBarClassic' | 'framelessSide' | 'contentOverlay' | 'modern' |
| layout.sideNavCollapse | مشخص میکند که ناوبری کناری جمع شده باشد یا نه. این گزینه فقط زمانی اعمال میشود که type به 'collapsibleSide' یا 'framelessSide' تنظیم شده باشد. | boolean | false |
ما پیکربندی تم را در کوکیها ذخیره میکنیم، اما فقط زمانی ذخیره میشود که تم با استفاده از hook useTheme تغییر کند. به صورت پیشفرض، پیکربندی تم از theme.config.tsx بارگذاری میشود.