Dark theme for (almost) everything
Tags: css, dark, themes, stylus
Published: 2019-09-06 20:08:50

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](https://add0n.com/stylus.html) Chrome extension, and now I want to share and spread the word. Come to the dark side! 😎

<figure>
  <img src="https://thepracticaldev.s3.amazonaws.com/i/jrtpxdd2y2neo7hu73np.png" alt="Google Calendar Dark Theme - v0.0.10 - Week view in foreground">
  <figcaption>Google Calendar Dark Theme - v0.0.10 - Week view in foreground</figcaption>
</figure>

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](https://code.visualstudio.com/), 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](https://browsersync.io/) 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](https://github.com/simsrw73) (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](https://github.com/thiagobraga/boilerplate-userstyles) to achieve my needs, like code in [Stylus lang](http://stylus-lang.com) and run tasks with [Make](https://dev.to/deciduously/how-to-make-a-makefile-1dep). This has always served as a therapy, made me happy, and benefited my eyesight and concentration.

You can check my themes on [my Github](https://github.com/thiagobraga) with the suffix `-userstyles`. These dark themes are in constant development. Others not so much...

---

{% github thiagobraga/google-calendar-userstyles no-readme %}

<p align="center">
  <img src="https://i.imgur.com/5n9DG6z.png" width="500" />
</p>

---

{% github thiagobraga/gmail-userstyles no-readme %}

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

<p align="center">
  <img src="https://i.imgur.com/VcGDev3.jpg" width="500" />
</p>

---

{% github thiagobraga/todoist-userstyles no-readme %}

_Note: [Todoist](http://todoist.com) has its native dark theme. My theme only improve some things._

<p align="center">
  <img src="https://github.com/thiagobraga/todoist-userstyles/raw/master/screenshots/preview-dark.png" width="500" />
</p>

---

{% github thiagobraga/hackmd-userstyles no-readme %}

<p align="center">
  <img src="https://userstyles.org/style_screenshots/145795_after.jpeg?r=1528490407" width="500" alt="Dark HackMD w/ Realtime Preview" />
</p>

---

{% github thiagobraga/lastpass-userstyles no-readme %}

---

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 😊