Skip to content

Commit

Permalink
Merge pull request #1554 from Yashasewi/feature-Dark-mode
Browse files Browse the repository at this point in the history
Added Dark Mode Feature to thecodingtrain Website
  • Loading branch information
shiffman committed May 10, 2024
2 parents ef4bf23 + f97cc5d commit 75bd74b
Show file tree
Hide file tree
Showing 62 changed files with 324 additions and 226 deletions.
6 changes: 3 additions & 3 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion src/components/ButtonPanel.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
overflow: hidden;
margin: 0 var(--spacing-normal) 0 0;
text-transform: uppercase;
color: var(--gray-dark);
color: var(--text-color);
}
}

Expand Down
10 changes: 5 additions & 5 deletions src/components/ChallengesPanel.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
flex-wrap: wrap;
border-left: var(--border-cyan);
border-bottom: var(--border-cyan);
color: var(--gray-dark);
color: var(--text-color);
text-transform: uppercase;
background-color: var(--cyan-light);

Expand Down Expand Up @@ -60,7 +60,7 @@
justify-content: space-between;
align-items: center;
margin: 0;
color: var(--gray-dark);
color: var(--text-color);
}
}

Expand Down Expand Up @@ -92,7 +92,7 @@
padding: 0 calc(var(--box-padding) / 2);
border-bottom: var(--border);
border-color: var(--cyan);
color: var(--gray-dark);
color: var(--text-color);
font-weight: normal;
font-size: var(--maru-normal);
text-overflow: ellipsis;
Expand All @@ -112,7 +112,7 @@
height: var(--baseline-4x);
border-bottom: var(--border-cyan);
border-left: var(--border-cyan);
background-color: white;
background-color: var(--background-color);
overflow-x: hidden;
overflow-y: auto;

Expand All @@ -122,7 +122,7 @@
}

.date {
color: var(--gray-dark);
color: var(--text-color);
background-color: var(--cyan-light);
border-bottom: var(--border-cyan);
border-left: var(--border-cyan);
Expand Down
15 changes: 10 additions & 5 deletions src/components/CodeExampleList.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@
flex-shrink: 0;
overflow: hidden;
text-overflow: ellipsis;
color: var(--text-color);
}

.description {
Expand All @@ -52,6 +53,7 @@
overflow: hidden;
text-overflow: ellipsis;
padding-right: var(--space);
color: var(--text-color);
}

.icon {
Expand All @@ -73,34 +75,37 @@
text-decoration: underline;
text-transform: lowercase;
white-space: nowrap;
color: var(--gray-dark);
color: var(--text-color);
}
& .linkIcon {
font-family: var(--maru-emoji);
font-size: var(--maru-emoji-normal);
text-decoration: none;
color: var(--gray-dark);
color: var(--text-color);
}
}

.p5 {
height: var(--baseline-1of2);
width: var(--baseline-1of2);
& path {
fill: var(--gray-dark);
fill: var(--text-color);
}
}

.node {
height: var(--baseline-1of2);
width: var(--baseline-1of2);
& path {
fill: var(--text-color);
}
}

.processing {
height: var(--baseline-1of3);
width: var(--baseline-1of3);
& path {
stroke: var(--gray-dark);
stroke: var(--text-color);
}
}

Expand All @@ -123,7 +128,7 @@
@media (--reduced) {
.red .example,
.cyan .example {
background-color: white;
background-color: var(--background-color);
}

.description {
Expand Down
4 changes: 2 additions & 2 deletions src/components/CreditList.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
align-items: center;
padding-left: var(--box-padding);
border-left: var(--border);
color: var(--gray-dark);
color: var(--text-color);

&:first-child {
margin-top: -2px;
Expand Down Expand Up @@ -57,7 +57,7 @@
@media (--reduced) {
.red .credit,
.cyan .credit {
background-color: white;
background-color: var(--background-color);
}
}

Expand Down
31 changes: 17 additions & 14 deletions src/components/Footer.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,16 @@ import cn from 'classnames';
import * as css from './Footer.module.css';

import Logo from '../images/logo.svg';
import Github from '../images/github.svg';
import Twitch from '../images/twitch.svg';
import Nebula from '../images/nebula.svg';
import Twitter from '../images/twitter.svg';
import Discord from '../images/discord.svg';
import Youtube from '../images/youtube.svg';
import Instagram from '../images/instagram.svg';

import {
FaGithub,
FaTwitch,
FaTwitter,
FaDiscord,
FaYoutube,
FaInstagram
} from 'react-icons/fa6';
import { IoStarSharp } from 'react-icons/io5';

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

Expand Down Expand Up @@ -83,28 +86,28 @@ const Footer = () => {
<a
href="https://www.youtube.com/c/TheCodingTrain/"
aria-label="Youtube">
<Youtube width={30} />
<FaYoutube size={30} />
<span>Youtube</span>
</a>
</li>
<li>
<a
href="https://www.twitch.tv/codingtrainchoochoo"
aria-label="Twitch">
<Twitch width={30} />
<FaTwitch size={30} />
<span>Twitch</span>
</a>
</li>

<li>
<a href="https://nebula.tv/codingtrain" aria-label="Nebula">
<Nebula width={30} />
<IoStarSharp size={30} style={{ transform: 'scaleY(-1)' }} />
<span>Nebula</span>
</a>
</li>
<li>
<a href="https://twitter.com/thecodingtrain" aria-label="Twitter">
<Twitter width={30} />
<FaTwitter size={30} />
<span>Twitter</span>
</a>
</li>
Expand All @@ -113,19 +116,19 @@ const Footer = () => {
<a
href="https://www.instagram.com/the.coding.train/"
aria-label="Instagram">
<Instagram width={30} />
<FaInstagram size={30} />
<span>Instagram</span>
</a>
</li>
<li>
<a href="https://thecodingtrain.com/discord" aria-label="Discord">
<Discord width={30} />
<FaDiscord size={30} />
<span>Discord</span>
</a>
</li>
<li>
<a href="https://github.com/CodingTrain" aria-label="GitHub">
<Github width={30} />
<FaGithub size={30} />
<span>GitHub</span>
</a>
</li>
Expand Down
4 changes: 2 additions & 2 deletions src/components/Footer.module.css
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
.root {
color: var(--gray-dark);
background-color: var(--gray-light);
color: var(--text-color);
flex-wrap: wrap;

& a {
padding-left: 0;
text-decoration: none;
color: var(--gray-dark);
color: var(--text-color);
}
}

Expand Down
21 changes: 7 additions & 14 deletions src/components/GuideCard.js
Original file line number Diff line number Diff line change
@@ -1,26 +1,19 @@
import React, { memo } from 'react';
import { Link } from 'gatsby';
import cn from 'classnames';

import ButtonPanel from './ButtonPanel';
import Image from './Image';

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

const GuideCard = ({
title,
slug,
meta,
icon = '📒',
description,
image,
variant
}) => {
const GuideCard = ({ title, slug, meta, icon = '📒', description, image }) => {
// TODO refactor this to use a single ButtonPanel instance?

return (
<article className={cn(css.root, css[variant])}>
<article className={css.root}>
<div className={css.top}>
<div className={css.icon}>{icon}</div>
<h2>
<h2 className={css.title}>
<Link to={slug}>{title}</Link>
</h2>
</div>
Expand All @@ -32,7 +25,7 @@ const GuideCard = ({
text={meta}
buttonLink={slug}
buttonText="Read"
variant={variant}
variant="purple"
rainbow
/>
</div>
Expand All @@ -45,7 +38,7 @@ const GuideCard = ({
text={meta}
buttonLink={slug}
buttonText="Read"
variant={variant}
variant="purple"
rainbow
/>
</div>
Expand Down
41 changes: 10 additions & 31 deletions src/components/GuideCard.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -5,43 +5,17 @@
display: flex;
flex-direction: column;

--color: var(--gray-dark);
--color: var(--purple);
--border: var(--border-purple);

@media (--medium) {
width: 100%;
flex-basis: 100%;
}
}

/* variants */
.root.purple {
--color: var(--purple);
--border: var(--border-purple);
--background-color: var(--purple-light);
}

.root.red {
--color: var(--red);
--border: var(--border-red);
--background-color: var(--red-light);
}

.root.orange {
--color: var(--orange);
--border: var(--border-orange);
--background-color: var(--orange-light);
}

.root.cyan {
--color: var(--cyan);
--border: var(--border-cyan);
--background-color: var(--cyan-light);
}

.icon {
border-right: var(--border);
border-bottom: var(--border);
border-left: var(--border);
.title {
color: var(--text-color);
}

.top {
Expand All @@ -60,6 +34,10 @@
display: flex;
justify-content: center;
align-items: center;

border-right: var(--border);
border-bottom: var(--border);
border-left: var(--border);
}

.top h2 {
Expand Down Expand Up @@ -96,7 +74,8 @@
text-overflow: ellipsis;
border-bottom: var(--border);
border-left: var(--border);
background-color: white;
background-color: var(--background-color);
color: var(--text-color);
}

.left .meta {
Expand Down
9 changes: 9 additions & 0 deletions src/components/Head.js
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,15 @@ const Head = ({ title, description, image }) => {
content={description ?? defaultDescription}
/>
<meta property="twitter:image" content={`${siteUrl}${metaImage}`} />

{/* Theme toggle bootstrap */}
<script>{`
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
`}</script>
</Helmet>
);
};
Expand Down
1 change: 1 addition & 0 deletions src/components/HomepageScene.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@
margin: 0;
max-width: 600px;
padding: 0 var(--box-padding);
color: var(--text-color);
}

.train {
Expand Down
Loading

0 comments on commit 75bd74b

Please sign in to comment.