diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index e1b3daa..fdefba2 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -25,5 +25,6 @@ module.exports = {
     rules: {
         'prettier/prettier': 'error',
         '@typescript-eslint/no-explicit-any': 0,
+        '@typescript-eslint/ban-ts-comment': 0,
     },
 };
diff --git a/package.json b/package.json
index 39cf14a..b7fbe62 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,8 @@
         "release": "standard-version --commit-all"
     },
     "dependencies": {
+        "classnames": "^2.3.2",
+        "qrcode.react": "^3.1.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
     },
@@ -30,6 +32,7 @@
         "husky": "^8.0.1",
         "lint-staged": "^13.0.3",
         "prettier": "^2.7.1",
+        "sass": "^1.55.0",
         "standard-version": "^9.5.0",
         "stylelint": "^14.11.0",
         "stylelint-config-prettier-scss": "^0.0.1",
diff --git a/src/App.css b/src/App.scss
similarity index 50%
rename from src/App.css
rename to src/App.scss
index 9083873..caa82e0 100644
--- a/src/App.css
+++ b/src/App.scss
@@ -10,21 +10,23 @@
     margin: 0 auto;
 }
 
-.scene-container {
-    width: 100%;
-    padding-bottom: 100%;
-    position: relative;
-    margin: 10% 0;
-}
+.scene {
+    &-container {
+        width: 100%;
+        padding-bottom: 100%;
+        position: relative;
+        margin: 10% 0;
+    }
 
-.scene-inner {
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    top: 0;
-    overflow: visible;
-    font-size: 28px;
+    &-inner {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        top: 0;
+        overflow: visible;
+        font-size: 28px;
+    }
 }
 
 .symbol {
@@ -35,28 +37,28 @@
     left: 0;
     top: 0;
     border-radius: 8px;
-}
 
-.symbol-inner {
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    top: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 8px;
-    border: 2px solid #444;
-    transition: 0.3s;
-    overflow: hidden;
-    user-select: none;
-}
+    &-inner {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        top: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 8px;
+        border: 2px solid #444;
+        transition: 0.3s;
+        overflow: hidden;
+        user-select: none;
 
-.symbol-inner img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
+        img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+    }
 }
 
 .queue-container {
@@ -67,25 +69,6 @@
     margin-bottom: 16px;
 }
 
-.flex-container {
-    display: flex;
-    gap: 8px;
-}
-
-.flex-center {
-    justify-content: center;
-    align-items: center;
-}
-
-.flex-grow {
-    flex-grow: 1;
-}
-
-.flex-between {
-    justify-content: space-between;
-    align-items: center;
-}
-
 .modal {
     position: fixed;
     width: 100vw;
@@ -108,3 +91,8 @@
     width: 36px;
     height: 36px;
 }
+
+.zhenghuo-button {
+    width: 100%;
+    margin-top: 8px;
+}
diff --git a/src/App.tsx b/src/App.tsx
index 2f496a9..430a4a5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,9 +6,14 @@ import React, {
     useState,
 } from 'react';
 
-import './App.css';
+import './App.scss';
 import { GithubIcon } from './components/GithubIcon';
-import { parseThemePath, randomString, waitTimeout } from './utils';
+import {
+    parsePathCustomTheme,
+    parsePathThemeName,
+    randomString,
+    waitTimeout,
+} from './utils';
 import { defaultTheme } from './themes/default';
 import { Icon, Theme } from './themes/interface';
 import { fishermanTheme } from './themes/fisherman';
@@ -18,9 +23,10 @@ import { pddTheme } from './themes/pdd';
 import { BeiAn } from './components/BeiAn';
 import { Info } from './components/Info';
 import { owTheme } from './themes/ow';
+import { ConfigDialog } from './components/ConfigDialog';
 
-// 主题
-const themes: Theme<any>[] = [
+// 内置主题
+const builtInThemes: Theme<any>[] = [
     defaultTheme,
     fishermanTheme,
     jinlunTheme,
@@ -156,8 +162,15 @@ const Symbol: FC<SymbolProps> = ({ x, y, icon, isCover, status, onClick }) => {
                 style={{ opacity: isCover ? 0.5 : 1 }}
             >
                 {typeof icon.content === 'string' ? (
-                    <i>{icon.content}</i>
+                    icon.content.startsWith('http') ? (
+                        /*图片外链*/
+                        <img src={icon.content} alt="" />
+                    ) : (
+                        /*字符表情*/
+                        <i>{icon.content}</i>
+                    )
                 ) : (
+                    /*ReactNode*/
                     icon.content
                 )}
             </div>
@@ -166,12 +179,12 @@ const Symbol: FC<SymbolProps> = ({ x, y, icon, isCover, status, onClick }) => {
 };
 
 // 从url初始化主题
-const themeFromPath: string = parseThemePath(location.href);
+const themeFromPath: string = parsePathThemeName(location.href);
+const customThemeFromPath = parsePathCustomTheme(location.href);
 
 const App: FC = () => {
-    const [curTheme, setCurTheme] = useState<Theme<any>>(
-        themes.find((theme) => theme.name === themeFromPath) ?? defaultTheme
-    );
+    const [curTheme, setCurTheme] = useState<Theme<any>>(defaultTheme);
+    const [themes, setThemes] = useState<Theme<any>[]>(builtInThemes);
 
     const [scene, setScene] = useState<Scene>(makeScene(1, curTheme.icons));
     const [level, setLevel] = useState<number>(1);
@@ -182,6 +195,7 @@ const App: FC = () => {
     const [finished, setFinished] = useState<boolean>(false);
     const [tipText, setTipText] = useState<string>('');
     const [animating, setAnimating] = useState<boolean>(false);
+    const [configDialogShow, setConfigDialogShow] = useState<boolean>(false);
 
     // 音效
     const soundRefMap = useRef<Record<string, HTMLAudioElement>>({});
@@ -200,6 +214,21 @@ const App: FC = () => {
         }
     }, [bgmOn]);
 
+    // 初始化主题
+    useEffect(() => {
+        if (customThemeFromPath) {
+            // 自定义主题
+            setThemes([...themes, customThemeFromPath]);
+            setCurTheme(customThemeFromPath);
+        } else if (themeFromPath) {
+            // 内置主题
+            setCurTheme(
+                themes.find((theme) => theme.name === themeFromPath) ??
+                    defaultTheme
+            );
+        }
+    }, []);
+
     // 主题切换
     useEffect(() => {
         // 初始化时不加载bgm
@@ -210,7 +239,8 @@ const App: FC = () => {
             }, 300);
         }
         restart();
-        // 更改路径
+        // 更改路径query
+        if (customThemeFromPath) return;
         history.pushState(
             {},
             curTheme.title,
@@ -420,12 +450,17 @@ const App: FC = () => {
         setAnimating(false);
     };
 
+    // 自定义整活
+    const customZhenghuo = (theme: Theme<string>) => {
+        setCurTheme(theme);
+    };
+
     return (
         <>
             <h2>{curTheme.title}</h2>
-            <h6>
+            <p>
                 <GithubIcon />
-            </h6>
+            </p>
             <h3 className="flex-container flex-center">
                 主题:
                 {/*TODO themes维护方式调整*/}
@@ -486,10 +521,18 @@ const App: FC = () => {
                 {/*<button onClick={test}>测试</button>*/}
             </div>
 
+            <button
+                onClick={() => setConfigDialogShow(true)}
+                className="zhenghuo-button primary"
+            >
+                我要整活
+            </button>
+
             <Info />
 
             <BeiAn />
 
+            {/*提示弹窗*/}
             {finished && (
                 <div className="modal">
                     <h1>{tipText}</h1>
@@ -497,6 +540,13 @@ const App: FC = () => {
                 </div>
             )}
 
+            {/*自定义主题弹窗*/}
+            <ConfigDialog
+                show={configDialogShow}
+                closeMethod={() => setConfigDialogShow(false)}
+                previewMethod={customZhenghuo}
+            />
+
             {/*bgm*/}
             <button className="bgm-button" onClick={() => setBgmOn(!bgmOn)}>
                 {bgmOn ? '🔊' : '🔈'}
diff --git a/src/components/ConfigDialog.module.scss b/src/components/ConfigDialog.module.scss
new file mode 100644
index 0000000..52d18fe
--- /dev/null
+++ b/src/components/ConfigDialog.module.scss
@@ -0,0 +1,100 @@
+.dialog {
+    text-align: left;
+
+    &Wrapper {
+        z-index: 10;
+        position: fixed;
+        left: 50%;
+        top: 0;
+        width: calc(100% - 32px);
+        max-width: 500px;
+        bottom: 0;
+        transform: translateX(-50%) translateY(-100%);
+        opacity: 0;
+        background-color: white;
+        transition: 0.3s;
+        padding: 16px;
+        display: flex;
+        flex-direction: column;
+
+        @media screen and (min-width: 1024px) {
+            margin: 36px 0;
+            border-radius: 16px;
+            box-shadow: 0 19px 38px rgb(0 0 0 / 30%),
+                0 15px 12px rgb(0 0 0 / 22%);
+        }
+    }
+
+    &Show {
+        transform: translateX(-50%) translateY(0);
+        opacity: 1;
+    }
+
+    .error {
+        color: crimson;
+    }
+
+    h4 {
+        margin: 8px 0;
+    }
+}
+
+.add {
+    &Btn {
+        border-radius: 8px;
+        width: 50px;
+        height: 50px;
+        border: 1px solid gray;
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        &Empty::before {
+            content: '+';
+            font-size: 2em;
+        }
+
+        img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+    }
+
+    &Dialog {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        width: 90%;
+        padding: 12px;
+        transform: translateX(-50%) translateY(-60vh);
+        opacity: 0;
+        transition: 0.3s;
+        background-color: white;
+        border-radius: 8px;
+        border: 2px solid #535bf2;
+
+        &Show {
+            transform: translateX(-50%) translateY(-50%);
+            opacity: 1;
+        }
+    }
+}
+
+.delete {
+    &Btn {
+        flex-grow: 1;
+        border-radius: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: #f9f9f9;
+        font-size: 1.5em;
+        color: #999;
+
+        span {
+            transform: rotate(45deg);
+        }
+    }
+}
diff --git a/src/components/ConfigDialog.tsx b/src/components/ConfigDialog.tsx
new file mode 100644
index 0000000..86ca31c
--- /dev/null
+++ b/src/components/ConfigDialog.tsx
@@ -0,0 +1,532 @@
+import React, { FC, useEffect, useRef, useState } from 'react';
+import style from './ConfigDialog.module.scss';
+import classNames from 'classnames';
+import { Icon, Sound, Theme } from '../themes/interface';
+import { defaultSounds } from '../themes/default';
+import { QRCodeSVG } from 'qrcode.react';
+
+const STORAGEKEY = 'customTheme';
+let storageTheme: Theme<any>;
+try {
+    const configString = localStorage.getItem(STORAGEKEY);
+    if (configString) {
+        const parseRes = JSON.parse(configString);
+        if (typeof parseRes === 'object') storageTheme = parseRes;
+    }
+} catch (e) {
+    //
+}
+
+export const ConfigDialog: FC<{
+    show: boolean;
+    closeMethod: () => void;
+    previewMethod: (theme: Theme<string>) => void;
+}> = ({ show, closeMethod, previewMethod }) => {
+    const [sounds, setSounds] = useState<Sound[]>([]);
+    const [icons, setIcons] = useState<Icon[]>([]);
+    const inputRefMap = useRef<
+        Record<
+            'name' | 'link' | 'clickSound' | 'tripleSound' | string,
+            HTMLInputElement | HTMLSelectElement
+        >
+    >({});
+    const [configError, setConfigError] = useState<string>('');
+    const [customThemeInfo, setCustomThemeInfo] = useState<{
+        title: string;
+        desc?: string;
+        bgm?: string;
+    }>({ title: '', desc: '', bgm: '' });
+    const [addDialog, setAddDialog] = useState<{
+        show: boolean;
+        type: 'sound' | 'icon';
+        iconForm?: Icon;
+        soundForm?: Sound;
+        error: string;
+        idx?: number;
+    }>({
+        show: false,
+        type: 'sound',
+        error: '',
+    });
+    const [genLink, setGenLink] = useState<string>('');
+
+    // 初始化
+    useEffect(() => {
+        if (storageTheme) {
+            const { title, desc, bgm, sounds, icons } = storageTheme;
+            setSounds(
+                sounds.filter(
+                    (s) => !['triple', 'button-click'].includes(s.name)
+                )
+            );
+            setIcons(
+                storageTheme.icons.map((icon) => {
+                    if (icon.clickSound === 'button-click')
+                        icon.clickSound = '';
+                    if (icon.tripleSound === 'triple') icon.tripleSound = '';
+                    return icon;
+                })
+            );
+            setCustomThemeInfo({
+                title,
+                // @ts-ignore
+                desc,
+                bgm,
+            });
+        }
+    }, []);
+
+    // 音效保存
+    const saveSound = (sound: Sound, idx?: number) => {
+        if (!sound.src.startsWith('http')) return '请输入http/https链接';
+        const newSounds = sounds.slice();
+        const newIcons = icons.slice();
+        if (idx != null) {
+            // 编辑
+            for (let i = 0; i < sounds.length; i++) {
+                if (sounds[i].name === sound.name && i !== idx) {
+                    return '名称已存在';
+                }
+            }
+            // 检查编辑的音效是否有引用并修改
+            const oldSoundName = sounds[idx].name;
+            for (const icon of newIcons) {
+                if (icon.clickSound === oldSoundName)
+                    icon.clickSound = sound.name;
+                if (icon.tripleSound === oldSoundName)
+                    icon.tripleSound = sound.name;
+            }
+            newSounds[idx] = sound;
+        } else {
+            // 新增
+            if (sounds.find((s) => s.name === sound.name)) return '名称已存在';
+            newSounds.push(sound);
+        }
+        setIcons(newIcons);
+        setSounds(newSounds);
+    };
+    const onSoundClick = (idx?: number) => {
+        if (addDialog.show) return;
+        setAddDialog({
+            idx,
+            show: true,
+            type: 'sound',
+            soundForm: {
+                name: '',
+                src: '',
+            },
+            error: '',
+        });
+    };
+
+    // 图片保存
+    const saveIcon = (icon: Icon, idx?: number) => {
+        if (
+            typeof icon.content !== 'string' ||
+            !icon.content?.startsWith('http')
+        )
+            return '请输入http/https链接';
+        const newIcons = icons.slice();
+        if (idx != null) {
+            // 编辑
+            for (let i = 0; i < icons.length; i++) {
+                if (icons[i].name === icon.name && i !== idx) {
+                    return '名称已存在';
+                }
+            }
+            newIcons[idx] = icon;
+        } else {
+            // 新增
+            if (icons.find((i) => i.name === icon.name)) return '名称已存在';
+            newIcons.push(icon);
+        }
+        setIcons(newIcons);
+    };
+    const onIconClick = (idx?: number) => {
+        if (addDialog.show) return;
+        setAddDialog({
+            idx,
+            show: true,
+            type: 'icon',
+            iconForm:
+                idx != null
+                    ? { ...icons[idx] }
+                    : {
+                          name: '',
+                          content: '',
+                          tripleSound: '',
+                          clickSound: '',
+                      },
+            error: '',
+        });
+    };
+
+    // 回显
+    useEffect(() => {
+        const { show, type, idx } = addDialog;
+        if (show) return;
+        if (!inputRefMap.current) return;
+        if (type === 'icon') {
+            inputRefMap.current.name.value = idx != null ? icons[idx].name : '';
+            inputRefMap.current.link.value =
+                idx != null ? (icons[idx].content as string) : '';
+            inputRefMap.current.clickSound.value =
+                idx != null ? icons[idx]?.clickSound || '' : '';
+            inputRefMap.current.tripleSound.value =
+                idx != null ? icons[idx]?.tripleSound || '' : '';
+        } else {
+            inputRefMap.current.name.value =
+                idx != null ? sounds[idx].name : '';
+            inputRefMap.current.link.value = idx != null ? sounds[idx].src : '';
+        }
+    }, [addDialog]);
+
+    // 添加单项的点击
+    const onAddDialogSaveClick = () => {
+        const error = (addDialog.type === 'sound' ? saveSound : saveIcon)(
+            addDialog[`${addDialog.type}Form`] as any,
+            addDialog.idx
+        );
+        if (error) {
+            setAddDialog({ ...addDialog, error });
+        } else {
+            closeAddDialog();
+        }
+    };
+
+    // 关闭添加弹窗
+    const closeAddDialog = () => {
+        setAddDialog({ ...addDialog, show: false });
+    };
+
+    // 生成主题
+    const generateTheme: () => Promise<Theme<any>> = async () => {
+        const { title, desc, bgm } = customThemeInfo;
+        if (bgm && bgm.startsWith('http'))
+            return Promise.reject('bgm请输入http/https链接');
+        if (!title) return Promise.reject('请填写标题');
+        if (icons.length !== 10) return Promise.reject('图片素材需要提供10张');
+
+        let hasDefaultMaterial = false;
+        const customIcons = icons.map((icon) => {
+            if (!icon.clickSound) {
+                hasDefaultMaterial = true;
+                icon.clickSound = 'button-click';
+            }
+            if (!icon.tripleSound) {
+                hasDefaultMaterial = true;
+                icon.tripleSound = 'triple';
+            }
+            return { ...icon };
+        });
+        const customSounds = sounds.map((sounds) => ({ ...sounds }));
+        if (hasDefaultMaterial) {
+            customSounds.push(...defaultSounds);
+        }
+
+        const customTheme: Theme<any> = {
+            name: `自定义-${title}`,
+            title,
+            desc,
+            bgm,
+            icons: customIcons,
+            sounds: customSounds,
+        };
+
+        return Promise.resolve(customTheme);
+    };
+
+    // 预览
+    const onPreviewClick = () => {
+        setConfigError('');
+        generateTheme()
+            .then((theme) => {
+                previewMethod(theme);
+                localStorage.setItem(STORAGEKEY, JSON.stringify(theme));
+                closeMethod();
+            })
+            .catch((e) => {
+                setConfigError(e);
+            });
+    };
+
+    // 生成二维码和链接
+    const onGenQrLinkClick = () => {
+        setConfigError('');
+        setGenLink('');
+        generateTheme()
+            .then((theme) => {
+                const stringify = JSON.stringify(theme);
+                localStorage.setItem(STORAGEKEY, stringify);
+                const link = `${
+                    location.origin
+                }?customTheme=${encodeURIComponent(stringify)}`;
+                setGenLink(link);
+            })
+            .catch((e) => {
+                setConfigError(e);
+            });
+    };
+
+    // 删除按钮
+    const DeleteBtn: FC<{ idx: number; type: 'sound' | 'icon' }> = ({
+        idx,
+        type,
+    }) => {
+        const deleteItem = () => {
+            if (type === 'sound') {
+                const newSounds = sounds.slice();
+                newSounds.splice(idx, 1);
+                setSounds(newSounds);
+            } else {
+                const newIcons = icons.slice();
+                newIcons.splice(idx, 1);
+                setIcons(newIcons);
+            }
+        };
+        return (
+            <div className={style.deleteBtn} onClick={deleteItem}>
+                <span>+</span>
+            </div>
+        );
+    };
+
+    // @ts-ignore
+    return (
+        <div
+            className={classNames(
+                style.dialog,
+                style.dialogWrapper,
+                show && style.dialogShow,
+                'flex-container flex-container'
+            )}
+        >
+            <p>
+                目前自定义仅支持配置链接，可网上自行搜索素材，或者将自己处理好的素材上传第三方存储服务上再复制外链，安利一波七牛云（七牛云打钱）对象存储，
+                白嫖额度基本够用（<strong>但还是需要注意压缩素材</strong>）
+            </p>
+
+            {/*基本配置*/}
+            <h4 className="flex-container flex-center">
+                标题：
+                <input
+                    value={customThemeInfo.title}
+                    placeholder="必填"
+                    className="flex-grow"
+                    onChange={(e) =>
+                        setCustomThemeInfo({
+                            ...customThemeInfo,
+                            title: e.target.value,
+                        })
+                    }
+                />
+            </h4>
+            <h4 className="flex-container flex-center">
+                描述：
+                <input
+                    value={customThemeInfo.desc}
+                    placeholder="可选"
+                    className="flex-grow"
+                    onChange={(e) =>
+                        setCustomThemeInfo({
+                            ...customThemeInfo,
+                            desc: e.target.value,
+                        })
+                    }
+                />
+            </h4>
+            <h4 className="flex-container flex-center">
+                背景音乐：
+                <input
+                    value={customThemeInfo.bgm}
+                    placeholder="可选 http(s)://example.com/src.audioOrImage"
+                    className="flex-grow"
+                    onChange={(e) =>
+                        setCustomThemeInfo({
+                            ...customThemeInfo,
+                            bgm: e.target.value,
+                        })
+                    }
+                />
+            </h4>
+
+            <h4>音效素材</h4>
+            <div className="flex-container">
+                {sounds.map((sound, idx) => (
+                    <div
+                        className="flex-container flex-column"
+                        key={sound.name}
+                    >
+                        <div
+                            onClick={() => onSoundClick(idx)}
+                            className={classNames(style.addBtn)}
+                        >
+                            {sound.name}
+                        </div>
+                        <DeleteBtn idx={idx} type={'sound'} />
+                    </div>
+                ))}
+                {sounds.length < 20 && (
+                    <div
+                        onClick={() => onSoundClick()}
+                        className={classNames(style.addBtn, style.addBtnEmpty)}
+                    />
+                )}
+            </div>
+            <h4>图片素材 {icons.length}/10</h4>
+            <div className="flex-container">
+                {icons.map((icon, idx) => (
+                    <div className="flex-container flex-column" key={icon.name}>
+                        <div
+                            onClick={() => onIconClick(idx)}
+                            className={classNames(style.addBtn)}
+                        >
+                            {/* @ts-ignore*/}
+                            <img src={icon.content} alt="" />
+                        </div>
+                        <DeleteBtn idx={idx} type={'icon'} />
+                    </div>
+                ))}
+                {icons.length < 10 && (
+                    <div
+                        onClick={() => onIconClick()}
+                        className={classNames(style.addBtn, style.addBtnEmpty)}
+                    />
+                )}
+            </div>
+
+            <div className="flex-spacer" />
+            {genLink && <textarea value={genLink} />}
+            {configError && <div className={style.error}>{configError}</div>}
+            <div className="flex-container">
+                <button className="flex-grow" onClick={onPreviewClick}>
+                    保存并预览
+                </button>
+                <button className="flex-grow" onClick={onGenQrLinkClick}>
+                    生成二维码&链接
+                </button>
+                <button className="flex-grow" onClick={closeMethod}>
+                    关闭
+                </button>
+            </div>
+
+            {/*添加弹窗*/}
+            <div
+                className={classNames(
+                    style.addDialog,
+                    addDialog.show && style.addDialogShow,
+                    'flex-container flex-column'
+                )}
+            >
+                <div className="flex-container flex-center">
+                    名称：
+                    <input
+                        ref={(ref) => ref && (inputRefMap.current.name = ref)}
+                        className="flex-grow"
+                        placeholder="唯一名称"
+                        onChange={(e) =>
+                            setAddDialog({
+                                ...addDialog,
+                                [`${addDialog.type}Form`]: {
+                                    ...addDialog[`${addDialog.type}Form`],
+                                    name: e.target.value,
+                                },
+                            })
+                        }
+                    />
+                </div>
+                <div className="flex-container flex-center">
+                    链接：
+                    <input
+                        ref={(ref) => ref && (inputRefMap.current.link = ref)}
+                        className="flex-grow"
+                        placeholder="http(s)://example.com/src.audioOrImage"
+                        onChange={(e) =>
+                            setAddDialog({
+                                ...addDialog,
+                                [`${addDialog.type}Form`]: {
+                                    ...addDialog[`${addDialog.type}Form`],
+                                    [addDialog.type === 'sound'
+                                        ? 'src'
+                                        : 'content']: e.target.value,
+                                },
+                            })
+                        }
+                    />
+                </div>
+                {addDialog.type === 'icon' && (
+                    <>
+                        <div className="flex-container flex-center">
+                            点击音效：
+                            <select
+                                ref={(ref) =>
+                                    ref &&
+                                    (inputRefMap.current.clickSound = ref)
+                                }
+                                className="flex-grow"
+                                onChange={(e) =>
+                                    setAddDialog({
+                                        ...addDialog,
+                                        /*@ts-ignore*/
+                                        iconForm: {
+                                            ...addDialog.iconForm,
+                                            clickSound: e.target.value,
+                                        },
+                                    })
+                                }
+                            >
+                                <option value="">默认</option>
+                                {sounds.map((s) => (
+                                    <option key={s.name} value={s.name}>
+                                        {s.name}
+                                    </option>
+                                ))}
+                            </select>
+                        </div>
+                        <div className="flex-container flex-center">
+                            三连音效：
+                            <select
+                                ref={(ref) =>
+                                    ref &&
+                                    (inputRefMap.current.tripleSound = ref)
+                                }
+                                className="flex-grow"
+                                onChange={(e) =>
+                                    setAddDialog({
+                                        ...addDialog,
+                                        /*@ts-ignore*/
+                                        iconForm: {
+                                            ...addDialog.iconForm,
+                                            tripleSound: e.target.value,
+                                        },
+                                    })
+                                }
+                            >
+                                <option value="">默认</option>
+                                {sounds.map((s) => (
+                                    <option key={s.name} value={s.name}>
+                                        {s.name}
+                                    </option>
+                                ))}
+                            </select>
+                        </div>
+                    </>
+                )}
+                {addDialog.error && (
+                    <div className={style.error}>{addDialog.error}</div>
+                )}
+                <div className="flex-container">
+                    <button className="flex-grow" onClick={closeAddDialog}>
+                        取消
+                    </button>
+                    <button
+                        className="flex-grow primary"
+                        onClick={onAddDialogSaveClick}
+                    >
+                        保存
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+};
diff --git a/src/main.tsx b/src/main.tsx
index a3f01d6..13a24b0 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
-import './index.css';
+import './styles/global.scss';
+import './styles/utils.scss';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
     <React.StrictMode>
diff --git a/src/index.css b/src/styles/global.scss
similarity index 82%
rename from src/index.css
rename to src/styles/global.scss
index 86601e8..c769682 100644
--- a/src/index.css
+++ b/src/styles/global.scss
@@ -34,11 +34,17 @@ h1 {
 }
 
 select {
-    border: 2px solid gray;
+    border: 1px solid gray;
     border-radius: 4px;
     padding: 4px 8px;
 }
 
+input {
+    border: 1px solid gray;
+    border-radius: 4px;
+    padding: 8px 12px;
+}
+
 button {
     border-radius: 8px;
     border: 1px solid transparent;
@@ -51,15 +57,15 @@ button {
     transition: border-color 0.25s;
     word-break: keep-all;
     outline: none;
-}
 
-button:hover {
-    border-color: #646cff;
-}
+    &.primary {
+        background-color: #646cff;
+        color: white;
+    }
 
-button:focus,
-button:focus-visible {
-    outline: 4px auto -webkit-focus-ring-color;
+    &:hover:not(.primary) {
+        border-color: #646cff;
+    }
 }
 
 @media (prefers-color-scheme: light) {
diff --git a/src/styles/utils.scss b/src/styles/utils.scss
new file mode 100644
index 0000000..dc777f3
--- /dev/null
+++ b/src/styles/utils.scss
@@ -0,0 +1,31 @@
+.flex-container {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+}
+
+.flex-center {
+    justify-content: center;
+    align-items: center;
+}
+
+.flex-row {
+    flex-direction: row;
+}
+
+.flex-column {
+    flex-direction: column;
+}
+
+.flex-grow {
+    flex-grow: 1;
+}
+
+.flex-between {
+    justify-content: space-between;
+    align-items: center;
+}
+
+.flex-spacer {
+    flex: 1 1 auto;
+}
diff --git a/src/themes/interface.ts b/src/themes/interface.ts
index f933753..3d7ad32 100644
--- a/src/themes/interface.ts
+++ b/src/themes/interface.ts
@@ -7,13 +7,14 @@ export interface Icon<T = string> {
     tripleSound: T;
 }
 
-interface Sound<T = string> {
+export interface Sound<T = string> {
     name: T;
     src: string;
 }
 
 type Operation = 'shift' | 'undo' | 'wash';
 
+// TODO title name 冗余
 export interface Theme<SoundNames> {
     title: string;
     desc?: ReactNode;
diff --git a/src/utils.ts b/src/utils.ts
index 7e5fe06..d83e833 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,3 +1,5 @@
+import { Theme } from './themes/interface';
+
 export const randomString: (len: number) => string = (len) => {
     const pool = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
     let res = '';
@@ -16,8 +18,30 @@ export const waitTimeout: (timeout: number) => Promise<void> = (timeout) => {
     });
 };
 
-export const parseThemePath: (url: string) => string = (url) => {
+// 从url获取内置主题name
+export const parsePathThemeName: (url: string) => string = (url) => {
     const urlObj = new URL(url);
     const params = urlObj.searchParams;
     return decodeURIComponent(params.get('theme') || '默认');
 };
+
+// 从url解析自定义主题JSON
+export const parsePathCustomTheme: (url: string) => Theme<string> | null = (
+    url
+) => {
+    const urlObj = new URL(url);
+    const params = urlObj.searchParams;
+    const customThemeJsonString = params.get('customTheme');
+    if (!customThemeJsonString) return null;
+    try {
+        const parseTheme = JSON.parse(
+            decodeURIComponent(customThemeJsonString)
+        );
+        // TODO 解析内容校验
+        console.log(parseTheme);
+        return parseTheme;
+    } catch (e) {
+        console.log(e);
+        return null;
+    }
+};
diff --git a/yarn.lock b/yarn.lock
index 07f0183..23c9e39 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -782,6 +782,14 @@ ansi-styles@^6.0.0:
   resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.1.1.tgz#63cd61c72283a71cb30bd881dbb60adada74bc70"
   integrity sha512-qDOv24WjnYuL+wbwHdlsYZFy+cgPtrYw0Tn7GLORicQp9BkQLzrgI3Pm4VyR9ERZ41YTn7KlMPuL1n05WdZvmg==
 
+anymatch@~3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716"
+  integrity sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
 arg@^4.1.0:
   version "4.1.3"
   resolved "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz#269fc7ad5b8e42cb63c896d5666017261c144089"
@@ -843,6 +851,11 @@ balanced-match@^2.0.0:
   resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-2.0.0.tgz#dc70f920d78db8b858535795867bf48f820633d9"
   integrity sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==
 
+binary-extensions@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
+  integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -851,7 +864,7 @@ brace-expansion@^1.1.7:
     balanced-match "^1.0.0"
     concat-map "0.0.1"
 
-braces@^3.0.2:
+braces@^3.0.2, braces@~3.0.2:
   version "3.0.2"
   resolved "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
   integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
@@ -922,6 +935,26 @@ chalk@^4.0.0, chalk@^4.1.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
+"chokidar@>=3.0.0 <4.0.0":
+  version "3.5.3"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
+  integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
+  dependencies:
+    anymatch "~3.1.2"
+    braces "~3.0.2"
+    glob-parent "~5.1.2"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.6.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
+classnames@^2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
+  integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
+
 clean-stack@^2.0.0:
   version "2.2.0"
   resolved "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
@@ -1963,7 +1996,7 @@ gitconfiglocal@^1.0.0:
   dependencies:
     ini "^1.3.2"
 
-glob-parent@^5.1.2:
+glob-parent@^5.1.2, glob-parent@~5.1.2:
   version "5.1.2"
   resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
   integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
@@ -2146,6 +2179,11 @@ ignore@^5.2.0:
   resolved "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz#6d3bac8fa7fe0d45d9f9be7bac2fc279577e345a"
   integrity sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==
 
+immutable@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.1.0.tgz#f795787f0db780183307b9eb2091fcac1f6fafef"
+  integrity sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==
+
 import-fresh@^3.0.0, import-fresh@^3.2.1:
   version "3.3.0"
   resolved "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
@@ -2208,6 +2246,13 @@ is-bigint@^1.0.1:
   dependencies:
     has-bigints "^1.0.1"
 
+is-binary-path@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
+  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
+  dependencies:
+    binary-extensions "^2.0.0"
+
 is-boolean-object@^1.1.0:
   version "1.1.2"
   resolved "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz#5c6dc200246dd9321ae4b885a114bb1f75f63719"
@@ -2250,7 +2295,7 @@ is-fullwidth-code-point@^4.0.0:
   resolved "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-4.0.0.tgz#fae3167c729e7463f8461ce512b080a49268aa88"
   integrity sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ==
 
-is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3:
+is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
   version "4.0.3"
   resolved "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
   integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
@@ -2742,7 +2787,7 @@ normalize-package-data@^3.0.0:
     semver "^7.3.4"
     validate-npm-package-license "^3.0.1"
 
-normalize-path@^3.0.0:
+normalize-path@^3.0.0, normalize-path@~3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
   integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
@@ -2992,7 +3037,7 @@ picocolors@^1.0.0:
   resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
   integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
 
-picomatch@^2.3.1:
+picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1:
   version "2.3.1"
   resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
@@ -3095,6 +3140,11 @@ q@^1.5.1:
   resolved "https://registry.npmjs.org/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
   integrity sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw==
 
+qrcode.react@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/qrcode.react/-/qrcode.react-3.1.0.tgz#5c91ddc0340f768316fbdb8fff2765134c2aecd8"
+  integrity sha512-oyF+Urr3oAMUG/OiOuONL3HXM+53wvuH3mtIWQrYmsXoAq0DkvZp2RYUWFSMFtbdOpuS++9v+WAkzNVkMlNW6Q==
+
 queue-microtask@^1.2.2:
   version "1.2.3"
   resolved "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
@@ -3188,6 +3238,13 @@ readable-stream@~2.3.6:
     string_decoder "~1.1.1"
     util-deprecate "~1.0.1"
 
+readdirp@~3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
+  integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
+  dependencies:
+    picomatch "^2.2.1"
+
 redent@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz#e557b7998316bb53c9f1f56fa626352c6963059f"
@@ -3311,6 +3368,15 @@ safe-buffer@~5.2.0:
   resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
   integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
 
+sass@^1.55.0:
+  version "1.55.0"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.55.0.tgz#0c4d3c293cfe8f8a2e8d3b666e1cf1bff8065d1c"
+  integrity sha512-Pk+PMy7OGLs9WaxZGJMn7S96dvlyVBwwtToX895WmCpAOr5YiJYEUJfiJidMuKb613z2xNWcXCHEuOvjZbqC6A==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
+    immutable "^4.0.0"
+    source-map-js ">=0.6.2 <2.0.0"
+
 scheduler@^0.23.0:
   version "0.23.0"
   resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
@@ -3392,7 +3458,7 @@ slice-ansi@^5.0.0:
     ansi-styles "^6.0.0"
     is-fullwidth-code-point "^4.0.0"
 
-source-map-js@^1.0.2:
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==