From a086891230d7f0aa6e92cc4bf160e7dc7535ff0c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciej=20P=C4=99dzich?= Date: Sat, 21 Jan 2023 23:10:30 +0100 Subject: [PATCH] Implement color theme switching --- package-lock.json | 11 +++++++++++ package.json | 1 + src/components/NavItems.astro | 7 +++++++ src/layouts/BaseLayout.astro | 29 +++++++++++++++++++++++++---- 4 files changed, 44 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index c982de7..3249297 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 387570d..afd2e42 100644 --- a/package.json +++ b/package.json @@ -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": { diff --git a/src/components/NavItems.astro b/src/components/NavItems.astro index 3301d11..74132af 100644 --- a/src/components/NavItems.astro +++ b/src/components/NavItems.astro @@ -29,4 +29,11 @@ const { class: _class } = Astro.props as Props; About +
+
  • + +
    • diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index 85e8864..35023c3 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -34,12 +34,33 @@ const metaTagTitle = `${title} - Spotify Playlist Archive`; + +
    -
    +
    -