Skip to content

Commit 4f2a96e

Browse files
avinash201199avinash201199
authored
Merge pull request #101 from ngsanthosh/main
(Theme): Add theme toggle button and functionality for light/dark…
2 parents c3d67be + d38efcc commit 4f2a96e

File tree

2 files changed

+187
-0
lines changed

2 files changed

+187
-0
lines changed

‎assets/style.css‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1167,3 +1167,166 @@ mark {
11671167
font-size: 0.9rem;
11681168
}
11691169
}
1170+
1171+
[data-theme="light"] {
1172+
--bg: #f8fafc;
1173+
--card: #ffffff;
1174+
--muted: #475569;
1175+
--accent: #2563eb;
1176+
--accent-2: #3b82f6;
1177+
--glass: rgba(0, 0, 0, 0.03);
1178+
--bg-dark: #e2e8f0;
1179+
}
1180+
1181+
[data-theme="light"] body {
1182+
background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
1183+
color: #1e293b;
1184+
}
1185+
1186+
[data-theme="light"] .topnav {
1187+
background: linear-gradient(90deg, #f97316, #a855f7);
1188+
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
1189+
}
1190+
1191+
[data-theme="light"] .sidebar {
1192+
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.95));
1193+
border-right: 1px solid rgba(0, 0, 0, 0.08);
1194+
}
1195+
1196+
[data-theme="light"] .search-wrapper input {
1197+
background: rgba(0, 0, 0, 0.03);
1198+
border: 1px solid rgba(0, 0, 0, 0.08);
1199+
color: #1e293b;
1200+
}
1201+
1202+
[data-theme="light"] .search-wrapper input::placeholder {
1203+
color: #94a3b8;
1204+
}
1205+
1206+
[data-theme="light"] .search-wrapper input:focus {
1207+
box-shadow: 0 2px 12px rgba(37, 99, 235, 0.15);
1208+
border-color: #3b82f6;
1209+
}
1210+
1211+
[data-theme="light"] .search-ico {
1212+
fill: #64748b;
1213+
}
1214+
1215+
[data-theme="light"] .toc-item a {
1216+
color: #475569;
1217+
}
1218+
1219+
[data-theme="light"] .toc-item a:hover {
1220+
background: rgba(37, 99, 235, 0.08);
1221+
color: #2563eb;
1222+
}
1223+
1224+
[data-theme="light"] .toc-item a.active {
1225+
background: linear-gradient(90deg, #f97316, #a855f7);
1226+
color: #ffffff;
1227+
}
1228+
1229+
[data-theme="light"] .content {
1230+
background: linear-gradient(135deg, rgba(249, 115, 22, 0.05), rgba(168, 85, 247, 0.05));
1231+
}
1232+
1233+
[data-theme="light"] .content-inner {
1234+
background: rgba(255, 255, 255, 0.7);
1235+
backdrop-filter: blur(10px);
1236+
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
1237+
}
1238+
1239+
[data-theme="light"] .content-inner:hover {
1240+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
1241+
}
1242+
1243+
[data-theme="light"] #article h1,
1244+
[data-theme="light"] #article h2,
1245+
[data-theme="light"] #article h3 {
1246+
color: #0f172a;
1247+
}
1248+
1249+
[data-theme="light"] #article p,
1250+
[data-theme="light"] #article li {
1251+
color: #475569;
1252+
}
1253+
1254+
[data-theme="light"] #article a {
1255+
color: #2563eb;
1256+
}
1257+
1258+
[data-theme="light"] #article a:hover {
1259+
color: #1d4ed8;
1260+
}
1261+
1262+
[data-theme="light"] #article code {
1263+
background: rgba(168, 85, 247, 0.08);
1264+
color: #7c3aed;
1265+
}
1266+
1267+
[data-theme="light"] pre {
1268+
background: #1e293b;
1269+
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
1270+
}
1271+
1272+
[data-theme="light"] #article table th,
1273+
[data-theme="light"] #article table td {
1274+
border: 1px solid rgba(0, 0, 0, 0.08);
1275+
background: rgba(0, 0, 0, 0.02);
1276+
color: #475569;
1277+
}
1278+
1279+
[data-theme="light"] #article table th {
1280+
background: rgba(168, 85, 247, 0.08);
1281+
color: #7c3aed;
1282+
}
1283+
1284+
[data-theme="light"] mark {
1285+
background: rgba(249, 115, 22, 0.2);
1286+
color: #1e293b;
1287+
}
1288+
1289+
[data-theme="light"] .heading-anchor {
1290+
color: #94a3b8;
1291+
}
1292+
1293+
[data-theme="light"] .sidebar-footer .btn {
1294+
background: rgba(0, 0, 0, 0.04);
1295+
color: #3b82f6;
1296+
}
1297+
1298+
[data-theme="light"] .toc-toggle {
1299+
color: #64748b;
1300+
}
1301+
1302+
[data-theme="light"] .site-footer {
1303+
background: linear-gradient(135deg, rgba(248, 250, 252, 0.96), rgba(226, 232, 240, 0.92));
1304+
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
1305+
color: #1e293b;
1306+
}
1307+
1308+
[data-theme="light"] .footer-col h4 {
1309+
color: #f97316;
1310+
}
1311+
1312+
[data-theme="light"] .footer-desc,
1313+
[data-theme="light"] .footer-links a,
1314+
[data-theme="light"] .footer-socials a {
1315+
color: #475569;
1316+
}
1317+
1318+
[data-theme="light"] .footer-links a:hover,
1319+
[data-theme="light"] .footer-socials a:hover {
1320+
color: #f97316;
1321+
}
1322+
1323+
[data-theme="light"] .footer-bottom {
1324+
color: #64748b;
1325+
border-top: 1px solid rgba(0, 0, 0, 0.06);
1326+
}
1327+
1328+
@media (max-width: 900px) {
1329+
[data-theme="light"] .sidebar {
1330+
background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(248, 250, 252, 0.95));
1331+
}
1332+
}

‎index.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -774,6 +774,14 @@
774774
>
775775
🔎
776776
</button>
777+
<button
778+
id="theme-toggle"
779+
class="nav-btn"
780+
title="Toggle theme"
781+
aria-label="Toggle dark/light mode"
782+
>
783+
🌙
784+
</button>
777785
<a
778786
class="nav-cta"
779787
href="https://github.com/avinash201199/Hacktoberfest2025"
@@ -1300,6 +1308,22 @@ <h1 class="loading-title">Loading README.md…</h1>
13001308
}
13011309

13021310
renderReadme();
1311+
1312+
// Theme toggle
1313+
const themeToggle = document.getElementById('theme-toggle');
1314+
const html = document.documentElement;
1315+
const savedTheme = localStorage.getItem('theme') || 'dark';
1316+
1317+
html.setAttribute('data-theme', savedTheme);
1318+
themeToggle.textContent = savedTheme === 'dark' ? '🌙' : '☀️';
1319+
1320+
themeToggle.addEventListener('click', () => {
1321+
const current = html.getAttribute('data-theme');
1322+
const next = current === 'dark' ? 'light' : 'dark';
1323+
html.setAttribute('data-theme', next);
1324+
localStorage.setItem('theme', next);
1325+
themeToggle.textContent = next === 'dark' ? '🌙' : '☀️';
1326+
});
13031327
</script>
13041328

13051329
<!-- Footer Section -->

0 commit comments

Comments
 (0)