Skip to content

Commit 03aafb6

Browse files
developer-ishanSysSn13
developer-ishan
and
SysSn13
authored
Feat: Dark theme (#18)
* Dark mode implemented using css filter property * change the postion of theme-switch btn * minor changes Co-authored-by: SysSn13 <sudesh18@iitg.ac.in>
1 parent 05df038 commit 03aafb6

File tree

4 files changed

+147
-21
lines changed

4 files changed

+147
-21
lines changed

‎public/js/darkmode.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
var preference = JSON.parse(localStorage.getItem("dark"));
2+
if (preference === null) {
3+
localStorage.setItem("dark", false);
4+
preference=false;
5+
}
6+
var checkBox = document.getElementById("checkDark");
7+
if(checkBox){
8+
checkBox.checked = preference;
9+
}
10+
const html = document.getElementsByTagName("html")[0];
11+
12+
if (preference) {
13+
html.style.filter = "invert(0.9) hue-rotate(150deg)";
14+
} else {
15+
html.style.filter = "";
16+
}
17+
18+
function toggle_darkmode() {
19+
preference = !preference;
20+
checkBox.checked = preference;
21+
localStorage.setItem("dark", preference);
22+
23+
if (preference) {
24+
html.style.filter = "invert(0.9) hue-rotate(150deg)";
25+
} else {
26+
html.style.filter = "";
27+
}
28+
}

‎public/stylesheets/darkmode.css

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
html {
2+
transition: color 300ms, background-color 300ms;
3+
}
4+
.switch {
5+
position: relative;
6+
display: inline-block;
7+
width: 60px;
8+
height: 34px;
9+
}
10+
11+
@media screen and (max-width: 600px) {
12+
.switch {
13+
width: 80px;
14+
}
15+
}
16+
17+
.switch input {
18+
opacity: 0;
19+
width: 0;
20+
height: 0;
21+
}
22+
23+
.slider {
24+
position: absolute;
25+
cursor: pointer;
26+
top: 0;
27+
left: 0;
28+
right: 0;
29+
bottom: 0;
30+
background-color: #ccc;
31+
-webkit-transition: .4s;
32+
transition: .4s;
33+
}
34+
35+
.slider:before {
36+
position: absolute;
37+
content: "";
38+
height: 26px;
39+
width: 26px;
40+
left: 4px;
41+
bottom: 4px;
42+
background-color: white;
43+
-webkit-transition: .4s;
44+
transition: .4s;
45+
}
46+
47+
input:checked + .slider {
48+
background-color: #2196F3;
49+
}
50+
51+
input:focus + .slider {
52+
box-shadow: 0 0 1px #2196F3;
53+
}
54+
55+
input:checked + .slider:before {
56+
-webkit-transform: translateX(26px);
57+
-ms-transform: translateX(26px);
58+
transform: translateX(26px);
59+
}
60+
61+
/* Rounded sliders */
62+
.slider.round {
63+
border-radius: 34px;
64+
}
65+
66+
.slider.round:before {
67+
border-radius: 50%;
68+
}
69+
70+
.toggle-container{
71+
display: flex;
72+
justify-content: center;
73+
}
74+
75+
.toggle-container {
76+
display: flex;
77+
align-items: center;
78+
79+
em {
80+
margin-left: 10px;
81+
font-size: 1rem;
82+
}
83+
}

‎views/index.ejs

Lines changed: 34 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,13 @@
1616
</img>
1717
</a>
1818
</div>
19+
<div class="toggle-container">
20+
<label class="switch">
21+
<input type="checkbox" onclick="toggle_darkmode()" id="checkDark">
22+
<span class="slider round me-1"></span>
23+
</label>
24+
<em> Dark Mode!</em>
25+
</div>
1926
<div>
2027
<iframe class="mt-1"
2128
src="https://ghbtns.com/github-btn.html?user=SysSn13&repo=leetcode-rating-predictor&type=star&count=true&size=large"
@@ -26,8 +33,9 @@
2633
<div class="row justify-content-center">
2734
<div class="col-12">
2835
<style>
29-
th,td {
30-
text-align: center !important;
36+
th,
37+
td {
38+
text-align: center !important;
3139
}
3240
</style>
3341
<div class="table-responsive-lg">
@@ -43,24 +51,30 @@
4351
</thead>
4452
<tbody>
4553
<% for( let contest of contests ) { %>
46-
<tr>
47-
<td>
48-
<% if (contest.rankings_fetched) { %>
49-
<a href="/contest/<%= contest._id %>/ranking/1" style="text-decoration:none"><%= contest._id %></a>
50-
<% } else {%>
51-
<%= contest._id %>
52-
<% } %>
53-
</td>
54-
<td class="startTime"><%= contest.startTime %></td>
55-
<td><%= (contest.endTime - contest.startTime)/60000 %> minutes</td>
56-
<td>
57-
<%= contest.rankings_fetched?"Yes":"No" %>
58-
</td>
59-
<td>
60-
<%= contest.ratings_predicted?"Yes":"No" %>
61-
</td>
62-
</tr>
63-
<% } %>
54+
<tr>
55+
<td>
56+
<% if (contest.rankings_fetched) { %>
57+
<a href="/contest/<%= contest._id %>/ranking/1" style="text-decoration:none">
58+
<%= contest._id %>
59+
</a>
60+
<% } else {%>
61+
<%= contest._id %>
62+
<% } %>
63+
</td>
64+
<td class="startTime">
65+
<%= contest.startTime %>
66+
</td>
67+
<td>
68+
<%= (contest.endTime - contest.startTime)/60000 %> minutes
69+
</td>
70+
<td>
71+
<%= contest.rankings_fetched?"Yes":"No" %>
72+
</td>
73+
<td>
74+
<%= contest.ratings_predicted?"Yes":"No" %>
75+
</td>
76+
</tr>
77+
<% } %>
6478
</tbody>
6579
</table>
6680
</div>

‎views/layouts/layout.ejs

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
1313
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
1414
<link rel="stylesheet" href="/stylesheets/main.css">
15+
<link rel="stylesheet" href="/stylesheets/darkmode.css">
1516

1617
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
1718
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
@@ -34,7 +35,6 @@
3435
GitHub</a>
3536
</div>
3637
<%- body %>
37-
</div>
3838
<footer class="mt-4">
3939
<p class="text-center">
4040
Powered By: <a
@@ -48,6 +48,7 @@
4848
integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous">
4949
</script>
5050
<%- script %>
51+
<script src="/js/darkmode.js"></script>
5152
</body>
5253
5354
</html>

0 commit comments

Comments
 (0)