图标

src/component/hedaer/index.jsx

@@ -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>

src/img/天蓝色.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" role="presentation" class="sp-ThemeListItem-svgIcon" viewBox="0 0 84 46" aria-hidden="true" focusable="false"><rect height="100%" width="100%" fill="#ffffff" stroke="none"></rect><rect y="0%" height="50%" width="50%" fill="#1b72a8" stroke="none"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#2380ba" stroke="none" x="50%"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#59aeeb" stroke="none" x="66.66666666666667%"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#1b72a8" stroke="none" x="83.33333333333334%"></rect><text x="10%" y="84%" fill="#323130" role="presentation">Abc</text></svg>

src/img/橙色.svg

@@ -0,0 +1 @@
+<svg  xmlns="http://www.w3.org/2000/svg"  role="presentation" class="sp-ThemeListItem-svgIcon" viewBox="0 0 84 46" aria-hidden="true" focusable="false"><rect height="100%" width="100%" fill="#ffffff" stroke="none"></rect><rect y="0%" height="50%" width="50%" fill="#ca5010" stroke="none"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#d06228" stroke="none" x="50%"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#df8f64" stroke="none" x="66.66666666666667%"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#986f0b" stroke="none" x="83.33333333333334%"></rect><text x="10%" y="84%" fill="#323130" role="presentation">Abc</text></svg>

src/img/深蓝色.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" role="presentation" class="sp-ThemeListItem-svgIcon" viewBox="0 0 84 46" aria-hidden="true" focusable="false"><rect height="100%" width="100%" fill="#182534" stroke="none"></rect><rect y="0%" height="50%" width="50%" fill="#3a96dd" stroke="none"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#65aee6" stroke="none" x="50%"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#8ac2ec" stroke="none" x="66.66666666666667%"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#3a96dd" stroke="none" x="83.33333333333334%"></rect><text x="10%" y="84%" fill="#ffffff" role="presentation">Abc</text></svg>

src/img/深黄色.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" role="presentation" class="sp-ThemeListItem-svgIcon" viewBox="0 0 84 46" aria-hidden="true" focusable="false"><rect height="100%" width="100%" fill="#1b1a19" stroke="none"></rect><rect y="0%" height="50%" width="50%" fill="#ffc83d" stroke="none"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#ffd56c" stroke="none" x="50%"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#ffe092" stroke="none" x="66.66666666666667%"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#ffc83d" stroke="none" x="83.33333333333334%"></rect><text x="10%" y="84%" fill="#f3f2f1" role="presentation">Abc</text></svg>

src/img/灰色.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" role="presentation" class="sp-ThemeListItem-svgIcon" viewBox="0 0 84 46" aria-hidden="true" focusable="false"><rect height="100%" width="100%" fill="#ffffff" stroke="none"></rect><rect y="0%" height="50%" width="50%" fill="#69797e" stroke="none"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#78888d" stroke="none" x="50%"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#9fadb1" stroke="none" x="66.66666666666667%"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#0078d4" stroke="none" x="83.33333333333334%"></rect><text x="10%" y="84%" fill="#323130" role="presentation">Abc</text></svg>

src/img/紫色.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" role="presentation" class="sp-ThemeListItem-svgIcon" viewBox="0 0 84 46" aria-hidden="true" focusable="false"><rect height="100%" width="100%" fill="#ffffff" stroke="none"></rect><rect y="0%" height="50%" width="50%" fill="#8764b8" stroke="none"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#9372c0" stroke="none" x="50%"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#b29ad4" stroke="none" x="66.66666666666667%"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#03787c" stroke="none" x="83.33333333333334%"></rect><text x="10%" y="84%" fill="#323130" role="presentation">Abc</text></svg>

src/img/红色.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" role="presentation" class="sp-ThemeListItem-svgIcon" viewBox="0 0 84 46" aria-hidden="true" focusable="false"><rect height="100%" width="100%" fill="#ffffff" stroke="none"></rect><rect y="0%" height="50%" width="50%" fill="#a4262c" stroke="none"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#ae383e" stroke="none" x="50%"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#c86c70" stroke="none" x="66.66666666666667%"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#ca5010" stroke="none" x="83.33333333333334%"></rect><text x="10%" y="84%" fill="#323130" role="presentation">Abc</text></svg>

src/img/绿色.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" role="presentation" class="sp-ThemeListItem-svgIcon" viewBox="0 0 84 46" aria-hidden="true" focusable="false"><rect height="100%" width="100%" fill="#ffffff" stroke="none"></rect><rect y="0%" height="50%" width="50%" fill="#498205" stroke="none"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#5a9117" stroke="none" x="50%"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#85b44c" stroke="none" x="66.66666666666667%"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#03787c" stroke="none" x="83.33333333333334%"></rect><text x="10%" y="84%" fill="#323130" role="presentation">Abc</text></svg>

src/img/蓝色.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" role="presentation" class="sp-ThemeListItem-svgIcon" viewBox="0 0 84 46" aria-hidden="true" focusable="false"><rect height="100%" width="100%" fill="#ffffff" stroke="none"></rect><rect y="0%" height="50%" width="50%" fill="#0078d4" stroke="none"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#2b88d8" stroke="none" x="50%"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#71afe5" stroke="none" x="66.66666666666667%"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#8764b8" stroke="none" x="83.33333333333334%"></rect><text x="10%" y="84%" fill="#323130" role="presentation">Abc</text></svg>

src/img/钴蓝色.svg

@@ -0,0 +1 @@
+<svg  xmlns="http://www.w3.org/2000/svg" role="presentation" class="sp-ThemeListItem-svgIcon" viewBox="0 0 84 46" aria-hidden="true" focusable="false"><rect height="100%" width="100%" fill="#ffffff" stroke="none"></rect><rect y="0%" height="50%" width="50%" fill="#335ccc" stroke="none"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#476cd2" stroke="none" x="50%"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#7b96e0" stroke="none" x="66.66666666666667%"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#335ccc" stroke="none" x="83.33333333333334%"></rect><text x="10%" y="84%" fill="#323130" role="presentation">Abc</text></svg>

src/img/长春花色.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" role="presentation" class="sp-ThemeListItem-svgIcon" viewBox="0 0 84 46" aria-hidden="true" focusable="false"><rect height="100%" width="100%" fill="#fff" stroke="none"></rect><rect y="0%" height="50%" width="50%" fill="#6264a7" stroke="none"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#9092c1" stroke="none" x="50%"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#a5a7cf" stroke="none" x="66.66666666666667%"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#137ad1" stroke="none" x="83.33333333333334%"></rect><text x="10%" y="84%" fill="#616161" role="presentation">Abc</text></svg>

src/img/青色.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" role="presentation" class="sp-ThemeListItem-svgIcon" viewBox="0 0 84 46" aria-hidden="true" focusable="false"><rect height="100%" width="100%" fill="#ffffff" stroke="none"></rect><rect y="0%" height="50%" width="50%" fill="#03787c" stroke="none"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#13898d" stroke="none" x="50%"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#49aeb1" stroke="none" x="66.66666666666667%"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#4f6bed" stroke="none" x="83.33333333333334%"></rect><text x="10%" y="84%" fill="#323130" role="presentation">Abc</text></svg>

src/img/黑色.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" role="presentation" class="sp-ThemeListItem-svgIcon" viewBox="0 0 84 46" aria-hidden="true" focusable="false"><rect height="100%" width="100%" fill="#ffffff" stroke="none"></rect><rect y="0%" height="50%" width="50%" fill="#000000" stroke="none"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#2f2f2f" stroke="none" x="50%"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#373737" stroke="none" x="66.66666666666667%"></rect><rect y="0%" height="50%" width="16.666666666666668%" fill="#ed4c67" stroke="none" x="83.33333333333334%"></rect><text x="10%" y="84%" fill="#323130" role="presentation">Abc</text></svg>