-
Notifications
You must be signed in to change notification settings - Fork 20
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
23 changed files
with
284 additions
and
9,042 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| # 主题 | ||
|
|
||
| 脚手架使用 [umi-plugin-antd-theme](https://github.com/chenshuai2144/umi-plugin-antd-theme) 来提供动态主题切换功能。 | ||
|
|
||
| 首先，多主题由 `config/theme.config.json` 定义，内容如下： | ||
|
|
||
| ```json | ||
| { | ||
| "theme": [ | ||
| { | ||
| "fileName": "dust.css", | ||
| "modifyVars": { | ||
| "@primary-color": "#F5222D" | ||
| } | ||
| }, | ||
| { | ||
| "fileName": "cyan.css", | ||
| "modifyVars": { | ||
| "@primary-color": "#13C2C2" | ||
| } | ||
| } | ||
| ], | ||
| "min": false, | ||
| "isModule": true, | ||
| "ignoreAntd": false, | ||
| "ignoreProLayout": false, | ||
| "cache": false | ||
| } | ||
| ``` | ||
|
|
||
| 其中： | ||
|
|
||
| `fileName` 是每个主题最终输出的文件名，请务必保持命名通俗易懂，如上述所示，文件名去掉 `.css`，就是主题名。 | ||
|
|
||
| `modifyVars` 就是 `antd` 的 less 变量，同 [theme](https://umijs.org/config#theme)。 | ||
|
|
||
| ## application-level 定制 | ||
|
|
||
| 你也可以通过在 `src/global.less` 中定义应用级别的 less 变量，如下： | ||
|
|
||
| ```less | ||
| // 默认主题 | ||
| body { | ||
| --title-color: #4f4f4f; | ||
| } | ||
|
|
||
| // 主题 dust | ||
| body.body-wrap-dust { | ||
| --title-color: #8f1256; | ||
| } | ||
|
|
||
| // 主题 cyan | ||
| body.body-wrap-cyan { | ||
| --title-color: #5cdc5a; | ||
| } | ||
| ``` | ||
|
|
||
| 然后，通过如下方式，在你的组件中，引用定义在 `src/global.less` 中变量就可以了: | ||
|
|
||
| ```less | ||
| .desc { | ||
| color: var(--title-color); | ||
| } | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| { | ||
| "theme": [ | ||
| { | ||
| "key": "dust", | ||
| "fileName": "dust.css", | ||
| "modifyVars": { | ||
| "@primary-color": "#F5222D" | ||
| } | ||
| }, | ||
| { | ||
| "key": "cyan", | ||
| "fileName": "cyan.css", | ||
| "modifyVars": { | ||
| "@primary-color": "#13C2C2" | ||
| } | ||
| } | ||
| ], | ||
| "min": false, | ||
| "isModule": true, | ||
| "ignoreAntd": false, | ||
| "ignoreProLayout": false, | ||
| "cache": false | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
40 changes: 40 additions & 0 deletions
40
generators/app/templates/src/components/buttons/ThemeSwitch/index.less
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| .size { | ||
| font-size: 20px; | ||
| } | ||
|
|
||
| .themeItem { | ||
| display: flex; | ||
| justify-content: flex-start; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .img { | ||
| display: block; | ||
| width: 22px; | ||
| height: 17px; | ||
| margin-right: 2px; | ||
| } | ||
|
|
||
| .defaultBg { | ||
| background-color: #1890ff; | ||
| } | ||
|
|
||
| .dustBg { | ||
| background-color: #f5222d; | ||
| } | ||
|
|
||
| .cyanBg { | ||
| background-color: #13c2c2; | ||
| } | ||
|
|
||
| .defaultFont { | ||
| color: #1890ff; | ||
| } | ||
|
|
||
| .dustFont { | ||
| color: #f5222d; | ||
| } | ||
|
|
||
| .cyanFont { | ||
| color: #13c2c2; | ||
| } |
96 changes: 96 additions & 0 deletions
96
generators/app/templates/src/components/buttons/ThemeSwitch/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,96 @@ | ||
| import React, { useMemo, useEffect } from 'react' | ||
| import classnames from 'classnames' | ||
|
|
||
| import { Dropdown, Menu } from 'antd' | ||
| import { AppstoreOutlined } from '@ant-design/icons' | ||
| import { useLocalStorageState } from 'ahooks' | ||
|
|
||
| import styles from './index.less' | ||
|
|
||
| interface IThemeSwitchProps { | ||
| className?: string | ||
| } | ||
|
|
||
| enum Theme { | ||
| DEFAULT = 'default', | ||
| DUST = 'dust', | ||
| CYAN = 'cyan' | ||
| } | ||
|
|
||
| function changeTheme(nextTheme: Theme) { | ||
| let styleLink = document.getElementById('theme-style') as HTMLLinkElement | ||
| const body = document.getElementsByTagName('body')[0] | ||
|
|
||
| if (nextTheme === Theme.DEFAULT && styleLink) { | ||
| styleLink.remove() | ||
| const lastTheme = Array.from(document.body.classList).find(s => s.startsWith('body-wrap-')) | ||
| if (lastTheme) { | ||
| body.classList.remove(lastTheme) | ||
| } | ||
| return | ||
| } | ||
| if (styleLink) { | ||
| styleLink.href = `/theme/${nextTheme}.css` // 切换 antd 组件主题 | ||
| body.className = `body-wrap-${nextTheme}` // 切换 app-level 的主题 | ||
| return | ||
| } | ||
| styleLink = document.createElement('link') | ||
| styleLink.type = 'text/css' | ||
| styleLink.rel = 'stylesheet' | ||
| styleLink.id = 'theme-style' | ||
| styleLink.href = `/theme/${nextTheme}.css` | ||
| body.className = `body-wrap-${nextTheme}` | ||
| document.body.append(styleLink) | ||
| } | ||
|
|
||
| export default function ThemeSwitch({ className }: IThemeSwitchProps) { | ||
| const [theme, setTheme] = useLocalStorageState('umi-app-theme', Theme.DEFAULT) | ||
|
|
||
| const menu = useMemo( | ||
| () => ( | ||
| <Menu | ||
| style={{ width: 150 }} | ||
| selectedKeys={[theme]} | ||
| onClick={e => { | ||
| setTheme(e.key as Theme) | ||
| changeTheme(e.key as Theme) | ||
| }} | ||
| > | ||
| <Menu.Item key={Theme.DEFAULT}> | ||
| <div className={classnames(styles.themeItem, styles.defaultFont)}> | ||
| <span role="img" className={classnames(styles.img, styles.defaultBg)} /> | ||
| Default | ||
| </div> | ||
| </Menu.Item> | ||
| <Menu.Item key={Theme.DUST}> | ||
| <div className={classnames(styles.themeItem, styles.dustFont)}> | ||
| <span role="img" className={classnames(styles.img, styles.dustBg)} /> | ||
| Dust | ||
| </div> | ||
| </Menu.Item> | ||
| <Menu.Item key={Theme.CYAN}> | ||
| <div className={classnames(styles.themeItem, styles.cyanFont)}> | ||
| <span role="img" className={classnames(styles.img, styles.cyanBg)} /> | ||
| Cyan | ||
| </div> | ||
| </Menu.Item> | ||
| </Menu> | ||
| ), | ||
| [setTheme, theme] | ||
| ) | ||
|
|
||
| useEffect(() => { | ||
| if (theme !== Theme.DEFAULT) { | ||
| changeTheme(theme) | ||
| } | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, []) | ||
|
|
||
| return ( | ||
| <Dropdown overlay={menu} className={classnames(styles.size, className)}> | ||
| <div> | ||
| <AppstoreOutlined style={{ cursor: 'pointer' }} /> | ||
| </div> | ||
| </Dropdown> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| body { | ||
| --title-color: #4f4f4f; | ||
| } | ||
|
|
||
| body.body-wrap-dust { | ||
| --title-color: #8f1256; | ||
| } | ||
|
|
||
| body.body-wrap-cyan { | ||
| --title-color: #5cdc5a; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| .desc { | ||
| color: var(--title-color); | ||
| } |
Oops, something went wrong.