contributing.org

Contributing to Dark-WhatsApp

Table of Contents

• Getting Involved
• How to Report Style Issues
  • I don’t know CSS
  • I know both CSS & GitHub
    • Duplicate the style or create a “companion style”
      • Duplicate the style
      • Create a “companion style”
• Getting Started
  • Style guide
  • Contributing code
  • Testing changes of a local userstyle

Getting Involved

There are a number of ways to get involved with the development of Dark-WhatsApp.

Even if you’ve never contributed to an Open Source project before, we’re always looking for help identifying missing styles or other issues.

How to Report Style Issues

I don’t know CSS

If you don’t know CSS very well and have found a missing style, please include as much as possible of following information when opening an issue:

• Screenshot of the problem
• Include the element(s) in the console if at all possible
  • To select an element, target it with your mouse then right-click and choose “Inspect Element”, otherwise press `Ctrl + Shift + C` and select it with your left mouse click
  • Copy the HTML if at all possible

I know both CSS & GitHub

• Recommended: duplicate the style or create a “companion style”
• Follow the style guide below
• Make any needed changes, then send us a pull request
• Please include a URL to the page (if public)

Duplicate the style or create a “companion style”

When a userstyle is installed from a page, Stylus stores the url of that page internally along with the CSS style.

If that userstyle is then modified or even renamed, it will still maintain the original install location, but all automatic updates of the modified userstyle will be blocked to preserve local changes. A manual update of that userstyle is required to update, but be warned that an update will overwrite all changes, i.e. all modifications will be lost!

To get around this, either duplicate it or create a “companion style”.

Duplicate the style

The easiest way is to copy and paste the source code into a new, local style.

1. Copy the style
   • Open Dark-WhatsApp in the Stylus’ Editor
   • Copy the code directly from the edit window.
   • If not all content is automatically selected in the popped up window, use Select All (Ctrl+A), then Copy (Ctrl+C) the style.
2. Paste into a new style
   • Click “Write new style” in the Stylus’ Manager
   • Paste (Ctrl+V) the style into the code block area.
   • Give the style a name, then save.

Create a “companion style”

Please refer to the Stylus’ Writing Styles page for more details.

Getting Started

Style guide

• Limit to the K&R (KNF variation style) , and TAB SPACE INDENTATION (not more, and not less than 4 spaces).
  • Use EditorConfig plugin for your editor if at all possible, and let it take care of indentation.
• K&R - KNF Variation Example:

  element[attr='value'] {
  ····property: value;
  }
      

• Not Allman

  element[property='value']
  {
  ····property: value;
  }
      

• Strict space between the selector and the {:

  /* good */
  element[attr='value'] { }
  /* bad */
  element[attr='value']{ }
      

• Don’t go multi-line for simple one-liners

  /* good */
  element { property: value }
  /* bad */
  element {
      property: value;
  }
      

• 4 [Tab] Space indentation

  /* good */
  ····property: value;
  /* bad */
  ··property: value;
  --property: value;
  ·property: value;
      

• Use the provided mixins and variables

  You can find more about them at the top of the wa.user.styl file. Also, use stylus-lang documentation to get familar with Stylus-lang syntax and features.

  /* good */
  element { c: #eee 0 #333 }
  /* best */
  element { c: fg1 0 bg1 }
  /* bad */
  element {
    color: #eee,
    background-color: #333;
  }
      

• Try to wrap lines at around 80 characters.
• This style does not have a size limit, but:
  • If possible, reduce any added selectors. Remember that the style likely has an !important flag to override default styling, so a selector starting from the body isn’t always necessary.
  • If your CSS definition already exists within the style, do not add it again! Add your selector to the existing definition.
• Insert any new CSS selectors in any available slot before the style definition, or on a new line as needed.
• If you want to add a new userstyle variable/feature, please open an issue and discuss it with us first.
• Don’t include version bumps with your contribution, all releases are handled internally.
• If your pull request (PR) fixes an open issue or replaces another PR, include fixes/closes #issue-number in your commit message title. Read more on this

Contributing code

• Download, fork, or clone this repository
• Create and change into a new branch of your local Dark-WhatsApp repository
• Make the changes in the wa.user.styl file and verify that they fix the issue
• Push the changes to your branch
  • Make sure that your changes address only a single issue. Don’t combine multiple fixes for unrelated issues into a single pull request.
• Submit a PR

Testing changes of a local userstyle

• Open the wa.user.styl file in your browser, and make sure to have “live preview” checked for testing
  • If you’re using a Chromium-based browser, go to extensions, open details for Stylus, and enable “Allow access to file URLs”.
• Make some changes then save the file, and Stylus will do its magic