GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-05-06 20:43:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat：重构主题存储逻辑，优化加载背景和颜色设置

Browse Source
This commit is contained in:
jxxghp
2025-02-06 16:00:32 +08:00
parent 2511acfea1
commit 92a0a9fe2f
6 changed files with 24 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
index.html
View File

@@ -30,6 +30,15 @@
<meta name="HandheldFriendly" content="True" />
<meta name="MobileOptimized" content="320" />
<link rel="stylesheet" type="text/css" href="/loader.css" />
<script>
const loaderColor = localStorage.getItem('materio-initial-loader-bg') || '#FFFFFF'
if (loaderColor)
document.documentElement.style.setProperty('--initial-loader-bg', loaderColor)
const primaryColor = localStorage.getItem('materio-initial-loader-color') || '#9155FD'
if (primaryColor)
document.documentElement.style.setProperty('--initial-loader-color', primaryColor)
document.documentElement.style.setProperty('background', 'var(--initial-loader-bg, #fff)')
</script>
</head>
<body style="margin: 0;">
@@ -146,15 +155,7 @@
</div>
</div>
<div id="app"></div>
<script>
const loaderColor = localStorage.getItem('materio-initial-loader-bg') || '#FFFFFF'
const primaryColor = localStorage.getItem('materio-initial-loader-color') || '#9155FD'
if (loaderColor)
document.documentElement.style.setProperty('--initial-loader-bg', loaderColor)
if (primaryColor)
document.documentElement.style.setProperty('--initial-loader-color', primaryColor)
</script>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
</html>

4
public/loader.css
View File

@@ -1,7 +1,3 @@
html {
background: var(--initial-loader-bg, #fff);
}
#loading-bg {
position: fixed;
z-index: 9999;

4
src/@core/components/ThemeSwitcher.vue
View File

@@ -5,6 +5,7 @@ import type { ThemeSwitcherTheme } from '@layouts/types'
import api from '@/api'
import { checkPrefersColorSchemeIsDark } from '@/@core/utils'
import { useToast } from 'vue-toast-notification'
import { saveLocalTheme } from '../utils/theme'
// 显示器宽度
const display = useDisplay()
@@ -102,8 +103,7 @@ function updateTheme() {
savedTheme.value = theme
themeTransition()
// 保存主题到本地
localStorage.setItem('theme', theme)
localStorage.setItem('materio-initial-loader-bg', globalTheme.current.value.colors.background)
saveLocalTheme(theme, globalTheme)
}
// 切换主题

6
src/@core/utils/theme.ts Normal file
View File

@@ -0,0 +1,6 @@
export function saveLocalTheme(name: string, theme: any) {
// 存储主题到本地
localStorage.setItem('theme', name)
localStorage.setItem('materio-initial-loader-bg', theme.current.value.colors.background)
localStorage.setItem('materio-initial-loader-color', theme.current.value.colors.primary)
}

4
src/App.vue
View File

@@ -46,7 +46,11 @@ onMounted(() => {
ensureRenderComplete(() => {
nextTick(() => {
setTimeout(() => {
// 移除加载动画
removeEl('#loading-bg')
// 将background属性从html的style中移除
document.documentElement.style.removeProperty('background')
// 显示页面
show.value = true
}, 1500)
})

4
src/pages/login.vue
View File

@@ -9,6 +9,7 @@ import logo from '@images/logo.png'
import { useTheme } from 'vuetify'
import { checkPrefersColorSchemeIsDark } from '@/@core/utils'
import { urlBase64ToUint8Array } from '@/@core/utils/navigator'
import { saveLocalTheme } from '@/@core/utils/theme'
const { global: globalTheme } = useTheme()
@@ -85,8 +86,7 @@ async function setTheme() {
const autoTheme = checkPrefersColorSchemeIsDark() ? 'dark' : 'light'
globalTheme.name.value = themeValue === 'auto' ? autoTheme : themeValue
// 存储主题到本地
localStorage.setItem('theme', themeValue)
localStorage.setItem('materio-initial-loader-bg', globalTheme.current.value.colors.background)
saveLocalTheme(themeValue, globalTheme)
}
// 订阅推送通知