Skip to content

theme toggle button added #7252

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dhairyagothi merged 1 commit into from
Jun 8, 2026
+187 −7
Merged

theme toggle button added #7252

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions public/ButtonsUIPage/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,15 @@
<title>Button UI Collection</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div class="theme-switch-wrapper">
<input type="checkbox" id="themeToggle" class="theme-switch">
<label for="themeToggle" class="theme-slider">
<span class="icon sun">☀️</span>
<span class="icon moon">🌙</span>
</label>
</div>
<a href="/" class="project-back-button" style="position:fixed;left:18px;top:18px;padding:8px 16px;border-radius:8px;background:#1e293b;color:#3b82f6;border:1px solid #3b82f6;text-decoration:none;z-index:9999;font-weight:700;font-family:Inter, system-ui, sans-serif;transition:all 0.2s ease;" onmouseover="this.style.background='#3b82f6';this.style.color='#fff'" onmouseout="this.style.background='#1e293b';this.style.color='#3b82f6'">← Back to Home</a>

<div class="container">
Expand Down Expand Up @@ -143,5 +151,26 @@ <h2 class="section-title"> Animations</h2>
</div>
</div>
</div>

<script>
const toggleBtn = document.getElementById("themeToggle");

if (localStorage.getItem("theme") === "dark") {
document.body.classList.add("dark-theme");
toggleBtn.checked = true;
}

toggleBtn.addEventListener("change", () => {
document.body.classList.toggle("dark-theme");

localStorage.setItem(
"theme",
document.body.classList.contains("dark-theme")
? "dark"
: "light"
);

});
</script>
</body>
</html>
165 changes: 158 additions & 7 deletions public/ButtonsUIPage/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,44 @@
:root {
--bg-gradient: linear-gradient(200deg, #bb8bbbf3 0%, #bdb8bb 100%);
--section-bg: linear-gradient(135deg, #f5f4f452 0%, #ececec 100%);
--text-primary: #333;
--text-secondary: #666;
--heading-color: white;
--section-border: transparent;
}

body.dark-theme {
--bg-gradient: linear-gradient(
135deg,
#000000 0%,
#0a0a0a 50%,
#111111 100%
);

--section-bg: linear-gradient(
135deg,
#111111 0%,
#181818 100%
);

--text-primary: #ffffff;
--text-secondary: #b3b3b3;
--heading-color: #ffffff;
--section-border: #2a2a2a;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(200deg, #bb8bbbf3 0%, #bdb8bb 100%);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: var(--bg-gradient);
min-height: 100vh;
padding: 40px 20px;
transition: background 0.4s ease;
}

.container {
Expand All @@ -18,9 +48,10 @@ body {

h1 {
text-align: center;
color: white;
color: var(--heading-color);
font-size: 3em;
margin-bottom: 20px;
margin-top: 80px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

Expand All @@ -32,16 +63,19 @@ h1 {
}

.section {
background: linear-gradient(135deg, #f5f4f452 0%, #ececec 100%);
background: var(--section-bg);
border-radius: 10px;
padding: 40px;
margin-bottom: 30px;
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
border: 1px solid var(--section-border);
transition: all 0.4s ease;

}

.section-title {
font-size: 1.8em;
color: #333;
color: var(--text-primary);
margin-bottom: 30px;
padding-bottom: 15px;
}
Expand All @@ -61,8 +95,8 @@ h1 {
}

.button-label {
font-size: 0.9em;
color: #666;
font-size: 0.9em;
color: var(--text-secondary);
font-weight: 500;
}

Expand Down Expand Up @@ -426,4 +460,121 @@ button {
grid-template-columns: 1fr;
gap: 20px;
}
}

.theme-toggle {
position: fixed;
top: 20px;
right: 20px;
z-index: 10000;
padding: 12px 20px;
border: none;
border-radius: 10px;
background: #1e293b;
color: white;
font-weight: 600;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
transition: all 0.3s ease;
}

.theme-toggle:hover {
transform: translateY(-2px);
}

body.dark-theme .theme-toggle {
background: #f8fafc;
color: #1e293b;
}

body.dark-theme .section {
background: #111111;
border: 1px solid #2f2f2f;
box-shadow:
0 0 0 1px rgba(255,255,255,0.03),
0 8px 24px rgba(0,0,0,0.5);
}

body.dark-theme .button-label {
color: #a1a1aa;
}

body.dark-theme .section-title {
color: #ffffff;
}

body.dark-theme h1 {
text-shadow: 0 0 20px rgba(255,255,255,0.15);
}

.theme-switch-wrapper {
position: fixed;
top: 18px;
right: 18px;
z-index: 9999;
}

.theme-switch {
display: none;
}

.theme-slider {
position: relative;
overflow: hidden;
display: block;
width: 70px;
height: 36px;
background: #2d2d2d;
border-radius: 50px;
cursor: pointer;
transition: 0.3s;
}

.theme-slider::before {
content: "";
z-index: 2;
position: absolute;
width: 28px;
height: 28px;
left: 4px;
top: 4px;
background: white;
border-radius: 50%;
transition: 0.3s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.theme-switch:checked + .theme-slider {
background: #ffffff;
}

.theme-switch:checked + .theme-slider::before {
background: #000000;
transform: translateX(34px);
z-index: 2;
}

.icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 14px;
pointer-events: none;
}

.sun {
left: 10px;
}

.moon {
right: 10px;
}

.icon {
position: absolute;
z-index: 5;
top: 50%;
transform: translateY(-50%);
font-size: 14px;
pointer-events: none;
}
Loading