Skip to content

Commit f187b1d

Browse files
khendriksekhendrikse
committed
add dark mode
1 parent 9192682 commit f187b1d

14 files changed

+208
-67
lines changed

‎.babelrc

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"presets": ["next/babel"],
3+
"plugins": ["inline-react-svg"]
4+
}

‎components/Footer/footer.module.scss

+9-2
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,11 @@
1010
display: flex;
1111
flex-direction: column;
1212

13+
@media (prefers-color-scheme: dark) {
14+
background: $pastel-dark-purple;
15+
background: $purple-grey;
16+
}
17+
1318
&__links {
1419
display: flex;
1520
justify-content: center;
@@ -23,8 +28,10 @@
2328
margin-bottom: 16px;
2429
margin-right: 16px;
2530

26-
img {
27-
width: 24px;
31+
svg {
32+
@media (prefers-color-scheme: dark) {
33+
fill: white;
34+
}
2835
}
2936
}
3037
}

‎components/Footer/index.js

+8-24
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,30 @@
11
import styles from './footer.module.scss';
2+
import DevTo from '../../public/assets/images/devto.svg';
3+
import GitHub from '../../public/assets/images/github.svg';
4+
import LinkedIn from '../../public/assets/images/linkedin.svg';
5+
import Rss from '../../public/assets/images/rss.svg';
26

37
export default function Footer() {
48
return (
59
<div className={styles.footer}>
610
<div className={styles.footer__links}>
711
<a className={styles.footer__link} href='https://dev.to/khenhey'>
8-
<img
9-
width='24px'
10-
height='24px'
11-
src='/assets/images/devto.svg?'
12-
alt='DEV.to'
13-
/>
12+
<DevTo width='24px' height='24px' alt='DEV.to' />
1413
</a>
1514
<a className={styles.footer__link} href='https://github.com/khendrikse'>
16-
<img
17-
width='24px'
18-
height='24px'
19-
src='/assets/images/github.svg?'
20-
alt='GitHub'
21-
/>
15+
<GitHub width='24px' height='24px' alt='GitHub' />
2216
</a>
2317
<a
2418
className={styles.footer__link}
2519
href='https://www.linkedin.com/in/karinhendrikse/'
2620
>
27-
<img
28-
width='24px'
29-
height='24px'
30-
src='/assets/images/linkedin.svg'
31-
alt='LinkedIn'
32-
/>
21+
<LinkedIn width='24px' height='24px' alt='LinkedIn' />
3322
</a>
3423
<a
3524
className={styles.footer__link}
3625
href='https://khendrikse.github.io/feeds/feed.xml'
3726
>
38-
<img
39-
width='24px'
40-
height='24px'
41-
src='/assets/images/rss.svg'
42-
alt='RSS'
43-
/>
27+
<Rss width='24px' height='24px' alt='RSS' />
4428
</a>
4529
© {new Date().getFullYear()} Karin Hendrikse
4630
</div>

‎components/Navbar/navbar.module.scss

+8
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,16 @@
4848
border-bottom: 2px solid $pastel-purple;
4949
text-decoration: none;
5050

51+
@media (prefers-color-scheme: dark) {
52+
border-color: $pastel-dark-purple;
53+
}
54+
5155
&:hover {
5256
color: $pastel-purple;
57+
58+
@media (prefers-color-scheme: dark) {
59+
color: $pastel-dark-purple;
60+
}
5361
}
5462

5563
&--current {

‎components/PostItem/post-item.module.scss

+9-1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,10 @@ $lg-padding: 24px;
99
list-style-type: none;
1010
position: relative;
1111

12+
@media (prefers-color-scheme: dark) {
13+
background-color: $dark-grey;
14+
}
15+
1216
@include break-sm {
1317
padding: $lg-padding;
1418
height: fit-content;
@@ -31,11 +35,15 @@ $lg-padding: 24px;
3135
padding: 8px;
3236
position: relative;
3337
z-index: 1;
34-
background-color: #daddfb;
38+
background-color: $pastel-purple;
3539
box-shadow: 5px 5px 0 0 black;
3640
flex-shrink: 0;
3741
margin-bottom: 16px;
3842

43+
@media (prefers-color-scheme: dark) {
44+
background-color: $pastel-dark-purple;
45+
}
46+
3947
@include break-sm {
4048
left: -56px;
4149
margin-bottom: 0;

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"@fontsource/karla": "^4.5.0",
1414
"@fontsource/rubik": "^4.5.0",
1515
"@mapbox/rehype-prism": "^0.8.0",
16+
"babel-plugin-inline-react-svg": "^2.0.1",
1617
"feed": "^4.2.2",
1718
"gray-matter": "^4.0.2",
1819
"imagemin-mozjpeg": "^10.0.0",

‎public/assets/images/github.svg

+6-29
Loading

‎public/assets/images/linkedin.svg

+3-1
Loading

‎styles/about.module.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030

3131
figcaption {
3232
font-size: 14px;
33-
color: $pastel-dark-pink;
33+
color: #888;
3434
text-align: center;
3535

3636
@include break-sm {

‎styles/main.scss

+23-1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,11 @@ body {
1313
background-color: white;
1414
font-family: 'Karla', sans-serif;
1515
font-size: 18px;
16+
17+
@media (prefers-color-scheme: dark) {
18+
background-color: #141414;
19+
color: white;
20+
}
1621
}
1722

1823
html,
@@ -29,11 +34,19 @@ body,
2934

3035
a {
3136
color: black;
37+
38+
@media (prefers-color-scheme: dark) {
39+
color: white;
40+
}
3241
}
3342

3443
hr {
3544
border: 0.5px solid $pastel-blue;
3645
margin-bottom: 48px;
46+
47+
@media (prefers-color-scheme: dark) {
48+
border-color: $pastel-dark-blue;
49+
}
3750
}
3851

3952
h1,
@@ -89,13 +102,22 @@ h6 {
89102
}
90103

91104
.content {
92-
border-top: 2px solid #dafbf8;
105+
border-top: 2px solid $pastel-green;
106+
107+
@media (prefers-color-scheme: dark) {
108+
border-color: $pastel-dark-purple;
109+
}
93110
}
94111

95112
blockquote {
96113
margin: 50px auto;
97114
padding: 8px 8px 8px 32px;
98115
border-left: 8px solid $pastel-purple;
116+
117+
@media (prefers-color-scheme: dark) {
118+
border-color: $pastel-dark-purple;
119+
}
120+
99121
line-height: 1.6;
100122
}
101123

‎styles/mixins.scss

+17-6
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,20 @@
1-
$pastel-pink: #FFd2E1;
2-
$pastel-green: #DAFBF8;
3-
$pastel-purple: #DADDFB;
4-
$pastel-yellow: #FFFCDD;
5-
$pastel-blue: #DAEDFB;
6-
$pastel-dark-pink: #C49CA9;
1+
$pastel-pink: #ffd2e1;
2+
$pastel-green: #dafbf8;
3+
$pastel-purple: #daddfb;
4+
$pastel-yellow: #fffcdd;
5+
$pastel-blue: #daedfb;
6+
7+
$purple-grey: linear-gradient(
8+
164deg,
9+
rgba(122, 65, 255, 1) 24%,
10+
rgba(4, 0, 255, 1) 100%
11+
);
12+
$dark-grey: #323232;
13+
$pastel-dark-pink: #f86dff;
14+
$pastel-dark-green: #00d27b;
15+
$pastel-dark-purple: #7a41ff;
16+
$pastel-dark-yellow: #fffcdd;
17+
$pastel-dark-blue: #4f76ff;
718

819
$sm-screen: 576px;
920
$md-screen: 768px;

‎styles/post.module.scss

+8
Original file line numberDiff line numberDiff line change
@@ -60,12 +60,20 @@
6060

6161
thead {
6262
background-color: $pastel-blue;
63+
64+
@media (prefers-color-scheme: dark) {
65+
background-color: $pastel-dark-blue;
66+
}
6367
}
6468

6569
table,
6670
tr,
6771
td + td {
6872
border: 1px solid $pastel-blue;
73+
74+
@media (prefers-color-scheme: dark) {
75+
border-color: $pastel-dark-blue;
76+
}
6977
}
7078

7179
td {

‎styles/projects.module.scss

+5-1
Original file line numberDiff line numberDiff line change
@@ -37,11 +37,15 @@
3737
a {
3838
padding: 8px;
3939
z-index: 1;
40-
background-color: #daddfb;
40+
background-color: $pastel-purple;
4141
width: fit-content;
4242
text-align: center;
4343
position: relative;
4444

45+
@media (prefers-color-scheme: dark) {
46+
background-color: $pastel-dark-purple;
47+
}
48+
4549
&:hover,
4650
&:focus-within {
4751
box-shadow: 5px 5px 0 0 black;

0 commit comments

Comments
 (0)