Mirrored_Repos/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-11-22 21:47:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2163 from rramiachraf/master

Browse Source 
feat: reactive title bar based on user's theme
This commit is contained in:
Kavin 2023-03-05 20:26:52 +00:00 committed by GitHub
commit 1d7d6807cd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@ -7,6 +7,7 @@
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<link title="Piped" type="application/opensearchdescription+xml" rel="search" href="/opensearch.xml" /> <link title="Piped" type="application/opensearchdescription+xml" rel="search" href="/opensearch.xml" />
<title>Piped</title> <title>Piped</title>
<meta name="theme-color" content="#0f0f0f">
<meta property="og:title" content="Piped" /> <meta property="og:title" content="Piped" />
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta property="og:image" content="/img/icons/favicon-32x32.png" /> <meta property="og:image" content="/img/icons/favicon-32x32.png" />

8
src/App.vue
View File

@ -34,6 +34,14 @@ export default {
if (themePref == "auto") this.theme = darkModePreference.matches ? "dark" : "light"; if (themePref == "auto") this.theme = darkModePreference.matches ? "dark" : "light";
else this.theme = themePref; else this.theme = themePref;
// Change title bar color based on user's theme
const themeColor = document.querySelector("meta[name='theme-color']");
if (this.theme === "light") {
themeColor.setAttribute("content", "#FFF");
} else {
themeColor.setAttribute("content", "#0F0F0F");
}
// Used for the scrollbar // Used for the scrollbar
const root = document.querySelector(":root"); const root = document.querySelector(":root");
this.theme == "dark" ? root.classList.add("dark") : root.classList.remove("dark"); this.theme == "dark" ? root.classList.add("dark") : root.classList.remove("dark");