diff --git a/web/plugins/com.msgbyte.theme.miku/src/bg.jpg b/web/plugins/com.msgbyte.theme.miku/src/bg.jpg
new file mode 100644
index 00000000..797d77de
Binary files /dev/null and b/web/plugins/com.msgbyte.theme.miku/src/bg.jpg differ
diff --git a/web/plugins/com.msgbyte.theme.miku/src/theme.less b/web/plugins/com.msgbyte.theme.miku/src/theme.less
index fc0d59ac..fbc75237 100644
--- a/web/plugins/com.msgbyte.theme.miku/src/theme.less
+++ b/web/plugins/com.msgbyte.theme.miku/src/theme.less
@@ -2,6 +2,7 @@
   @primary-color: #39C5BB;
 
   --tc-primary-color: #39C5BB;
+  --tc-background-image: url(./bg.jpg);
 
   .bg-navbar-light {
     background-color: @primary-color;
diff --git a/web/src/routes/Entry/index.tsx b/web/src/routes/Entry/index.tsx
index 8a2c251e..f8c68faf 100644
--- a/web/src/routes/Entry/index.tsx
+++ b/web/src/routes/Entry/index.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { Redirect, Route, Switch } from 'react-router-dom';
 import { LoginView } from './LoginView';
-import bgImage from '@assets/images/bg.jpg';
 import clsx from 'clsx';
 import styles from './index.module.less';
 import loginPatternUrl from '@assets/images/login-pattern.svg';
@@ -26,10 +25,7 @@ export const EntryRoute = React.memo(() => {
           <Redirect to="/entry/login" />
         </Switch>
       </div>
-      <div
-        className="flex-1 sm:hidden bg-center bg-cover bg-no-repeat"
-        style={{ backgroundImage: `url(${bgImage})`, zIndex: -1 }}
-      />
+      <div className="flex-1 sm:hidden tc-background" style={{ zIndex: -1 }} />
     </div>
   );
 });
diff --git a/web/src/routes/Invite/index.tsx b/web/src/routes/Invite/index.tsx
index ff605d32..ee3cb816 100644
--- a/web/src/routes/Invite/index.tsx
+++ b/web/src/routes/Invite/index.tsx
@@ -2,7 +2,6 @@ import { Divider } from 'antd';
 import React from 'react';
 import { useParams } from 'react-router';
 import { InviteInfo } from './InviteInfo';
-import bgImage from '@assets/images/bg.jpg';
 import { JoinBtn } from './JoinBtn';
 import { PortalHost } from '@/components/Portal';
 import { useRecordMeasure } from '@/utils/measure-helper';
@@ -16,10 +15,7 @@ export const InviteRoute: React.FC = React.memo(() => {
 
   return (
     <PortalHost>
-      <div
-        className="h-full w-full bg-gray-600 flex justify-center items-center bg-center bg-cover bg-no-repeat"
-        style={{ backgroundImage: `url(${bgImage})` }}
-      >
+      <div className="h-full w-full bg-gray-600 flex justify-center items-center tc-background">
         <div className="w-96 p-4 rounded-lg shadow-lg bg-black bg-opacity-60 text-center">
           <InviteInfo inviteCode={inviteCode} />
 
diff --git a/web/src/styles/global.less b/web/src/styles/global.less
index 89a49c6e..bc80b2d7 100644
--- a/web/src/styles/global.less
+++ b/web/src/styles/global.less
@@ -1,6 +1,13 @@
 #tailchat-app {
   @apply text-typography-light;
 
+  --tc-background-image: url(../../assets/images/bg.jpg);
+
+  .tc-background {
+    @apply bg-center bg-cover bg-no-repeat;
+    background-image: var(--tc-background-image);
+  }
+
   /* 滚动条 */
   ::-webkit-scrollbar {
     width: 16px;