dark-facebook is a dark theme for facebook that you can install in your browser.
See the website
Because facebook is a big website, your contribution would help this theme become more complete.
Please check out:
- First, install Node.js.
- Download the source code.
- And run
npm installto install the dependencies.
- Start the development server:
- Download and install the extensions for your browser:
- Disable the dark theme in Stylish/Social Fixer.
- When you go to Facebook, you should see: "Develop dark-facebook" button at the bottom-right corner of the screen. Click that button.
- Facebook should become dark.
The Second Generation
The first version suffers several serious problems:
- It overrides the colors of every elements (making all elements transparent, and start adding colors from there).
- First, it triggered facebook's High Contrast mode.
- Also, a lot of unthemed components are totally unreadable.
- All code is in one file, making it easy to write at first, but soon it became extremely unmaintainable, and it's not contribution-friendly.
- Facebook likes to change CSS classes easily.
The Next Approach
- Separate the component styles from facebook's selectors. Since facebook likes to change CSS classes, we should not depend on them too much. Our approach is to give each and every component a name, then have a "selector definition" file that maps a selector to appropriate component.
- Work in multiple files, making it easier to search for things.
- Better documentation. The selector definition file should contain human-readable and descriptive information about each component: What does this component refer to on facebook, and where to find it.
- Contribution friendly. I should invest more time in making this project as documentation-friendly as possible.
- No Global Override. This time, we will add dark styles to facebook, component by component.