### Install Zen from Flathub

Source: https://github.com/zen-browser/docs/blob/main/content/docs/guides/install-linux.mdx

Use this command to install the stable version of Zen from Flathub. The profile data will be stored in ~/.var/app/app.zen_browser.zen/zen/.

```bash
curl -fsSL https://github.com/zen-browser/updates-server/raw/refs/heads/main/install.sh | $SHELL
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/zen-browser/docs/blob/main/content/docs/contribute/docs/index.mdx

Install all the necessary packages for the documentation site using npm. This command reads the `package.json` file to fetch required dependencies.

```bash
npm install
```

--------------------------------

### Full Example of preferences.json

Source: https://github.com/zen-browser/docs/blob/main/content/docs/themes-store/themes-marketplace-preferences.mdx

A comprehensive example demonstrating multiple preference objects within a `preferences.json` file, including checkboxes, dropdowns, and string types with various configurations.

```json
[
  {
    "property": "mod.mymod.enable_dark_mode",
    "label": "Enable dark mode",
    "type": "checkbox",
    "defaultValue": true
  },
  {
    "property": "mod.mymod.background_color",
    "label": "Background color",
    "type": "dropdown",
    "placeholder": "Select a color",
    "defaultValue": "green",
    "options": [
      {
        "label": "Green",
        "value": "green"
      },
      {
        "label": "Blue",
        "value": "blue"
      }
    ]
  },
  {
    "property": "mod.mymod.show_bookmarks_bar",
    "label": "Show bookmarks bar",
    "type": "string",
    "disabledOn": ["macos"]
  }
]
```

--------------------------------

### Install Project Dependencies with npm

Source: https://github.com/zen-browser/docs/blob/main/content/docs/contribute/desktop/building.mdx

Installs all project dependencies listed in package.json using npm. This command is essential after cloning the repository.

```bash
npm i
```

--------------------------------

### Install Dependencies

Source: https://github.com/zen-browser/docs/blob/main/content/docs/contribute/www.mdx

Install all necessary project dependencies using pnpm. This ensures the project has the exact package versions specified in the lock file.

```bash
pnpm install
```

--------------------------------

### Preview Documentation Locally

Source: https://github.com/zen-browser/docs/blob/main/content/docs/contribute/docs/index.mdx

Start a local development server to preview the documentation site. The site will automatically reload on file changes. Access it at `http://localhost:3000`.

```bash
npm run dev
# or
pnpm dev
# or
yarn dev
```

--------------------------------

### Install Zen Twilight from Flathub

Source: https://github.com/zen-browser/docs/blob/main/content/docs/guides/install-linux.mdx

Use this command to install the latest development version of Zen (Twilight) from Flathub. This version is updated nightly and is suitable for testing new features and reporting bugs. The profile data will be stored in ~/.tarball-installations/zen-twilight.

```bash
curl -fsSL https://github.com/zen-browser/updates-server/raw/refs/heads/main/install-twilight.sh | $SHELL
```

--------------------------------

### Start Development Server

Source: https://github.com/zen-browser/docs/blob/main/content/docs/contribute/www.mdx

Launch a local development server that automatically reloads on code changes. This is used for active development and testing.

```bash
pnpm run dev
```

--------------------------------

### Install Debian-based Linux Dependencies

Source: https://github.com/zen-browser/docs/blob/main/content/docs/contribute/desktop/building.mdx

Installs essential build tools for Debian-based Linux distributions like Ubuntu. Ensure you have curl, python3, python3-pip, git, and sccache installed.

```bash
sudo apt update && sudo apt install curl python3 python3-pip git sccache
```

--------------------------------

### Dropdown Options Example

Source: https://github.com/zen-browser/docs/blob/main/content/docs/themes-store/themes-marketplace-preferences.mdx

Illustrates the structure for defining options within a dropdown preference, specifying the label and value for each choice.

```json
  "options": [
    {
      "label": "Light",
      "value": "light"
    },
    {
      "label": "Dark",
      "value": "dark"
    }
  ]
```

--------------------------------

### Dropdown Option Value Example

Source: https://github.com/zen-browser/docs/blob/main/content/docs/themes-store/themes-marketplace-preferences.mdx

Shows a valid example of an option object within a dropdown's `options` array, demonstrating correct label and value types.

```json
{
  "label": "Green",
  "value": "green" // valid string
}
```

--------------------------------

### Install Arch Linux Dependencies

Source: https://github.com/zen-browser/docs/blob/main/content/docs/contribute/desktop/building.mdx

Installs required packages for building on Arch Linux. This includes base-devel, git, curl, python, python-pip, libvips, and sccache.

```bash
sudo pacman -Syu --needed base-devel git curl python python-pip libvips sccache
```

--------------------------------

### Install Fedora Linux Dependencies

Source: https://github.com/zen-browser/docs/blob/main/content/docs/contribute/desktop/building.mdx

Installs necessary build tools for Fedora Linux. This command ensures python3, python3-pip, git, and sccache are available for the build process.

```bash
sudo dnf install python3 python3-pip git sccache
```

--------------------------------

### Combined Preferences JSON Example

Source: https://github.com/zen-browser/docs/blob/main/content/docs/themes-store/themes-marketplace-preferences.mdx

Includes both a checkbox for dark mode and a dropdown for background color in preferences.json.

```json
[
  {
    "property": "mod.mymod.enable_dark_mode",
    "label": "Enable dark mode",
    "type": "checkbox"
  },
  {
    "property": "mod.mymod.background_color",
    "label": "Background color",
    "type": "dropdown",
    "options": [
      {
        "label": "Green",
        "value": "green"
      },
      {
        "label": "Blue",
        "value": "blue"
      }
    ]
  }
]
```

--------------------------------

### Invalid Dropdown Option Value Example

Source: https://github.com/zen-browser/docs/blob/main/content/docs/themes-store/themes-marketplace-preferences.mdx

Highlights an invalid example for a dropdown option value, showing that only string or integer types are permitted.

```json
{
  "label": "Invalid option",
  "value": [] // invalid, only string/int are allowed
}
```

--------------------------------

### Set Xcode Path and Accept License on macOS

Source: https://github.com/zen-browser/docs/blob/main/content/docs/contribute/desktop/building.mdx

Configures the system to use the installed Xcode and accepts its license agreement. This is a crucial step for building on macOS.

```bash
sudo xcode-select --switch /Applications/Xcode.app
sudo xcodebuild -license
```

--------------------------------

### String Preference JSON Example

Source: https://github.com/zen-browser/docs/blob/main/content/docs/themes-store/themes-marketplace-preferences.mdx

Defines a string preference for background color, which will be transformed in CSS.

```json
{
  "property": "mod.mymod.background_color",
  "label": "Background color",
  "type": "string"
}
```

--------------------------------

### Dropdown Preference Example

Source: https://github.com/zen-browser/docs/blob/main/content/docs/themes-store/themes-marketplace-preferences.mdx

Defines a preference that allows users to select one option from a predefined list, suitable for settings with multiple choices.

```json
{
  "property": "mod.mymod.background_color",
  "label": "Background color",
  "type": "dropdown",
  "options": [
    {
      "label": "Green",
      "value": "green"
    },
    {
      "label": "Blue",
      "value": "blue"
    }
  ]
}
```

--------------------------------

### Example Preference Definition in YAML

Source: https://github.com/zen-browser/docs/blob/main/content/docs/contribute/desktop/code-structure-and-prefs.mdx

Defines a new preference with a name and a default boolean value. This format is used in YAML files within the 'prefs/' directory.

```yaml
- name: zen.workspaces.new-pref
  value: true
```

--------------------------------

### String Preference Example

Source: https://github.com/zen-browser/docs/blob/main/content/docs/themes-store/themes-marketplace-preferences.mdx

Defines a text input preference for users to enter custom string values, useful for free-form text or CSS properties.

```json
{
  "property": "mod.mymod.tab_padding",
  "label": "Set tab padding",
  "type": "string"
}
```

--------------------------------

### Checkbox Preference Example

Source: https://github.com/zen-browser/docs/blob/main/content/docs/themes-store/themes-marketplace-preferences.mdx

Defines a boolean preference for enabling or disabling a feature, typically used for toggles.

```json
{
  "property": "mod.mymod.enable_dark_mode",
  "label": "Enable dark mode",
  "type": "checkbox"
}
```

--------------------------------

### Apply CSS when Checkbox Preference is Enabled

Source: https://github.com/zen-browser/docs/blob/main/content/docs/themes-store/themes-marketplace-preferences.mdx

Use the `-moz-pref` media query in CSS to apply styles when a checkbox preference is enabled. This example targets the `mod.mymod.enable_dark_mode` preference.

```css
@media (-moz-pref("mod.mymod.enable_dark_mode")) {
  body {
    background-color: #000;
    color: #fff;
  }
}
```

--------------------------------

### Apply CSS when Checkbox Preference is Disabled

Source: https://github.com/zen-browser/docs/blob/main/content/docs/themes-store/themes-marketplace-preferences.mdx

Use the `not` operator with the `-moz-pref` media query in CSS to apply styles when a checkbox preference is disabled. This example targets the `mod.mymod.enable_dark_mode` preference.

```css
@media not (-moz-pref("mod.mymod.enable_dark_mode"));
```

--------------------------------

### Initialize and Bootstrap Zen Browser

Source: https://github.com/zen-browser/docs/blob/main/content/docs/contribute/desktop/building.mdx

Downloads additional files and prepares the build environment by performing necessary bootstrapping tasks. This command may appear inactive at times but is running in the background.

```bash
npm run init
```

--------------------------------

### Run the Zen Browser

Source: https://github.com/zen-browser/docs/blob/main/content/docs/contribute/desktop/building.mdx

Launches the browser after building, allowing you to see your changes in action.

```bash
npm start
```

--------------------------------

### Build the Project

Source: https://github.com/zen-browser/docs/blob/main/content/docs/contribute/www.mdx

Compile and process source files into a production-ready format. This command prepares the project for deployment or further testing.

```bash
pnpm run build
```

--------------------------------

### Manually Bootstrap Project

Source: https://github.com/zen-browser/docs/blob/main/content/docs/contribute/desktop/building.mdx

Execute this command if 'npm run init' fails to manually bootstrap the project.

```bash
npm run bootstrap
```

--------------------------------

### Create Custom Allowed Browsers File on Linux

Source: https://github.com/zen-browser/docs/blob/main/content/docs/guides/1password.mdx

Creates an empty file to list custom browsers allowed to integrate with 1Password on Linux.

```bash
sudo touch /etc/1password/custom_allowed_browsers
```

--------------------------------

### Build Documentation Site

Source: https://github.com/zen-browser/docs/blob/main/content/docs/contribute/docs/index.mdx

Build the static documentation site. This command is used to check for any errors before committing changes.

```bash
npm run build
```

--------------------------------

### Clone the Documentation Repository

Source: https://github.com/zen-browser/docs/blob/main/content/docs/contribute/docs/index.mdx

Clone the forked documentation repository to your local machine. Remember to replace `<your-username>` with your actual GitHub username.

```bash
git clone https://github.com/<your-username>/docs.git
cd docs
```

--------------------------------

### Initialize Git Submodules

Source: https://github.com/zen-browser/docs/blob/main/content/docs/contribute/desktop/building.mdx

Run this command if you encounter Git submodule errors after cloning the repository.

```bash
git submodule update --init --recursive
```

--------------------------------

### Build with Fewer Threads

Source: https://github.com/zen-browser/docs/blob/main/content/docs/contribute/desktop/building.mdx

If the build is stuck or freezing, try running it with fewer threads to resolve the issue.

```bash
npm run build -- --jobs 2
```

--------------------------------

### Perform a Clean Rebuild

Source: https://github.com/zen-browser/docs/blob/main/content/docs/contribute/desktop/building.mdx

Use this command if 'zen.exe' is not found after the build, ensuring a complete reset and rebuild.

```bash
npm run reset-ff && npm run init && npm run build
```

--------------------------------

### Add Zen Browser to Custom Allowed Browsers on Linux

Source: https://github.com/zen-browser/docs/blob/main/content/docs/guides/1password.mdx

Appends 'zen-bin' to the custom allowed browsers file, enabling 1Password integration for Zen Browser on Linux.

```bash
echo "zen-bin" | sudo tee -a /etc/1password/custom_allowed_browsers
```

--------------------------------

### Clone the Repository

Source: https://github.com/zen-browser/docs/blob/main/content/docs/contribute/www.mdx

Clone the Zen Browser website repository to your local machine. Replace `<your-username>` with your GitHub username.

```bash
git clone https://github.com/<your-username>/www.git
cd www
```

--------------------------------

### Create 1Password Config Directory on Linux

Source: https://github.com/zen-browser/docs/blob/main/content/docs/guides/1password.mdx

Creates the necessary directory for 1Password's custom configuration on Linux systems.

```bash
sudo mkdir /etc/1password
```

--------------------------------

### Faster UI Rebuilds

Source: https://github.com/zen-browser/docs/blob/main/content/docs/contribute/desktop/building.mdx

Use this command for faster rebuilds when changes are only in JavaScript. It skips unnecessary compilation steps.

```bash
npm run build:ui
```

--------------------------------

### Commit and Push Changes

Source: https://github.com/zen-browser/docs/blob/main/content/docs/contribute/www.mdx

Stage all changes, commit them following Conventional Commits, and push to your forked repository's main branch. Ensure commits are signed.

```bash
git add .
git commit -m "feat(www): add dark mode toggle"
git push origin main
```

--------------------------------

### Commit and Push Changes

Source: https://github.com/zen-browser/docs/blob/main/content/docs/contribute/docs/index.mdx

Stage all changes, commit them with a descriptive message, and push them to your forked repository's main branch.

```bash
git add .
git commit -m "Description of your changes"
git push origin main
```

--------------------------------

### Clone Zen Browser Repository

Source: https://github.com/zen-browser/docs/blob/main/content/docs/contribute/desktop/building.mdx

Clones the Zen Browser desktop repository with a shallow history (10 commits) to save disk space and download time. Navigates into the cloned directory.

```bash
git clone https://github.com/zen-browser/desktop.git --depth 10
cd desktop
```

--------------------------------

### Set Permissions for Custom Allowed Browsers File on Linux

Source: https://github.com/zen-browser/docs/blob/main/content/docs/guides/1password.mdx

Sets the correct ownership and permissions for the custom allowed browsers file to ensure proper functionality on Linux.

```bash
sudo chown root:root /etc/1password/custom_allowed_browsers && sudo chmod 755 /etc/1password/custom_allowed_browsers
```

--------------------------------

### Importing Fumadocs UI Components

Source: https://github.com/zen-browser/docs/blob/main/content/docs/contribute/docs/editing-with-vscode.mdx

Import specific components like Tabs and Steps from the 'fumadocs-ui' package to use them in your MDX files.

```typescript
import { Tabs, Tab } from 'fumadocs-ui/components/tabs';
import { Steps, Step } from 'fumadocs-ui/components/steps';
```

--------------------------------

### Enable Browser Developer Tools Settings

Source: https://github.com/zen-browser/docs/blob/main/content/docs/guides/live-editing.mdx

These settings are required to enable the Browser Developer Tools and to allow userChrome.css to function. Toggle these settings in about:config.

```text
devtools.debugger.remote-enabled
tools.chrome.enabled
toolkit.legacyUserProfileCustomizations.stylesheets
```

--------------------------------

### CSS for Dropdown Preferences

Source: https://github.com/zen-browser/docs/blob/main/content/docs/themes-store/themes-marketplace-preferences.mdx

Applies background and text colors based on the selected value from the 'background_color' dropdown preference using -moz-pref media queries.

```css
body {
  /* Green background */
  @media (-moz-pref("mod.mymod.background_color", "green")) {
    background-color: #008000;
    color: #000;
  }

  /* Blue background */
  @media (-moz-pref("mod.mymod.background_color", "blue")) {
    background-color: #0000ff;
    color: #fff;
  }
}
```

--------------------------------

### Enable Auto-Play PiP on Tab Switch

Source: https://github.com/zen-browser/docs/blob/main/content/docs/user-manual/pip.mdx

To enable videos to automatically play in a floating player when switching tabs, set the 'media.videocontrols.picture-in-picture.enable-when-switching-tabs.enabled' property to TRUE in about:config.

```config
media.videocontrols.picture-in-picture.enable-when-switching-tabs.enabled
```

--------------------------------

### Referencing Images in MDX

Source: https://github.com/zen-browser/docs/blob/main/content/docs/contribute/docs/editing-with-vscode.mdx

When adding images to MDX files, use the `/assets` path for references, not `/public/assets`.

```markdown
![Example Image](/assets/user-manual/image.png)
```

--------------------------------

### Combined CSS for Dark Mode and Dropdown Preferences

Source: https://github.com/zen-browser/docs/blob/main/content/docs/themes-store/themes-marketplace-preferences.mdx

Applies styles for dark mode via a checkbox preference and background color via a dropdown preference.

```css
/* Checkbox for dark mode */
@media (-moz-pref("mod.mymod.enable_dark_mode")) {
  body {
    background-color: #000;
    color: #fff;
  }
}

/* Dropdown for background color selection */
body {
  @media (-moz-pref("mod.mymod.background_color", "green")) {
    background-color: #008000;
    color: #000;
  }

  @media (-moz-pref("mod.mymod.background_color", "blue")) {
    background-color: #0000ff;
    color: #fff;
  }
}
```

--------------------------------

### Disable Preference on All Operating Systems

Source: https://github.com/zen-browser/docs/blob/main/content/docs/themes-store/themes-marketplace-preferences.mdx

Use the `disabledOn` property with all OS values to make a preference unavailable on all platforms.

```json
{
  "disabledOn": ["windows", "linux", "macos"]
}
```

--------------------------------

### Disable Preference on Windows and Linux

Source: https://github.com/zen-browser/docs/blob/main/content/docs/themes-store/themes-marketplace-preferences.mdx

Use the `disabledOn` property to specify that a preference should not be available on Windows and Linux operating systems.

```json
{
  "disabledOn": ["windows", "linux"]
}
```

--------------------------------

### Update American English Language Packs

Source: https://github.com/zen-browser/docs/blob/main/content/docs/contribute/desktop/building.mdx

Updates the 'en-US' localization files to ensure the latest translations and language resources are included in the build. This script is recommended to run before building.

```bash
python3 ./scripts/update_en_US_packs.py
```

--------------------------------

### Accessing a Boolean Preference in JavaScript

Source: https://github.com/zen-browser/docs/blob/main/content/docs/contribute/desktop/code-structure-and-prefs.mdx

Demonstrates how to retrieve a boolean preference value in JavaScript using the Services.prefs API. This is commonly used in Zen Browser's JavaScript modules to customize behavior based on user settings.

```javascript
const glanceEnabled = Services.prefs.getBoolPref('zen.glance.enabled', true);
```

--------------------------------

### CSS for String Preference

Source: https://github.com/zen-browser/docs/blob/main/content/docs/themes-store/themes-marketplace-preferences.mdx

Applies a background color using a CSS variable derived from a string preference. Note that dots in the property name are replaced with hyphens in CSS.

```css
.myClass {
  background-color: var(--mod-mymod-background_color);
}
```

--------------------------------

### Disable Preference on MacOS

Source: https://github.com/zen-browser/docs/blob/main/content/docs/themes-store/themes-marketplace-preferences.mdx

Use the `disabledOn` property to specify that a preference should not be available on macOS.

```json
{
  "disabledOn": ["macos"]
}
```

--------------------------------

### Disable Picture-in-Picture Globally

Source: https://github.com/zen-browser/docs/blob/main/content/docs/user-manual/pip.mdx

To disable Picture-in-Picture functionality entirely across Zen, navigate to about:config, search for 'media.videocontrols.picture-in-picture.enabled', and set its value to false.

```config
media.videocontrols.picture-in-picture.enabled
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.