Easily add dark mode support to your app

Image for post
Image for post
Image credit: Author

This article highlights how to set up Light and Dark Mode in React application with SCSS modules.

In my personal opinion, I feel the presentation should be controlled only by the stylesheets and we must not add additional overhead in the React components (JS/JSX) to handle the theme changes.
Also, it will be better to configure the theme in the root component (Mostly App.js/App.tsx in react’s case)

Let’s create a react application using create-react-app with TypeScript configured.

npx create-react-app my-app-name --template typescript

Next, Let’s install SCSS in our project using npm install node-sass.
Convert the existing .css files into .scss files and change any imports to use .scss.

Image for post
Image for post

It is very easy to get started with a react app just with a single “create-react-app” command. But it is always recommended to make sure that we have few things checked off from our initial set up checklist before making our hands dirty with code. These checklist items can definitely help the project in the long run.

Make your CSS easier to understand with a little more organisation

Image for post
Image for post
Photo by Hanson Lu on Unsplash

Have you noticed how products are arranged in a Super Market? Soaps, Shampoos and Body Lotions are arranged together. Rice, Wheat and Dhall products are always grouped together. Similarly it is important for us to write CSS by organising how properties should be written within a selector.

This article highlights how properties inside a selector should be written and not on the specificity of how selectors should be written.

Look at the below CSS class selector “card”. This selector would definitely produce a neat output in the DOM. But do you notice how the properties are written inside the selector?

Whitespace and comments are your friends

Image for post
Image for post
Photo by Fabian Grohs on Unsplash

Most of us adhere to coding guidelines and practices when writing code. We’re aware of how variables, functions, classes, etc., should be named. We log comments when necessary, to help other developers working on the project.

What not to do while validating forms

Image for post
Image for post

1. Stop Throwing Errors When Your User Is Typing

It’s important to respect what your user types. In 90% of scenarios, users are running on a happy autopilot (and they’ll definitely be typing the correct thing).

As of March 2019, I have cycled 6000 kilometres in 2 years. My daily target varies from 15 to 25 km and 40+ kms in the weekends. Although it seems to be a small ride for cyclists who ride 100+ kilometres on weekends, believe me short rides around the outskirts are worth every day. I do get occasional rest during the weekdays due to late night office works, still I make it a point to get on the cycle just to fall in love with the nature’s visual treat.

I call it a “PERFECT morning” only if I had completed a ride. …

Trust is an important driving factor in business. How would you feel if someone says that he/she would sell a Product A for Rs.X and later keep on increasing the cost to Rs. X + Y + Z?

Online Vendor A : Sir, it costs Rs. 5000. Would you like to buy it?

You : Yes/No. (If your answer was Yes, the conversation continues.)

Online Vendor A: Here you go! Sold!

Online Vendor B : Sir, it costs Rs. 4000. Would you like to buy it?

You: Yes/No. (If your answer was Yes, the conversation continues.)

Online Vendor B: Here you go, adding service charges, transportation charges and then applying discounts, the total cost comes to Rs. …

SketchApp can do wonders with Borders. You can create different patterns using the Shape Borders.

Image for post
Image for post
All these patterns were created by altering the border of Oval Shape in Sketch

How to create Patterns using Border

Step 1 : Let’s take Oval Shape as an example (Click ‘O’ key to create an oval shape). Let it’s dimension be 700*700


Nijin Vinodan

Designer + Developer | Traveller | Cyclist

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store