From c05b1e7c1ce428dc5a0fd4e56f8dd5978c3d153c Mon Sep 17 00:00:00 2001 From: Mujahid087 Date: Fri, 8 Nov 2024 10:37:50 +0530 Subject: [PATCH] added the theme functionality --- darkMode.js | 63 +++++++++++++++++++++++++++++++++++++---------------- index.html | 6 ++++- style.css | 6 +++++ 3 files changed, 55 insertions(+), 20 deletions(-) diff --git a/darkMode.js b/darkMode.js index 5da2cc64..5bcc323d 100644 --- a/darkMode.js +++ b/darkMode.js @@ -1,22 +1,47 @@ -const checkbox = document.getElementById('checkbox') -const modeLabel = document.getElementById('mode-label') +// const checkbox = document.getElementById('checkbox') +// const modeLabel = document.getElementById('mode-label') -// Check if dark mode is already enabled -if (localStorage.getItem('theme') === 'dark') { - document.documentElement.setAttribute('data-theme', 'dark') - checkbox.checked = true - modeLabel.textContent = 'Dark Mode' +// // Check if dark mode is already enabled +// if (localStorage.getItem('theme') === 'dark') { +// document.documentElement.setAttribute('data-theme', 'dark') +// checkbox.checked = true +// modeLabel.textContent = 'Dark Mode' +// } + +// // Add event listener for toggle switch +// checkbox.addEventListener('change', () => { +// if (checkbox.checked) { +// document.documentElement.setAttribute('data-theme', 'dark') +// localStorage.setItem('theme', 'dark') +// modeLabel.textContent = 'Dark Mode' +// } else { +// document.documentElement.setAttribute('data-theme', 'light') +// localStorage.setItem('theme', 'light') +// modeLabel.textContent = 'Light Mode' +// } +// }) + +// Variables +const themeToggle = document.getElementById('theme-toggle'); +const darkTheme = 'dark-theme'; +const iconTheme = 'ri-sun-line'; + +// Previously selected theme (if user selected) +const selectedTheme = localStorage.getItem('selected-theme'); + +// Determine current theme +const getCurrentTheme = () => document.body.classList.contains(darkTheme) ? 'dark' : 'light'; + +// Apply the previously selected theme, if any +if (selectedTheme) { + document.body.classList[selectedTheme === 'dark' ? 'add' : 'remove'](darkTheme); + themeToggle.checked = selectedTheme === 'dark'; // Set checkbox based on theme } -// Add event listener for toggle switch -checkbox.addEventListener('change', () => { - if (checkbox.checked) { - document.documentElement.setAttribute('data-theme', 'dark') - localStorage.setItem('theme', 'dark') - modeLabel.textContent = 'Dark Mode' - } else { - document.documentElement.setAttribute('data-theme', 'light') - localStorage.setItem('theme', 'light') - modeLabel.textContent = 'Light Mode' - } -}) \ No newline at end of file +// Toggle theme on checkbox change +themeToggle.addEventListener('change', () => { + document.body.classList.toggle(darkTheme); + + // Save selected theme + localStorage.setItem('selected-theme', getCurrentTheme()); +}); diff --git a/index.html b/index.html index 7900891d..537f0814 100644 --- a/index.html +++ b/index.html @@ -27,6 +27,8 @@ + + @@ -82,6 +84,8 @@ + + @@ -640,7 +644,7 @@

Contact Our Customer Support Team

-