github-mirror/YesPlayMusic
2
0
Fork 0
mirror of https://github.com/qier222/YesPlayMusic.git synced 2025-02-16 23:02:49 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

feat: dynamic PWA theme color

Browse Source
This commit is contained in:
qier222 2020-10-25 21:55:20 +08:00
parent b655c59761
commit c448230c14
3 changed files with 19 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/store/index.js
View File

@ -5,6 +5,7 @@ import mutations from "./mutations";
import actions from "./actions";
import initState from "./initState";
import { Howl, Howler } from "howler";
import { changeAppearance } from "@/utils/common";
if (localStorage.getItem("appVersion") === null) {
localStorage.setItem("player", JSON.stringify(initState.player));
@ -45,23 +46,12 @@ if ([undefined, null].includes(store.state.settings.lang)) {
localStorage.setItem("settings", JSON.stringify(store.state.settings));
}
if (
store.state.settings.appearance !== "auto" &&
store.state.settings.appearance !== undefined
) {
document.body.setAttribute("data-theme", store.state.settings.appearance);
} else {
document.body.setAttribute(
"data-theme",
window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
);
}
changeAppearance(store.state.settings.appearance);
window
.matchMedia("(prefers-color-scheme: dark)")
.addEventListener("change", (e) => {
.addEventListener("change", () => {
if (store.state.settings.appearance === "auto") {
store.commit("updateTmpAppearance", e.matches ? "dark" : "light");
document.body.setAttribute("data-theme", e.matches ? "dark" : "light");
changeAppearance(store.state.settings.appearance);
}
});

12
src/utils/common.js
View File

@ -95,3 +95,15 @@ export function dailyTask() {
dailySignin(1);
}
}
export function changeAppearance(appearance) {
if (appearance === "auto" || appearance === undefined) {
appearance = window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "light";
}
document.body.setAttribute("data-theme", appearance);
document
.querySelector('meta[name="theme-color"]')
.setAttribute("content", appearance === "dark" ? "#222" : "#fff");
}

13
src/views/settings.vue
View File

@ -113,6 +113,8 @@
<script>
import { mapState } from "vuex";
import { doLogout } from "@/utils/auth";
import { changeAppearance } from "@/utils/common";
export default {
name: "settings",
computed: {
@ -136,16 +138,7 @@ export default {
key: "appearance",
value,
});
if (value === "auto") {
document.body.setAttribute(
"data-theme",
window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "light"
);
} else {
document.body.setAttribute("data-theme", value);
}
changeAppearance(value);
},
},
musicQuality: {