Thiago Braga

Posted on Sep 6, 2019 • Edited on Oct 30, 2021

Dark theme for (almost) everything

#css #dark #themes #stylus

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 perfectionism or shyness (or both). 😅

In the last four years, I've fallen in love with using and creating dark themes for the apps I use with the help of the Stylus Chrome extension, and now I want to share and spread the word. Come to the dark side! 😎

Google Calendar Dark Theme - v0.0.10 - Week view in foreground

In this saga, I realized that it was complicated to develop themes for websites by editing straight into the extension interface. It didn't have the same shortcuts that I was used to in VS Code, among other limitations. At that time I used the Stylebot extension instead of Stylus.

So I started looking for a way to edit the styles locally and inject the changes into the site somehow, like BrowserSync for example. BrowserSync was my first attempt, but I couldn't go very far, I ran into many difficulties, such as running a server to just serve a CSS file and inject it into the browser.

After a long time, I found this wonderful boilerplate from Randy W. Sims (if you are reading this, thank you very much!!!). I was very happy, very grateful, and started developing my own themes. And after some time, I've made modifications on the boilerplate to achieve my needs, like code in Stylus lang and run tasks with Make. This has always served as a therapy, made me happy, and benefited my eyesight and concentration.

You can check my themes on my Github with the suffix -userstyles. These dark themes are in constant development. Others not so much...

thiagobraga / google-calendar-userstyles

🗓 One Dark theme for Google Calendar

thiagobraga / gmail-userstyles

📬 Gmail One Dark theme

Note: For this theme to work, you need to change Gmail theme to the dark theme.

thiagobraga / todoist-userstyles

✔ Improvements for Todoist

Note: Todoist has its native dark theme. My theme only improve some things.

thiagobraga / hackmd-userstyles

🖌 Dark HackMD w/ Realtime Preview

thiagobraga / lastpass-userstyles

🖌 A blue dark theme for LastPass password manager

I hope it is useful for those who like dark themes. Glad to be able to contribute in some way to the open source community.

Thanks 😊

Oldest comments (48)

Ryan Carter • Sep 8 '19

Thank you. These themes are fantastic.

Thiago Braga • Sep 10 '19

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

Justyn Clark • Sep 8 '19

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.

Thiago Braga • Sep 10 '19

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

Caye • Sep 9 '19

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

Thiago Braga • Sep 10 '19

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. 😅

Zohar Peled • Sep 12 '19

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.

Thiago Braga • Sep 12 '19

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

Thiago Braga • Sep 26 '19 • 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! 👏👏

Thiago Braga • Sep 26 '19

Thank you so much 🥰

Chloe • Oct 26 '19

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.

Thiago Braga • Nov 17 '19

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

Samuele Zanca • Nov 25 '19 • 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

Thiago Braga • Nov 27 '19

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. 😊

SteveGoodenough • Jan 8 '20 • 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.

Thiago Braga • Jan 15 '20

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:

So in these cases I prefer custom themes like this:

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

Henrik Jakobsen • Jan 14 '20

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!

Thiago Braga • Jan 14 '20

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 ..."