[Release] Better Crowdin Darkmode - a necessary addon for translating nightowls.

Better Crowdin Darkmode

Publisher - Jestemkioskiem
repository

You can install the addon directly from the Chrome App Store! (for review purposes - not anymore, as I've updated it to 0.2.1 - use github)

If the addon didn't work, try reloading the page after enabling Darkmode on Crowdin.

Version 0.1.0

3d78a4c - 951fcbc

The goal of the project

The addon aims to replace the terrible, unusable darkmode of Crowdin with something that is actually easy on your eyes, and will allow you to work for hours before they get tired.

The project was born on a Friday night when tired me tried his best to submit translations to his favorite project. The white color of the page was unbearable, but thankfully the developers included a great option for people like me to utilize - Darkmode. I was eager to try it out up until the very moment it loaded. Unfortunately, the darkmode looks like this (I've decided to keep the screenshots out of the post to make it look better. Sorry for the extra clicks!)

This is.... more than unacceptable. It not only almost hurts my eyes more than the default, it kind of makes me want to puke by looking at those colors.
If we dive deeper into the CSS alterations that this settting makes... it basically only inverts all the colors. Including text - from black, to white. In a dark mode.

I can't work like this, and even just for myself, setting the CSS to what suits me through the developer tools of my browser is too much work on a daily basis. So I'm building an addon. But if I am building one, I am building it the right way - open source, for everyone to use.

Spoiler alert - this is the end result

And a nice gif to showcase the difference, in case it wasn't obvious enough:

What's in the code:

manifest.json

The main configuration file of any browser extension, necesary for it to run.

src/script.js

The main javascript file of the extension - even though it's small, it's been compiled to be this way after literally hours of work (iframes are not fun and websites that set every CSS element to !important by default are the worst).

The CSS properties are a temporary workaround up until I get the background running when I set up the popup.

icons

The logo for the icons (also present in the banner of this post) was inspired by the Crowdin logo, in an obviously darker color scheme. As far as I am concerned, it is temporary and I'm open for contributions in this regard.

Technology Stack

• JavaScript (1.8.5)
• Jquery (3.3.1)

Roadmap

Firefox Support

I wish to maintain Firefox support for every future version. This is unfortunately not an easy port because Mozilla, for whatever reason, fires iframe onload events immediately after the Document Object Model is loaded. There's currently no workaround to this issue in the newest version of the browser.

GUI & Customizability

Further milestone is to create a small GUI enabled by clicking the icon to alter all the text colors and backgrounds to your liking with a HEX color picker. Alternatively, a local website opened in a new tab will do the trick.

How to contribute?

Submit all the Issues & Pull Requests directly to the project repository.

GitHub Information

my github account