Links Mentioned
Project I contributed to: https://github.com/inclinedadarsh/timeloom
Issue I worked on: https://github.com/inclinedadarsh/timeloom/issues/9
My Pull Request: https://github.com/inclinedadarsh/timeloom/pull/18
Timeloom
Before finding and contributing to PrimedKeys, I found a neat TypeScript project I could add a feature to. Timeloom by Adarsh Dubey is a web app that lets users document their technical journey in a timeline-style page.
TypeScript
Timeloom is written in TypeScript, a superset of JavaScript developed by Microsoft. I've never worked with TypeScript before this, but I have experience from class writing web apps using JavaScript (Node JS) and C# (ASP.NET). I have to admit I'm not very good at web development. However, I wanted to challenge myself and add a feature to a web app.
Light and Dark Mode
Growing up, I remember most websites I browsed being black-text on a white background, or what's called a "dark-on-light colour scheme" (more commonly light mode). Nowadays, many websites and apps (like Discord) have what's commonly called dark mode, or a "light-on-dark colour scheme".
Feature Addition - Light Mode Styles
The Issue I worked on was a Feature Request to add light mode styles. Timeloom was developed with dark mode styles, but the author requested light mode support to be enabled, with a light mode stylings provided. Working on this issue was a good exercise in contributing to a web app.
My Approach
When looking at the project README.md, I noticed Tailwind CSS, a CSS framework, is used in the project. Since Tailwind was already used in the project, I decided to follow the Tailwind strategy for light/dark mode.
Tailing CSS Dark Mode
When working on this issue, I learned that web apps can apply light/dark mode styling based on two strategies:
- media - user's Operating System/browser preferences)
- class - whenever a
darkclass (or similar, depending on the framework) is applied to the HTML tree.
I noticed the class strategy was already implemented in Timeloom via the tailwind.config.js file. Since I wasn't adding a toggle button to switch between light/dark modes, I added the media strategy to tailwind.config.js to allow light/dark mode selection via user system preference.
Light Styling
For light styling, I tried to choose appropriate colours for a light theme in the global CSS file, app/globals.css. I used the dark mode stylings as a template and played around with the properties to see which properties affected parts of the web page.
After making my changes in app/globals.css, I noticed that some dark mode styles persisted in the light mode. To determine the elements I would have to modify, I used my browser's Developer Tools and the Element Inspector.
After determining the elements, I used git grep to locate their file locations to various React Components.
Since the class strategy for dark mode stylings was already enabled, I added the dark class to define dark mode stylings to these components and add light mode equivalents. After I was satisfied with the stylings, I submitted a draft Pull Request.
There is a cool grid image at the top of the page I wanted to create a light mode equivalent for. I initially thought I could create a light mode version using code, but I later found out the grid image was an image asset, bg-grid.png. After discussing with the author, we decided not to include a light-mode version of this image in my Pull Request.
Refactoring
After an initial code review, the author noticed some of the stylings in app/globals.css were reused. The author suggested to use Next Themes to solve this. To explore this solution, I made a test branch on my local machine and found that the Next Themes solution would achieve the same affect as the media strategy I implemented in the Tailwind config file.
Due to this, I suggested to instead refactor app/globals.css by moving the light mode stylings I created into the default styles
My Experience and removing other duplicate stylings. I ended up cleaning up app/globals.css and adding the changes to my Pull Request to see if this is what the author wanted. I am currently still waiting to see how the review goes but I am confident we will complete this feature one way or another. Update to come in the next few days.
Conclusion
When I started learning Open Source development, I dreaded contributing to a web app. Despite the web development classes I've taken, I'm still not comfortable creating a web application from scratch (at least using Node JS). However, for Hacktoberfest I wanted to at least attempt a contribution to a web application. And by doing so I was able to implement a feature from scratch.
Top comments (0)