Dark Crunchyroll Plugin

Current Status

With the new Crunchyroll beta site being dark mode by default, this addon is likely to cease being useful.

As such, this repository will likely be archived once the beta experience is the default. Additionally, there likely will not be any updates. This may change if Crunchyroll reverts these dark mode friendly changes.

About

This project is originally based off of the Dark Youtube Plugin, though a lot has been rewritten.

This plugin is currently available on the Firefox Addon Store, the Chrome Web Store, and the Microsoft Edge Extension Store.

This plugin aims to provide a quality dark theme for Crunchyroll.com. This is primarily because dark themes are easier on the eye when in a darker environment. It also leaves a button in the addon bar to quickly disable and re-enable the theme.

If there are any unthemed pages, or other issues such as weird color choices, please report them!

See Releases for changelog.

Build

Setup

1. Install latest stable yarn and gulp-cli globally (either through your package manager, or through npm, etc)
2. run yarn install
3. Run gulp for automatic build-on-change and css lint
   1. by default gulp watchCrhome is run, see gulp --tasks to view all available
4. Load the plugin in Chrome/Firefox from the build directory

#CSS processing

The CSS files use SCSS and must be named src/styles/<component-or-page>.css.scss. Any mixins reside in src/styles/_mixins.scss and the variables are in src/styles/_variables.scss.

Do not add color literals (hex or rgba) in any file except _variables.scss. If possible, use the already existing colors there and "remix" them with functions such as rgba($color, 0.4), lighten($color, 30%) and darken($color, 20%).

At the start of each new scss file put @import 'common';, which imports the variables and the mixins.

Contribution guide

1. Clone the project
2. Follow the Setup instructions above
3. Make changes
4. Make sure there are no lint errors (gulp lint must not give warnings)
5. Test the changes in your browser (don't forget to reload the plugin)
6. Submit a PR with a short description and a screenshot of the change