From 6e63603ffaeb8e7e070a9f6991b69e2df38245b9 Mon Sep 17 00:00:00 2001 From: AhanaGanguly965 Date: Fri, 11 Oct 2024 21:58:59 +0530 Subject: [PATCH] added a toggle button --- darkMode.js | 31 +++++++++----------- darkmode.css | 61 ++++++++++++++++++++++++++++++++++++++++ index.html | 15 +++++++--- pull_request_template.md | 16 +++++------ 4 files changed, 94 insertions(+), 29 deletions(-) create mode 100644 darkmode.css diff --git a/darkMode.js b/darkMode.js index 5da2cc64..7910040d 100644 --- a/darkMode.js +++ b/darkMode.js @@ -1,22 +1,19 @@ -const checkbox = document.getElementById('checkbox') -const modeLabel = document.getElementById('mode-label') +// Get the toggle checkbox +const toggleSwitch = document.getElementById('toggleDarkMode'); -// 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 user has previously selected dark mode +if (localStorage.getItem('darkMode') === 'enabled') { + document.body.classList.add('dark-mode'); + toggleSwitch.checked = true; } -// 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' +// Event listener for the dark mode toggle +toggleSwitch.addEventListener('change', () => { + if (toggleSwitch.checked) { + document.body.classList.add('dark-mode'); + localStorage.setItem('darkMode', 'enabled'); } else { - document.documentElement.setAttribute('data-theme', 'light') - localStorage.setItem('theme', 'light') - modeLabel.textContent = 'Light Mode' + document.body.classList.remove('dark-mode'); + localStorage.setItem('darkMode', 'disabled'); } -}) \ No newline at end of file +}); diff --git a/darkmode.css b/darkmode.css new file mode 100644 index 00000000..321bbf9c --- /dev/null +++ b/darkmode.css @@ -0,0 +1,61 @@ +/* Default light mode styles */ +body { + font-family: Arial, sans-serif; + background-color: #ffffff; + color: #000000; + transition: background-color 0.3s ease, color 0.3s ease; +} + +.container { + text-align: center; + padding: 50px}; + +/* Toggle switch styling */ +.switch { + position: relative; + display: inline-block; + width: 60px; + height: 34px; +} + +.switch input { + display: none; +} + +.slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + transition: .4s; + border-radius: 34px; +} + +.slider:before { + position: absolute; + content: ""; + height: 26px; + width: 26px; + left: 4px; + bottom: 4px; + background-color: white; + transition: .4s; + border-radius: 50%; +} + +input:checked + .slider { + background-color: #2196F3; +} + +input:checked + .slider:before { + transform: translateX(26px); +} + +/* Dark mode styles */ +body.dark-mode { + background-color: #121212; + color: #ffffff; +} diff --git a/index.html b/index.html index 9b1b9141..c53707ec 100644 --- a/index.html +++ b/index.html @@ -10,6 +10,8 @@ + + @@ -51,10 +53,14 @@
  • Others
  • Login
    • -
    • +
  • +

    Dark Mode Toggle Example

    + +
    +
    • @@ -544,6 +550,7 @@

    Contact Us

    +