diff --git a/dark-mode.js b/dark-mode.js index c07dabbd..615303f3 100644 --- a/dark-mode.js +++ b/dark-mode.js @@ -1,7 +1,6 @@ document.addEventListener("DOMContentLoaded", function () { const themeToggleCheckbox = document.querySelector("#theme-toggle"); - const themeLabel = document.querySelector(".toggle-label"); - + // Function to set the theme function setTheme(theme) { if (theme === "dark") { @@ -10,16 +9,15 @@ document.addEventListener("DOMContentLoaded", function () { themeToggleCheckbox.checked = true; } else { document.body.classList.remove("dark-mode"); - themeLabel.textContent = "Light Mode"; themeToggleCheckbox.checked = false; } localStorage.setItem("theme", theme); } - + // Load the theme from localStorage const savedTheme = localStorage.getItem("theme") || "light"; setTheme(savedTheme); - + // Add event listener to toggle checkbox themeToggleCheckbox.addEventListener("change", () => { const newTheme = themeToggleCheckbox.checked ? "dark" : "light"; diff --git a/index.html b/index.html index bd425098..b9ece1a6 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,7 @@ Awesome GitHub Profile READMEs + -
- - Light Mode -
-
+ +

Awesome GitHub Profile READMEs

@@ -51,4 +54,4 @@

Awesome GitHub Profile READMEs

- + \ No newline at end of file diff --git a/styles.css b/styles.css index 989476c0..360cbc7a 100644 --- a/styles.css +++ b/styles.css @@ -140,59 +140,86 @@ body { color: #f0f0f0; } - /* Toggle Switch Styles */ - .toggle-switch { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%,-50%); - position: absolute; - - - cursor: pointer; - } - - .toggle-switch input[type="checkbox"] { - display: none; - } - + /* Switch Label */ .toggle-switch label { - display: inline-block; - width: 50px; - height: 25px; - background-color: #ccc; - border-radius: 50px; - position: relative; - transition: background-color 0.3s ease; - } - .toggle-switch-container{ position: relative; - margin: 40px 0px; + top: 7px; + left: 7px; + width: 55px; /* Adjust width to fit switch button and icons */ + height: 30px; /* Adjust height if needed */ + background-color: #ccc; + border-radius: 20px; + display: flex; + align-items: center; + justify-content: center; + padding: 0 5px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + transition: background-color 0.5s ease; } - .toggle-switch label::after { - content: ""; - width: 23px; - height: 23px; + + /* Switch Button */ + .switch-button { + position: absolute; + top: 2px; + left: 3px; + width: 27px; + height: 27px; background-color: #fff; border-radius: 50%; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); + transition: transform 0.5s ease, background-color 0.5s ease; + } + + /* Icon Styles */ + .sun-icon, + .moon-icon { + user-select: none; + font-size: 25px; position: absolute; - top: 1px; - left: 1px; - transition: transform 0.3s ease; + top: 50%; + transform: translateY(-50%); + transition: opacity 0.5s ease, color 0.5s ease; + } + + /* Sun Icon */ + .sun-icon { + color: #f39c12; + left: 1px; /* Position from the left edge */ + opacity: 1; /* Initially visible */ + } + + /* Moon Icon */ + .moon-icon { + color: #bdc3c7; + right: 1px; /* Position from the right edge */ + opacity: 0; /* Initially hidden */ + } + + /* Hide the checkbox itself */ + #theme-toggle { + opacity: 0; + position: absolute; + width: 0; + height: 0; } - .toggle-switch input[type="checkbox"]:checked + label { - background-color: #333; + + /* Checkbox Checked State */ + #theme-toggle:checked + label { + background-color: #555; } - - .toggle-switch input[type="checkbox"]:checked + label::after { - transform: translateX(25px); + + #theme-toggle:checked + label .sun-icon { + opacity: 0; /* Hide sun icon when checked */ } - - .toggle-label { - margin-left: 10px; - font-size: 16px; - color: #333; + + #theme-toggle:checked + label .moon-icon { + opacity: 1; /* Show moon icon when checked */ + } + + #theme-toggle:checked + label .switch-button { + transform: translateX(30px); /* Adjust to fit switch width */ + background-color: black; } body.dark-mode .toggle-label {