Skip to content

Commit 4b35a25

Browse files
swapnilsparshswapnilsparsh
committed
Dark Mode Added
1 parent c2f5323 commit 4b35a25

3 files changed

Lines changed: 139 additions & 69 deletions

File tree

‎30DaysOfJavaScript/script.js‎

Lines changed: 26 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,26 @@
1-
$(document).ready(function(){
2-
$(window).scroll(function(){
3-
if ($(this).scrollTop() >= 100) {
4-
$('.scrollToTop').fadeIn();
5-
} else {
6-
$('.scrollToTop').fadeOut();
7-
}
8-
});
9-
$('.scrollToTop').click(function(e){
10-
e.preventDefault();
11-
$("html, body").animate({ scrollTop: 0 }, 500);
12-
return false;
13-
});
14-
});
1+
$(document).ready(function () {
2+
$(window).scroll(function () {
3+
if ($(this).scrollTop() >= 100) {
4+
$(".scrollToTop").fadeIn();
5+
} else {
6+
$(".scrollToTop").fadeOut();
7+
}
8+
});
9+
$(".scrollToTop").click(function (e) {
10+
e.preventDefault();
11+
$("html, body").animate({ scrollTop: 0 }, 500);
12+
return false;
13+
});
14+
});
15+
16+
function toggleDarkLight() {
17+
var body = document.getElementById("body");
18+
var button = document.getElementById("toggle");
19+
if (button.innerHTML == "🌙") {
20+
button.innerHTML = "☀️";
21+
} else {
22+
button.innerHTML = "🌙";
23+
}
24+
var currentClass = body.className;
25+
body.className = currentClass == "dark-mode" ? "light-mode" : "dark-mode";
26+
}

‎30DaysOfJavaScript/style.css‎

Lines changed: 67 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -11,41 +11,47 @@
1111

1212
body {
1313
font-family: "sans";
14-
color: white;
15-
background: rgb(111,18,47);
16-
background: linear-gradient(332deg, rgba(111,18,47,1) 0%, rgb(34, 103, 182) 70%);
17-
background-size: 400% 400%;
18-
animation: gradient 5s ease infinite;
1914
}
2015

21-
@keyframes gradient {
22-
0% {
23-
background-position: 0% 50%;
24-
}
25-
50% {
26-
background-position: 100% 50%;
27-
}
28-
100% {
29-
background-position: 0% 50%;
30-
}
16+
/* Dark Mode */
17+
body.dark-mode {
18+
background-color: #111;
19+
color: #eee;
3120
}
32-
33-
h1 {
34-
text-align: center;
35-
font-size: 3.5rem;
36-
padding: 5vh 7vw;
37-
text-shadow: 1px 1px 1px rgb(223, 227, 229), 6px 6px 1px rgba(0, 0, 0, 0.25);
38-
-webkit-text-stroke: 1px rgba(56, 56, 56, 0.20);
21+
body.dark-mode a {
22+
color: #111;
3923
}
40-
41-
@media only screen and (max-width: 658px) {
42-
43-
h1 {
44-
font-size: 2em;
45-
padding: 32px 40px;
46-
}
47-
24+
body.dark-mode button {
25+
background-color: #eee;
26+
color: #111;
27+
}
28+
body.dark-mode h4 {
29+
color: #eee;
30+
}
31+
body.dark-mode svg {
32+
fill: #fff;
33+
color: #151513;
4834
}
35+
body.light-mode {
36+
background-color: #eee;
37+
color: #111;
38+
}
39+
body.light-mode a {
40+
color: #111;
41+
}
42+
body.light-mode button {
43+
background-color: #111;
44+
color: #eee;
45+
}
46+
body.light-mode h4 {
47+
color: #111;
48+
}
49+
body.light-mode svg {
50+
fill: #151513;
51+
color: #fff;
52+
}
53+
54+
/* Octocat */
4955

5056
.github-corner:hover .octo-arm {
5157
animation: octocat-wave 560ms ease-in-out;
@@ -73,6 +79,30 @@ h1 {
7379
}
7480
}
7581

82+
.toggleButton{
83+
position: absolute;
84+
top: 0;
85+
margin: 10px;
86+
padding: 10px;
87+
border: none;
88+
border-radius: 20px;
89+
}
90+
91+
h1 {
92+
text-align: center;
93+
font-size: 3.5rem;
94+
padding: 5vh 7vw;
95+
}
96+
97+
@media only screen and (max-width: 658px) {
98+
99+
h1 {
100+
font-size: 2em;
101+
padding: 32px 40px;
102+
}
103+
104+
}
105+
76106
h4 {
77107
padding: 2%;
78108
}
@@ -84,7 +114,6 @@ img {
84114

85115
a {
86116
color: inherit;
87-
text-decoration: none;
88117
}
89118

90119
a:visited {
@@ -109,7 +138,7 @@ a:visited {
109138

110139
.item:hover{
111140
transform: scale3d(1.05, 1.05, 1);
112-
border: 3px solid #ffffff;
141+
/* border: 1px solid #ffffff; */
113142
filter: drop-shadow(10px);
114143
filter: contrast(110%);
115144
}
@@ -130,17 +159,8 @@ a:visited {
130159

131160
}
132161

133-
::-webkit-scrollbar{
134-
width: 6px;
135-
}
136-
137-
::-webkit-scrollbar-thumb{
138-
background: linear-gradient(transparent, rgb(62, 120, 185));
139-
border-radius: 12px;
140-
}
141-
142-
::-webkit-scrollbar-track{
143-
background: black;
162+
.main a{
163+
text-decoration: none;
144164
}
145165

146166
footer {
@@ -152,13 +172,13 @@ footer {
152172
right: 0;
153173
bottom: 0;
154174
margin-bottom: 0;
155-
padding: 22px;
175+
padding: 10px;
156176
line-height: 3vh;
157177
margin-top: 30px;
158178
}
159179

160180
footer a:visited {
161-
color: inherit;
181+
color: white;
162182

163183
}
164184

@@ -173,8 +193,8 @@ footer a:visited {
173193
right:10px;
174194
bottom:10px;
175195
cursor:pointer;
176-
width:50px;
177-
height:50px;
196+
width:40px;
197+
height:40px;
178198
background-color:#5520b6;
179199
border-radius:50%;
180200
}

0 commit comments

Comments
 (0)