<commit_before>## Development Guide␊

* [Themes](#themes)
* [Internationalization](#internationalization)
  * [L10N](#l10n)
  * [RTL](#rtl)
* [Prefs](#prefs)
  * [Creating a new Feature Flag](#creating-a-new-feature-flag)
* [SVGs](#svgs)
* [ContextMenus](#context-menus)
* [Flow](#flow)
* [Logging](#logging)
* [Testing](#testing)
  * [Unit Tests](#unit-tests)
* [Linting](#linting)
  * [Lint JS](#lint-js)
  * [Lint CSS](#lint-css)
* [Performance](#performance)
* [Colors](#colors)
* [Configs](#configs)
* [Workers](#workers)
  * [Adding a Task](#adding-a-task)
* [Telemetry](#telemetry)
* [Contributing to other packages](#contributing-to-other-packages)
* [Errors](#errors)
* [Getting Help](#getting-help)

### Themes

The local debugger supports two themes:

| Light                                                                                                                                                                                                                                                           | Dark                                                                                                                                                                                                                                                           |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <a href="https://cloud.githubusercontent.com/assets/254562/20676302/4cb04a7c-b55d-11e6-855f-654395e2c26f.png"><img width="480" alt="light-theme" src="https://cloud.githubusercontent.com/assets/254562/20676302/4cb04a7c-b55d-11e6-855f-654395e2c26f.png"></a> | <a href="https://cloud.githubusercontent.com/assets/254562/20676304/4cbfbf16-b55d-11e6-9b84-3ee5595e36be.png"><img width="480" alt="dark-theme" src="https://cloud.githubusercontent.com/assets/254562/20676304/4cbfbf16-b55d-11e6-9b84-3ee5595e36be.png"></a> |

#### Set a theme

You can change the theme by going to the Settings panel in the launchpad and changing the theme to either `light` or `dark`.

#### Update a theme style

It is possible to add a theme specific selector. For example, this selector updates the dark debugger button colors:

```css
.theme-dark .command-bar > span {
  fill: var(--theme-body-color);
}
```

#### Theme colors

We use variable theme colors to standardize the colors inside of devtools. A good way to find a color is to select another component with the inspector and see what color it uses. The colors can be found [here][colors].

[colors]: https://developer.mozilla.org/en-US/docs/Tools/DevToolsColors


### Internationalization

The Debugger supports two types of internationalization RTL (right to left) layout and L10N (localization).

#### L10N

[L10N][l10n] is a global module with two methods `getStr` and `getFormatStr`. The [docs][l10n-docs] include best practices for naming keys, localization notes, and other useful topics.

```js
L10N.getStr("scopes.header");
L10N.getFormatStr("editor.searchResults", index + 1, count);
```

Translated strings are added to the [debugger properties][debugger-properties] file.

#### RTL

RTL stands for right to left and is an important feature for arabic languages and hebrew. Here's what the debugger looks like right to left [screenshot][rtl-screenshot].
<commit_msg>update theme colors link<commit_after>## Development Guide␊

* [Themes](#themes)
* [Internationalization](#internationalization)
  * [L10N](#l10n)
  * [RTL](#rtl)
* [Prefs](#prefs)
  * [Creating a new Feature Flag](#creating-a-new-feature-flag)
* [SVGs](#svgs)
* [ContextMenus](#context-menus)
* [Flow](#flow)
* [Logging](#logging)
* [Testing](#testing)
  * [Unit Tests](#unit-tests)
* [Linting](#linting)
  * [Lint JS](#lint-js)
  * [Lint CSS](#lint-css)
* [Performance](#performance)
* [Colors](#colors)
* [Configs](#configs)
* [Workers](#workers)
  * [Adding a Task](#adding-a-task)
* [Telemetry](#telemetry)
* [Contributing to other packages](#contributing-to-other-packages)
* [Errors](#errors)
* [Getting Help](#getting-help)

### Themes

The local debugger supports two themes:

| Light                                                                                                                                                                                                                                                           | Dark                                                                                                                                                                                                                                                           |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <a href="https://cloud.githubusercontent.com/assets/254562/20676302/4cb04a7c-b55d-11e6-855f-654395e2c26f.png"><img width="480" alt="light-theme" src="https://cloud.githubusercontent.com/assets/254562/20676302/4cb04a7c-b55d-11e6-855f-654395e2c26f.png"></a> | <a href="https://cloud.githubusercontent.com/assets/254562/20676304/4cbfbf16-b55d-11e6-9b84-3ee5595e36be.png"><img width="480" alt="dark-theme" src="https://cloud.githubusercontent.com/assets/254562/20676304/4cbfbf16-b55d-11e6-9b84-3ee5595e36be.png"></a> |

#### Set a theme

You can change the theme by going to the Settings panel in the launchpad and changing the theme to either `light` or `dark`.

#### Update a theme style

It is possible to add a theme specific selector. For example, this selector updates the dark debugger button colors:

```css
.theme-dark .command-bar > span {
  fill: var(--theme-body-color);
}
```

#### Theme colors

We use variable theme colors to standardize the colors inside of devtools. A good way to find a color is to select another component with the inspector and see what color it uses. The colors can be found [here][colors].

[colors]: https://design.firefox.com/photon/visuals/color.html


### Internationalization

The Debugger supports two types of internationalization RTL (right to left) layout and L10N (localization).

#### L10N

[L10N][l10n] is a global module with two methods `getStr` and `getFormatStr`. The [docs][l10n-docs] include best practices for naming keys, localization notes, and other useful topics.

```js
L10N.getStr("scopes.header");
L10N.getFormatStr("editor.searchResults", index + 1, count);
```

Translated strings are added to the [debugger properties][debugger-properties] file.

#### RTL

RTL stands for right to left and is an important feature for arabic languages and hebrew. Here's what the debugger looks like right to left [screenshot][rtl-screenshot].

{'fraction_non_alphanumeric': 0.24582435344827586, 'fraction_numerical': 0.04283405172413793, 'mean_word_length': 1.575442247658689, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 17, 'https://': 10, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 52, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5253897', 'n_tokens_mistral': 2067, 'n_tokens_neox': 1814, 'n_words': 485}