Skip to content

Commit ada6455

Browse files
Binu42Binu42
committed
website in dark mode
1 parent 7652a34 commit ada6455

File tree

4 files changed

+188
-11
lines changed

4 files changed

+188
-11
lines changed

‎src/App.css‎

Lines changed: 154 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,13 @@
11
/* Navbar */
22
.is-active {
3+
background-color: #f1eeee !important;
34
color: #6c8eef !important;
45
}
56

67
.is-light {
78
background-color: #f8faff !important;
89
}
910

10-
.is-active {
11-
background-color: rgb(241, 238, 238) !important;
12-
}
13-
1411
.navbar-end > a.navbar-item:hover:not(.is-active) {
1512
color: #6c8eef !important;
1613
background-color: #f8faff !important;
@@ -168,6 +165,14 @@ ul ol {
168165
opacity: 0.8;
169166
}
170167

168+
pre {
169+
border-radius: 5px;
170+
}
171+
172+
code {
173+
margin: 5px;
174+
}
175+
171176
@media (max-width: 600px) {
172177
.features .feature-card {
173178
flex-direction: column;
@@ -185,3 +190,148 @@ ul ol {
185190
display: block;
186191
}
187192
}
193+
194+
/* Dark mode */
195+
.dark-mode {
196+
background-color: #24292e !important;
197+
color: #eae7d9;
198+
}
199+
200+
.dark-mode .navbar.is-white {
201+
background-color: #2f363d !important;
202+
}
203+
204+
.dark-mode .navbar.is-light {
205+
background-color: #24292e !important;
206+
}
207+
208+
.dark-mode .navbar .navbar-item:not(.is-active) {
209+
color: #f1eeee !important;
210+
}
211+
212+
.dark-mode .navbar-end > a.navbar-item:hover:not(.is-active) {
213+
background-color: #24292e3f !important;
214+
}
215+
216+
.dark-mode .navbar .navbar-burger {
217+
color: #fcfcfcb3 !important;
218+
}
219+
220+
.dark-mode .navbar-brand #brand,
221+
.dark-mode .navbar-brand #brand:hover {
222+
color: #00d1b2 !important;
223+
background-color: inherit !important;
224+
}
225+
226+
.dark-mode nav .is-active {
227+
color: #001ee2 !important;
228+
background-color: #2c313c !important;
229+
}
230+
231+
.dark-mode .footer {
232+
background-color: #24292e !important;
233+
}
234+
235+
.dark-mode .title {
236+
color: #eae7d9 !important;
237+
}
238+
239+
.dark-mode .title.has-text-success {
240+
color: #48c774 !important;
241+
}
242+
243+
.dark-mode .button {
244+
background-color: #333;
245+
color: #eae7d9 !important;
246+
}
247+
248+
.dark-mode #view-on-github {
249+
padding: 0 10px !important;
250+
}
251+
252+
.dark-mode .box-shadow-lift {
253+
box-shadow: #c0c0c031 inset 0 7px 25px 0 !important;
254+
}
255+
256+
.dark-mode .button-special:hover {
257+
box-shadow: #94949455 inset 0 30px 60px -12px !important;
258+
}
259+
260+
.dark-mode #markdown a {
261+
padding: 2px;
262+
background-color: #b7bcff0a;
263+
transition: all 0.3s ease-in-out;
264+
}
265+
266+
.dark-mode #markdown a:hover {
267+
color: #eae7d9;
268+
background-color: #b7bcff1a;
269+
}
270+
271+
.dark-mode .space {
272+
background: linear-gradient(90deg, #1b262c 19px, transparent 1%) center,
273+
linear-gradient(#1b262c 19px, transparent 1%) center, #3a72ff;
274+
background-size: 22px 22px;
275+
}
276+
277+
.dark-mode .features .feature-card {
278+
background-color: #2f363d;
279+
border: 1px solid #3b3b3bdc;
280+
border-left: 2px solid #eeeeee;
281+
box-shadow: -1px 3px 15px 0 #c3c3c31c;
282+
}
283+
284+
.dark-mode .features .feature-card .meta h3 {
285+
color: #001ee2;
286+
}
287+
288+
.dark-mode strong {
289+
color: #f1f1f1;
290+
}
291+
292+
.dark-mode pre {
293+
background-color: #2f363d;
294+
color: #f1f1f1;
295+
margin: 5px;
296+
}
297+
298+
.dark-mode code {
299+
background-color: #2f363d;
300+
}
301+
302+
.dark-mode .card {
303+
background-color: #2f363d;
304+
color: #e8e8e8;
305+
}
306+
307+
.dark-mode .card a:hover {
308+
color: #e8e8e8;
309+
}
310+
311+
.dark-mode .card:hover {
312+
border-bottom: 2px solid #e8e8e8;
313+
}
314+
315+
.dark-mode .card .card-header-title,
316+
.dark-mode .card .media-content .subtitle {
317+
color: #f1f1f1;
318+
}
319+
320+
.dark-mode table {
321+
background-color: #2f363d;
322+
border-radius: 5px;
323+
}
324+
325+
.dark-mode thead tr th,
326+
.dark-mode table {
327+
color: #dfe6e9 !important;
328+
}
329+
330+
.dark-mode .table.is-striped tbody tr:not(.is-selected):nth-child(even) {
331+
background-color: #3131318c;
332+
}
333+
334+
.dark-mode .table.is-striped tbody tr:not(.is-selected):nth-child(even):hover,
335+
.dark-mode table tbody tr:hover {
336+
background-color: #2c2c2cbe !important;
337+
}

‎src/App.js‎

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState } from 'react';
1+
import React, { useState, useEffect } from 'react';
22
import Navbar from './components/Navbar';
33
import './App.css';
44
import Home from './components/Home/Home';
@@ -10,13 +10,32 @@ import ScrollToTopBtn from './components/ScrollToTopBtn';
1010

1111
function App() {
1212
const [searchInput, setSearchInput] = useState('');
13+
const [darkMode, setDarkMode] = useState(null);
1314
const handleInputChange = (value) => {
14-
// console.log(value);
1515
setSearchInput(value);
1616
};
17+
18+
useEffect(() => {
19+
const isDarkMode = JSON.parse(localStorage.getItem('dark-mode'));
20+
21+
if (isDarkMode === true) {
22+
setDarkMode(true);
23+
} else {
24+
setDarkMode(false);
25+
}
26+
}, []);
27+
28+
useEffect(() => {
29+
localStorage.setItem('dark-mode', darkMode);
30+
if (darkMode) {
31+
document.querySelector('body').classList.add('dark-mode');
32+
} else {
33+
document.querySelector('body').classList.remove('dark-mode');
34+
}
35+
}, [darkMode]);
1736
return (
1837
<div className='App'>
19-
<Navbar />
38+
<Navbar darkMode={darkMode} setDarkMode={setDarkMode} />
2039
<ScrollToTopBtn />
2140
<div style={{ marginTop: '3rem' }}></div>
2241
<Switch>

‎src/components/Category/Resource.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ const Resource = (props) => {
9898
const table = document.querySelectorAll('#markdown table');
9999
for (i = 0; i < table.length; i++)
100100
table[i].className =
101-
'table is-hoverable is-bordered is-fullwidth is-striped';
101+
'table is-hoverable is-dark is-fullwidth is-striped';
102102

103103
const images = document.querySelectorAll('img');
104104
for (i = 0; i < images.length; i++) {
@@ -196,6 +196,7 @@ const Resource = (props) => {
196196
className='button button-special box-shadow-lift is-medium is-rounded'
197197
target='_blank'
198198
rel='noopener noreferrer'
199+
id='view-on-github'
199200
>
200201
<GitHub /> <span> &emsp;View on Github</span>
201202
</a>

‎src/components/Navbar.js‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React from 'react';
2-
import { Terminal } from 'react-feather';
2+
import { Terminal, Sun, Moon } from 'react-feather';
33
import { Link, withRouter } from 'react-router-dom';
44
import ReactTooltip from 'react-tooltip';
55

6-
const Navbar = () => {
6+
const Navbar = ({ darkMode, setDarkMode }) => {
77
const active = window.location.pathname;
88
document.addEventListener('DOMContentLoaded', () => {
99
const $navbarBurgers = Array.prototype.slice.call(
@@ -42,7 +42,7 @@ const Navbar = () => {
4242
>
4343
<ReactTooltip type='light' />
4444
<div className='navbar-brand'>
45-
<Link className='navbar-item has-text-primary' to='/'>
45+
<Link className='navbar-item' id='brand' to='/'>
4646
<Terminal color='blue' />
4747
&emsp;WEBDEVSCOM
4848
</Link>
@@ -99,6 +99,13 @@ const Navbar = () => {
9999
>
100100
Contributors
101101
</a>
102+
<div
103+
className='navbar-item'
104+
style={{ cursor: 'pointer' }}
105+
onClick={() => setDarkMode(!darkMode)}
106+
>
107+
{darkMode ? <Sun color='#00d1b2' /> : <Moon color='#00d1b2' />}
108+
</div>
102109
</div>
103110
</div>
104111
</nav>

0 commit comments

Comments
 (0)