From 7405b9975c498eb6b45f904e98a22c014b7f67ea Mon Sep 17 00:00:00 2001 From: Shubham-Patel07 Date: Sun, 4 Feb 2024 23:52:54 +0530 Subject: [PATCH] Add: reverted unwanted changes --- src/main/resources/static/css/style.css | 66 ------------------- src/main/resources/static/theme-toggle.js | 58 ++++++++-------- .../resources/templates/fragments/header.html | 27 +++----- 3 files changed, 36 insertions(+), 115 deletions(-) diff --git a/src/main/resources/static/css/style.css b/src/main/resources/static/css/style.css index a297efcf4..e5b51cd8e 100644 --- a/src/main/resources/static/css/style.css +++ b/src/main/resources/static/css/style.css @@ -70,69 +70,3 @@ tr.solved { .table { --bs-table-bg: rgba(0, 0, 0, 0) !important; } - -/*toggle switch styling*/ -:root { - font: 700 16px/1 Verdana; -} - -.switch { - position: relative; - display: inline-block; - width: 4.5em; - height: 2.125em; -} - -.slider { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - border-radius: 2.125em; - background-color: #fff; - cursor: pointer; - transition: .4s; - display: flex; - justify-content: space-between; - align-items: center; - padding: 0 10px; -} - -.slider::before { - content: ""; - position: absolute; - height: 1.625em; - width: 1.625em; - left: 0.425em; - bottom: 0.25em; - border-radius: 50%; - background: #9c7dd2; - transition: .4s; - z-index: 2; -} - -.control:checked + .switch .slider { - background: var(--bs-light-purple); -} - -.control:checked + .switch .slider::before { - transform: translateX(calc(4.5em - 2.5em)); - background: #fff; -} - -.sun, -.moon { - height: 20px; - width: 20px; - z-index: 1000; -} - - -/*navbar formating overridding over bootstrap*/ -@media (min-width: 992px) { - .navbar-expand-lg .navbar-nav { - flex-direction: row; - align-items: center; - } -} diff --git a/src/main/resources/static/theme-toggle.js b/src/main/resources/static/theme-toggle.js index db675db20..e2d58a163 100644 --- a/src/main/resources/static/theme-toggle.js +++ b/src/main/resources/static/theme-toggle.js @@ -1,38 +1,34 @@ (function () { - const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)') - - function updateToggle (darkMode) { - const checkbox = document.querySelector(".theme-toggle input[type='checkbox']") - if (checkbox) { - checkbox.checked = darkMode + const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)') + let initialTheme + if (localStorage.getItem('darkmode-pref-set') === 'true') { + initialTheme = localStorage.getItem('darkMode') === 'true' + } else { + initialTheme = darkModeMediaQuery.matches } - document.body.classList.toggle('dark-mode', darkMode) - localStorage.setItem('darkMode', darkMode) - localStorage.setItem('darkmode-pref-set', 'true') - } + function updateToggle (darkMode) { + document.querySelector(".theme-toggle input[type=radio][value='dark']").checked = darkMode + document.querySelector(".theme-toggle input[type=radio][value='light']").checked = !darkMode + + document.body.classList.toggle('dark-mode', darkMode) + localStorage.setItem('darkMode', darkMode) + localStorage.setItem('darkmode-pref-set', 'true') + } - // Listen for system theme changes - darkModeMediaQuery.addEventListener('change', (e) => { - updateToggle(e.matches) - }) + darkModeMediaQuery.addEventListener('change', (e) => { + const darkModeOn = e.matches + updateToggle(darkModeOn) + }) - // Set up event listener and initial theme on page load - window.addEventListener('load', function () { - const checkbox = document.querySelector(".theme-toggle input[type='checkbox']") - if (checkbox) { - checkbox.addEventListener('change', function () { - updateToggle(checkbox.checked) - }) + window.addEventListener('load', function () { + const radios = document.querySelectorAll('.theme-toggle input[type=radio]') + radios.forEach((radio) => { + radio.addEventListener('change', function (e) { + updateToggle(e.target.value === 'dark') + }) + }) - // Initialize theme based on user preference or system preference - let initialTheme - if (localStorage.getItem('darkmode-pref-set') === 'true') { - initialTheme = localStorage.getItem('darkMode') === 'true' - } else { - initialTheme = darkModeMediaQuery.matches - } - updateToggle(initialTheme) - } - }) + updateToggle(initialTheme) + }) })() diff --git a/src/main/resources/templates/fragments/header.html b/src/main/resources/templates/fragments/header.html index 44fefc2fd..2b7bb153e 100644 --- a/src/main/resources/templates/fragments/header.html +++ b/src/main/resources/templates/fragments/header.html @@ -51,25 +51,16 @@ About -
- -