feat: able to change theme

model/option.go

@@ -72,6 +72,7 @@ func InitOptionMap() {
 	common.OptionMap["ChatLink"] = common.ChatLink
 	common.OptionMap["QuotaPerUnit"] = strconv.FormatFloat(common.QuotaPerUnit, 'f', -1, 64)
 	common.OptionMap["RetryTimes"] = strconv.Itoa(common.RetryTimes)
+	common.OptionMap["Theme"] = common.Theme
 	common.OptionMapRWMutex.Unlock()
 	loadOptionsFromDatabase()
 }
@@ -220,6 +221,8 @@ func updateOptionMap(key string, value string) (err error) {
 		common.ChannelDisableThreshold, _ = strconv.ParseFloat(value, 64)
 	case "QuotaPerUnit":
 		common.QuotaPerUnit, _ = strconv.ParseFloat(value, 64)
+	case "Theme":
+		common.Theme = value
 	}
 	return err
 }

web/berry/src/views/Setting/component/OtherSetting.js

@@ -1,18 +1,18 @@
 import { useState, useEffect } from 'react';
 import SubCard from 'ui-component/cards/SubCard';
 import {
-  Stack,
-  FormControl,
-  InputLabel,
-  OutlinedInput,
-  Button,
-  Alert,
-  TextField,
-  Dialog,
-  DialogTitle,
-  DialogActions,
-  DialogContent,
-  Divider
+    Stack,
+    FormControl,
+    InputLabel,
+    OutlinedInput,
+    Button,
+    Alert,
+    TextField,
+    Dialog,
+    DialogTitle,
+    DialogActions,
+    DialogContent,
+    Divider, Link
 } from '@mui/material';
 import Grid from '@mui/material/Unstable_Grid2';
 import { showError, showSuccess } from 'utils/common'; //,
@@ -26,7 +26,8 @@ const OtherSetting = () => {
     About: '',
     SystemName: '',
     Logo: '',
-    HomePageContent: ''
+    HomePageContent: '',
+    Theme: '',
   });
   let [loading, setLoading] = useState(false);
   const [showUpdateModal, setShowUpdateModal] = useState(false);
@@ -88,6 +89,10 @@ const OtherSetting = () => {
     await updateOption('SystemName', inputs.SystemName);
   };
 
+  const submitTheme = async () => {
+    await updateOption('Theme', inputs.Theme);
+  };
+
   const submitLogo = async () => {
     await updateOption('Logo', inputs.Logo);
   };
@@ -171,6 +176,25 @@ const OtherSetting = () => {
                 设置系统名称
               </Button>
             </Grid>
+            <Grid xs={12}>
+              <FormControl fullWidth>
+                <InputLabel htmlFor="Theme">主题名称</InputLabel>
+                <OutlinedInput
+                    id="Theme"
+                    name="Theme"
+                    value={inputs.Theme || ''}
+                    onChange={handleInputChange}
+                    label="主题名称"
+                    placeholder="请输入主题名称"
+                    disabled={loading}
+                />
+              </FormControl>
+            </Grid>
+            <Grid xs={12}>
+              <Button variant="contained" onClick={submitTheme}>
+                设置主题（重启生效）
+              </Button>
+            </Grid>
             <Grid xs={12}>
               <FormControl fullWidth>
                 <InputLabel htmlFor="Logo">Logo 图片地址</InputLabel>

web/default/src/components/OtherSetting.js

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { Button, Divider, Form, Grid, Header, Message, Modal } from 'semantic-ui-react';
 import { API, showError, showSuccess } from '../helpers';
 import { marked } from 'marked';
+import { Link } from 'react-router-dom';
 
 const OtherSetting = () => {
   let [inputs, setInputs] = useState({
@@ -10,7 +11,8 @@ const OtherSetting = () => {
     About: '',
     SystemName: '',
     Logo: '',
-    HomePageContent: ''
+    HomePageContent: '',
+    Theme: ''
   });
   let [loading, setLoading] = useState(false);
   const [showUpdateModal, setShowUpdateModal] = useState(false);
@@ -70,6 +72,10 @@ const OtherSetting = () => {
     await updateOption('SystemName', inputs.SystemName);
   };
 
+  const submitTheme = async () => {
+    await updateOption('Theme', inputs.Theme);
+  };
+
   const submitLogo = async () => {
     await updateOption('Logo', inputs.Logo);
   };
@@ -132,6 +138,17 @@ const OtherSetting = () => {
             />
           </Form.Group>
           <Form.Button onClick={submitSystemName}>设置系统名称</Form.Button>
+          <Form.Group widths='equal'>
+            <Form.Input
+              label={<label>主题名称（<Link
+                to='https://github.com/songquanpeng/one-api/blob/main/web/README.md'>当前可用主题</Link>）</label>}
+              placeholder='请输入主题名称'
+              value={inputs.Theme}
+              name='Theme'
+              onChange={handleInputChange}
+            />
+          </Form.Group>
+          <Form.Button onClick={submitTheme}>设置主题（重启生效）</Form.Button>
           <Form.Group widths='equal'>
             <Form.Input
               label='Logo 图片地址'
@@ -165,7 +182,8 @@ const OtherSetting = () => {
             />
           </Form.Group>
           <Form.Button onClick={submitAbout}>保存关于</Form.Button>
-          <Message>移除 One API 的版权标识必须首先获得授权，项目维护需要花费大量精力，如果本项目对你有意义，请主动支持本项目。</Message>
+          <Message>移除 One API
+            的版权标识必须首先获得授权，项目维护需要花费大量精力，如果本项目对你有意义，请主动支持本项目。</Message>
           <Form.Group widths='equal'>
             <Form.Input
               label='页脚'