Added Dark Mode Feature to thecodingtrain Website

[Yashasewi]

Dark Mode Implementation

This pull request introduces the implementation of the dark mode feature for the thecodingtrain.com website, as discussed in #1504.

Changes

• Implemented dark mode using CSS variables and theming classes
• Created a dedicated theme.js component to change CSS variables for light and dark modes
• Updated existing styles to reference the appropriate CSS variables for theming
• Addressed instances of hard-coded colors and updated them to use CSS variables

Implementation Details

CSS Variables and Theming

The theme.js file defines two sets of CSS variables: one for the light mode and another for the dark mode. These variables control various colors and styles throughout the website, including text, backgrounds, and UI elements.

/* Light Mode Variables */
const lightTheme = [
  '--text-color: #000000',
  '--gray-dark: #3c3c3c',
  '--gray-mid: #666666',
  ......
];

/* Dark Mode */
const darkTheme = [
  '--text-color: #f0f0f0',
  '--background-color: #1e1d20',
  '--gray-dark: #1f1f1f',
  '--gray-mid: #b3b3b3',
  ......
];

The theme.js component manages the application of the appropriate CSS variables based on the user's preference (light or dark mode). It also persists the user's preference in localStorage for consistency across sessions.

Existing Styles Updates

Existing CSS styles have been updated to reference the appropriate CSS variables, ensuring that colors and visual elements adapt seamlessly to the selected theme.

Potential Issues

• While updating the styles to use CSS variables, there might be some instances where colors were hard-coded or missed. These instances could potentially lead to inconsistencies or unintended visual effects in the dark mode. Further testing and review from the team would be beneficial to identify and address such cases.
• Additionally, the icons in the footer cannot be changed by simply adjusting the color, so we might need to use new icons or find an alternative solution to ensure they are visible and consistent with the dark mode.
• Regarding the gradient present on the home page's homescene, I couldn't find a suitable alternative that works well with the dark mode. I have left this part for the design team to decide on a new gradient or alternative design element that looks good in the dark mode.

Next Steps

• Address any feedback or suggestions from the review process
• Conduct accessibility audits to ensure compliance with WCAG guidelines
• Identify and address any remaining instances of hard-coded colors or inconsistencies
• Please review the changes and provide your feedback. I'm happy to address any concerns or make further adjustments as needed.

Resolves #1504

@shiffman @runemadsen @jasontheillustrator

[netlify]

✅ Deploy Preview for codingtrain ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	f97cc5d
🔍 Latest deploy log	https://app.netlify.com/sites/codingtrain/deploys/663d51bd5441030008efd7d9
😎 Deploy Preview	https://deploy-preview-1554--codingtrain.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[shiffman]

Thank you again @Yashasewi I am so excited to have this, it is amazing work! (And thank you for your patience, I know it can be frustrating to have contributions linger for a long time!).

I have reviewed the deploy preview and am happy with this! Does anyone have any remaining technical comments before I merge?

Also, I believe I found a bug, one some pages in dark model there are still "light" sections, for example:

https://deploy-preview-1554--codingtrain.netlify.app/tracks/data-and-apis-in-javascript

[dipamsen]

other inconsistencies/bugs:

(in the following screenshots kindly ignore font/text rendering issues, they are local to my machine due to weird resolution settings)

Footer social links - icon issue?

Track card - language/topic tags not visible (url)

Track video header - section with light background, language/topic tags not visible (url)

VideoSection - timestamps not visible, section with light background (url)

VideoInfo + PassengerShowcasePanel - links/description/credits not visible, passenger showcase header not visible, showcase name not visible (url)

(Passenger showcase is correctly rendered on the showcase page, so probably the same styles need to be used on the video pages as well)

(same changes as above for "Related Challenges" section)

PassengerShowcaseForm - dark text (url)

[Yashasewi]

Hi @shiffman and @dipamsen,

Thank you for taking the time to review the dark mode implementation and for your valuable feedback. I appreciate you pointing out the issues and inconsistencies you've encountered. (No worries, I know these things take time! 😄)

Regarding the bug you mentioned, @shiffman, where some pages in dark mode still have "light" sections (e.g., deploy-preview-1554--codingtrain.netlify.app/tracks/data-and-apis-in-javascript), I will investigate the issue and ensure that the dark mode styles are applied consistently across all pages.

As for the other inconsistencies/bugs reported:

1. Footer social links - icon issue?

• The current SVG icons used in the footer do not seem to support the dark mode styles effectively. Since these icons are in SVG format, simply adjusting the color might not work as expected. I think we need to consider using different icon sets or formats that support dark mode natively, or explore alternative solutions to ensure the icons are visible and consistent in both light and dark modes.

what should we do about the icons ? @shiffman any suggestions...

2. Other Issues

• Thank you for catching the other issues. I think I missed some pages on the website. But sit back and relax, I will fix the other issues soon.

@dipamsen, if you could share the specific URLs where you encountered the issues, it would be extremely helpful for me to locate and fix them easily.

I will work on addressing them and update the pull request accordingly. If you encounter any other inconsistencies or issues, please feel free to share them as well.
I appreciate your collaboration, support, and understanding in ensuring a seamless integration of the dark mode feature.

[dipamsen]

@Yashasewi I have updated my comment to include example urls to pages on the deploy preview site.

[Yashasewi]

Hi @shiffman and @dipamsen,

• Track card - language/topic tags not visible (url)
• Track video header - section with light background, language/topic tags not visible (url)
• VideoSection - timestamps not visible, section with light background (url)
• PassengerShowcaseForm - dark text (url)
• VideoInfo + PassengerShowcasePanel - links/description/credits not visible, passenger showcase header not visible, showcase name not visible (url)
• Footer Social Links - Icon Issue
• As @dipamsen mentioned that the current SVG icons used in the footer do not handle dark mode styles effectively.
• Proposed Solution: I can change the icons to new icons that support dark mode switching, ensuring consistent visibility and styling.

Regarding the footer social links, if I have the necessary permissions, I will proceed with changing the icons to new ones that support dark mode switching. This should resolve the icon visibility and styling issues in both light and dark modes.

I have fixed most of the bugs found during your review. However, if you encounter any additional issues or inconsistencies, please do not hesitate to mention them.

[dipamsen]

amazing! one last place that i missed mentioning, is the challenge page which has some white areas, as well as dark text (example)

Also, the search results for tracks (url) and the date of video on the challenge page (url) could be light text?

[Yashasewi]

@fturmel I had made similar local changes to address some of the remaining issues, but after you went through the entire site and made these commits, I don't need to push those local commits anymore. The improvements and fixes you've implemented cover the areas I had planned to work on.

I was also testing this site on mobile devices, and the bugs I found were related to the code examples and the navigation not closing on mobile when activated. However, you have fixed both of these issues with your recent commits. I couldn't find any other issues or problems on mobile devices.

I believe we can safely merge this pull request into the main branch. If someone found any issue or bug or inconsistency, please mention here.

[fturmel]

@Yashasewi Sorry I stole your thunder! It made sense to just power through and fix the small issues as I was QA'ing locally.

I feel bad because I did spend time writing detailed comments before so you could have some direction and work it out yourself 🤦

I'll be more patient next time! And again, good job on this PR.

[Yashasewi]

@fturmel 😂 There's nothing to feel bad about at all! Working alongside an experienced contributor like yourself has been an incredible learning opportunity for me.
How about we add dark mode to the Nature of Code site next? That would be a great follow-up project .

[shiffman]

Thank you, wow! I see that the checks are not passing, let me know if there's something I should do or check into! @Yashasewi I love the idea of dark mode for nature of code, but the site and its design are still quite a bit in flux so it probably would make sense to wait until it's more settled and final. Feel free to poke around the repo and look at the issues and other discussion! I welcome contributions!

[fturmel]

Alright, all checks are green again. There must've been an outage / glitch on Netlify's end a few days ago.

[dipamsen]

I am noticing that foreground text color on certain sections of the light theme site has been changed from #3c3c3c (--gray-dark) to #000000, is this intended?

Before	After

[dipamsen]

Also, the color pair of foreground and background on the Guides page (as well as Showcase, About) may be difficult to read due to low color contrast (does not conform to WCAG AA), maybe we can use a different (lighter) shade/color theme for these pages for the light theme?

[dipamsen]

While I am listing the changes (regressions), the social icons seems to have been changed, presumably because the original SVGs which were used could not be dynamically used for both light and dark theme. Currently icons from react-icons library are used instead.

Before	After

P.S. Is it okay to just rotate a star and call it the nebula logo?

thecodingtrain.com/src/components/Footer.js

Lines 102 to 107 in 77cc494

	<li>
	<a href="https://nebula.tv/codingtrain" aria-label="Nebula">
	<IoStarSharp size={30} style={{ transform: 'scaleY(-1)' }} />
	<span>Nebula</span>
	</a>
	</li>

[Yashasewi]

@dipamsen, thanks for raising those points.

Regarding the color updates, I've changed a few colors by adding opacity and reverted to the old purple color.

As for the Nebula icon, you're right that it's just a rotated star design. The react-icons library doesn't have an official Nebula icon, and this rotated star seems to be their official branding representation:

I agree it's not an ideal solution, but it was the best approach we could find for now to ensure the icon works well in both light and dark modes.

[fturmel]

@dipamsen Thanks for the review!

The Nebula logo / star is a non-issue, it's the exact same shape in the end. We'll end up with the same thing if we start from the official logo and make it monochrome.

I kinda like the simpler social icons without the circles personally. They're clearer and less busy that way.

But if we feel strongly about retaining the old look, we can either revert and fix the SVGs, or keep the react-icons and implement our own circle wrapper. The logos are more up-to-date in react-icons, the previous SVGs probably needed a refresh anyways.

@shiffman Any preferences? #1554 (comment)

@Yashasewi Let me know if you need help or guidance once we have a consensus.

Almost there!

[fturmel]

@Yashasewi Maybe you can open new PRs / issues for these so we can concentrate on dark mode related concerns here?

[shiffman]

I have no preference about the social icons and am glad to go with what is easiest to implement and maintain!

I agree with @fturmel, I like your additional ideas @Yashasewi but let's work on them in separate issues / branches and focus on dark mode here!

[fturmel]

I have no preference about the social icons and am glad to go with what is easiest to implement and maintain!

The current state of the PR is the easiest and simplest (react-icons without circles). The work is done, it's dark mode compatible without additional efforts, and the brand logos will be up-to-date.

Are we ready to merge? @jasontheillustrator @runemadsen did you want to chime in on the feature?

[Yashasewi]

@fturmel @shiffman
Thanks I will open other issues for those. I guess than we are ready to merge .

[shiffman]

Fantastic, let's give this ~24 hours for any last comments and then I will go ahead and merge!

[dipamsen]

@fturmel @Yashasewi #1554 (comment) ?

[Yashasewi]

@fturmel @Yashasewi #1554 (comment) ?

Hii @dipamsen now if you check it again they look quite similar to me . But sometimes it's harder to differentiate colours for me . So please let me know if you think we need to change the colour a bit more .

Before	After

And In most cases the text colour has been replaced by --text-color: #000000cb; variable. Also changed the opacity of text colour. 74964aa

[dipamsen]

Looks good. Apparently originally some texts were complete black whereas some other places it was a lighter opacity. (unsure whether intentional). Currently it is consistent for all copy.

Should be ready for merge! (unless there are any more comments)

[shiffman]

Heeeeeeeere weeeeeeeeeee goooooooooooooo! Amazing work @Yashasewi!

[Yashasewi]

Let's gooooooooooooooooooooooooooooooo

We did it . 🤜🤛