توسعه
استقرار
دیگر
پیکربندی تم کلی
فایل 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 بارگذاری میشود.