maciejpedzich/spotifyplaylistarchive.com
1
0
Fork 0
mirror of https://github.com/maciejpedzich/spotifyplaylistarchive.com.git synced 2024-09-20 02:26:20 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

Implement custom theme-switching logic

Browse Source
This commit is contained in:
Maciej Pędzich 2023-01-21 23:54:33 +01:00
parent c14bf4e67a
commit a451756815
4 changed files with 33 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
package-lock.json generated
View File

@ -22,7 +22,6 @@
"format-duration": "^3.0.2",
"html-entities": "^2.3.3",
"tailwindcss": "^3.2.4",
"theme-change": "^2.3.0",
"vue": "^3.2.45"
},
"devDependencies": {
@ -6104,11 +6103,6 @@
"node": ">=10.13.0"
}
},
"node_modules/theme-change": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/theme-change/-/theme-change-2.3.0.tgz",
"integrity": "sha512-MOv3g4dQfte9Q7WZKyLRshcw9JqcJCwB+CO1OS7lN1WMJcQyPzmpgwm5Ve55vQ4qt62g++A9+8s1x+vRPpm42w=="
},
"node_modules/tiny-glob": {
"version": "0.2.9",
"resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz",
@ -10992,11 +10986,6 @@
}
}
},
"theme-change": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/theme-change/-/theme-change-2.3.0.tgz",
"integrity": "sha512-MOv3g4dQfte9Q7WZKyLRshcw9JqcJCwB+CO1OS7lN1WMJcQyPzmpgwm5Ve55vQ4qt62g++A9+8s1x+vRPpm42w=="
},
"tiny-glob": {
"version": "0.2.9",
"resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz",

1
package.json
View File

@ -32,7 +32,6 @@
"format-duration": "^3.0.2",
"html-entities": "^2.3.3",
"tailwindcss": "^3.2.4",
"theme-change": "^2.3.0",
"vue": "^3.2.45"
},
"devDependencies": {

6
src/components/NavItems.astro
View File

@ -31,7 +31,11 @@ const { class: _class } = Astro.props as Props;
</li>
<div class="md:flex-1"></div>
<li>
<button data-toggle-theme="dark,light" data-act-class="light">
<button
data-toggle-theme="dark,light"
data-act-class="light"
onclick="switchColorTheme()"
>
<i class="fa-solid fa-circle-half-stroke"></i>
Switch color theme
</button>

49
src/layouts/BaseLayout.astro
View File

@ -17,27 +17,6 @@ const metaTagTitle = `${title} - Spotify Playlist Archive`;
<!DOCTYPE html>
<html lang="en">
<head>
<script is:inline>
if (localStorage.getItem('theme') === null) {
if (
window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches
) {
document.documentElement.setAttribute('data-theme', 'dark');
} else {
document.documentElement.setAttribute('data-theme', 'light');
}
} else {
document.documentElement.setAttribute(
'data-theme',
localStorage.getItem('theme')
);
}
</script>
<script>
import { themeChange } from 'theme-change';
themeChange();
</script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="generator" content={Astro.generator} />
@ -55,6 +34,34 @@ const metaTagTitle = `${title} - Spotify Playlist Archive`;
<meta name="twitter:creator" content="@MaciejPedzich" />
<meta property="twitter:title" content={metaTagTitle} />
<meta property="twitter:description" content={description} />
<script is:inline>
if (localStorage.getItem('theme') === null) {
if (
window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches
) {
document.documentElement.setAttribute('data-theme', 'dark');
} else {
document.documentElement.setAttribute('data-theme', 'light');
}
} else {
document.documentElement.setAttribute(
'data-theme',
localStorage.getItem('theme')
);
}
const switchColorTheme = () => {
const currentTheme =
document.documentElement.getAttribute('data-theme');
if (currentTheme === 'dark') {
document.documentElement.setAttribute('data-theme', 'light');
} else {
document.documentElement.setAttribute('data-theme', 'dark');
}
};
</script>
</head>
<body>
<header