Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 1ba3c37

Browse files
Dark mode UI Update (#323)
* Last Solved On Column Added to Table * DarkMode Added * Dark Mode UI Update
1 parent 5c1fa89 commit 1ba3c37

File tree

9 files changed

+324
-573
lines changed

9 files changed

+324
-573
lines changed

‎src/components/Acknowledgements/styles.scss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,3 +13,13 @@
1313
padding: 0;
1414
}
1515
}
16+
17+
body.dark-mode .acknowledgements {
18+
background-color: #161a1d;
19+
color: #ffffff;
20+
21+
.card {
22+
background-color: #1d2125;
23+
color: #ffffff;
24+
}
25+
}

‎src/components/Dark-Mode/index.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React, { useState, useEffect } from 'react';
2+
import Toggle from 'react-toggle';
3+
4+
const DarkMode = () => {
5+
const [darkMode, setDarkMode] = useState(() => {
6+
const savedMode = localStorage.getItem('darkMode');
7+
return savedMode ? JSON.parse(savedMode) : false;
8+
});
9+
10+
const toggleDarkMode = () => {
11+
setDarkMode(prevMode => {
12+
const newMode = !prevMode;
13+
localStorage.setItem('darkMode', newMode);
14+
return newMode;
15+
});
16+
};
17+
useEffect(() => {
18+
document.body.className = darkMode ? 'dark-mode' : 'light-mode';
19+
}, [darkMode]);
20+
21+
return (
22+
<Toggle
23+
id="darkMode-toggle"
24+
checked={darkMode}
25+
onChange={toggleDarkMode}
26+
icons={{ checked: '🌙', unchecked: '☀️' }}
27+
/>
28+
);
29+
};
30+
31+
export default DarkMode;

‎src/components/Navigation/index.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,11 @@ import { FaGithub } from 'react-icons/fa';
1111
import { Event } from '../Shared/Tracking';
1212

1313
import './styles.scss';
14+
import DarkMode from '../Dark-Mode';
1415

1516
const Navigation = () => {
1617
return (
17-
<Navbar color="light"light>
18+
<Navbar className="navbar">
1819
<Container>
1920
<NavbarBrand
2021
onClick={() =>
@@ -34,6 +35,7 @@ const Navigation = () => {
3435
</NavLink>
3536
</NavItem>
3637
</Nav>
38+
<DarkMode />
3739
</Container>
3840
</Navbar>
3941
);

‎src/components/Navigation/styles.scss‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,25 @@
1+
body.light-mode .navbar {
2+
background-color: #f7f8f9;
3+
color: #000000;
4+
}
5+
body.light-mode .navbar a {
6+
color: #212529;
7+
}
8+
9+
body.dark-mode .navbar {
10+
background-color: #1d2125;
11+
color: #ffffff;
12+
}
13+
body.dark-mode .navbar a {
14+
color: #ffffff;
15+
}
16+
body.dark-mode .navbar-nav svg {
17+
color: #ffffff;
18+
}
19+
body.dark-mode .navbar-nav svg:hover {
20+
color: #ffc952;
21+
}
22+
123
.navbar-brand {
224
font-weight: 600;
325
letter-spacing: 1px;
@@ -29,5 +51,6 @@
2951

3052
svg {
3153
font-size: 2em;
54+
margin: 0px 10px;
3255
}
3356
}

‎src/components/Table/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -176,7 +176,7 @@ const Table = () => {
176176
labelPosition={0}
177177
labelStyle={{
178178
// Needed for Dark Reader to work
179-
fill: 'black',
179+
fill: '#A54800',
180180
}}
181181
startAngle={-90}
182182
lineWidth={12}

‎src/components/Table/styles.scss‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,54 @@
1+
body.light-mode .table {
2+
background-color: #ffffff;
3+
color: #000000;
4+
}
5+
body.light-mode .table thead > tr th {
6+
background-color: #ffffff;
7+
}
8+
body.light-mode .pattern-count {
9+
background-color: #ffffff;
10+
color: #000000;
11+
}
12+
body.light-mode .table tr:nth-child(odd) {
13+
background-color: #f1f2f4;
14+
}
15+
body.light-mode .table tr:nth-child(even) {
16+
background-color: #ffffff;
17+
}
18+
body.light-mode .table tbody tr:hover {
19+
background-color: #dcdfe4;
20+
color: #000000;
21+
}
22+
23+
body.dark-mode .table {
24+
background-color: #161a1d;
25+
color: #ffffff;
26+
}
27+
body.dark-mode .table thead > tr th {
28+
background-color: #161a1d;
29+
}
30+
body.dark-mode .pattern-count {
31+
background-color: #161a1d;
32+
color: #ffffff;
33+
}
34+
body.dark-mode .table tr:nth-child(odd) {
35+
background-color: #22272b;
36+
}
37+
body.dark-mode .table tr:nth-child(even) {
38+
background-color: #161a1d;
39+
}
40+
body.dark-mode .table tbody tr:hover {
41+
background-color: #101214;
42+
color: #ffffff;
43+
}
44+
body.dark-mode .modal-content {
45+
background-color: #1d2125;
46+
color: #ffffff;
47+
.close {
48+
color: #ffffff;
49+
}
50+
}
51+
152
.table {
253
.row {
354
justify-content: center;

‎src/components/Tips/styles.scss‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,17 @@
77
color: #333;
88
background: #f8f8f8;
99
}
10+
body.light-mode .tips {
11+
background-color: #f7f8f9;
12+
color: #333;
13+
}
14+
15+
body.dark-mode .tips {
16+
background-color: #1d2125;
17+
color: #ffffff;
18+
}
19+
body.dark-mode .tips pre,
20+
body.dark-mode .tips code {
21+
background-color: #1d2125;
22+
color: #ffffff;
23+
}

‎src/components/styles.scss‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,24 @@
11
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
22

33
.App {
4-
margin-left: calc(100vw - 100%);
54
margin-right: 0;
6-
75
font-family: 'Open Sans', sans-serif;
86
font-size: 14px;
97
-webkit-font-smoothing: antialiased !important;
108
}
9+
10+
body.light-mode {
11+
background-color: #ffffff;
12+
color: #000000;
13+
}
14+
body.light-mode a {
15+
color: #0c66e4;
16+
}
17+
18+
body.dark-mode {
19+
background-color: #161a1d;
20+
color: #ffffff;
21+
}
22+
body.dark-mode a {
23+
color: #579dff;
24+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /