پیکربندی تم کلی

فایل 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تعیین می‌کند که پنل کناری به صورت پیش‌فرض گسترش یافته باشد یا نه.booleanfalse
controlSizeاندازه اولیه ورودی‌های کنترل را تنظیم می‌کند.'xs' | 'sm' | 'md' | 'lg''md'
layout.typeسبک کلی طرح‌بندی اپلیکیشن را تعریف می‌کند.'blank' | 'collapsibleSide' | 'stackedSide' | 'topBarClassic' | 'framelessSide' | 'contentOverlay''modern'
layout.sideNavCollapseمشخص می‌کند که ناوبری کناری جمع شده باشد یا نه. این گزینه فقط زمانی اعمال می‌شود که type به 'collapsibleSide' یا 'framelessSide' تنظیم شده باشد.booleanfalse
پایایی وضعیت

ما پیکربندی تم را در کوکی‌ها ذخیره می‌کنیم، اما فقط زمانی ذخیره می‌شود که تم با استفاده از hook useTheme تغییر کند. به صورت پیش‌فرض، پیکربندی تم از theme.config.tsx بارگذاری می‌شود.