diff --git a/index.html b/index.html
index e71a40a..075c607 100644
--- a/index.html
+++ b/index.html
@@ -12,8 +12,21 @@
@@ -22,7 +35,12 @@
@@ -42,14 +60,19 @@
diff --git a/script.js b/script.js
index 9108d47..5062bcf 100644
--- a/script.js
+++ b/script.js
@@ -14,6 +14,7 @@ const sortBy = document.getElementById('sortBy');
const reverseButton = document.getElementById('reverseButton');
const jumpToRank = document.getElementById('jumpToRank');
const jumpButton = document.getElementById('jumpButton');
+const themeSelect = document.getElementById('themeSelect');
const loading = document.getElementById('loading');
const error = document.getElementById('error');
const stats = document.getElementById('stats');
@@ -23,6 +24,7 @@ document.addEventListener('DOMContentLoaded', function() {
loadWikipediaMapping();
loadAlbumsData();
setupEventListeners();
+ loadTheme();
handleUrlParams();
});
@@ -46,6 +48,7 @@ function setupEventListeners() {
reverseButton.addEventListener('click', handleReverse);
jumpButton.addEventListener('click', handleJumpToRank);
jumpToRank.addEventListener('keypress', handleRankKeypress);
+ themeSelect.addEventListener('change', handleThemeChange);
// Add scroll listener for infinite scroll
window.addEventListener('scroll', handleScroll);
@@ -98,6 +101,41 @@ function handleStatsCardClick(filterValue) {
albumsGrid.scrollIntoView({ behavior: 'smooth' });
}
+// Theme handling functions
+function handleThemeChange(event) {
+ const theme = event.target.value;
+ setTheme(theme);
+ saveTheme(theme);
+}
+
+function setTheme(theme) {
+ if (theme) {
+ document.documentElement.setAttribute('data-theme', theme);
+ } else {
+ document.documentElement.removeAttribute('data-theme');
+ }
+}
+
+function saveTheme(theme) {
+ try {
+ localStorage.setItem('selectedTheme', theme);
+ } catch (e) {
+ console.warn('Could not save theme to localStorage:', e);
+ }
+}
+
+function loadTheme() {
+ try {
+ const savedTheme = localStorage.getItem('selectedTheme');
+ if (savedTheme !== null) {
+ setTheme(savedTheme);
+ themeSelect.value = savedTheme;
+ }
+ } catch (e) {
+ console.warn('Could not load theme from localStorage:', e);
+ }
+}
+
// Load albums data from CSV
async function loadAlbumsData() {
try {
@@ -238,7 +276,13 @@ function createAlbumCard(album) {
View on Wikipedia →
-