girineko/YesPlayMusic
1
0
Fork 0
mirror of https://github.com/GiriNeko/YesPlayMusic.git synced 2025-12-16 21:28:06 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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
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 actions from "./actions";
import initState from "./initState"; import initState from "./initState";
import { Howl, Howler } from "howler"; import { Howl, Howler } from "howler";
import { changeAppearance } from "@/utils/common";
if (localStorage.getItem("appVersion") === null) { if (localStorage.getItem("appVersion") === null) {
localStorage.setItem("player", JSON.stringify(initState.player)); 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)); localStorage.setItem("settings", JSON.stringify(store.state.settings));
} }
if ( changeAppearance(store.state.settings.appearance);
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"
);
}
window window
.matchMedia("(prefers-color-scheme: dark)") .matchMedia("(prefers-color-scheme: dark)")
.addEventListener("change", (e) => { .addEventListener("change", () => {
if (store.state.settings.appearance === "auto") { if (store.state.settings.appearance === "auto") {
store.commit("updateTmpAppearance", e.matches ? "dark" : "light"); changeAppearance(store.state.settings.appearance);
document.body.setAttribute("data-theme", e.matches ? "dark" : "light");
} }
}); });

12
src/utils/common.js
View file

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