Skip to content

Commit 3bd4ec0

Browse files
manojmallickmanojmallick
committed
feat(docs): add dark/light mode toggle to all 6 pages
1 parent d7295e8 commit 3bd4ec0

6 files changed

Lines changed: 147 additions & 15 deletions

File tree

‎docs/index.html‎

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
<meta name="twitter:card" content="summary_large_image">
1212
<link rel="canonical" href="https://manojmallick.github.io/context-forge">
1313
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=IBM+Plex+Mono:wght@400;500&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
14+
<script>(function(){var r=document.documentElement;if(localStorage.getItem('cf-theme')==='light')r.classList.add('light');document.addEventListener('DOMContentLoaded',function(){document.querySelectorAll('.theme-toggle').forEach(function(b){b.addEventListener('click',function(){r.classList.toggle('light');localStorage.setItem('cf-theme',r.classList.contains('light')?'light':'dark');});});});})();</script>
1415
<style>
1516
:root{
1617
--bg:#09090c;--s1:#0f0f13;--s2:#161619;--s3:#1d1d22;--s4:#25252c;
@@ -20,19 +21,36 @@
2021
--g:#10b981;--gl:rgba(16,185,129,.1);--gd:#6ee7b7;
2122
--a:#f59e0b;--al:rgba(245,158,11,.1);--ad:#fcd34d;
2223
--r:#f43f5e;
24+
--nav-bg:rgba(9,9,12,.85);
25+
}
26+
:root.light{
27+
--bg:#f8f7ff;--s1:#f2f0fd;--s2:#eceaff;--s3:#e4e2f8;--s4:#d8d6f0;
28+
--line:#d0ceea;--line2:#bcb8da;
29+
--t1:#1a1830;--t2:#5a5878;--t3:#8886a2;
30+
--p:#6b57f5;--pl:rgba(107,87,245,.1);--pd:#4c3bc4;
31+
--g:#059669;--gl:rgba(5,150,105,.1);--gd:#065f46;
32+
--a:#d97706;--al:rgba(217,119,6,.1);--ad:#78350f;
33+
--r:#e11d48;
34+
--nav-bg:rgba(248,247,255,.92);
2335
}
2436
*{box-sizing:border-box;margin:0;padding:0}
2537
html{scroll-behavior:smooth}
26-
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--t1);line-height:1.6;overflow-x:hidden}
38+
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--t1);line-height:1.6;overflow-x:hidden;transition:background .25s,color .25s}
2739

2840
/* ── NAV ── */
29-
nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(9,9,12,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding:0 24px;height:56px;display:flex;align-items:center;justify-content:space-between}
41+
nav{position:fixed;top:0;left:0;right:0;z-index:100;background:var(--nav-bg);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding:0 24px;height:56px;display:flex;align-items:center;justify-content:space-between;transition:background .25s}
3042
.nav-logo{font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:500;color:var(--pd);text-decoration:none}
3143
.nav-links{display:flex;align-items:center;gap:24px}
3244
.nav-links a{font-size:13px;color:var(--t2);text-decoration:none;transition:.15s}
3345
.nav-links a:hover{color:var(--t1)}
3446
.nav-gh{background:var(--p);color:#fff;padding:6px 14px;border-radius:7px;font-size:12px;font-weight:600;text-decoration:none;transition:.15s}
3547
.nav-gh:hover{opacity:.85;color:#fff}
48+
.theme-toggle{background:none;border:1px solid var(--line2);border-radius:7px;width:32px;height:32px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--t2);transition:.15s;flex-shrink:0;padding:0}
49+
.theme-toggle:hover{border-color:var(--p);color:var(--pd)}
50+
.theme-toggle svg{width:16px;height:16px;pointer-events:none;display:none}
51+
.theme-toggle .icon-moon{display:block}
52+
:root.light .theme-toggle .icon-sun{display:block}
53+
:root.light .theme-toggle .icon-moon{display:none}
3654
@media(max-width:600px){.nav-links .hide-sm{display:none}}
3755

3856
/* ── HERO ── */
@@ -52,7 +70,7 @@
5270
.btn-secondary:hover{border-color:var(--p);color:var(--pd)}
5371

5472
/* ── TERMINAL ── */
55-
.terminal{background:#06060a;border:1px solid var(--line2);border-radius:12px;overflow:hidden;max-width:560px;margin:0 auto;text-align:left;box-shadow:0 20px 60px rgba(0,0,0,.5)}
73+
.terminal{background:#06060a;border:1px solid var(--line2);border-radius:12px;overflow:hidden;max-width:560px;margin:0 auto;text-align:left;box-shadow:0 20px 60px rgba(0,0,0,.5);--t3:#52506a;--pd:#b3aaff;--gd:#6ee7b7;--ad:#fcd34d;--s2:#161619;--s3:#1d1d22;--line:#2a2a33;--line2:#38383f}
5674
.term-bar{background:var(--s2);padding:10px 14px;display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--line)}
5775
.term-dot{width:11px;height:11px;border-radius:50%}
5876
.term-title{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--t3);margin-left:6px}
@@ -154,6 +172,10 @@
154172
<a href="languages.html" class="hide-sm">Languages</a>
155173
<a href="roadmap.html" class="hide-sm">Roadmap</a>
156174
<a href="repomix.html" class="hide-sm">Repomix</a>
175+
<button class="theme-toggle" aria-label="Toggle theme" title="Toggle dark/light mode">
176+
<svg class="icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
177+
<svg class="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
178+
</button>
157179
<a href="https://github.com/manojmallick/context-forge" class="nav-gh" target="_blank">★ GitHub</a>
158180
</div>
159181
</nav>

‎docs/languages.html‎

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
<meta name="twitter:card" content="summary_large_image">
1212
<link rel="canonical" href="https://manojmallick.github.io/context-forge/languages.html">
1313
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=IBM+Plex+Mono:wght@400;500&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
14+
<script>(function(){var r=document.documentElement;if(localStorage.getItem('cf-theme')==='light')r.classList.add('light');document.addEventListener('DOMContentLoaded',function(){document.querySelectorAll('.theme-toggle').forEach(function(b){b.addEventListener('click',function(){r.classList.toggle('light');localStorage.setItem('cf-theme',r.classList.contains('light')?'light':'dark');});});});})();</script>
1415
<style>
1516
:root{
1617
--bg:#09090c;--s1:#0f0f13;--s2:#161619;--s3:#1d1d22;--s4:#25252c;
@@ -20,19 +21,36 @@
2021
--g:#10b981;--gl:rgba(16,185,129,.1);--gd:#6ee7b7;
2122
--a:#f59e0b;--al:rgba(245,158,11,.1);--ad:#fcd34d;
2223
--r:#f43f5e;
24+
--nav-bg:rgba(9,9,12,.85);
25+
}
26+
:root.light{
27+
--bg:#f8f7ff;--s1:#f2f0fd;--s2:#eceaff;--s3:#e4e2f8;--s4:#d8d6f0;
28+
--line:#d0ceea;--line2:#bcb8da;
29+
--t1:#1a1830;--t2:#5a5878;--t3:#8886a2;
30+
--p:#6b57f5;--pl:rgba(107,87,245,.1);--pd:#4c3bc4;
31+
--g:#059669;--gl:rgba(5,150,105,.1);--gd:#065f46;
32+
--a:#d97706;--al:rgba(217,119,6,.1);--ad:#78350f;
33+
--r:#e11d48;
34+
--nav-bg:rgba(248,247,255,.92);
2335
}
2436
*{box-sizing:border-box;margin:0;padding:0}
2537
html{scroll-behavior:smooth}
26-
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--t1);line-height:1.6;overflow-x:hidden}
38+
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--t1);line-height:1.6;overflow-x:hidden;transition:background .25s,color .25s}
2739

28-
nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(9,9,12,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding:0 24px;height:56px;display:flex;align-items:center;justify-content:space-between}
40+
nav{position:fixed;top:0;left:0;right:0;z-index:100;background:var(--nav-bg);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding:0 24px;height:56px;display:flex;align-items:center;justify-content:space-between;transition:background .25s}
2941
.nav-logo{font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:500;color:var(--pd);text-decoration:none}
3042
.nav-links{display:flex;align-items:center;gap:24px}
3143
.nav-links a{font-size:13px;color:var(--t2);text-decoration:none;transition:.15s}
3244
.nav-links a:hover{color:var(--t1)}
3345
.nav-links a.active{color:var(--t1)}
3446
.nav-gh{background:var(--p);color:#fff;padding:6px 14px;border-radius:7px;font-size:12px;font-weight:600;text-decoration:none;transition:.15s}
3547
.nav-gh:hover{opacity:.85;color:#fff}
48+
.theme-toggle{background:none;border:1px solid var(--line2);border-radius:7px;width:32px;height:32px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--t2);transition:.15s;flex-shrink:0;padding:0}
49+
.theme-toggle:hover{border-color:var(--p);color:var(--pd)}
50+
.theme-toggle svg{width:16px;height:16px;pointer-events:none;display:none}
51+
.theme-toggle .icon-moon{display:block}
52+
:root.light .theme-toggle .icon-sun{display:block}
53+
:root.light .theme-toggle .icon-moon{display:none}
3654
@media(max-width:600px){.nav-links .hide-sm{display:none}}
3755

3856
.page-hero{padding:120px 24px 64px;text-align:center;position:relative;overflow:hidden}
@@ -110,6 +128,10 @@
110128
<a href="languages.html" class="hide-sm active">Languages</a>
111129
<a href="roadmap.html" class="hide-sm">Roadmap</a>
112130
<a href="repomix.html" class="hide-sm">Repomix</a>
131+
<button class="theme-toggle" aria-label="Toggle theme" title="Toggle dark/light mode">
132+
<svg class="icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
133+
<svg class="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
134+
</button>
113135
<a href="https://github.com/manojmallick/context-forge" class="nav-gh" target="_blank">★ GitHub</a>
114136
</div>
115137
</nav>

‎docs/quick-start.html‎

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
<meta name="twitter:card" content="summary_large_image">
1212
<link rel="canonical" href="https://manojmallick.github.io/context-forge/quick-start.html">
1313
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=IBM+Plex+Mono:wght@400;500&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
14+
<script>(function(){var r=document.documentElement;if(localStorage.getItem('cf-theme')==='light')r.classList.add('light');document.addEventListener('DOMContentLoaded',function(){document.querySelectorAll('.theme-toggle').forEach(function(b){b.addEventListener('click',function(){r.classList.toggle('light');localStorage.setItem('cf-theme',r.classList.contains('light')?'light':'dark');});});});})();</script>
1415
<style>
1516
:root{
1617
--bg:#09090c;--s1:#0f0f13;--s2:#161619;--s3:#1d1d22;--s4:#25252c;
@@ -20,20 +21,37 @@
2021
--g:#10b981;--gl:rgba(16,185,129,.1);--gd:#6ee7b7;
2122
--a:#f59e0b;--al:rgba(245,158,11,.1);--ad:#fcd34d;
2223
--r:#f43f5e;
24+
--nav-bg:rgba(9,9,12,.85);
25+
}
26+
:root.light{
27+
--bg:#f8f7ff;--s1:#f2f0fd;--s2:#eceaff;--s3:#e4e2f8;--s4:#d8d6f0;
28+
--line:#d0ceea;--line2:#bcb8da;
29+
--t1:#1a1830;--t2:#5a5878;--t3:#8886a2;
30+
--p:#6b57f5;--pl:rgba(107,87,245,.1);--pd:#4c3bc4;
31+
--g:#059669;--gl:rgba(5,150,105,.1);--gd:#065f46;
32+
--a:#d97706;--al:rgba(217,119,6,.1);--ad:#78350f;
33+
--r:#e11d48;
34+
--nav-bg:rgba(248,247,255,.92);
2335
}
2436
*{box-sizing:border-box;margin:0;padding:0}
2537
html{scroll-behavior:smooth}
26-
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--t1);line-height:1.6;overflow-x:hidden}
38+
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--t1);line-height:1.6;overflow-x:hidden;transition:background .25s,color .25s}
2739

2840
/* NAV */
29-
nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(9,9,12,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding:0 24px;height:56px;display:flex;align-items:center;justify-content:space-between}
41+
nav{position:fixed;top:0;left:0;right:0;z-index:100;background:var(--nav-bg);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding:0 24px;height:56px;display:flex;align-items:center;justify-content:space-between;transition:background .25s}
3042
.nav-logo{font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:500;color:var(--pd);text-decoration:none}
3143
.nav-links{display:flex;align-items:center;gap:24px}
3244
.nav-links a{font-size:13px;color:var(--t2);text-decoration:none;transition:.15s}
3345
.nav-links a:hover{color:var(--t1)}
3446
.nav-links a.active{color:var(--t1)}
3547
.nav-gh{background:var(--p);color:#fff;padding:6px 14px;border-radius:7px;font-size:12px;font-weight:600;text-decoration:none;transition:.15s}
3648
.nav-gh:hover{opacity:.85;color:#fff}
49+
.theme-toggle{background:none;border:1px solid var(--line2);border-radius:7px;width:32px;height:32px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--t2);transition:.15s;flex-shrink:0;padding:0}
50+
.theme-toggle:hover{border-color:var(--p);color:var(--pd)}
51+
.theme-toggle svg{width:16px;height:16px;pointer-events:none;display:none}
52+
.theme-toggle .icon-moon{display:block}
53+
:root.light .theme-toggle .icon-sun{display:block}
54+
:root.light .theme-toggle .icon-moon{display:none}
3755
@media(max-width:600px){.nav-links .hide-sm{display:none}}
3856

3957
/* HERO */
@@ -53,7 +71,7 @@
5371
.section-sub{font-size:15px;color:var(--t2);text-align:center;max-width:500px;margin:0 auto 48px;font-weight:300;line-height:1.65}
5472

5573
/* TERMINAL */
56-
.terminal{background:#06060a;border:1px solid var(--line2);border-radius:12px;overflow:hidden;max-width:700px;margin:0 auto 32px;text-align:left;box-shadow:0 20px 60px rgba(0,0,0,.5)}
74+
.terminal{background:#06060a;border:1px solid var(--line2);border-radius:12px;overflow:hidden;max-width:700px;margin:0 auto 32px;text-align:left;box-shadow:0 20px 60px rgba(0,0,0,.5);--t3:#52506a;--pd:#b3aaff;--gd:#6ee7b7;--ad:#fcd34d;--s2:#161619;--s3:#1d1d22;--line:#2a2a33;--line2:#38383f}
5775
.term-bar{background:var(--s2);padding:10px 14px;display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--line)}
5876
.term-dot{width:11px;height:11px;border-radius:50%}
5977
.term-title{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--t3);margin-left:6px}
@@ -125,6 +143,10 @@
125143
<a href="languages.html" class="hide-sm">Languages</a>
126144
<a href="roadmap.html" class="hide-sm">Roadmap</a>
127145
<a href="repomix.html" class="hide-sm">Repomix</a>
146+
<button class="theme-toggle" aria-label="Toggle theme" title="Toggle dark/light mode">
147+
<svg class="icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
148+
<svg class="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
149+
</button>
128150
<a href="https://github.com/manojmallick/context-forge" class="nav-gh" target="_blank">★ GitHub</a>
129151
</div>
130152
</nav>

0 commit comments

Comments
 (0)