Skip to content

Commit aec1bd4

Browse files
xuafengxuafeng
committed
Add light/dark mode change
1 parent feda3c5 commit aec1bd4

File tree

2 files changed

+272
-10
lines changed

2 files changed

+272
-10
lines changed

‎blog.html‎

Lines changed: 134 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -46,10 +46,24 @@
4646
header {
4747
padding: 40px 0 20px;
4848
display: flex;
49-
justify-content: flex-end;
49+
justify-content: space-between;
5050
align-items: center;
5151
}
5252

53+
.theme-toggle {
54+
font-size: 1.5rem;
55+
background: none;
56+
border: none;
57+
color: #d4d4d4;
58+
cursor: pointer;
59+
padding: 0.5rem;
60+
transition: color 0.3s ease;
61+
}
62+
63+
.theme-toggle:hover {
64+
color: #e8e8e8;
65+
}
66+
5367
.logo {
5468
font-family: 'Sixtyfour', monospace;
5569
font-size: 14px;
@@ -309,6 +323,9 @@
309323
<body>
310324
<div class="container">
311325
<header>
326+
<button class="theme-toggle" id="theme-toggle" aria-label="Toggle theme">
327+
<i class="fa-solid fa-moon"></i>
328+
</button>
312329
<nav>
313330
<a href="index.html">Home</a>
314331
<a href="index.html#join-us">About</a>
@@ -324,10 +341,10 @@ <h1 class="page-title">Research Notes</h1>
324341
<img src="blogs/blog2.jpg" alt="Blog post thumbnail" class="blog-image">
325342
<div class="blog-content">
326343
<h2 class="blog-title">
327-
<a href="#" target="_blank" rel="noopener">Defining System Intelligence</a>
344+
<a href="https://www.sigops.org/2025/defining-system-intelligence/" target="_blank" rel="noopener">Defining System Intelligence</a>
328345
</h2>
329346
<!-- <p class="blog-excerpt">Despite the exciting vision of system intelligence, its definition has remained murky, often hindering progress toward its realization. This blog tries to make it clear.</p> -->
330-
<div class="blog-meta">System Intelligence v-Team · November 19, 2025</div>
347+
<div class="blog-meta">Xuan Feng, Peng Cheng, Qi Chen, Shan Lu, Chieh-Jan Mike Liang, Bogdan Alexandru Stoica, Zhongxin Guo, Jiahang Xu, Tianyin Xu, and Lidong Zhou · November 19, 2025</div>
331348
</div>
332349
</article>
333350

@@ -345,20 +362,131 @@ <h2 class="blog-title">
345362
</main>
346363

347364
<div class="back-link">
348-
<a href="index.html">← Back to Home</a>
365+
<a href="index.html">← Back</a>
349366
</div>
350367

351368
<footer>
352369
<div class="footer-content">
353370
<div>System Intelligence Community &copy; 2025</div>
354371
<div class="footer-links">
355372
<a href="mailto:systemintelligence0@gmail.com" aria-label="Email"><i class="fa-solid fa-envelope"></i></a>
356-
<a href="https://github.com/systemintelligence" target="_blank" rel="noopener" aria-label="GitHub"><i class="fa-brands fa-github"></i></a>
357-
<a href="https://join.slack.com/t/system-intelligence/shared_invite/zt-3hpkgr2aa-NnuPxUbyHr45S89DFi_N1A" target="_blank" rel="noopener" aria-label="Slack"><i class="fa-brands fa-slack"></i></a>
373+
<a href="https://github.com/sys-intelligence" target="_blank" rel="noopener" aria-label="GitHub"><i class="fa-brands fa-github"></i></a>
374+
<a href="https://join.slack.com/t/sys-intelligence/shared_invite/zt-3hpkgr2aa-NnuPxUbyHr45S89DFi_N1A" target="_blank" rel="noopener" aria-label="Slack"><i class="fa-brands fa-slack"></i></a>
358375
<a href="https://x.com/SysIntelligenc" target="_blank" rel="noopener" aria-label="X"><i class="fa-brands fa-x-twitter"></i></a>
359376
</div>
360377
</div>
361378
</footer>
362379
</div>
380+
<script>
381+
const themeToggle = document.getElementById('theme-toggle');
382+
const body = document.body;
383+
const icon = themeToggle.querySelector('i');
384+
385+
// Check for saved theme preference or default to dark
386+
const currentTheme = localStorage.getItem('theme') || 'dark';
387+
if (currentTheme === 'light') {
388+
setLightMode();
389+
}
390+
391+
themeToggle.addEventListener('click', () => {
392+
if (body.style.background === 'rgb(26, 26, 26)' || body.style.background === '#1a1a1a' || !body.style.background) {
393+
setLightMode();
394+
localStorage.setItem('theme', 'light');
395+
} else {
396+
setDarkMode();
397+
localStorage.setItem('theme', 'dark');
398+
}
399+
});
400+
401+
function setLightMode() {
402+
body.style.background = '#ffffff';
403+
body.style.color = '#282828';
404+
405+
document.querySelectorAll('.blog-item').forEach(item => {
406+
item.style.background = '#ffffff';
407+
item.style.borderColor = '#e8e8e8';
408+
});
409+
410+
document.querySelectorAll('.blog-title').forEach(title => {
411+
title.style.color = '#282828';
412+
});
413+
414+
document.querySelectorAll('.blog-title a').forEach(link => {
415+
link.style.color = '#282828';
416+
});
417+
418+
document.querySelectorAll('.blog-meta').forEach(meta => {
419+
meta.style.color = '#676767';
420+
meta.style.borderTopColor = '#e8e8e8';
421+
});
422+
423+
document.querySelectorAll('.blog-excerpt').forEach(excerpt => {
424+
excerpt.style.color = '#504945';
425+
});
426+
427+
document.querySelector('.page-title').style.color = '#282828';
428+
document.querySelector('.page-subtitle').style.color = '#504945';
429+
document.querySelector('footer').style.borderTopColor = '#e5e5e5';
430+
431+
document.querySelector('.footer-content').style.color = '#676767';
432+
433+
document.querySelectorAll('.footer-links a').forEach(link => {
434+
link.style.color = '#676767';
435+
});
436+
437+
document.querySelector('.back-link a').style.color = '#676767';
438+
439+
document.querySelectorAll('nav a').forEach(link => {
440+
link.style.color = '#3c3836';
441+
});
442+
443+
icon.className = 'fa-solid fa-sun';
444+
}
445+
446+
function setDarkMode() {
447+
body.style.background = '#1a1a1a';
448+
body.style.color = '#e8e8e8';
449+
450+
document.querySelectorAll('.blog-item').forEach(item => {
451+
item.style.background = '#232323';
452+
item.style.borderColor = '#333333';
453+
});
454+
455+
document.querySelectorAll('.blog-title').forEach(title => {
456+
title.style.color = '#e8e8e8';
457+
});
458+
459+
document.querySelectorAll('.blog-title a').forEach(link => {
460+
link.style.color = '#e8e8e8';
461+
});
462+
463+
document.querySelectorAll('.blog-meta').forEach(meta => {
464+
meta.style.color = '#888888';
465+
meta.style.borderTopColor = '#333333';
466+
});
467+
468+
document.querySelectorAll('.blog-excerpt').forEach(excerpt => {
469+
excerpt.style.color = '#b8b8b8';
470+
});
471+
472+
document.querySelector('.page-title').style.color = '#e8e8e8';
473+
document.querySelector('.page-subtitle').style.color = '#b8b8b8';
474+
document.querySelector('footer').style.borderTopColor = '#333333';
475+
476+
document.querySelector('.footer-content').style.color = '#888888';
477+
478+
document.querySelectorAll('.footer-links a').forEach(link => {
479+
link.style.color = '#888888';
480+
});
481+
482+
document.querySelector('.back-link a').style.color = '#888888';
483+
484+
document.querySelectorAll('nav a').forEach(link => {
485+
link.style.color = '#d4d4d4';
486+
});
487+
488+
icon.className = 'fa-solid fa-moon';
489+
}
490+
</script>
363491
</body>
364492
</html>

‎index.html‎

Lines changed: 138 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -55,10 +55,24 @@
5555
header {
5656
padding: 40px 0 0;
5757
display: flex;
58-
justify-content: flex-end;
58+
justify-content: space-between;
5959
align-items: center;
6060
}
6161

62+
.theme-toggle {
63+
font-size: 1.5rem;
64+
background: none;
65+
border: none;
66+
color: var(--fg1);
67+
cursor: pointer;
68+
padding: 0.5rem;
69+
transition: color 0.3s ease;
70+
}
71+
72+
.theme-toggle:hover {
73+
color: var(--fg);
74+
}
75+
6276
nav {
6377
font-family: var(--font-serif);
6478
display: flex;
@@ -451,6 +465,9 @@
451465
<body>
452466
<div class="container">
453467
<header>
468+
<button class="theme-toggle" id="theme-toggle" aria-label="Toggle theme">
469+
<i class="fa-solid fa-moon"></i>
470+
</button>
454471
<nav>
455472
<a href="blog.html">Blog</a>
456473
<a href="#join-us">About</a>
@@ -503,7 +520,7 @@ <h3><i class="fa-brands fa-github"></i> GitHub</h3>
503520
</a>
504521
</div> -->
505522
<div class="community-card">
506-
<a href="https://join.slack.com/t/system-intelligence/shared_invite/zt-3hpkgr2aa-NnuPxUbyHr45S89DFi_N1A" target="_blank" rel="noopener">
523+
<a href="https://join.slack.com/t/sys-intelligence/shared_invite/zt-3hpkgr2aa-NnuPxUbyHr45S89DFi_N1A" target="_blank" rel="noopener">
507524
<h3><i class="fa-brands fa-slack"></i> Slack</h3>
508525
<p>Join our community discussions and collaborations</p>
509526
</a>
@@ -523,12 +540,129 @@ <h3><i class="fa-brands fa-x-twitter"></i> X</h3>
523540
<div>System Intelligence Community &copy; 2025</div>
524541
<div class="footer-links">
525542
<a href="mailto:systemintelligence0@gmail.com" aria-label="Email"><i class="fa-solid fa-envelope"></i></a>
526-
<a href="https://github.com/systemintelligence" target="_blank" rel="noopener" aria-label="GitHub"><i class="fa-brands fa-github"></i></a>
527-
<a href="https://join.slack.com/t/system-intelligence/shared_invite/zt-3hpkgr2aa-NnuPxUbyHr45S89DFi_N1A" target="_blank" rel="noopener" aria-label="Slack"><i class="fa-brands fa-slack"></i></a>
543+
<a href="https://github.com/sys-intelligence" target="_blank" rel="noopener" aria-label="GitHub"><i class="fa-brands fa-github"></i></a>
544+
<a href="https://join.slack.com/t/sys-intelligence/shared_invite/zt-3hpkgr2aa-NnuPxUbyHr45S89DFi_N1A" target="_blank" rel="noopener" aria-label="Slack"><i class="fa-brands fa-slack"></i></a>
528545
<a href="https://x.com/SysIntelligenc" target="_blank" rel="noopener" aria-label="X"><i class="fa-brands fa-x-twitter"></i></a>
529546
</div>
530547
</div>
531548
</footer>
532549
</div>
550+
<script>
551+
const themeToggle = document.getElementById('theme-toggle');
552+
const root = document.documentElement;
553+
const icon = themeToggle.querySelector('i');
554+
555+
// Check for saved theme preference or default to dark
556+
const currentTheme = localStorage.getItem('theme') || 'dark';
557+
if (currentTheme === 'light') {
558+
setLightMode();
559+
}
560+
561+
themeToggle.addEventListener('click', () => {
562+
if (root.style.getPropertyValue('--bg') === '#1a1a1a' || !root.style.getPropertyValue('--bg')) {
563+
setLightMode();
564+
localStorage.setItem('theme', 'light');
565+
} else {
566+
setDarkMode();
567+
localStorage.setItem('theme', 'dark');
568+
}
569+
});
570+
571+
function setLightMode() {
572+
root.style.setProperty('--bg', '#ffffff');
573+
root.style.setProperty('--fg', '#282828');
574+
root.style.setProperty('--fg1', '#3c3836');
575+
root.style.setProperty('--fg2', '#504945');
576+
root.style.setProperty('--fg3', '#6b6866');
577+
root.style.setProperty('--fg4', '#676767');
578+
root.style.setProperty('--hover-bg', 'rgba(128, 128, 128, 0.12)');
579+
580+
// Update specific elements
581+
document.querySelector('.hero-title').style.background = '#ffffff';
582+
document.querySelector('.hero-title').style.color = '#282828';
583+
document.querySelector('.hero-title').style.borderColor = '#ffffff';
584+
585+
document.querySelectorAll('.community-card').forEach(card => {
586+
card.style.background = 'linear-gradient(135deg, #ffffff 0%, #fafafa 100%)';
587+
card.style.borderColor = '#e8e8e8';
588+
});
589+
590+
document.querySelectorAll('.community-card h3').forEach(h3 => {
591+
h3.style.color = '#282828';
592+
});
593+
594+
document.querySelectorAll('.community-card h3 i').forEach(i => {
595+
i.style.color = '#3c3836';
596+
});
597+
598+
document.querySelectorAll('.community-card p').forEach(p => {
599+
p.style.color = '#6b6866';
600+
});
601+
602+
document.querySelector('footer').style.borderTopColor = '#e5e5e5';
603+
604+
document.querySelectorAll('.footer-links a').forEach(link => {
605+
link.style.color = '#676767';
606+
});
607+
608+
document.querySelectorAll('.blog-post h3 a').forEach(link => {
609+
link.style.color = '#282828';
610+
});
611+
612+
document.querySelectorAll('.blog-meta').forEach(meta => {
613+
meta.style.color = '#737373';
614+
});
615+
616+
icon.className = 'fa-solid fa-sun';
617+
}
618+
619+
function setDarkMode() {
620+
root.style.setProperty('--bg', '#1a1a1a');
621+
root.style.setProperty('--fg', '#e8e8e8');
622+
root.style.setProperty('--fg1', '#d4d4d4');
623+
root.style.setProperty('--fg2', '#b8b8b8');
624+
root.style.setProperty('--fg3', '#9b9b9b');
625+
root.style.setProperty('--fg4', '#888888');
626+
root.style.setProperty('--hover-bg', 'rgba(255, 255, 255, 0.08)');
627+
628+
// Update specific elements
629+
document.querySelector('.hero-title').style.background = '#1a1a1a';
630+
document.querySelector('.hero-title').style.color = '#e8e8e8';
631+
document.querySelector('.hero-title').style.borderColor = '#1a1a1a';
632+
633+
document.querySelectorAll('.community-card').forEach(card => {
634+
card.style.background = 'linear-gradient(135deg, #232323 0%, #1e1e1e 100%)';
635+
card.style.borderColor = '#333333';
636+
});
637+
638+
document.querySelectorAll('.community-card h3').forEach(h3 => {
639+
h3.style.color = '#e8e8e8';
640+
});
641+
642+
document.querySelectorAll('.community-card h3 i').forEach(i => {
643+
i.style.color = '#d4d4d4';
644+
});
645+
646+
document.querySelectorAll('.community-card p').forEach(p => {
647+
p.style.color = '#9b9b9b';
648+
});
649+
650+
document.querySelector('footer').style.borderTopColor = '#333333';
651+
652+
document.querySelectorAll('.footer-links a').forEach(link => {
653+
link.style.color = '#888888';
654+
});
655+
656+
document.querySelectorAll('.blog-post h3 a').forEach(link => {
657+
link.style.color = '#e8e8e8';
658+
});
659+
660+
document.querySelectorAll('.blog-meta').forEach(meta => {
661+
meta.style.color = '#9b9b9b';
662+
});
663+
664+
icon.className = 'fa-solid fa-moon';
665+
}
666+
</script>
533667
</body>
534668
</html>

0 commit comments

Comments
 (0)