DEV Community

Cover image for Dark theme for (almost) everything

Dark theme for (almost) everything

Thiago Braga on September 06, 2019

Hi, people. This is my first post on Dev.to and I'm very happy for it. I've been postponing this task for a long time, perhaps because of perfectio...
Collapse
 
peledzohar profile image
Zohar Peled

partially quoting is not cool, man. It should be "Come to the dark side, we have cookies!"
Now seriously, thanks for posting! even since I was introduced to VS 2013's dark theme way back when, I've preferred dark themes over light ones.

Collapse
 
thiagobraga profile image
Thiago Braga

😂😂😂😂😂 You are right!
I always prefer dark themes too.
Thanks, friend.

Collapse
 
stevegoodenough profile image
SteveGoodenough • Edited

I was doing this on a site by site basis (ignoring apps) but then I found the chrome plugin Dark Reader. It's pretty good as being a general dark mode convertor with the ability to turn on/off for specific domains or customise the css on specific sites.

Collapse
 
thiagobraga profile image
Thiago Braga

Thank you friend. I know this plugin and have used it a few times. Some sites, however, get a very strong contrast, such as Facebook for example:

Sociopata Facebook fanpage with Dark Reader plugin

So in these cases I prefer custom themes like this:

Sociopata Facebook fanpage with custom dark theme by book777

It's a matter of taste, I really enjoy creating these themes. Thanks anyway for contributing. :)

Collapse
 
metruzanca profile image
Samuele Zanca • Edited

I really love your google calendar theme. The calendar app for mobile has dark theme but not desktop, this really throws things off as I like using a Synthwave color scheme for my events. On the blindening white color scheme of the desktop version, they don't look good.
I did however add my own css for the scrollbars. They're matching your general theme.

* {
    scrollbar-color: #31343f #1e2127;
}

edit: can only confirm this works on firefox

Collapse
 
thiagobraga profile image
Thiago Braga

Hi Samuele, thanks for your comment.
I saw your Github pull request!! I was very happy for that. I'll have some time to review this weekend, and once it's OK, I'll add your changes to the repository. Thank you very much. 😊

Collapse
 
loretoruiz profile image
Robinson Loreto

Hola que tal. Recien empiezo a desarollar una aplicacion con ReactJS, con backend conectado a una BD Sql Server. Lo que quiero es que por favor me ayuden con la logica a la hora de Iniciar sesion. Actualmente guardo de forma Local con el LocalStorage el token generado por el backend y ademas de esto manejo en un estado global con redux una variable "is_logged" que me toma true cuando es correcto el inicio y false cuando no es correcto. Lo que no se es como manejar, a partir de esa variable "is_logged" el redireccionamiento a , por ejemplo: /dashboard, y a proteger todas las rutas dentro de ese dashboard, y ademas, si se ubica en el login y ya esta logueado lo ignore y se quede en el Dashboard igual. Espero me puedan ayudar ! saludos desde Venezuela.

Collapse
 
thiagobraga profile image
Thiago Braga

Hola amigo, perdóname por errores gramaticales o ortográficos. No es el tema de la publicación, pero no hay problema, ¿estás usando React Router? Si no, lo recomiendo. Hay un tutorial, React Training que ayuda mucho a entender. Espero que te sirva de ayuda.

reacttraining.com/react-router/web...

Collapse
 
parrol profile image
parrol

Hey! I know this is out of topic, but I wanted to address your response in Spanish. It was perfect! (almost).

There's one mistake that even native speakers make:

"Si no" vs "sino"

You can see them as a conditional structure "if" you haven't done something "then" something else <-- here if represents "si no" "si no has hecho algo". then represents "sino" it it's used after the action you assume couldn't be done.

-Are you using React Router? If not, I recommend it.
-¿estás usando React Router? Sino, lo recomiendo

Another way to say it:
-If you're not using React Router, I recommend it.

-"Si no" estás usando React Router, lo recomiendo.

When using "or" (o) in Spanish before a word that starts with "o" you use "u"

-gramaticales u ortográficos.

Hope this helps and you can correct me too! I'm also Venezuelan and would like to write good English.

Thread Thread
 
parrol profile image
parrol

And also, your themes rock lml

Thread Thread
 
thiagobraga profile image
Thiago Braga • Edited

It was perfect! (almost).

😆😆😆😆

And also, your themes rock lml

Thank you so much! 😊

When using "or" (o) in Spanish before a word that starts with "o" you use "u"
-gramaticales u ortográficos.

I didn't know that. Thank you. I am not very good with Spanish, but I'm learning. ☺️

-Are you using React Router? If not, I recommend it.
-¿estás usando React Router? Sino, lo recomiendo

Perfect example! It makes perfect sense.

Collapse
 
hsjakobsen profile image
Henrik Jakobsen

I've adopted your Calendar and Lastpass themes. Great themes.

I would love if the lastpass dark theme would work with the vault when you have the addon installed!

Collapse
 
thiagobraga profile image
Thiago Braga

Thanks, friend.

I would also like to use the LastPass theme in the vault when opened by extension, however, it is a security lock. You may have already noticed the message:

"As a security precaution, the browser prohibits extensions from affecting its built-in pages ..."

Collapse
 
hsjakobsen profile image
Henrik Jakobsen

Dang, I guess I have to petition Lastpass for an official dark mode :)

Thanks for the explanation, at the back of my mind I guess I knew that something like that was the reason.

Keep up the good work :)

Thread Thread
 
thiagobraga profile image
Thiago Braga

Dang, I guess I have to petition Lastpass for an official dark mode :)

If u create the petition, I'll sign 😆

Thanks for the explanation, at the back of my mind I guess I knew that something like that was the reason.

You are welcome. 😊

Keep up the good work :)

You can follow me on Github if you want, to follow the latest updates.
Thanks, Henrik.

Collapse
 
waylonwalker profile image
Waylon Walker

I have been using this one-dark css with the stylus plugin for jupyterlab for a few months. I have no idea where it originally came from.

gist.github.com/WaylonWalker/b082b...

Stylus is amazing for this!

Collapse
 
charliejrgower profile image
Charlie Gower

Can you dark theme our website !! works-hub.com !?!

Collapse
 
thiagobraga profile image
Thiago Braga

Hi, friend. I'm flattered by your message.
Could you please contact me on Telegram or e-mail?

💬 t.me/bragasociopata
✉️ contato@thiagobraga.org

Thanks 😊

Collapse
 
charliejrgower profile image
Charlie Gower

Great - I’ll send you an email next week when I am back at the office.

Collapse
 
charliejrgower profile image
Charlie Gower

Emailed :)

Collapse
 
thiagobraga profile image
Thiago Braga

Thanks, friend. 😊

About the color choosing stuff, I'm following the One Dark theme colors, like this one for Vim (look the color palette on README) or any other One Dark theme.

I'm not an expert on the subject, but I think that after many years of programming, I acquired some basic knowledge about choosing colors and fonts :)

And Stylus (both the language and the extension) are great. A path with no return... lol

Collapse
 
abrahambrookes profile image
Abraham Brookes

Your themes look really nice - can you do one for BitBucket? They've removed what small support they had for dark mode and their theme is bright blue and black-on-white - kills me!

Collapse
 
thiagobraga profile image
Thiago Braga • Edited

I know your feeling bro. I'm currently very buried in work here lol but it will be a pleasure to do it soon.

Thanks for your comment 😊

Collapse
 
xenartha profile image
Sloth

I’ve been using Dark Reader. It has issues but largely just works

Collapse
 
thiagobraga profile image
Thiago Braga

Nice, friend! I know this extension, it does the work very well.
Thanks for commenting.

Collapse
 
basseyisrael profile image
BasseyIsrael

I prefer light themes for everything other that the text editors because I have issues with my eyes and that's where I spend the most time😅
Dark theme is cool though.

Collapse
 
thiagobraga profile image
Thiago Braga

I understand, friend. Our eyes that drives our tastes hahaha 😆

Collapse
 
luciunknown profile image
Luciano Cardoso

loved your twitter username :) :) :)

Collapse
 
thiagobraga profile image
Thiago Braga • Edited

Thanks, friend. 😌 My username is the junction of my last name and my band name, Sociopata. Feel free to listen if you want: b.link/SociopataCorrosao

And I loved your site! 👏👏

Collapse
 
luciunknown profile image
Luciano Cardoso

listening now!

Thread Thread
 
thiagobraga profile image
Thiago Braga

Thank you so much 🥰

Collapse
 
darkterminal profile image
Imam Ali Mustofa

it's the first comment in dev.to and i found this great article! Thanks

Collapse
 
thiagobraga profile image
Thiago Braga

Thanks friend. Sorry for the late response.

And welcome to Dev.to 😊
I hope you learn too much here like I do.

Collapse
 
sym profile image
Ryan Carter

Thank you. These themes are fantastic.

Collapse
 
thiagobraga profile image
Thiago Braga

I appreciate that. I'm glad you liked it. 😊

Collapse
 
justynclark profile image
Justyn Clark

I had an excellent co-worker that thought dark themes were just a cute thing. I said naw, they are physically better on the eyes.

Collapse
 
thiagobraga profile image
Thiago Braga

I agree with you, it is very nice to work with dark themes. I try to use dark themes in everything (including my clothes) lol

Collapse
 
mcborreo profile image
Caye

Using the Calendar + Gmail ones now, thank you!! Dark themes are my jam.

Collapse
 
thiagobraga profile image
Thiago Braga

I'm glad these themes are helpful to you. Feel free to open an issue on Github if you find a bug. I have a few in mind, but I didn't have time to fix it. 😅

Collapse
 
leob profile image
leob

Talking about the ergonomic side of the dark side - it's popular but is it really better for the eyes? Maybe depends on the time of the day (day/night)?

Collapse
 
thiagobraga profile image
Thiago Braga • Edited

Hi friend, sorry for the late reply. Your question is very good and, therefore, needed a good answer. I'm sorry if I can't.

is it really better for the eyes?

I don't know exactly, but I can say for myself that it is very comfortable. My eyes burn after a long time on a white screen (like this Google Translate screen helping me answer your question) or even on dark themes with very strong contrast (white text, black background). You can see that the colors I use, the One Dark theme, are soft, and I also like to use low saturation.

I also have astigmatism, which can be an aggravating factor. Therefore, it shouldn't be a general rule that dark themes are good for the eyes. For me, it is 😎

Maybe depends on the time of the day (day/night)?

I feel comfortable using dark themes in any time of the day. It is a matter of taste, I think. A friend still likes to use white themes while coding, for example, even on VS Code. 🤷‍♂️

Collapse
 
ulissemini profile image
Ulisse mini

How has nobody mentioned that you look exactly like gilfoyle (minus the smile)

Collapse
 
thiagobraga profile image
Thiago Braga

😆 someone already told me this here in Brazil. It is difficult to be a celebrity and not be.

Collapse
 
parulgu profile image
Parul

OMG DARK THEME!!
Thank you :D

Collapse
 
thiagobraga profile image
Thiago Braga

Thank you friend :)

Collapse
 
cguttweb profile image
Chloe

Great post I use dark themes wherever possible much better contrast and definitely easier on the eyes. I'll have to try a couple of these out.

Collapse
 
thiagobraga profile image
Thiago Braga

Thank you Chloe. Feel free to give feedback if you feel it is necessary. 😊

Some comments have been hidden by the post's author - find out more