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.