Skip to content

Commit 98462d9

Browse files
elangosundarelangosundar
authored
Merge pull request 10secondsofcode#34 from pradeepravi-cse/master
Feat: Theme Switcher [Dark & Light Mode]
2 parents a05c0d1 + fee19db commit 98462d9

3 files changed

Lines changed: 173 additions & 96 deletions

File tree

‎src/Components/Navigation.js‎

Lines changed: 75 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,80 @@
1-
import React from 'react';
1+
import React from "react";
22

3-
const Navigation = () => (
4-
<div className="main thememain-header">
5-
<div className="container">
6-
<nav className="navbar navbar-expand-lg navbar-light bg-light thememain-header">
7-
<a className="navbar-brand" href="#" title="10secondsofcode">10secondsofcode</a>
8-
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
9-
<span className="navbar-toggler-icon" />
10-
</button>
3+
const Navigation = () => {
4+
const [currentmode, changeState] = React.useState("Light Mode");
5+
const DocBody = document.getElementById("Apptheme");
6+
const changemode = () => {
7+
currentmode === "Light Mode"
8+
? ((DocBody.className = "thememain-dark"), changeState("Dark Mode"))
9+
: ((DocBody.className = "thememain-white "), changeState("Light Mode"));
10+
};
11+
return (
12+
<div className="main thememain-header d-flex align-items-center">
13+
<div className="container">
14+
<nav className="navbar navbar-expand-lg navbar-light bg-light thememain-header">
15+
<a className="navbar-brand" href="#" title="10secondsofcode">
16+
10secondsofcode
17+
</a>
18+
<button
19+
className="navbar-toggler"
20+
type="button"
21+
data-toggle="collapse"
22+
data-target="#navbarTogglerDemo02"
23+
aria-controls="navbarTogglerDemo02"
24+
aria-expanded="false"
25+
aria-label="Toggle navigation"
26+
>
27+
<span className="navbar-toggler-icon" />
28+
</button>
1129

12-
<div className="collapse navbar-collapse" id="navbarTogglerDemo02">
13-
<ul className="navbar-nav mr-auto mt-2 mt-lg-0">
14-
<li className="nav-item active">
15-
<a className="nav-link" href="#" title="10secondsofcode">
16-
Home
17-
<span className="sr-only">(current)</span>
18-
</a>
19-
</li>
20-
<li className="nav-item">
21-
<a className="nav-link" href="#" title="ReactJs Tutorial">ReactJs</a>
22-
</li>
23-
<li className="nav-item">
24-
<a className="nav-link disabled" href="#" title="Javascript Tutorial">Javascript</a>
25-
</li>
26-
</ul>
27-
<form className="form-inline my-2 my-lg-0">
28-
<input className="form-control mr-sm-2" type="search" placeholder="Search" />
29-
<button className="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
30-
</form>
31-
</div>
32-
</nav>
30+
<div className="collapse navbar-collapse" id="navbarTogglerDemo02">
31+
<ul className="navbar-nav mr-auto mt-2 mt-lg-0">
32+
<li className="nav-item active">
33+
<a className="nav-link" href="#" title="10secondsofcode">
34+
Home
35+
<span className="sr-only">(current)</span>
36+
</a>
37+
</li>
38+
<li className="nav-item">
39+
<a className="nav-link" href="#" title="ReactJs Tutorial">
40+
ReactJs
41+
</a>
42+
</li>
43+
<li className="nav-item">
44+
<a
45+
className="nav-link disabled"
46+
href="#"
47+
title="Javascript Tutorial"
48+
>
49+
Javascript
50+
</a>
51+
</li>
52+
</ul>
53+
<form className="form-inline my-2 my-lg-0">
54+
<input
55+
className="form-control mr-sm-2"
56+
type="search"
57+
placeholder="Search"
58+
/>
59+
<button
60+
className="btn btn-outline-success my-2 my-sm-0"
61+
type="submit"
62+
>
63+
Search
64+
</button>
65+
</form>
66+
</div>
67+
</nav>
68+
</div>
69+
<button
70+
className="btn btn-outline-success btn-sm d-block h-75 mr-3"
71+
type="button"
72+
onClick={() => changemode()}
73+
>
74+
Switch to {currentmode}
75+
</button>
3376
</div>
34-
</div>
35-
);
77+
);
78+
};
3679

3780
export default Navigation;

‎src/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
<link rel="manifest" href="./public/manifest.json">
1515
<link rel="shortcut icon" href="./public/favicon.ico">
1616
</head>
17-
<body>
17+
<body id="Apptheme" class="thememain-white">
1818
<div id="app">
1919
</div>
2020
<script>
@@ -33,4 +33,4 @@
3333
}
3434
</script>
3535
</body>
36-
</html>
36+
</html>

‎src/style.css‎

Lines changed: 96 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,94 +1,128 @@
1-
.thememain-white{
2-
background: white;
1+
.thememain-dark {
2+
background: #333;
33
}
44

5-
.thememain-header{
6-
background: linear-gradient(165deg,#6e60cc,#484389);
7-
color:white;
5+
.thememain-dark .thememain-header {
6+
background: linear-gradient(165deg, #6e60cc, #484389);
7+
color: #333;
88
}
99

10-
.thememain-header a{
11-
color:white !important;
10+
.thememain-dark .thememain-header a {
11+
color: #333 !important;
12+
}
13+
.thememain-dark input {
14+
background: #333;
15+
border: #333;
16+
}
17+
.thememain-dark input:active,
18+
.thememain-dark input:focus {
19+
background: #333;
20+
border: #333;
21+
}
22+
.thememain-dark h3 {
23+
color: #fff;
24+
}
25+
.thememain-dark .thememain-blue {
26+
background: linear-gradient(165deg, #6e60cc, #484389);
27+
width: 100%;
28+
min-height: 30rem;
29+
width: 100%;
30+
margin: 0 auto;
31+
padding-top: 50px;
32+
box-sizing: border-box;
33+
color: #333;
34+
}
35+
36+
.thememain-white {
37+
background: #fff;
1238
}
1339

14-
.thememain-blue{
15-
background: linear-gradient(165deg,#6e60cc,#484389);
16-
width: 100%;
17-
min-height: 30rem;
18-
width: 100%;
19-
margin: 0 auto;
20-
padding-top: 50px;
21-
box-sizing: border-box;
22-
color:white;
40+
.thememain-white .thememain-header {
41+
background: linear-gradient(165deg, #6e60cc, #484389);
42+
color: #fff;
2343
}
2444

25-
.theme-text{
26-
text-align: center;
27-
/*padding-top: 10px;*/
28-
font-size: 16px;
29-
line-height: 1.5;
45+
.thememain-white .thememain-header a {
46+
color: #fff !important;
3047
}
3148

32-
.theme-search{
33-
display: block !important;
34-
margin-top: 10px;
35-
text-align:center;
49+
.thememain-white .thememain-blue {
50+
background: linear-gradient(165deg, #6e60cc, #484389);
51+
width: 100%;
52+
min-height: 30rem;
53+
width: 100%;
54+
margin: 0 auto;
55+
padding-top: 50px;
56+
box-sizing: border-box;
57+
color: #fff;
58+
}
59+
.theme-text {
60+
text-align: center;
61+
/*padding-top: 10px;*/
62+
font-size: 16px;
63+
line-height: 1.5;
3664
}
3765

38-
.theme-search-input{
39-
width: 60% !important;
40-
margin-top: 10px;
66+
.theme-search {
67+
display: block !important;
68+
margin-top: 10px;
69+
text-align: center;
4170
}
4271

43-
.theme-search-btn{
44-
width: 14% !important;
45-
margin-top: 10px !important;
72+
.theme-search-input {
73+
width: 60% !important;
74+
margin-top: 10px;
4675
}
4776

48-
.content-main{
49-
width:980px;
77+
.theme-search-btn {
78+
width: 14% !important;
79+
margin-top: 10px !important;
5080
}
5181

52-
.content-main h3{
53-
font-size: 20px;
54-
margin-top: 15px;
55-
padding-bottom: 15px;
56-
margin-left: 41px;
57-
border-bottom: 1px solid #ebebeb;
82+
.content-main {
83+
width: 980px;
5884
}
5985

60-
.content-main ul{
61-
list-style : none;
86+
.content-main h3 {
87+
font-size: 20px;
88+
margin-top: 15px;
89+
padding-bottom: 15px;
90+
margin-left: 41px;
91+
border-bottom: 1px solid #ebebeb;
6292
}
6393

64-
.content-main li{
65-
padding-bottom: 5px;
66-
padding-left: 15px;
67-
width:33%;
68-
display: inline-flex !important;
94+
.content-main ul {
95+
list-style: none;
6996
}
7097

71-
.theme-text a{
72-
color: #00A64D;
73-
margin-left:10px;
98+
.content-main li {
99+
padding-bottom: 5px;
100+
padding-left: 15px;
101+
width: 33%;
102+
display: inline-flex !important;
74103
}
75104

76-
.banner-text{
77-
margin-top:20px;
78-
font-size: 14px;
105+
.theme-text a {
106+
color: #00a64d;
107+
margin-left: 10px;
79108
}
80109

81-
.banner-text h2{
82-
font-size: 25px !important;
83-
line-height: 1.5;
110+
.banner-text {
111+
margin-top: 20px;
112+
font-size: 14px;
84113
}
85114

86-
.banner-text p{
87-
font-size: 17px !important;
88-
line-height: 1.5;
89-
word-wrap: break-word;
115+
.banner-text h2 {
116+
font-size: 25px !important;
117+
line-height: 1.5;
90118
}
91119

92-
.search-content{
93-
margin-top:15px;
94-
}
120+
.banner-text p {
121+
font-size: 17px !important;
122+
line-height: 1.5;
123+
word-wrap: break-word;
124+
}
125+
126+
.search-content {
127+
margin-top: 15px;
128+
}

0 commit comments

Comments
 (0)