Dark Mode Theme for the Template

• 

  Dark Mode Theme

• 

  Light Mode Theme

Inspiration

An inspiration for the Dark Mode Theme was Issue #2 where Rashika suggested we create a toggle to switch between dark and light mode in the template.

I thought it would be a good experience because it incorporates important things like:

• JS user-side scripting
• CSS constants
• CSS toggle styling
• Color choice
• Some code refactoring

Contribution

I created these Pull Requests:

• Added Dark Mode theme toggle #30
• Added new colors to the dark mode #65
• Fixing GitHub stats #85

Closing these Issues:

• Add Dark Mode theme toggle #2
• Pick cool colors for Dark Mode #44
• Broken Github stats #82
• Social Links not working #90

Most important contribution lies within dark-mode.js where the whole logic behind the switching from dark mode to light mode stands.

What it does

The Dark Mode Theme modifies the CSS constants used to hold color values for all elements of the webpage based on whether it is in the dark mode or the light mode

How we built it

We built this by using JavaScript to read from the DOM structure, find the toggler label, and update the CSS colors based on the current theme value.

Challenges we ran into

Once the GitHub Stats in the about me section were implemented, we needed to find a way to update their styles based on whether it's in dark mode. We fixed the problem by taking the src attribute of those images and replace the REST API query's attribute theme from default to dark.

Example:

document.getElementById("github_stats").src = document.getElementById("github_stats").src.replace("dark", "default");
document.getElementById("github_languages").src = document.getElementById("github_languages").src.replace("dark", "default");

Accomplishments that we're proud of

I'm proud of the JS script that:

• updates necessary values
• calls on the dark colors when in dark mode
• modified the GitHub stats query

I'm also very proud of our collaborative work with Nandini and Yash on picking the colors for the dark theme.

I'm also appreciative of Nandini's work with the Dark Mode toggler. Her Sun-Moon design contribution makes the experience better.

What we learned

1. We learned how to choose new color palettes
2. I learned more JS scripting and more sophisticated things like ternary operators, difference between const and let, and .replace()
3. I also learned more about working with Ruby and the ways to access config variables, such as {{ site.social.github_username }}

What's next for Dark Mode Theme for the Template

1. Make the Dark Mode consistent when updating the page or going to other pages using JS localStorage
2. Find a more suitable place for the Dark Mode toggler
3. Update the Task Tracker page card color
4. Fix the mobile view for the toggler

Built With

• html
• javascript
• ruby
• scss