Skip to content

Commit 78d6fec

Browse files
Merge pull request #143 from SuvanshTembe/feature-light-theme-contribution-page
Fixed Bug - Filter text not clearly visible in Contributors page Fixes #133
2 parents 6b665e2 + 7546459 commit 78d6fec

File tree

4 files changed

+361
-189
lines changed

4 files changed

+361
-189
lines changed

projects/Tip Calculator/styles.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
--border: #e5e7eb;
99
}
1010

11-
body.dark-mode {
11+
body.dark-mode {
1212
/* dark mode */
1313
--bg: #0f172a;
1414
--card: #1e293b;

projects/contributor/index.html

Lines changed: 93 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,100 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<meta name="viewport" content="width=device-width,initial-scale=1" />
6-
<title>Contributors — vanilla-verse</title>
7-
<link rel="stylesheet" href="styles.css" />
8-
<meta name="description" content="Contributors page for commitra/vanilla-verse — avatars, contributions, links." />
9-
</head>
10-
<body>
11-
<main class="page">
12-
<header class="hero">
13-
<div class="title-block">
14-
<h1 class="title">Contributors</h1>
15-
<p class="subtitle">Thanks to everyone who contributes to <strong>commitra/vanilla-verse</strong></p>
16-
</div>
17-
18-
<div class="controls">
19-
<div class="control-row">
20-
<input id="search" type="search" placeholder="Search contributors..." aria-label="Search contributors" />
21-
<select id="sort" aria-label="Sort contributors">
22-
<option value="contributions-desc">Top contributors</option>
23-
<option value="contributions-asc">Least contributions</option>
24-
<option value="name-asc">Name A → Z</option>
25-
<option value="name-desc">Name Z → A</option>
26-
</select>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width,initial-scale=1" />
6+
<title>Contributors — vanilla-verse</title>
7+
<link rel="stylesheet" href="styles.css" />
8+
<meta
9+
name="description"
10+
content="Contributors page for commitra/vanilla-verse — avatars, contributions, links."
11+
/>
12+
</head>
13+
<body>
14+
<button id="themeToggle" class="theme-toggle" aria-label="Toggle theme">
15+
<svg
16+
class="sun-icon"
17+
width="20"
18+
height="20"
19+
viewBox="0 0 24 24"
20+
fill="none"
21+
stroke="currentColor"
22+
stroke-width="2"
23+
>
24+
<circle cx="12" cy="12" r="5" />
25+
<line x1="12" y1="1" x2="12" y2="3" />
26+
<line x1="12" y1="21" x2="12" y2="23" />
27+
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
28+
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
29+
<line x1="1" y1="12" x2="3" y2="12" />
30+
<line x1="21" y1="12" x2="23" y2="12" />
31+
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
32+
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
33+
</svg>
34+
<svg
35+
class="moon-icon"
36+
width="20"
37+
height="20"
38+
viewBox="0 0 24 24"
39+
fill="none"
40+
stroke="currentColor"
41+
stroke-width="2"
42+
>
43+
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
44+
</svg>
45+
</button>
46+
<main class="page">
47+
<header class="hero">
48+
<div class="title-block">
49+
<h1 class="title">Contributors</h1>
50+
<p class="subtitle">
51+
Thanks to everyone who contributes to
52+
<strong>commitra/vanilla-verse</strong>
53+
</p>
2754
</div>
28-
<div class="meta">
29-
<small id="count">Loading...</small>
55+
56+
<div class="controls">
57+
<div class="control-row">
58+
<input
59+
id="search"
60+
type="search"
61+
placeholder="Search contributors..."
62+
aria-label="Search contributors"
63+
/>
64+
<select id="sort" aria-label="Sort contributors">
65+
<option value="contributions-desc">Top contributors</option>
66+
<option value="contributions-asc">Least contributions</option>
67+
<option value="name-asc">Name A → Z</option>
68+
<option value="name-desc">Name Z → A</option>
69+
</select>
70+
</div>
71+
<div class="meta">
72+
<small id="count">Loading...</small>
73+
</div>
3074
</div>
31-
</div>
32-
</header>
75+
</header>
3376

34-
<section id="grid" class="grid" aria-live="polite">
35-
<!-- Cards injected here -->
36-
</section>
77+
<section id="grid" class="grid" aria-live="polite">
78+
<!-- Cards injected here -->
79+
</section>
3780

38-
<footer class="foot">
39-
<p>
40-
Powered by GitHub API — <a href="https://github.com/commitra/vanilla-verse" target="_blank" rel="noopener">commitra/vanilla-verse</a>
41-
</p>
42-
<p class="hint">Tip: If you hit rate limits, add a personal token in <code>contributors.js</code> (see comment).</p>
43-
</footer>
44-
</main>
81+
<footer class="foot">
82+
<p>
83+
Powered by GitHub API —
84+
<a
85+
href="https://github.com/commitra/vanilla-verse"
86+
target="_blank"
87+
rel="noopener"
88+
>commitra/vanilla-verse</a
89+
>
90+
</p>
91+
<p class="hint">
92+
Tip: If you hit rate limits, add a personal token in
93+
<code>contributors.js</code> (see comment).
94+
</p>
95+
</footer>
96+
</main>
4597

46-
<script src="script.js" type="module"></script>
47-
</body>
98+
<script src="script.js" type="module"></script>
99+
</body>
48100
</html>

projects/contributor/script.js

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -165,4 +165,32 @@ async function init() {
165165
});
166166
}
167167

168-
document.addEventListener('DOMContentLoaded', init);
168+
const themeToggle = document.getElementById("themeToggle");
169+
const body = document.body;
170+
171+
const currentTheme = localStorage.getItem("theme") || "light";
172+
if (currentTheme === "dark") {
173+
body.classList.add("dark-mode");
174+
}
175+
176+
themeToggle.addEventListener("click", () => {
177+
body.classList.toggle("dark-mode");
178+
179+
const theme = body.classList.contains("dark-mode") ? "dark" : "light";
180+
localStorage.setItem("theme", theme);
181+
});
182+
183+
document.addEventListener("keydown",(e)=>{
184+
const searchEl = document.getElementById('search')
185+
if(e.key.toLowerCase()==='x')
186+
{
187+
e.preventDefault()
188+
searchEl.focus()
189+
}
190+
if(e.key ==='Escape')
191+
{
192+
e.preventDefault()
193+
searchEl.blur()
194+
}
195+
})
196+
document.addEventListener('DOMContentLoaded', init);

0 commit comments

Comments
 (0)