From ccc52a95b48ceb56f7241115f0e9b42b2d0e37da Mon Sep 17 00:00:00 2001 From: Aditya8369 Date: Fri, 27 Mar 2026 10:43:58 +0530 Subject: [PATCH] added dark/light toggle --- about.html | 6 ++ auth.css | 66 +++++++++++----- contact.css | 44 ++++++++--- contact.html | 8 +- contribute.html | 6 ++ index.html | 5 ++ projects.css | 30 ++++++-- projects.html | 6 ++ script.js | 58 +++++++++++++++ style.css | 194 +++++++++++++++++++++++++++++++++++++++--------- 10 files changed, 350 insertions(+), 73 deletions(-) diff --git a/about.html b/about.html index 6cd82e8..849a48f 100644 --- a/about.html +++ b/about.html @@ -32,6 +32,12 @@ Guidelines Contact Projects + + + +
diff --git a/auth.css b/auth.css index 50d1cdf..0f25a9b 100644 --- a/auth.css +++ b/auth.css @@ -1,3 +1,42 @@ +/* ================= THEME VARIABLES ================= */ +:root { + /* Light Theme */ + --auth-bg: linear-gradient(135deg, #fdf6f0, #f8e8ee, #e4f0f6); + --auth-card-bg: rgba(255, 255, 255, 0.6); + --auth-card-border: rgba(255, 255, 255, 0.85); + --auth-shadow: rgba(113, 79, 127, 0.18); + --auth-text: #5c5470; + --auth-heading: #6d4e86; + --auth-label: #6d4e86; + --auth-input-bg: rgba(255, 255, 255, 0.5); + --auth-input-border: #d4b8d1; + --auth-input-text: #5c5470; + --auth-focus: #e953b0; + --auth-button-bg: #e953b0; + --auth-button-hover: #d640a0; + --auth-button-text: #ffffff; + --auth-link: #7a5c8e; +} + +html.dark-theme { + /* Dark Theme */ + --auth-bg: linear-gradient(135deg, #1a1625, #221829, #1f1e2e); + --auth-card-bg: rgba(30, 25, 40, 0.85); + --auth-card-border: rgba(212, 148, 209, 0.2); + --auth-shadow: rgba(0, 0, 0, 0.4); + --auth-text: #d4c5e0; + --auth-heading: #d494d1; + --auth-label: #c0b0d0; + --auth-input-bg: rgba(40, 32, 55, 0.6); + --auth-input-border: #5d4a7a; + --auth-input-text: #d4c5e0; + --auth-focus: #ff8fa3; + --auth-button-bg: #ff8fa3; + --auth-button-hover: #ff7eb8; + --auth-button-text: #1a1625; + --auth-link: #c9a5d1; +} + /* ================= GLOBAL ================= */ *{ box-sizing:border-box; @@ -13,15 +52,9 @@ body{ justify-content:center; align-items:center; - /* SAME pastel gradient as main website */ - background: linear-gradient( - 135deg, - #fdf6f0, - #f8e8ee, - #e4f0f6 - ); - - color:#5c5470; + background: var(--auth-bg); + color: var(--auth-text); + transition: background 0.3s ease, color 0.3s ease; } /* ================= AUTH CARD ================= */ @@ -30,24 +63,21 @@ body{ padding:45px; border-radius:26px; - /* pastel glass effect */ - background: rgba(255,255,255,0.6); + background: var(--auth-card-bg); backdrop-filter: blur(15px); - - border:1px solid rgba(255,255,255,0.85); - - box-shadow: - 0 16px 45px rgba(113,79,127,0.18); - + border: 1px solid var(--auth-card-border); + box-shadow: 0 16px 45px var(--auth-shadow); text-align:center; animation: authCardIn 700ms cubic-bezier(0.22,1,0.36,1) both; + transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } /* ================= TITLE ================= */ h2{ font-family:'Playfair Display', serif; - color:#6d4e86; + color: var(--auth-heading); margin-bottom:28px; + transition: color 0.3s ease; font-weight:600; letter-spacing:0.5px; animation: authTitleIn 760ms cubic-bezier(0.22,1,0.36,1) both; diff --git a/contact.css b/contact.css index 1764262..7b07101 100644 --- a/contact.css +++ b/contact.css @@ -1,9 +1,31 @@ +:root { + /* Light Theme */ + --contact-bg: linear-gradient(135deg, #fdf6f0, #f8e8ee, #e4f0f6); + --contact-card-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(252, 237, 247, 0.78), rgba(236, 245, 255, 0.82)); + --contact-card-border: rgba(255, 255, 255, 0.88); + --contact-shadow: rgba(103, 75, 128, 0.14); + --contact-text: #5c5470; + --contact-heading: #6d4e86; + --contact-eyebrow-text: #9a4d80; + --contact-eyebrow-bg: rgba(255, 175, 213, 0.24); +} + +html.dark-theme { + /* Dark Theme */ + --contact-bg: linear-gradient(135deg, #1a1625, #221829, #1f1e2e); + --contact-card-bg: linear-gradient(145deg, rgba(30, 25, 40, 0.85), rgba(35, 25, 45, 0.8), rgba(25, 20, 40, 0.85)); + --contact-card-border: rgba(212, 148, 209, 0.2); + --contact-shadow: rgba(0, 0, 0, 0.4); + --contact-text: #d4c5e0; + --contact-heading: #d494d1; + --contact-eyebrow-text: #c9a5d1; + --contact-eyebrow-bg: rgba(212, 148, 209, 0.15); +} + .contact-page { - background: - radial-gradient(circle at 12% 12%, rgba(255, 179, 214, 0.3), transparent 36%), - radial-gradient(circle at 88% 8%, rgba(163, 198, 255, 0.3), transparent 36%), - linear-gradient(135deg, #fdf6f0, #f8e8ee, #e4f0f6); - color: #5c5470; + background: var(--contact-bg); + color: var(--contact-text); + transition: background 0.3s ease, color 0.3s ease; } .contact-main { @@ -18,10 +40,11 @@ overflow: hidden; padding: clamp(20px, 4vw, 34px); border-radius: 28px; - background: linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(252, 237, 247, 0.78), rgba(236, 245, 255, 0.82)); - border: 1px solid rgba(255, 255, 255, 0.88); - box-shadow: 0 18px 42px rgba(103, 75, 128, 0.14); + background: var(--contact-card-bg); + border: 1px solid var(--contact-card-border); + box-shadow: 0 18px 42px var(--contact-shadow); text-align: center; + transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .contact-hero::before { @@ -45,8 +68,9 @@ text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; - color: #9a4d80; - background: rgba(255, 175, 213, 0.24); + color: var(--contact-eyebrow-text); + background: var(--contact-eyebrow-bg); + transition: color 0.3s ease, background 0.3s ease; } .contact-hero h1 { diff --git a/contact.html b/contact.html index 945b5b9..86a35e1 100644 --- a/contact.html +++ b/contact.html @@ -35,8 +35,14 @@ About How to Contribute Guidelines - Contact + Contact Projects + + + +
diff --git a/contribute.html b/contribute.html index 005dd7c..6915668 100644 --- a/contribute.html +++ b/contribute.html @@ -34,6 +34,12 @@ Guidelines Contact Projects + + + +
diff --git a/index.html b/index.html index 925456f..1acf1f6 100644 --- a/index.html +++ b/index.html @@ -36,6 +36,11 @@ Contact Projects + + +
diff --git a/projects.css b/projects.css index f1bfb81..27255a2 100644 --- a/projects.css +++ b/projects.css @@ -1,12 +1,29 @@ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap'); :root { + /* Light Theme */ + --projects-bg: linear-gradient(135deg, #fdf6f0, #f8e8ee, #e4f0f6); + --projects-card-bg: linear-gradient(140deg, rgba(255, 255, 255, 0.82), rgba(252, 238, 247, 0.78), rgba(235, 245, 255, 0.82)); + --projects-card-border: rgba(255, 255, 255, 0.85); + --projects-shadow: rgba(108, 79, 132, 0.14); --projects-accent: #ff6db3; --projects-accent-2: #a77bf7; --projects-text: #5c5470; --projects-soft-text: #6f6585; } +html.dark-theme { + /* Dark Theme */ + --projects-bg: linear-gradient(135deg, #1a1625, #221829, #1f1e2e); + --projects-card-bg: linear-gradient(140deg, rgba(30, 25, 40, 0.85), rgba(35, 25, 45, 0.8), rgba(25, 20, 40, 0.85)); + --projects-card-border: rgba(212, 148, 209, 0.2); + --projects-shadow: rgba(0, 0, 0, 0.4); + --projects-accent: #ff8fa3; + --projects-accent-2: #d494d1; + --projects-text: #d4c5e0; + --projects-soft-text: #c0b0d0; +} + * { margin: 0; padding: 0; @@ -15,13 +32,11 @@ body { font-family: 'Poppins', sans-serif; - background: - radial-gradient(circle at 8% 10%, rgba(255, 182, 214, 0.34), transparent 34%), - radial-gradient(circle at 92% 5%, rgba(170, 197, 255, 0.34), transparent 36%), - linear-gradient(135deg, #fdf6f0, #f8e8ee, #e4f0f6); + background: var(--projects-bg); min-height: 100vh; padding: 0 18px; color: var(--projects-text); + transition: background 0.3s ease, color 0.3s ease; } .projects-page { @@ -36,10 +51,11 @@ body { max-width: 960px; padding: clamp(24px, 4vw, 38px) clamp(20px, 4vw, 34px); border-radius: 30px; - border: 1px solid rgba(255, 255, 255, 0.85); - background: linear-gradient(140deg, rgba(255, 255, 255, 0.82), rgba(252, 238, 247, 0.78), rgba(235, 245, 255, 0.82)); - box-shadow: 0 20px 45px rgba(108, 79, 132, 0.14); + border: 1px solid var(--projects-card-border); + background: var(--projects-card-bg); + box-shadow: 0 20px 45px var(--projects-shadow); text-align: center; + transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .projects-hero::before { diff --git a/projects.html b/projects.html index f2e43ca..9bf1dc3 100644 --- a/projects.html +++ b/projects.html @@ -33,6 +33,12 @@ Guidelines Contact Projects + + + +
diff --git a/script.js b/script.js index 283647a..b11dd0f 100644 --- a/script.js +++ b/script.js @@ -1,6 +1,64 @@ // Create butterfly cursor (desktop only) document.documentElement.classList.add("js-ready"); +// ============ THEME TOGGLE FUNCTIONALITY ============ +function initThemeToggle() { + const themeToggle = document.getElementById("themeToggle"); + const htmlElement = document.documentElement; + + if (!themeToggle) { + console.warn("Theme toggle button not found"); + return; + } + + // Check for saved theme preference (default to light) + const savedTheme = localStorage.getItem("theme") || "light"; + + // Apply saved theme on page load + if (savedTheme === "dark") { + htmlElement.classList.add("dark-theme"); + updateThemeIcon(); + } + + // Toggle theme on button click + themeToggle.addEventListener("click", (e) => { + e.preventDefault(); + e.stopPropagation(); + + const isDarkMode = htmlElement.classList.toggle("dark-theme"); + + // Update localStorage + try { + localStorage.setItem("theme", isDarkMode ? "dark" : "light"); + } catch (e) { + console.warn("localStorage not available:", e); + } + + updateThemeIcon(); + }); +} + +function updateThemeIcon() { + const themeToggle = document.getElementById("themeToggle"); + const htmlElement = document.documentElement; + + if (!themeToggle) return; + + const isDark = htmlElement.classList.contains("dark-theme"); + const themeIcon = themeToggle.querySelector(".theme-icon"); + + if (themeIcon) { + themeIcon.textContent = isDark ? "☀️" : "🌙"; + } +} + +// Initialize theme toggle when DOM is ready +if (document.readyState === "loading") { + document.addEventListener("DOMContentLoaded", initThemeToggle); +} else { + initThemeToggle(); +} + const cursor = document.querySelector(".cursor"); const supportsFinePointer = window.matchMedia("(hover: hover) and (pointer: fine)").matches; diff --git a/style.css b/style.css index f52c040..e97bf7f 100644 --- a/style.css +++ b/style.css @@ -8,14 +8,66 @@ box-sizing: border-box; } +/* Theme Variables */ +:root { + /* Light Theme */ + --bg-primary: linear-gradient(135deg, #fdf6f0, #f8e8ee, #e4f0f6); + --bg-secondary: rgba(255, 255, 255, 0.6); + --bg-tertiary: rgba(255, 255, 255, 0.55); + --bg-gradient-footer: linear-gradient(180deg, rgba(255, 243, 249, 0.54), rgba(236, 244, 255, 0.64)); + --header-bg: rgba(255, 255, 255, 0.6); + --header-border: #f3d1dc; + --text-primary: #5c5470; + --text-secondary: #6a4e77; + --text-tertiary: #7a5c8e; + --text-light: #665579; + --link-hover: #ff9eb5; + --link-hover-dark: #e953b0; + --accent-color: #a267ac; + --accent-light: #9a4b80; + --accent-soft: rgba(255, 175, 213, 0.24); + --accent-border: rgba(255, 183, 214, 0.36); + --border-light: 1px solid rgba(255, 255, 255, 0.85); + --code-bg: #f3e8ff; + --code-text: #5a189a; + --shadow: rgba(0,0,0,0.05); + --shadow-dark: rgba(0,0,0,0.08); +} + +/* Dark Theme */ +html.dark-theme { + --bg-primary: linear-gradient(135deg, #1a1625, #221829, #1f1e2e); + --bg-secondary: rgba(30, 25, 40, 0.8); + --bg-tertiary: rgba(40, 35, 55, 0.85); + --bg-gradient-footer: linear-gradient(180deg, rgba(25, 20, 35, 0.9), rgba(30, 25, 45, 0.95)); + --header-bg: rgba(20, 15, 30, 0.85); + --header-border: #3d2851; + --text-primary: #d4c5e0; + --text-secondary: #c0b0d0; + --text-tertiary: #b0a0c8; + --text-light: #a895be; + --link-hover: #ff8fa3; + --link-hover-dark: #ff7eb8; + --accent-color: #d494d1; + --accent-light: #c97fb8; + --accent-soft: rgba(212, 148, 209, 0.15); + --accent-border: rgba(212, 148, 209, 0.2); + --border-light: 1px solid rgba(212, 148, 209, 0.2); + --code-bg: #2a2540; + --code-text: #d4a5ff; + --shadow: rgba(0,0,0,0.3); + --shadow-dark: rgba(0,0,0,0.5); +} + /* Body Styling */ body { font-family: 'Poppins', sans-serif; - background: linear-gradient(135deg, #fdf6f0, #f8e8ee, #e4f0f6); + background: var(--bg-primary); min-height: 100vh; overflow-x: hidden; cursor: none; /* Hide default cursor */ - color: #5c5470; + color: var(--text-primary); + transition: background 0.3s ease, color 0.3s ease; } @@ -56,6 +108,10 @@ body { z-index: 9998; } +html.dark-theme .sparkle { + background: radial-gradient(circle, #ff8fa3, #ffb0c1, #ffc4d6); +} + @keyframes sparkleFade { 0% { opacity: 1; @@ -77,30 +133,36 @@ body { /* Header */ header { - background: rgba(255, 255, 255, 0.6); + background: var(--header-bg); backdrop-filter: blur(10px); padding: 25px; text-align: center; - border-bottom: 1px solid #f3d1dc; + border-bottom: var(--header-border) solid 1px; animation: fadeDown 1s ease forwards; + transition: background 0.3s ease, border-color 0.3s ease; } header h1 { font-family: 'Playfair Display', serif; font-size: 2.5rem; - color: #a267ac; + color: var(--accent-color); } /* Navbar */ nav { margin-top: 15px; + display: flex; + justify-content: center; + flex-wrap: wrap; + gap: 10px; + align-items: center; } nav a { text-decoration: none; margin: 0 15px; font-weight: 500; - color: #6a4e77; + color: var(--text-secondary); position: relative; transition: all 0.3s ease; } @@ -113,7 +175,7 @@ nav a::after { height: 2px; left: 0; bottom: -5px; - background-color: #ff9eb5; + background-color: var(--link-hover); transition: 0.3s; } @@ -122,7 +184,43 @@ nav a:hover::after { } nav a:hover { - color: #ff9eb5; + color: var(--link-hover); +} + +/* Theme Toggle Button */ +.theme-toggle { + background: none; + border: none; + font-size: 1.5rem; + cursor: pointer; + padding: 8px 12px; + border-radius: 50%; + transition: background 0.3s ease, transform 0.2s ease; + display: inline-flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + min-width: 44px; + min-height: 44px; +} + +.theme-toggle:hover { + background: var(--accent-soft); + transform: scale(1.1); +} + +.theme-toggle:active { + transform: scale(0.95); +} + +.theme-icon { + display: inline-block; + transition: transform 0.3s ease; + pointer-events: none; +} + +.theme-toggle:hover .theme-icon { + transform: rotate(20deg); } /* Hero Section */ @@ -136,12 +234,15 @@ nav a:hover { font-size: 2rem; font-family: 'Playfair Display', serif; margin-bottom: 15px; - color: #7a5c8e; + color: var(--text-tertiary); + transition: color 0.3s ease; } .hero p { font-size: 1.1rem; opacity: 0.8; + color: var(--text-secondary); + transition: color 0.3s ease; } /* About Page */ @@ -155,9 +256,10 @@ nav a:hover { .about-hero { padding: clamp(20px, 4vw, 34px); border-radius: 24px; - background: linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(251, 238, 248, 0.78)); - border: 1px solid rgba(255, 255, 255, 0.85); - box-shadow: 0 16px 38px rgba(113, 79, 127, 0.12); + background: var(--bg-secondary); + border: var(--border-light); + box-shadow: 0 16px 38px var(--shadow); + transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .about-eyebrow { @@ -165,27 +267,30 @@ nav a:hover { margin-bottom: 8px; padding: 6px 12px; border-radius: 999px; - color: #9a4b80; - background: rgba(255, 175, 213, 0.24); + color: var(--accent-light); + background: var(--accent-soft); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; + transition: background 0.3s ease, color 0.3s ease; } .about-hero h1 { margin: 0 0 12px; - color: #6d4e86; + color: var(--text-tertiary); font-family: 'Playfair Display', serif; font-size: clamp(1.9rem, 6vw, 2.9rem); line-height: 1.14; + transition: color 0.3s ease; } .about-intro { margin: 0; - color: #665579; + color: var(--text-light); line-height: 1.7; max-width: 75ch; + transition: color 0.3s ease; } .about-copy { @@ -288,11 +393,11 @@ nav a:hover { .projects { text-align: center; padding: 60px 20px; - background: rgba(255,255,255,0.5); + background: var(--bg-secondary); border-radius: 20px; margin: 40px; - box-shadow: 0 10px 30px rgba(0,0,0,0.05); - transition: transform 0.4s ease; + box-shadow: 0 10px 30px var(--shadow); + transition: transform 0.4s ease, background 0.3s ease, box-shadow 0.3s ease; } .projects:hover { @@ -304,24 +409,27 @@ nav a:hover { margin-top: 22px; padding: 18px 14px 28px; text-align: center; - border-top: 1px solid rgba(255, 214, 232, 0.85); - background: linear-gradient(180deg, rgba(255, 243, 249, 0.54), rgba(236, 244, 255, 0.64)); + border-top: var(--header-border) solid 1px; + background: var(--bg-gradient-footer); + transition: background 0.3s ease, border-color 0.3s ease; } .site-footer-title { margin: 0; font-family: 'Playfair Display', serif; - color: #6b4b86; + color: var(--text-tertiary); font-size: clamp(1rem, 2.2vw, 1.24rem); font-weight: 700; letter-spacing: 0.01em; + transition: color 0.3s ease; } .site-footer-note { margin: 0; - color: #7f6e95; + color: var(--text-secondary); font-size: 0.9rem; line-height: 1.6; + transition: color 0.3s ease; } .site-footer-highlights { @@ -336,19 +444,21 @@ nav a:hover { align-items: center; padding: 6px 12px; border-radius: 999px; - background: rgba(255, 255, 255, 0.9); - border: 1px solid rgba(255, 183, 214, 0.36); - color: #7b5f94; + background: var(--bg-secondary); + border: var(--accent-border) solid 1px; + color: var(--text-light); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.03em; + transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease; } .site-footer-meta { margin: 2px 0 0; - color: #8d7aa2; + color: var(--text-primary); font-size: 0.84rem; letter-spacing: 0.03em; + transition: color 0.3s ease; } @media (max-width: 560px) { @@ -408,10 +518,10 @@ nav a:hover { max-width: 800px; padding: 40px; border-radius: 25px; - background: rgba(255, 255, 255, 0.55); + background: var(--bg-tertiary); backdrop-filter: blur(15px); - box-shadow: 0 15px 35px rgba(0,0,0,0.08); - transition: transform 0.4s ease; + box-shadow: 0 15px 35px var(--shadow-dark); + transition: transform 0.4s ease, background 0.3s ease, box-shadow 0.3s ease; } .contribute-card:hover { @@ -420,22 +530,25 @@ nav a:hover { .contribute-card h2 { margin-top: 25px; - color: #7b6cf6; + color: var(--accent-color); + transition: color 0.3s ease; } /* Code Styling */ pre { - background: #f3e8ff; + background: var(--code-bg); padding: 15px; border-radius: 15px; overflow-x: auto; - box-shadow: inset 0 0 10px rgba(0,0,0,0.05); + box-shadow: inset 0 0 10px var(--shadow); + transition: background 0.3s ease, box-shadow 0.3s ease; } code { font-family: monospace; - color: #5a189a; + color: var(--code-text); font-size: 0.95rem; + transition: color 0.3s ease; } /* Animations */ @@ -473,13 +586,13 @@ code { .contact-card { max-width: 600px; width: 100%; - background: rgba(255, 255, 255, 0.6); + background: var(--bg-secondary); backdrop-filter: blur(15px); border-radius: 25px; padding: 50px 40px; - box-shadow: 0 15px 35px rgba(0,0,0,0.08); + box-shadow: 0 15px 35px var(--shadow-dark); text-align: center; - transition: transform 0.3s ease, box-shadow 0.3s ease; + transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; } .ch1 { @@ -971,6 +1084,13 @@ section p.card { .js-ready .home-header.nav-open .home-nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } + + .js-ready .home-nav .theme-toggle { + position: relative; + z-index: 10; + display: inline-flex !important; + margin: 0 auto; + } } @media (max-width: 560px) {