@ -4,7 +4,7 @@ import {
HomeOutlined ,
QuestionCircleOutlined ,
} from '@ant-design/icons' ;
import { css } from '@emotion/react ' ;
import { createStyle s , css , useTheme } from 'antd-style ' ;
import type { MenuProps } from 'antd' ;
import {
Breadcrumb ,
@ -22,11 +22,11 @@ import {
import type { Color } from 'antd/es/color-picker' ;
import { generateColor } from 'antd/es/color-picker/util' ;
import * as React from 'react' ;
import classNames from 'classnames' ;
import useLocale from '../../../../hooks/useLocale' ;
import useSiteToken from '../../../../hooks/useSiteToken' ;
import SiteContext from '../../../../theme/slots/SiteContext' ;
import Group from '../Group' ;
import { use CarouselStyle} from '../util' ;
import { get CarouselStyle} from '../util' ;
import BackgroundImage from './BackgroundImage' ;
import ColorPicker from './ColorPicker' ;
import MobileCarousel from './MobileCarousel' ;
@ -83,35 +83,44 @@ const locales = {
} ;
// ============================= Style =============================
const useStyle = ( ) = > {
const { token } = useSiteToken ( ) ;
const { carousel } = useCarouselStyle ( ) ;
const useStyle = createStyles ( ( { token , cx } ) = > {
const { carousel } = getCarouselStyle ( ) ;
return {
demo : css `
const demo = css `
overflow : hidden ;
background : rgba ( 240 , 242 , 245 , 0.25 ) ;
backdrop - filter : blur ( 50 px ) ;
box - shadow : 0 2 px 10 px 2 px rgba ( 0 , 0 , 0 , 0.1 ) ;
transition : all $ { token . motionDurationSlow } ;
` ,
` ;
return {
demo ,
otherDemo : css `
& . $ { cx ( demo ) } {
backdrop - filter : blur ( 10 px ) ;
background : rgba ( 247 , 247 , 247 , 0.5 ) ;
}
` ,
darkDemo : css `
& . $ { cx ( demo ) } {
background : # 000 ;
}
` ,
larkDemo : css `
& . $ { cx ( demo ) } {
// background: #f7f7f7;
background : rgba ( 240 , 242 , 245 , 0.65 ) ;
}
` ,
comicDemo : css `
& . $ { cx ( demo ) } {
// background: #ffe4e6;
background : rgba ( 240 , 242 , 245 , 0.65 ) ;
}
` ,
menu : css `
@ -184,7 +193,7 @@ const useStyle = () => {
` ,
carousel ,
} ;
} ;
} ) ;
// ========================== Menu Config ==========================
const subMenuItems : MenuProps [ 'items' ] = [
@ -271,8 +280,8 @@ const ThemesInfo: Record<THEME, Partial<ThemeData>> = {
} ;
export default function Theme() {
const style = useStyle ( ) ;
const { token } = useSiteToken ( ) ;
const { styles } = useStyle ( ) ;
const token = useTheme ( ) ;
const [ locale ] = useLocale ( locales ) ;
const [ themeData , setThemeData ] = React . useState < ThemeData > ( ThemeDefault ) ;
@ -348,25 +357,11 @@ export default function Theme() {
theme = { {
token : {
. . . themeToken ,
. . . ( isLight
? { }
: {
// colorBgContainer: '#474C56',
// colorBorderSecondary: 'rgba(255,255,255,0.06)',
} ) ,
colorPrimary : colorPrimaryValue ,
} ,
hashed : true ,
algorithm : algorithmFn ,
components : {
Slider : {
// 1677FF
} ,
Card : isLight
? { }
: {
// colorBgContainer: '#474C56',
} ,
Layout : isLight
? {
colorBgHeader : 'transparent' ,
@ -379,7 +374,7 @@ export default function Theme() {
? {
itemBg : 'transparent' ,
subMenuItemBg : 'transparent' ,
colorActiveBa rWidth0 ,
activeBarBorde rWidth0 ,
}
: {
// colorItemBg: 'transparent',
@ -392,18 +387,24 @@ export default function Theme() {
>
< TokenChecker / >
< div
css = { [
style . demo ,
isLight && closestColor !== DEFAULT_COLOR && style . otherDemo ,
! isLight && style . darkDemo ,
] }
className = { classNames ( styles . demo , {
[ styles . otherDemo ] : isLight && closestColor !== DEFAULT_COLOR && styles . otherDemo ,
[ styles . darkDemo ] : ! isLight ,
} ) }
style = { { borderRadius : themeData.borderRadius } }
>
< Layout css = { style . transBg } >
< Header css = { [ style . header , style . transBg , ! isLight && style . headerDark ] } >
< Layout className = { styles . transBg } >
< Header
className = { classNames ( styles . header , styles . transBg , ! isLight && styles . headerDark ) }
>
{ /* Logo */ }
< div css = { style . logo } >
< div css = { [ style . logoImg , closestColor !== DEFAULT_COLOR && style . logoImgPureColor ] } >
< div className = { styles . logo } >
< div
className = { classNames (
styles . logoImg ,
closestColor !== DEFAULT_COLOR && styles . logoImgPureColor ,
) }
>
< img
src = "https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
style = { {
@ -418,11 +419,11 @@ export default function Theme() {
< h1 > Ant Design 5.0 < / h1 >
< / div >
< Space css = { style . menu } size = "middle" >
< Space cla ssName = { styles . menu } size = "middle" >
< BellOutlined / >
< QuestionCircleOutlined / >
< div
css = { [ style . avatar , themeType === 'dark' && style . avatarDark ] }
cla ssName = { classNames ( styles . avatar , themeType === 'dark' && styles . avatarDark ) }
style = { {
backgroundColor : avatarColor ,
backgroundImage : ` url( ${ getAvatarURL ( closestColor ) } ) ` ,
@ -432,23 +433,23 @@ export default function Theme() {
/ >
< / Space >
< / Header >
< Layout css = { style . transBg } hasSider >
< Sider css = { style . transBg } width = { 200 } className = "site-layout-background" >
< Layout cla ssName = { styles . transBg } hasSider >
< Sider cla ssName = { classNames ( styles . transBg , 'site-layout-background' ) } width = { 200 } >
< Menu
mode = "inline"
css = { [ style . transBg , ! isLight && style . darkSideMenu ] }
cla ssName = { classNames ( styles . transBg , ! isLight && styles . darkSideMenu ) }
selectedKeys = { [ 'Themes' ] }
openKeys = { [ 'Design' ] }
style = { { height : '100%' , borderRight : 0 } }
items = { sideMenuItems }
/ >
< / Sider >
< Layout css = { style . transBg } style = { { padding : '0 24px 24px' } } >
< Layout cla ssName = { styles . transBg } style = { { padding : '0 24px 24px' } } >
< Breadcrumb style = { { margin : '16px 0' } } >
< Breadcrumb.Item >
< HomeOutlined / >
< / Breadcrumb.Item >
< Breadcrumb.Item overlay = { < Menu items = { subMenuItems } / > } > Design < / Breadcrumb.Item >
< Breadcrumb.Item menu = { { items : subMenuItems } } > Design < / Breadcrumb.Item >
< Breadcrumb.Item > Themes < / Breadcrumb.Item >
< / Breadcrumb >
< Content >
@ -468,7 +469,7 @@ export default function Theme() {
onValuesChange = { onThemeChange }
labelCol = { { span : 4 } }
wrapperCol = { { span : 20 } }
css = { style . form }
cla ssName = { styles . form }
>
< Form.Item label = { locale . titleTheme } name = "themeType" >
< ThemePicker / >
MadCcc
codefactor-io