simple-bar

https://www.jeantinland.com/toolbox/simple-bar/documentation
Admin
simple-bar is a macOS menu bar replacement that allows you to customize your Mac's menu bar with...
Tokens:11,403
Snippets:106
Trust Score:5.8
Update:10 months ago
Show doc for...
Tokens:
Raw
### Install and Authenticate GitHub CLI

Source: https://www.jeantinland.com/toolbox/simple-bar/documentation/github

This snippet shows how to install the GitHub CLI using Homebrew and authenticate with your GitHub account. Ensure the GitHub CLI is installed and authenticated before using the widget.

```shell
# Installs the GitHub CLI using Homebrew
brew install gh

# Authenticate with gh
gh auth login
```

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

### Clone simple-bar Widget Repository

Source: https://www.jeantinland.com/toolbox/simple-bar/documentation/installation

This command clones the simple-bar repository into the Übersicht widgets directory. Ensure the cloned folder is named '_simple-bar' for the widget to function correctly.

```bash
$ git clone https://github.com/Jean-Tinland/simple-bar $HOME/Library/Application\ Support/Übersicht/widgets/simple-bar
```

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

### Example Command/Script Path for Custom Widget

Source: https://www.jeantinland.com/toolbox/simple-bar/documentation/custom-widgets

This snippet demonstrates a basic command to be executed as a widget's script path. It shows a simple 'echo' command for displaying text. This can be replaced with any executable command or script path.

```shell
echo "Hello world!"
```

```shell
bash ~/my-script.sh
```

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

### Personalize all simple-bar theme variables with CSS

Source: https://www.jeantinland.com/toolbox/simple-bar/documentation/custom-styles

This comprehensive CSS example shows how to override all available simple-bar theme variables. It provides control over colors, fonts, sizes, spacing, and visual effects, enabling complete theme customization.

```css
:root {
  --main: #1b222d;
  --main-alt: #98a8c5;
  --minor: #39465e;
  --accent: var(--yellow);
  --red: #e78482;
  --green: #8fc8BB;
  --yellow: #ffd484;
  --orange: #ffb374;
  --blue: #6db3cE;
  --magenta: #ad82cB;
  --cyan: #7eddde;
  --black: #1b222d;
  --white: #fff;
  --foreground: var(--white);
  --background: var(--main);
  --transparent-dark: rgba(0, 0, 0, 0.05);
  --font: "JetBrains Mono", Monaco, Menlo, monospace;
  --font-size: 11px;
  --bar-height: 34px;
  --bar-radius: 6px;
  --bar-border: 0px solid transparent;
  --bar-inner-margin: 3px;
  --item-max-width: 160px;
  --item-radius: 5px;
  --item-inner-margin: 3px 7px;
  --item-outer-margin: 0 0 0 5px;
  --hover-ring: 0 0 0 2px rgba(255, 255, 255, 0.75);
  --focus-ring: 0 0 0 2px rgb(255, 255, 255);
  --light-shadow:0 5px 10px rgba(0, 0, 0, 0.24);
  --foreground-shadow: 0 0 0 1px var(--foreground);
  --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --click-effect: rgba(255, 255, 255, 0.3);
}
```

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

### Customize simple-bar spacing and border radius using CSS variables

Source: https://www.jeantinland.com/toolbox/simple-bar/documentation/custom-styles

This example demonstrates how to adjust the visual spacing and rounded corners within simple-bar widgets by overriding CSS variables. It allows for fine-grained control over element dimensions and margins.

```css
:root {
  --bar-height: 40px;
  --bar-radius: 12px;
  --item-radius: 8px;
  --bar-inner-margin: 6px ;
  --item-inner-margin: 3px 12px;
  --item-outer-margin: 0 0 0 6px;
}
```

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

### Default Simple-Bar JSON Configuration

Source: https://www.jeantinland.com/toolbox/simple-bar/documentation/settings

This JSON object represents the default configuration settings for the simple-bar application. It allows users to customize various aspects of the bar's appearance and functionality, including global settings, themes, display options for processes and spaces, and the behavior of individual widgets. Users can modify these settings before the first launch of simple-bar to tailor its behavior to their preferences.

```json
{
  "global": {
    "theme": "auto",
    "compactMode": false,
    "floatingBar": false,
    "noBarBg": false,
    "noColorInData": false,
    "bottomBar": false,
    "sideDecoration": false,
    "inlineSpacesOptions": false,
    "spacesBackgroundColorAsForeground": false,
    "widgetsBackgroundColorAsForeground": false,
    "widgetMaxWidth": "160px",
    "slidingAnimationPace": 4,
    "font": "JetBrains Mono, Monaco, Menlo, monospace",
    "fontSize": "11px",
    "yabaiPath": "/opt/homebrew/bin/yabai",
    "aerospacePath": "/opt/homebrew/bin/aerospace",
    "windowManager": "yabai",
    "shell": "sh",
    "terminal": "Terminal",
    "disableNotifications": false,
    "enableMissives": false,
    "enableServer": false,
    "serverSocketPort": 7777,
    "yabaiServerRefresh": false,
    "aerospaceServerRefresh": false,
    "flashspaceServerRefresh": false
  },
  "themes": {
    "lightTheme": "NightShiftLight",
    "darkTheme": "NightShiftDark",
    "colorMain": "",
    "colorMainAlt": "",
    "colorMinor": "",
    "colorAccent": "",
    "colorRed": "",
    "colorGreen": "",
    "colorYellow": "",
    "colorOrange": "",
    "colorBlue": "",
    "colorMagenta": "",
    "colorCyan": "",
    "colorBlack": "",
    "colorWhite": "",
    "colorForeground": "",
    "colorBackground": ""
  },
  "process": {
    "showOnDisplay": "",
    "displayOnlyCurrent": false,
    "centered": false,
    "showCurrentSpaceMode": false,
    "hideWindowTitle": false,
    "displayOnlyIcon": false,
    "expandAllProcesses": false,
    "displaySkhdMode": false,
    "displayStackIndex": true,
    "displayOnlyCurrentStack": false
  },
  "spacesDisplay": {
    "showOnDisplay": "",
    "exclusions": "",
    "titleExclusions": "",
    "spacesExclusions": "",
    "exclusionsAsRegex": false,
    "displayAllSpacesOnAllScreens": false,
    "hideDuplicateAppsInSpaces": false,
    "displayStickyWindowsSeparately": false,
    "hideCreateSpaceButton": false,
    "hideEmptySpaces": false,
    "showOptionsOnHover": true,
    "switchSpacesWithoutYabai": false,
    "showOnlyFlashspaceSpaceIndex": false,
    "hideFlashspaceAppIcons": false
  },
  "widgets": {
    "processWidget": true,
    "weatherWidget": false,
    "netstatsWidget": false,
    "cpuWidget": false,
    "gpuWidget": false,
    "memoryWidget": false,
    "batteryWidget": true,
    "wifiWidget": true,
    "vpnWidget": false,
    "zoomWidget": false,
    "soundWidget": true,
    "micWidget": false,
    "dateWidget": true,
    "timeWidget": true,
    "keyboardWidget": false,
    "spotifyWidget": true,
    "cryptoWidget": false,
    "stockWidget": false,
    "youtubeMusicWidget": false,
    "musicWidget": true,
    "mpdWidget": false,
    "browserTrackWidget": false
  },
  "weatherWidgetOptions": {
    "refreshFrequency": 1800000,
    "showOnDisplay": "",
    "unit": "C",
    "hideLocation": false,
    "hideGradient": false,
    "customLocation": ""
  },
  "netstatsWidgetOptions": {
    "refreshFrequency": 2000,
    "showOnDisplay": "",
    "displayAsGraph": false
  },
  "cpuWidgetOptions": {
    "refreshFrequency": 2000,
    "showOnDisplay": "",
    "displayAsGraph": false,
    "cpuMonitorApp": "Activity Monitor"
  },
  "gpuWidgetOptions": {
    "refreshFrequency": 3000,
    "showOnDisplay": "",
    "displayAsGraph": false,
    "gpuMacmonBinaryPath": "/opt/homebrew/bin/macmon"
  },
  "memoryWidgetOptions": {
    "refreshFrequency": 4000,
    "showOnDisplay": "",
    "memoryMonitorApp": "Activity Monitor"
  },
  "batteryWidgetOptions": {
    "refreshFrequency": 10000,
    "showOnDisplay": "",
    "toggleCaffeinateOnClick": true,
    "caffeinateOption": ""
  },
  "networkWidgetOptions": {
    "refreshFrequency": 20000,
    "showOnDisplay": "",
    "networkDevice": "en0",
    "hideWifiIfDisabled": false,
    "toggleWifiOnClick": false,
    "hideNetworkName": false
  },
  "vpnWidgetOptions": {
    "refreshFrequency": 8000,
    "showOnDisplay": "",
    "vpnConnectionName": "",
    "vpnShowConnectionName": false
  },
  "zoomWidgetOptions": {
    "refreshFrequency": 5000,
    "showOnDisplay": "",
    "showVideo": true,
    "showMic": true
  },
  "soundWidgetOptions": {
    "refreshFrequency": 20000,
    "showOnDisplay": ""
  },
  "micWidgetOptions": {
    "refreshFrequency": 20000,
    "showOnDisplay": ""
  },
  "dateWidgetOptions": {
    "refreshFrequency": 30000,
    "showOnDisplay": "",
    "shortDateFormat": true,
    "locale": "en-UK",
    "calendarApp": ""
  },
  "timeWidgetOptions": {
    "refreshFrequency": 1000,
    "showOnDisplay": "",
    "hour12": false,
    "dayProgress": true,
    "showSeconds": false
  },
  "keyboardWidgetOptions": {
    "refreshFrequency": 20000,
    "showOnDisplay": ""
  },
  "cryptoWidgetOptions": {
  }
}
```

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

### skhd Mode Indicator Configuration (Shell)

Source: https://www.jeantinland.com/toolbox/simple-bar/documentation/skhd-mode-indicator

This snippet demonstrates how to configure skhd to display different modes in the simple-bar. It involves defining modes with `on_enter` commands that call the `yabai-set-mode.sh` script, optionally specifying a color. The script caches the mode name and color for display in the simple-bar process widget. Ensure you have granted automation permissions for skhd to control ubersicht.

```shell
# ~/.skhdrc

# define a mode named "default". A mode named "default" will NOT be shown by simple-bar.
:: default : ~/.config/ubersicht/widgets/simple-bar/lib/scripts/yabai-set-mode.sh default

# define a mode named "tree" that will be colored blue
:: tree : ~/.config/ubersicht/widgets/simple-bar/lib/scripts/yabai-set-mode.sh tree blue

# define a mode called "binding" (in skhd) that will display in simple-bar as "binds"
:: binding : ~/.config/ubersicht/widgets/simple-bar/lib/scripts/yabai-set-mode.sh binds green
```

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

### Map Process to Icon (JavaScript)

Source: https://www.jeantinland.com/toolbox/simple-bar/documentation/add-icons

This snippet shows how to associate an application's process name with its corresponding icon component. This mapping is crucial for simple-bar to display the correct icon for each running application.

```javascript
import * as Icons from "./components/icons/icons.jsx";

export const appIcons = {
  'Android Messages': Icons.AndroidMessages,
  Caprine: Icons.Caprine,
  Code: Icons.Code,
  Default: Icons.Default,
  Figma: Icons.Figma,
  'Google Chrome': Icons.GoogleChrome,
  Music: Icons.Music,
  'Sequel Pro': Icons.SequelPro,
  Skype: Icons.Skype,
  Slack: Icons.Slack,
  Zeplin: Icons.Zeplin
}
```

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

### Refresh simple-bar on Workspace Change with FlashSpace

Source: https://www.jeantinland.com/toolbox/simple-bar/documentation/flashspace

This script uses osascript to trigger a refresh of the simple-bar widget when integrated with FlashSpace. Ensure 'Enable Integrations' is active in FlashSpace settings and this command is added to 'Scripts To Run'. This enables refresh on App Change, Workspace Change, and Profile Change.

```shell
osascript -e 'tell application id "tracesOf.Uebersicht" to refresh widget id "simple-bar-index-jsx"'
```

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

### Restart Yabai Service

Source: https://www.jeantinland.com/toolbox/simple-bar/documentation/resolving-external-screen-overlapping-issue

This command restarts the yabai service to apply the new configuration changes made to the .yabairc file. It is a necessary step after modifying the configuration to ensure the settings take effect.

```shell
yabai --restart-service
```

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

### Configure Yabai for External Bar Padding

Source: https://www.jeantinland.com/toolbox/simple-bar/documentation/resolving-external-screen-overlapping-issue

This configuration line is added to the .yabairc file to create vertical padding for external bars. It specifies the padding for all spaces to accommodate elements like the simple-bar. The padding value can be adjusted based on user preference.

```shell
yabai -m config external_bar all:28:0
```

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

### Refresh Simple-Bar on Yabai Restart (.yabairc)

Source: https://www.jeantinland.com/toolbox/simple-bar/documentation/yabai

This command ensures that simple-bar is refreshed whenever yabai restarts, preventing potential freezing issues. It utilizes osascript to tell Uebersicht to refresh, which in turn re-enables simple-bar's signals. This is a crucial step for maintaining smooth operation.

```shell
osascript -e 'tell application id "tracesOf.Uebersicht" to refresh'
```

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

### Configure AeroSpace for simple-bar Refresh (TOML)

Source: https://www.jeantinland.com/toolbox/simple-bar/documentation/aerospace

Add these configurations to your `~/.aerospace.toml` file to ensure simple-bar refreshes on focus change and workspace change. This involves executing an AppleScript command to refresh the specified widget ID.

```toml
on-focus-changed = [
  "exec-and-forget osascript -e 'tell application id "tracesOf.Uebersicht" to refresh widget id "simple-bar-index-jsx"'",
]

exec-on-workspace-change = [
  '/bin/zsh',
  '-c',
  '/usr/bin/osascript -e "tell application id \"tracesOf.Uebersicht\" to refresh widget id \"simple-bar-index-jsx\""',
]
```

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

### Create SVG Icon Component (React)

Source: https://www.jeantinland.com/toolbox/simple-bar/documentation/add-icons

This snippet shows how to create a new React component for an SVG icon. It takes props and renders an SVG path within an Icon wrapper. Ensure the SVG has a `0 0 24 24` viewBox.

```jsx
import Icon from "../icon.jsx";

export default function Caprine(props) {
  return (
    <Icon {...props}>
      <path d="M12 0C5.37 0 0 4.97 0 11.11c0 3.5 1.74 6.62 4.47 8.65V24l4.09-2.24c1.09.3 2.24.46 3.44.46 6.63 0 12-4.97 12-11.1C24 4.97 18.63 0 12 0zm1.2 14.96l-3.06-3.26-5.97 3.26L10.73 8l3.13 3.26L19.76 8l-6.57 6.96z" />
    </Icon>
  );
}
```

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

### Lazy Load Icon Component (React)

Source: https://www.jeantinland.com/toolbox/simple-bar/documentation/add-icons

This snippet demonstrates how to lazily import and export a newly created icon component. This is typically done in the main icons file to manage component loading.

```jsx
export const Caprine = React.lazy(() => import("./library/caprine.jsx"));
```

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

### Change simple-bar background color

Source: https://www.jeantinland.com/toolbox/simple-bar/documentation/custom-styles

This CSS snippet targets the `.simple-bar` class to modify its background color. It's a direct way to alter the primary visual of the bar. This style is applied directly to the main bar element.

```css
.simple-bar {
  background-color: rgba(0, 0, 0, 0.5);
}
```
Tokens:
Raw