Theme Skins

In addition to basic light/dark modes and single-color theme effects, antd-layout also supports highly customizable appearance themes. For example, you can add dynamic backgrounds and layered blur effects to the entire layout, or even transform the UI into a shadcn-ui-like style.

Custom Theme Skins

Based on the ThemeSkin constraints provided by antd-layout, you can define more detailed properties and combine them with image-based background assets to create a skin component.

These skins can then be imported into the system just like menu and i18n data. Finally, set skinName in layoutConfig to activate the theme skin.

Creating a Custom Skin

src/components/skins/blueSkyDark.ts 
import type { ThemeSkin } from "@adminui-dev/layout"

const bgContent = <div style={{...}}><img style={{width:"100%"}} src="/images/skins/blue-sky/bg.webp" alt="bg.webp" /></div>

const blueSkyDark:ThemeSkin = {
    "name":"blueSkyDark",    
    "skinType":"custom",
    "backgroundColor":"#090a0b",
    "layoutConfig":{
        "theme":"dark",
        "primaryColor":"#4dbae9",        
        "noneHeader":false,
        "hideBorder":false,
        "asideBlur":true,
        "headerBlur":true,
        "largeBrand":true,
        "containerBlur":true,
        "menuItemSelectColor":"primary",
    },        
    "logo":"/images/skins/blue-sky/app-logo-light.webp",
    "icon":"/images/skins/blue-sky/skin-icon-dark.webp",
    "backgroundContent":<bgContent />
}
export { blueSkyDark }
Copied!

You can also use the defineThemeSkin helper for a cleaner definition:

const blueSkyDark = defineThemeSkin({...})

Using a Skin

src/layouts/index.tsx 
import { blueSkyDark } from "@components/skins/blueSkyDark"
import { AntdLayout } from "@adminui-dev/antd-layout"
...
export default function(){   
    // layout config
    const layoutConfig:LayoutConfig = {
        disabledLocale:true,
        largeBrand:true,    
        skinName:"blueSkyDark", // Using a Skin
        ...
    }
    return(
        <AntdLayout layoutConfig={layoutConfig} menuData={...} themeSkins={[blueSkyDark]}>        
    )
}
Copied!

themeSkins accepts an array because multiple skins can be registered.

Switching Skins

Use the setLayoutConfig method to switch themes.

src/pages/welcome.tsx 
import { Container, setSkinConfig, useConfigAction, useConfigState } from '@adminui-dev/antd-layout';
...
const { setLayoutConfig } = useConfigAction()
const { layoutConfig } = useConfigState()
...
const config = setSkinConfig(layoutConfig,skin)          
setLayoutConfig({
    ...config,
    skinName:"customeSkinName"
})
...
Copied!

Skin Properties

ThemeSkin

| Name | Type |Default| Description | |-------|-------|-------|-------| |name|string|-|Unique identifier| |label|string|-|Display name| |skinType|SkinType|-|Skin type| |layoutConfig|LayoutConfig|-|Layout configuration overrides| |backgroundColor|string|-|Background color| |layoutBorderColor|string|-|Border color| |logo|string / ReactNode|-|Brand logo| |icon|string|-|Skin thumbnail| |headerStyle|string|-|Header style| |asideStyle|string|-|Sidebar style|

SkinType