Made for Pulsar!

This package was written specifically for Pulsar and did not exist in the Atom package repository.

title-bar

Theme-aware custom title bar with integrated menu.

Features

Custom title bar: Window controls (minimize, maximize, close) with integrated menu bar.
Window control themes: Windows 11, macOS Tahoe, and GNOME styles.
Automatic theming: Detects colors from UI theme variables.
Keyboard navigation: Alt key mnemonics for menu access.
Auto-hide menu: Optional menu bar auto-hide.
Service: Allows other packages to add custom elements to the title bar.

Installation

To install title-bar search for title-bar in the Install pane of the Pulsar settings or run ppm install title-bar. Alternatively, you can run ppm install asiloisad/pulsar-title-bar to install a package directly from the GitHub repository.

Commands

Commands available in atom-workspace:

title-bar:toggle: toggle title bar visibility.

Service

The package provides a title-bar service for other packages to add custom elements to the control area (left of window buttons).

Consuming the service

Add to your package.json:

{
  "consumedServices": {
    "title-bar": {
      "versions": {
        "^1.0.0": "consumeTitleBar"
      }
    }
  }
}

Then implement the consumer in your package:

module.exports = {
  tile: null,

  consumeTitleBar(titleBar) {
    // Create your element
    const element = document.createElement("div");
    element.innerHTML = '<button>My Button</button>';

    // Add to title bar (lower priority = appears first)
    this.tile = titleBar.addItem({ item: element, priority: 100 });
  },

  deactivate() {
    this.tile?.destroy();
  }
};

API Methods

`addItem({ item, priority })`

Adds an element to the control tiles area.

item - DOM element to add
priority - Number determining order (lower = left, higher = right)
Returns a Tile object

`getTiles()`

Returns an array of all current tiles.

Tile object

getItem() - Returns the DOM element
getPriority() - Returns the priority number
destroy() - Removes the tile from the title bar

Styling

The service does not apply any styles to your elements. You are responsible for styling your own elements in your package's stylesheet. The container uses display: flex with align-items: center.

Customization

The style can be adjusted according to user preferences in the styles.less file:

e.g. layout variables:

:root {
  --title-bar-height: 32px;           // Title bar height
  --title-bar-control-width: 46px;    // Window control button width
  --title-bar-icon-size: 24px;        // Pulsar icon size
  --title-bar-icon-margin: 8px;       // Pulsar icon left margin
}

e.g. menu variables:

:root {
  --title-bar-menu-font-size: 12px;       // Menu label font size
  --title-bar-menu-item-height: 28px;     // Menu item height
  --title-bar-menu-item-padding: 12px;    // Menu item horizontal padding
  --title-bar-menu-item-margin: 4px;      // Menu item margin
  --title-bar-menu-item-radius: 4px;      // Menu item border radius
  --title-bar-menu-box-radius: 8px;       // Menu dropdown border radius
  --title-bar-menu-box-min-width: 200px;  // Menu dropdown minimum width
  --title-bar-menu-label-padding: 8px;    // Menu label padding
  --title-bar-menu-label-radius: 4px;     // Menu label hover border radius
}

e.g. title variables:

:root {
  --title-bar-title-font-size: 12px;  // Window title font size
}

e.g. transition variables:

:root {
  --title-bar-transition-fast: 0.05s;    // Fast transitions (menu items)
  --title-bar-transition-normal: 0.1s;   // Normal transitions (buttons)
  --title-bar-transition-slow: 0.15s;    // Slow transitions (menu labels)
}

e.g. theme colors:

:root {
  // Windows 11 close button
  --title-bar-close-hover-bg: #c42b1c;
  --title-bar-close-hover-color: #fff;

  // macOS Tahoe traffic lights
  --title-bar-macos-close: #ff5f57;
  --title-bar-macos-minimize: #febc2e;
  --title-bar-macos-maximize: #28c840;
  --title-bar-macos-blurred: #ddd;

  // GNOME/Adwaita
  --title-bar-gnome-button-hover-bg: fade(@text-color, 10%);
  --title-bar-gnome-button-active-bg: fade(@text-color, 15%);
  --title-bar-gnome-close-hover-bg: #c01c28;
  --title-bar-gnome-close-hover-color: #fff;
}

e.g. larger title bar:

:root {
  --title-bar-height: 40px;
  --title-bar-menu-item-height: 32px;
  --title-bar-title-font-size: 14px;
}

Contributing

Got ideas to make this package better, found a bug, or want to help add new features? Just drop your thoughts on GitHub — any feedback's welcome!