From 6aa13b74eb4f5f7788a2d2867889a691aab263e6 Mon Sep 17 00:00:00 2001 From: ANKeshri Date: Thu, 25 Jul 2024 01:04:40 +0530 Subject: [PATCH] add dark mode in contributors page --- contributors.css | 122 +++++++++++++++++++++++++++++++++++++++++++++- contributors.html | 3 ++ contributors.js | 23 ++++++++- 3 files changed, 146 insertions(+), 2 deletions(-) diff --git a/contributors.css b/contributors.css index 1aff105f..16ef7a24 100644 --- a/contributors.css +++ b/contributors.css @@ -57,4 +57,124 @@ body { .contributor-card p { color: #666; } - \ No newline at end of file + /* Toggle button styles */ +.toggle-container { + position: fixed; /* Change this as needed for positioning */ + top: 25px; + right: 40px; +} + +.toggle { + width: 50px; /* Adjust size as needed */ + height: 25px; /* Adjust size as needed */ + appearance: none; + background-color: #ccc; + cursor: pointer; + border-radius: 25px; + position: relative; + outline: none; +} + +.toggle:checked { + background-color: #333; +} +.toggle:checked:before { + transform: translateX(25px); +} + + +body { + background-color: #f8f9fa; + color: #212529; +} + +.nav-container { + background-color: #ffffff; +} + +.footer { + background-color: #ffffff; + color: #212529; +} + +/* Dark mode styles */ +body.dark-mode { + background-color: #333; + color: #ffffff; +} + +body.dark-mode .nav-container { + background-color: #343a40; +} + +body.dark-mode .footer { + background-color: #343a40; + color: #ffffff; +} +#toggle { + display: inline-block; + border-radius: 50px; + transition: all 0.4s ease-in-out; + padding: 10px 10px; + background-color: transparent; + border: 2px solid #c6c9d8bf; + color: #c6c9d8bf; + font-weight: 600; + font-size: 14px; + letter-spacing: 2px; + text-decoration: none; +} +.toggle-container { + --size: 2rem; + width: var(--size); + height: var(--size); +} + +.toggle { + appearance: none; + outline: none; + cursor: pointer; + width: 100%; + height: 100%; + box-shadow: inset calc(var(--size) * 0.33) calc(var(--size) * -0.25) 0; + border-radius: 999px; + color: hsl(240, 100%, 95%); + transition: all 500ms; + position: absolute; + top: 0; + right: 0; + + &:checked { + --ray-size: calc(var(--size) * -0.4); + --offset-orthogonal: calc(var(--size) * 0.65); + --offset-diagonal: calc(var(--size) * 0.45); + transform: scale(0.75); + color: hsl(40, 100%, 50%); + box-shadow: inset 0 0 0 var(--size), + calc(var(--offset-orthogonal) * -1) 0 0 var(--ray-size), + var(--offset-orthogonal) 0 0 var(--ray-size), + 0 calc(var(--offset-orthogonal) * -1) 0 var(--ray-size), + 0 var(--offset-orthogonal) 0 var(--ray-size), + calc(var(--offset-diagonal) * -1) calc(var(--offset-diagonal) * -1) 0 + var(--ray-size), + var(--offset-diagonal) var(--offset-diagonal) 0 var(--ray-size), + calc(var(--offset-diagonal) * -1) var(--offset-diagonal) 0 var(--ray-size), + var(--offset-diagonal) calc(var(--offset-diagonal) * -1) 0 var(--ray-size); + } +} + +/* Apply fade-down animation to the toggle container */ +.toggle-container[data-aos="fade-down"] { + transition: opacity 500ms ease-in-out; + opacity: 0; +} + +.toggle-container[data-aos="fade-down"].aos-animate { + opacity: 1; +} +body.dark-mode .contributor-card{ + background: #212529; +} +body.dark-mode .contributor-card p{ + color: white; +} \ No newline at end of file diff --git a/contributors.html b/contributors.html index 2d1d60e7..eed8af45 100644 --- a/contributors.html +++ b/contributors.html @@ -8,6 +8,9 @@
+
+ +

Contributors

diff --git a/contributors.js b/contributors.js index 4074c780..7f83c0a6 100644 --- a/contributors.js +++ b/contributors.js @@ -27,4 +27,25 @@ document.addEventListener('DOMContentLoaded', () => { fetchContributors(); }); - \ No newline at end of file + document.addEventListener('DOMContentLoaded', () => { + const toggleCheckbox = document.getElementById('themeToggle'); + const body = document.body; + + // Load saved dark mode preference from localStorage + if (localStorage.getItem('dark-mode') === 'enabled') { + body.classList.add('dark-mode'); + toggleCheckbox.checked = true; + } else { + toggleCheckbox.checked = false; + } + + toggleCheckbox.addEventListener('change', () => { + if (toggleCheckbox.checked) { + body.classList.add('dark-mode'); + localStorage.setItem('dark-mode', 'enabled'); + } else { + body.classList.remove('dark-mode'); + localStorage.setItem('dark-mode', 'disabled'); + } + }); + }); \ No newline at end of file