Skip to content

Commit edc87a7

Browse files
Unnati-Gupta24nemesifier
Unnati-Gupta24
and
nemesifier
committed
[docs] Added toggle button for dark mode in examples list #306
Closes #306 Co-authored-by: Federico Capoano <f.capoano@openwisp.io>
1 parent ad4f314 commit edc87a7

File tree

1 file changed

+121
-27
lines changed

1 file changed

+121
-27
lines changed

‎index.html‎

Lines changed: 121 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,144 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<title>netjsongraph.js: basic examples</title>
4+
<title>netjsongraph.js: Examples</title>
55
<meta charset="utf-8" />
66
<link rel="preconnect" href="https://fonts.googleapis.com" />
77
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
88
<link
9-
href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap"
9+
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap"
1010
rel="stylesheet"
1111
/>
1212
<style>
13-
body {
13+
:root {
14+
--bg-primary: #f4f4f4;
15+
--bg-secondary: #ffffff;
16+
--text-primary: #1a1a1a;
17+
--text-secondary: #333;
18+
--card-hover: #f0f0f0;
19+
--accent-color: #3498db;
20+
--transition-speed: 0.3s;
21+
}
22+
23+
:root.dark-mode {
24+
--bg-primary: #121212;
25+
--bg-secondary: #1e1e1e;
26+
--text-primary: #e0e0e0;
27+
--text-secondary: #b0b0b0;
28+
--card-hover: #2c2c2c;
29+
--accent-color: #4ecdc4;
30+
}
31+
32+
* {
1433
margin: 0;
1534
padding: 0;
1635
box-sizing: border-box;
17-
background-color: #eceaea;
18-
overflow-x: hidden;
19-
font-family: "Roboto", sans-serif;
36+
transition: background-color var(--transition-speed) ease,
37+
color var(--transition-speed) ease;
38+
}
39+
40+
body {
41+
font-family: 'Inter', sans-serif;
42+
background-color: var(--bg-primary);
43+
color: var(--text-primary);
44+
line-height: 1.6;
45+
}
46+
47+
.theme-toggle {
48+
position: fixed;
49+
top: 20px;
50+
right: 20px;
51+
background-color: var(--bg-secondary);
52+
border: none;
53+
padding: 10px 15px;
54+
border-radius: 20px;
55+
cursor: pointer;
56+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
57+
display: flex;
58+
align-items: center;
59+
gap: 8px;
60+
font-weight: 600;
61+
color: var(--text-secondary);
62+
z-index: 1000;
63+
}
64+
65+
.theme-toggle:hover {
66+
background-color: var(--card-hover);
2067
}
2168

2269
header {
2370
text-align: center;
24-
color: #333;
25-
font-size: 21px;
71+
padding: 40px 20px;
72+
background-color: var(--bg-secondary);
73+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
74+
}
75+
76+
header h1 {
77+
font-size: 2.5rem;
78+
font-weight: 700;
79+
color: var(--text-primary);
2680
}
2781

2882
main {
2983
display: flex;
30-
justify-content: space-between;
31-
width: 80vw;
84+
justify-content: center;
3285
flex-wrap: wrap;
33-
margin: 50px auto;
86+
gap: 20px;
87+
max-width: 1200px;
88+
margin: 40px auto;
89+
padding: 0 20px;
3490
}
3591

36-
main a {
37-
text-decoration: none;
38-
color: black;
39-
font-size: 17px;
40-
transition: all 0.2s ease;
41-
text-align: center;
42-
font-weight: 300;
92+
.cards {
93+
background-color: var(--bg-secondary);
94+
border-radius: 12px;
95+
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
96+
transition: all var(--transition-speed) ease;
97+
overflow: hidden;
4398
}
4499

45-
.cards {
46-
background-color: #fff;
47-
padding: 12px;
48-
margin: 10px;
100+
.cards a {
49101
display: flex;
50102
justify-content: center;
51103
align-items: center;
52-
width: 200px;
53-
transition: all 0.2s ease;
104+
text-decoration: none;
105+
color: var(--text-secondary);
106+
font-weight: 500;
107+
padding: 15px 20px;
108+
width: 250px;
109+
text-align: center;
110+
transition: all var(--transition-speed) ease;
54111
}
55112

56113
.cards:hover {
57-
transform: scale(1.2);
58-
border: 1px solid red;
114+
transform: translateY(-10px);
115+
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
59116
}
117+
60118
.cards:hover a {
61-
color: red;
119+
color: var(--accent-color);
120+
}
121+
122+
@media (max-width: 768px) {
123+
main {
124+
flex-direction: column;
125+
align-items: center;
126+
}
127+
.cards a {
128+
width: 100%;
129+
}
62130
}
63131
</style>
64132
</head>
65133
<body>
134+
<button class="theme-toggle" aria-label="Toggle Dark Mode">
135+
🌓 Toggle Theme
136+
</button>
137+
66138
<header>
67139
<h1>NetJSONGraph.js Example Demos</h1>
68140
</header>
141+
69142
<main>
70143
<div class="cards">
71144
<a href="./examples/netjsongraph.html" target="_blank">Basic usage</a>
@@ -164,5 +237,26 @@ <h1>NetJSONGraph.js Example Demos</h1>
164237
>
165238
</div>
166239
</main>
240+
241+
<script>
242+
const themeToggle = document.querySelector('.theme-toggle');
243+
const htmlElement = document.documentElement;
244+
245+
// Check for saved theme preference or system preference
246+
const savedTheme = localStorage.getItem('theme');
247+
const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
248+
249+
if (savedTheme === 'dark' || (!savedTheme && systemPrefersDark)) {
250+
htmlElement.classList.add('dark-mode');
251+
}
252+
253+
themeToggle.addEventListener('click', () => {
254+
htmlElement.classList.toggle('dark-mode');
255+
256+
// Save theme preference
257+
const currentTheme = htmlElement.classList.contains('dark-mode') ? 'dark' : 'light';
258+
localStorage.setItem('theme', currentTheme);
259+
});
260+
</script>
167261
</body>
168262
</html>

0 commit comments

Comments
 (0)