Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
September 6, 2019 08:08 pm GMT

Dark theme for (almost) everything

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

Google Calendar One Dark v0.0.10
One Dark theme for Google Calendar 2019
https://github.com/thiagobraga/google-calendar-userstyles

Gmail One Dark v0.0.12
One Dark theme for Gmail
https://github.com/thiagobraga/gmail-userstyles

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

I will add a screenshot soon...

Dark HackMD w/ Realtime Preview
A better experience on HackMD w/ markdown preview as you type
https://github.com/thiagobraga/hackmd-userstyles

Dark HackMD w/ Realtime Preview

Better Todoist v0.4.6
Improvements for Todoist
https://github.com/thiagobraga/todoist-userstyles

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

Dropbox Paper One Dark v0.0.1
One Dark theme for Dropbox Paper
https://github.com/thiagobraga/dropbox-paper-userstyles

Again: I will add a screenshot soon... Seriously!

LastPass One Dark v0.0.1
A blue dark theme for LastPass password manager
https://github.com/thiagobraga/lastpass-userstyles

I'm feeling repetitive

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


Original Link: https://dev.to/thiagobraga/dark-theme-for-almost-everything-1ace

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To