Giter VIP home page Giter VIP logo

darkreader's Introduction

DarkReader for Google Chrome

Dark Reader screenshot

This extension inverts brightness of web pages and aims to reduce eyestrain while browsing the web. Visit Chrome Web Store for more info.

How to contribute

Fixing wrong inversion

If some site is already dark, you can add it to dark_sites.json file (please, preserve alphabetical order).

If some parts of web-pages are wrongly inverted, you can specify necessary CSS selectors at fix_inversion.json file (please, preserve alphabetical order by URL, use short selectors, preserve whitespace indentation and code style).

Notice that merged changes to these files are automatically delivered to all users within 15 minutes.

Using Dev Tools

  • Open Chrome Dev Tools (F12).
  • Click on element picker (top-left corner).
  • Pick wrongly inverted element.
  • Choose a selector for that element or all similar elements (e.g. if element has class="x-icon small" selector may look like .x-icon).
  • Click Dark Reader icon.
  • Click Open developer tools (at bottom).
  • Under sites section add a block containing URL and selectors to invert.
...
"sites": [
    {
        "url": "example.com",
        "invert": ".x-icon"
    }
]
  • It is also possible to specify multiple selectors (comma-separated list or an array) and custom CSS rules. If chosen element contains images or other content that becomes wrongly displayed, noinvert rule can be used. removebg removes background image from element.
...
"sites": [
    {
        "url": "example.com",
        "invert": [
            ".x-icon, .x-button",
            "#player .player-button"
        ],
        "noinvert": "#player *",
        "removebg": ".bg-photo",
        "rules": ".overlay { background: rgba(255,255,255,0.5); }"
    }
]
  • Click Apply.
  • If the fix worked open fix_inversion.json file.
  • Click edit (sign-in to GitHub first).
  • Insert your fix there. Preserve alphabetical order by URL, use 4 spaces for indentation.
  • Provide a short description of what you have done.
  • Click Propose file change.
  • Review your changes. Click Create pull request.
  • The Travis CI will run tests reviewing your changes.
  • If you see a red cross click Details and see what is wrong.
  • When you see a green checkmark than everything is fine.
  • Dark Reader developer will review and merge your changes making them available for all users.

Adding new features or fixing bugs

If you would like to add new feature to Dark Reader or fix a bug, submit an issue in GitHub (if there is no existing one), discuss it with active contributors, wait for approvement.

In order to build and debug the extension install the nodejs. Install development dependencies by running npm install in project root folder. Then execute npm run debug. Open the Chrome's extensions page. Enable the Developer mode, press Load unpacked extension button, navigate to project's src/ folder.

After making any code changes the project will be automatically recompiled. If the extension didn't reload automatically it can be reloaded at Extensions page by pressing the Reload (Ctrl+R) hyperlink.

For editing the code you can use any text editor or web IDE (like Visual Studio Code, Atom, WebStorm). Preserve code style (whitespaces etc).

Submit a pull request, wait for review.

Good luck!

darkreader's People

Contributors

ak800i avatar alexanderby avatar banonotit avatar christineywang avatar darkreaderdev avatar dbautistav avatar ermansayin avatar jordanpurinton avatar lawrencewalters avatar mtiigi avatar nikolay avatar romangg avatar sparrc avatar surajiyer avatar terrance avatar tuckerwtatum avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.