From 9e4510ed25746dd2a58ea00d7981d7c60dd72993 Mon Sep 17 00:00:00 2001 From: Esha Jha <149310101+Eshajha19@users.noreply.github.com> Date: Sat, 7 Mar 2026 06:39:22 +0000 Subject: [PATCH 1/3] added dark light toggle on finance page --- public/finance-tips.css | 55 ++++++++++++++++++++++++++++++++++++++++ public/finance-tips.html | 30 +++++++++++++--------- public/finance-tips.js | 24 ++++++++++++++++++ 3 files changed, 97 insertions(+), 12 deletions(-) diff --git a/public/finance-tips.css b/public/finance-tips.css index 8aae1567..31b73674 100644 --- a/public/finance-tips.css +++ b/public/finance-tips.css @@ -495,3 +495,58 @@ html{ transform: translate(-50%, -50%) scale(1.3); background: linear-gradient(135deg, #00b4d8 0%, #64ffda 100%) !important; } +/* Dark mode without changing existing colors */ + +body.dark-mode{ + filter: invert(1) hue-rotate(180deg); +} + +/* Fix images & icons */ +body.dark-mode img, +body.dark-mode video, +body.dark-mode iframe{ + filter: invert(1) hue-rotate(180deg); +}/* ====================== + THEME VARIABLES +====================== */ + +:root{ + --bg-color:#ffffff; + --card-bg:#f8fafc; + --text-color:#1e293b; + --accent:#22c55e; +} + +[data-theme="dark"]{ + --bg-color:#0f172a; + --card-bg:#1e293b; + --text-color:#f1f5f9; + --accent:#4ade80; +} + +/* Apply theme */ + +body{ + background:var(--bg-color); + color:var(--text-color); + transition:0.3s; +} + +.balance-card{ + background:var(--card-bg); +} + +.hero-section{ + background:linear-gradient(135deg,var(--accent),#15803d); +} + +/* Toggle button */ + +.theme-toggle{ + border:none; + background:transparent; + font-size:18px; + cursor:pointer; + color:var(--text-color); + margin-left:15px; +} \ No newline at end of file diff --git a/public/finance-tips.html b/public/finance-tips.html index 408e8628..f03f025f 100644 --- a/public/finance-tips.html +++ b/public/finance-tips.html @@ -29,19 +29,25 @@
diff --git a/public/finance-tips.js b/public/finance-tips.js index cc3dade3..cb33545d 100644 --- a/public/finance-tips.js +++ b/public/finance-tips.js @@ -150,3 +150,27 @@ // Start animation animateTrail(); })(); +const toggleBtn = document.getElementById("theme-toggle"); + +// Load saved theme +const savedTheme = localStorage.getItem("theme"); + +if(savedTheme === "dark"){ + document.documentElement.setAttribute("data-theme","dark"); +} + +// Toggle theme +toggleBtn.addEventListener("click", () => { + + const currentTheme = + document.documentElement.getAttribute("data-theme"); + + if(currentTheme === "dark"){ + document.documentElement.removeAttribute("data-theme"); + localStorage.setItem("theme","light"); + }else{ + document.documentElement.setAttribute("data-theme","dark"); + localStorage.setItem("theme","dark"); + } + +}); \ No newline at end of file From ee8fd33bbe80c07611392828090e3f54ef2c33d7 Mon Sep 17 00:00:00 2001 From: Esha Jha <149310101+Eshajha19@users.noreply.github.com> Date: Sat, 7 Mar 2026 06:41:58 +0000 Subject: [PATCH 2/3] added dark light toggle on help cneter page --- public/Help-Center.html | 125 +++++++++++++++++++++++++++++++++++++++- 1 file changed, 123 insertions(+), 2 deletions(-) diff --git a/public/Help-Center.html b/public/Help-Center.html index cc14dbdd..52839284 100644 --- a/public/Help-Center.html +++ b/public/Help-Center.html @@ -50,7 +50,100 @@ #scrollTopBtn:hover { transform: translateY(-5px) scale(1.1); box-shadow: 0 12px 30px rgba(0,0,0,0.3); - } + }/* ========================= + DARK MODE SYSTEM +========================= */ + +/* Toggle button */ +.theme-toggle{ + border:none; + background:transparent; + font-size:18px; + cursor:pointer; + margin-left:10px; + color:inherit; +} + +/* Smooth transition */ +body{ + transition: background 0.3s ease, color 0.3s ease; +} + +/* Dark mode base */ +body.dark-mode{ + background:#0f172a; + color:#e2e8f0; +} + +/* Navbar */ +body.dark-mode .header{ + background:#020617; +} + +/* Navigation links */ +body.dark-mode .nav-link{ + color:#e2e8f0; +} + +/* Cards */ +body.dark-mode .balance-card{ + background:#1e293b; + border:1px solid #334155; + color:#e2e8f0; +} + +/* Info section */ +body.dark-mode .data-management-section{ + background:#1e293b; + border:1px solid #334155; +} + +/* Footer */ +body.dark-mode .footer{ + background:#020617; + color:#e2e8f0; +} + +/* Footer links */ +body.dark-mode .footer-links a{ + color:#e2e8f0; +} + +body.dark-mode .footer-links a:hover{ + color:#3b82f6; +} + +/* Scroll button */ +body.dark-mode #scrollTopBtn{ + background:linear-gradient(135deg,#1d4ed8,#2563eb); +}/* Default Light Mode */ +body{ + background:#f8fafc; + color:#1e293b; +} + +/* Dark Mode */ +body.dark-mode{ + background:#0f172a; + color:#e2e8f0; +} + +/* Navbar */ +body.dark-mode .header{ + background:#020617; +} + +/* Cards */ +body.dark-mode .balance-card{ + background:#1e293b; + color:#e2e8f0; +} + +/* Footer */ +body.dark-mode .footer{ + background:#020617; + color:#e2e8f0; +} @@ -73,7 +166,9 @@ Finance Tips Help Center Settings - +