Skip to content

Commit 75bd74b

Browse files
shiffmanshiffman
authored
Merge pull request #1554 from Yashasewi/feature-Dark-mode
Added Dark Mode Feature to thecodingtrain Website
2 parents ef4bf23 + f97cc5d commit 75bd74b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

62 files changed

+324
-226
lines changed

‎package-lock.json‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/ButtonPanel.module.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
overflow: hidden;
1616
margin: 0 var(--spacing-normal) 0 0;
1717
text-transform: uppercase;
18-
color: var(--gray-dark);
18+
color: var(--text-color);
1919
}
2020
}
2121

‎src/components/ChallengesPanel.module.css‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
flex-wrap: wrap;
1010
border-left: var(--border-cyan);
1111
border-bottom: var(--border-cyan);
12-
color: var(--gray-dark);
12+
color: var(--text-color);
1313
text-transform: uppercase;
1414
background-color: var(--cyan-light);
1515

@@ -60,7 +60,7 @@
6060
justify-content: space-between;
6161
align-items: center;
6262
margin: 0;
63-
color: var(--gray-dark);
63+
color: var(--text-color);
6464
}
6565
}
6666

@@ -92,7 +92,7 @@
9292
padding: 0 calc(var(--box-padding) / 2);
9393
border-bottom: var(--border);
9494
border-color: var(--cyan);
95-
color: var(--gray-dark);
95+
color: var(--text-color);
9696
font-weight: normal;
9797
font-size: var(--maru-normal);
9898
text-overflow: ellipsis;
@@ -112,7 +112,7 @@
112112
height: var(--baseline-4x);
113113
border-bottom: var(--border-cyan);
114114
border-left: var(--border-cyan);
115-
background-color: white;
115+
background-color: var(--background-color);
116116
overflow-x: hidden;
117117
overflow-y: auto;
118118

@@ -122,7 +122,7 @@
122122
}
123123

124124
.date {
125-
color: var(--gray-dark);
125+
color: var(--text-color);
126126
background-color: var(--cyan-light);
127127
border-bottom: var(--border-cyan);
128128
border-left: var(--border-cyan);

‎src/components/CodeExampleList.module.css‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@
4444
flex-shrink: 0;
4545
overflow: hidden;
4646
text-overflow: ellipsis;
47+
color: var(--text-color);
4748
}
4849

4950
.description {
@@ -52,6 +53,7 @@
5253
overflow: hidden;
5354
text-overflow: ellipsis;
5455
padding-right: var(--space);
56+
color: var(--text-color);
5557
}
5658

5759
.icon {
@@ -73,34 +75,37 @@
7375
text-decoration: underline;
7476
text-transform: lowercase;
7577
white-space: nowrap;
76-
color: var(--gray-dark);
78+
color: var(--text-color);
7779
}
7880
& .linkIcon {
7981
font-family: var(--maru-emoji);
8082
font-size: var(--maru-emoji-normal);
8183
text-decoration: none;
82-
color: var(--gray-dark);
84+
color: var(--text-color);
8385
}
8486
}
8587

8688
.p5 {
8789
height: var(--baseline-1of2);
8890
width: var(--baseline-1of2);
8991
& path {
90-
fill: var(--gray-dark);
92+
fill: var(--text-color);
9193
}
9294
}
9395

9496
.node {
9597
height: var(--baseline-1of2);
9698
width: var(--baseline-1of2);
99+
& path {
100+
fill: var(--text-color);
101+
}
97102
}
98103

99104
.processing {
100105
height: var(--baseline-1of3);
101106
width: var(--baseline-1of3);
102107
& path {
103-
stroke: var(--gray-dark);
108+
stroke: var(--text-color);
104109
}
105110
}
106111

@@ -123,7 +128,7 @@
123128
@media (--reduced) {
124129
.red .example,
125130
.cyan .example {
126-
background-color: white;
131+
background-color: var(--background-color);
127132
}
128133

129134
.description {

‎src/components/CreditList.module.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
align-items: center;
99
padding-left: var(--box-padding);
1010
border-left: var(--border);
11-
color: var(--gray-dark);
11+
color: var(--text-color);
1212

1313
&:first-child {
1414
margin-top: -2px;
@@ -57,7 +57,7 @@
5757
@media (--reduced) {
5858
.red .credit,
5959
.cyan .credit {
60-
background-color: white;
60+
background-color: var(--background-color);
6161
}
6262
}
6363

‎src/components/Footer.js‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,16 @@ import cn from 'classnames';
66
import * as css from './Footer.module.css';
77

88
import Logo from '../images/logo.svg';
9-
import Github from '../images/github.svg';
10-
import Twitch from '../images/twitch.svg';
11-
import Nebula from '../images/nebula.svg';
12-
import Twitter from '../images/twitter.svg';
13-
import Discord from '../images/discord.svg';
14-
import Youtube from '../images/youtube.svg';
15-
import Instagram from '../images/instagram.svg';
9+
10+
import {
11+
FaGithub,
12+
FaTwitch,
13+
FaTwitter,
14+
FaDiscord,
15+
FaYoutube,
16+
FaInstagram
17+
} from 'react-icons/fa6';
18+
import { IoStarSharp } from 'react-icons/io5';
1619

1720
import { cols } from '../styles/styles.module.css';
1821

@@ -83,28 +86,28 @@ const Footer = () => {
8386
<a
8487
href="https://www.youtube.com/c/TheCodingTrain/"
8588
aria-label="Youtube">
86-
<Youtube width={30} />
89+
<FaYoutube size={30} />
8790
<span>Youtube</span>
8891
</a>
8992
</li>
9093
<li>
9194
<a
9295
href="https://www.twitch.tv/codingtrainchoochoo"
9396
aria-label="Twitch">
94-
<Twitch width={30} />
97+
<FaTwitch size={30} />
9598
<span>Twitch</span>
9699
</a>
97100
</li>
98101

99102
<li>
100103
<a href="https://nebula.tv/codingtrain" aria-label="Nebula">
101-
<Nebula width={30} />
104+
<IoStarSharp size={30} style={{ transform: 'scaleY(-1)' }} />
102105
<span>Nebula</span>
103106
</a>
104107
</li>
105108
<li>
106109
<a href="https://twitter.com/thecodingtrain" aria-label="Twitter">
107-
<Twitter width={30} />
110+
<FaTwitter size={30} />
108111
<span>Twitter</span>
109112
</a>
110113
</li>
@@ -113,19 +116,19 @@ const Footer = () => {
113116
<a
114117
href="https://www.instagram.com/the.coding.train/"
115118
aria-label="Instagram">
116-
<Instagram width={30} />
119+
<FaInstagram size={30} />
117120
<span>Instagram</span>
118121
</a>
119122
</li>
120123
<li>
121124
<a href="https://thecodingtrain.com/discord" aria-label="Discord">
122-
<Discord width={30} />
125+
<FaDiscord size={30} />
123126
<span>Discord</span>
124127
</a>
125128
</li>
126129
<li>
127130
<a href="https://github.com/CodingTrain" aria-label="GitHub">
128-
<Github width={30} />
131+
<FaGithub size={30} />
129132
<span>GitHub</span>
130133
</a>
131134
</li>

‎src/components/Footer.module.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
.root {
2-
color: var(--gray-dark);
32
background-color: var(--gray-light);
3+
color: var(--text-color);
44
flex-wrap: wrap;
55

66
& a {
77
padding-left: 0;
88
text-decoration: none;
9-
color: var(--gray-dark);
9+
color: var(--text-color);
1010
}
1111
}
1212

‎src/components/GuideCard.js‎

Lines changed: 7 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,19 @@
11
import React, { memo } from 'react';
22
import { Link } from 'gatsby';
3-
import cn from 'classnames';
43

54
import ButtonPanel from './ButtonPanel';
65
import Image from './Image';
76

87
import * as css from './GuideCard.module.css';
98

10-
const GuideCard = ({
11-
title,
12-
slug,
13-
meta,
14-
icon = '📒',
15-
description,
16-
image,
17-
variant
18-
}) => {
9+
const GuideCard = ({ title, slug, meta, icon = '📒', description, image }) => {
10+
// TODO refactor this to use a single ButtonPanel instance?
11+
1912
return (
20-
<article className={cn(css.root, css[variant])}>
13+
<article className={css.root}>
2114
<div className={css.top}>
2215
<div className={css.icon}>{icon}</div>
23-
<h2>
16+
<h2 className={css.title}>
2417
<Link to={slug}>{title}</Link>
2518
</h2>
2619
</div>
@@ -32,7 +25,7 @@ const GuideCard = ({
3225
text={meta}
3326
buttonLink={slug}
3427
buttonText="Read"
35-
variant={variant}
28+
variant="purple"
3629
rainbow
3730
/>
3831
</div>
@@ -45,7 +38,7 @@ const GuideCard = ({
4538
text={meta}
4639
buttonLink={slug}
4740
buttonText="Read"
48-
variant={variant}
41+
variant="purple"
4942
rainbow
5043
/>
5144
</div>

‎src/components/GuideCard.module.css‎

Lines changed: 10 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -5,43 +5,17 @@
55
display: flex;
66
flex-direction: column;
77

8-
--color: var(--gray-dark);
8+
--color: var(--purple);
9+
--border: var(--border-purple);
910

1011
@media (--medium) {
1112
width: 100%;
1213
flex-basis: 100%;
1314
}
1415
}
1516

16-
/* variants */
17-
.root.purple {
18-
--color: var(--purple);
19-
--border: var(--border-purple);
20-
--background-color: var(--purple-light);
21-
}
22-
23-
.root.red {
24-
--color: var(--red);
25-
--border: var(--border-red);
26-
--background-color: var(--red-light);
27-
}
28-
29-
.root.orange {
30-
--color: var(--orange);
31-
--border: var(--border-orange);
32-
--background-color: var(--orange-light);
33-
}
34-
35-
.root.cyan {
36-
--color: var(--cyan);
37-
--border: var(--border-cyan);
38-
--background-color: var(--cyan-light);
39-
}
40-
41-
.icon {
42-
border-right: var(--border);
43-
border-bottom: var(--border);
44-
border-left: var(--border);
17+
.title {
18+
color: var(--text-color);
4519
}
4620

4721
.top {
@@ -60,6 +34,10 @@
6034
display: flex;
6135
justify-content: center;
6236
align-items: center;
37+
38+
border-right: var(--border);
39+
border-bottom: var(--border);
40+
border-left: var(--border);
6341
}
6442

6543
.top h2 {
@@ -96,7 +74,8 @@
9674
text-overflow: ellipsis;
9775
border-bottom: var(--border);
9876
border-left: var(--border);
99-
background-color: white;
77+
background-color: var(--background-color);
78+
color: var(--text-color);
10079
}
10180

10281
.left .meta {

‎src/components/Head.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,15 @@ const Head = ({ title, description, image }) => {
9393
content={description ?? defaultDescription}
9494
/>
9595
<meta property="twitter:image" content={`${siteUrl}${metaImage}`} />
96+
97+
{/* Theme toggle bootstrap */}
98+
<script>{`
99+
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
100+
document.documentElement.classList.add('dark');
101+
} else {
102+
document.documentElement.classList.remove('dark');
103+
}
104+
`}</script>
96105
</Helmet>
97106
);
98107
};

0 commit comments

Comments
 (0)