rudde / dark-facebook

A dark theme for Facebook. Available as a Stylish user skin and a custom theme in Social Fixer for Facebook.

dark-facebook 2

dark-facebook is a dark theme for facebook that you can install in your browser.

Usage

See the website

Contributing

Because facebook is a big website, your contribution would help this theme become more complete.

Please check out:

• the theming process,
• the contribution guidelines, and
• the development section, below.

Development

1. First, install Node.js.
2. Download the source code.
3. And run npm install to install the dependencies.
4. Start the development server: node server.js
5. Download and install the extensions for your browser:
   • Firefox .xpi (signature) (source)
   • Chrome .crx (signature) (source)
   • You can verify file integrity using Keybase. My account is dtinth.
6. Disable the dark theme in Stylish/Social Fixer.
7. When you go to Facebook, you should see: "Develop dark-facebook" button at the bottom-right corner of the screen. Click that button.
8. Facebook should become dark.

History

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.