DEV Community

Cover image for Dark Mode vs Light Mode with Tailwind CSS only.
Hamza Nouali
Hamza Nouali

Posted on

Dark Mode vs Light Mode with Tailwind CSS only.

Hi everyone, I built these components using Tailwind CSS framework only, I put the source code here for anyone interested.

Live Demo: click here
Source Code on Github: click here
Follow Me: click here

I am thinking about writing articles here or making videos on YouTube about building Front-End using Tailwind CSS only, what do you think? does it worth?

Top comments (6)

Collapse
ย 
adam_cyclones profile image
Adam Crockett ๐ŸŒ€ โ€ข

Hiya good job but the dark modes contrast is not high enough to be accessible. I would lighten the text by atleast 20%

Collapse
ย 
alexmartinfr profile image
Alex Martin โ€ข

Hi Hamza,

Nice components, thanks for sharing!

Regarding the contrast of your dark ones, I want to share a good tool which helped me figure out good practices to design with accessibility in mind:

colourcontrast.cc/1a202c/878787

A good rule of thumb is to aim for these targets when you choose your colours:

  • 3 or more for big text
  • 4.5 or more for small/medium text

That should make your components even more readable and eye-soothing in the dark ๐Ÿ‘Œ

Cheers!

Collapse
ย 
antonmelnyk profile image
Anton Melnyk โ€ข

You know that "dark" theme is not just about inverting colors, right?

Collapse
ย 
hamzanouali profile image
Hamza Nouali โ€ข

I think it's about making the website easy to browse in a dark room.

Collapse
ย 
Sloan, the sloth mascot
Comment deleted
Collapse
ย 
hamzanouali profile image
Hamza Nouali โ€ข

Welcome to Tailwind CSS :p.