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 (7)

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.

Here is a post you might want to check out:

Regex for lazy developers

regex for lazy devs

Sorry for the callout πŸ˜†