|
|
@@ -50,6 +50,21 @@ import 钴蓝色 from './themeData/钴蓝色.json'
|
|
|
import 深黄色 from './themeData/深黄色.json'
|
|
|
import 深蓝色 from './themeData/深蓝色.json'
|
|
|
|
|
|
+import 青色图标 from '../../img/青色.svg'
|
|
|
+import 蓝色图标 from '../../img/蓝色.svg'
|
|
|
+import 橙色图标 from '../../img/橙色.svg'
|
|
|
+import 红色图标 from '../../img/红色.svg'
|
|
|
+import 紫色图标 from '../../img/紫色.svg'
|
|
|
+import 绿色图标 from '../../img/绿色.svg'
|
|
|
+import 灰色图标 from '../../img/灰色.svg'
|
|
|
+import 长春花色图标 from '../../img/长春花色.svg'
|
|
|
+import 黑色图标 from '../../img/黑色.svg'
|
|
|
+import 天蓝色图标 from '../../img/天蓝色.svg'
|
|
|
+import 钴蓝色图标 from '../../img/钴蓝色.svg'
|
|
|
+import 深黄色图标 from '../../img/深黄色.svg'
|
|
|
+import 深蓝色图标 from '../../img/深蓝色.svg'
|
|
|
+
|
|
|
+
|
|
|
import { LocalLanguage20Regular, Settings20Regular, WindowAdPerson20Filled } from '@fluentui/react-icons'
|
|
|
import {
|
|
|
Menu,
|
|
|
@@ -60,7 +75,75 @@ import {
|
|
|
} from "@fluentui/react-components";
|
|
|
import { useTranslation } from 'react-i18next'
|
|
|
|
|
|
-const ThemeData = ["青色", "蓝色", "橙色", "红色", "紫色", "绿色", "灰色", "长春花色", "黑色", "天蓝色", "钴蓝色", "深黄色", "深蓝色"]
|
|
|
+//"青色", "蓝色", "橙色", "红色", "紫色", "绿色", "灰色", "长春花色", "黑色", "天蓝色", "钴蓝色", "深黄色", "深蓝色"
|
|
|
+const ThemeData = [
|
|
|
+ {
|
|
|
+ "name": "青色",
|
|
|
+ "icon": 青色图标,
|
|
|
+ "config":青色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "蓝色",
|
|
|
+ "icon": 蓝色图标,
|
|
|
+ "config":蓝色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "橙色",
|
|
|
+ "icon": 橙色图标,
|
|
|
+ "config":橙色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "红色",
|
|
|
+ "icon": 红色图标,
|
|
|
+ "config":红色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "紫色",
|
|
|
+ "icon": 紫色图标,
|
|
|
+ "config":紫色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "绿色",
|
|
|
+ "icon": 绿色图标,
|
|
|
+ "config":绿色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "灰色",
|
|
|
+ "icon": 灰色图标,
|
|
|
+ "config":灰色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "长春花色",
|
|
|
+ "icon": 长春花色图标,
|
|
|
+ "config":长春花色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "黑色",
|
|
|
+ "icon": 黑色图标,
|
|
|
+ "config":黑色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "天蓝色",
|
|
|
+ "icon": 天蓝色图标,
|
|
|
+ "config":天蓝色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "钴蓝色",
|
|
|
+ "icon": 钴蓝色图标,
|
|
|
+ "config":钴蓝色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "深黄色",
|
|
|
+ "icon": 深黄色图标,
|
|
|
+ "config":深黄色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "深蓝色",
|
|
|
+ "icon": 深蓝色图标,
|
|
|
+ "config":深蓝色
|
|
|
+ }
|
|
|
+
|
|
|
+]
|
|
|
const useExampleStyles = makeStyles({
|
|
|
popoverSurface: {
|
|
|
width: "512px",
|
|
|
@@ -577,7 +660,6 @@ const IconHtml = () => {
|
|
|
|
|
|
|
|
|
const ChangeTheme = (name) => {
|
|
|
-
|
|
|
}
|
|
|
|
|
|
|
|
|
@@ -617,10 +699,17 @@ const Header = () => {
|
|
|
<MenuPopover>
|
|
|
<MenuList>
|
|
|
{
|
|
|
- Array.from(ThemeData, (name) => {
|
|
|
+ Array.from(ThemeData, (item) => {
|
|
|
return (<MenuItem onClick={() => {
|
|
|
- ChangeTheme(name)
|
|
|
- }}>{name}</MenuItem>)
|
|
|
+ ChangeTheme(item.name)
|
|
|
+ }}>
|
|
|
+ <div class="theme-modal-item">
|
|
|
+ <div class="theme-modal-item-sp">
|
|
|
+ <img src={item.icon} alt="" srcset="" />
|
|
|
+ </div>
|
|
|
+ <div class="theme-modal-item-text">{item.name}</div>
|
|
|
+ </div>
|
|
|
+ </MenuItem>)
|
|
|
})
|
|
|
}
|
|
|
</MenuList>
|
杨东明
