Refactor dark mode attribute handling

Author: johnwarne

js/script.js

@@ -8,6 +8,15 @@ customElements.define('upvote-rss', class extends HTMLElement {
 		'average-posts-per-day', 'comments', 'threshold-percentage', 'post-cutoff-days', 'score', 'score-default-hacker-news', 'score-default-lemmy', 'score-default-lobsters', 'score-default-mbin', 'score-default-piefed', 'score-default-reddit'
 	]);
 
+	// Constructor
+	constructor () {
+		super();
+
+		// Set initial attributes
+		this.setAttribute('dark-mode', localStorage.getItem('dark-mode') || this.attr('dark-mode') || 'auto');
+		this.setAttribute('show-rss-url', navigator.clipboard ? false : true);
+	}
+
 
 	/**
 	 * Called when the element is added to the DOM
@@ -36,16 +45,9 @@ customElements.define('upvote-rss', class extends HTMLElement {
 		this.allowSkeletons = false;
 		this.skeletonDelay = 150;
 
-		// Get dark mode preference
-		this.getDarkMode();
-
 		// Initial data fetching
 		this.debouncedSearch();
 
-		// Set initial attributes
-		this.setAttribute('dark-mode', localStorage.getItem('dark-mode') || 'auto');
-		this.setAttribute('show-rss-url', navigator.clipboard ? false : true);
-
 		// Set up event listeners
 		this.setupEventListeners();
 	}
@@ -698,19 +700,6 @@ customElements.define('upvote-rss', class extends HTMLElement {
 	}
 
 
-	/**
-	 * Get the dark mode setting from local storage and apply it
-	 * @returns {void}
-	 * */
-	getDarkMode () {
-		const darkMode = localStorage.getItem('dark-mode');
-		if (darkMode) {
-			this.setAttribute('dark-mode', darkMode);
-		}
-		document.documentElement.dataset.colorScheme = this.attr('dark-mode');
-	}
-
-
 	/**
 	 * Perform a debounced search to get posts
 	 * @param {number} delay - The delay in milliseconds

views/html.php

@@ -107,7 +107,7 @@
 			post-cutoff-days='<?php echo POST_CUTOFF_DAYS; ?>'
 			cache-size='<?php $cache_size = cache()->getTotalCacheSize(); echo $cache_size; ?>'
 			show-rss-url='true'
-			dark-mode='true'
+			dark-mode=''
 			>
 
 			<div class="columns">