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

Implement color theme switching

Browse Source
This commit is contained in:
Maciej Pędzich 2023-01-21 23:10:30 +01:00
parent 3ee7f693b2
commit a086891230
4 changed files with 44 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
package-lock.json generated
View File

@ -22,6 +22,7 @@
"format-duration": "^3.0.2",
"html-entities": "^2.3.3",
"tailwindcss": "^3.2.4",
"theme-change": "^2.3.0",
"vue": "^3.2.45"
},
"devDependencies": {
@ -6103,6 +6104,11 @@
"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",
@ -10986,6 +10992,11 @@
}
}
},
"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,6 +32,7 @@
"format-duration": "^3.0.2",
"html-entities": "^2.3.3",
"tailwindcss": "^3.2.4",
"theme-change": "^2.3.0",
"vue": "^3.2.45"
},
"devDependencies": {

7
src/components/NavItems.astro
View File

@ -29,4 +29,11 @@ const { class: _class } = Astro.props as Props;
About
</a>
</li>
<div class="md:flex-1"></div>
<li>
<button data-toggle-theme="dark,light">
<i class="fa-solid fa-circle-half-stroke"></i>
Switch color theme
</button>
</li>
</ul>

29
src/layouts/BaseLayout.astro
View File

@ -34,12 +34,33 @@ 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')
);
}
</script>
<script>
import { themeChange } from 'theme-change';
themeChange();
</script>
</head>
<body>
<header
class="navbar bg-base-200 fixed top-0 w-full z-50 border-b-[1px] border-gray-600"
class="navbar bg-base-200 fixed top-0 w-full z-50 border-b-[1px] border-base-content border-opacity-20"
>
<div class="navbar-start">
<div class="navbar-start lg:w-full">
<div class="lg:flex-none flex-1">
<a
href="/"
@ -48,8 +69,8 @@ const metaTagTitle = `${title} - Spotify Playlist Archive`;
Spotify Playlist Archive
</a>
</div>
<div class="lg:flex hidden">
<NavItems class="menu menu-horizontal p-0" />
<div class="lg:flex lg:w-full hidden">
<NavItems class="menu menu-horizontal lg:flex-1 p-0" />
</div>
</div>
<div class="navbar-end lg:hidden">