mirror of
https://github.com/FelixKratz/SketchyBar
synced 2024-11-27 05:40:17 +00:00
23 lines
No EOL
44 KiB
HTML
23 lines
No EOL
44 KiB
HTML
<!doctype html>
|
||
<html lang="en" dir="ltr" class="docs-wrapper docs-doc-page docs-version-current plugin-docs plugin-id-default docs-doc-id-config/items">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<meta name="generator" content="Docusaurus v2.0.0-beta.18">
|
||
<title data-rh="true">Item Properties | SketchyBar</title><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://felixkratz.github.io//SketchyBar/config/items"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Item Properties | SketchyBar"><meta data-rh="true" name="description" content="Items and their properties"><meta data-rh="true" property="og:description" content="Items and their properties"><link data-rh="true" rel="icon" href="/SketchyBar/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://felixkratz.github.io//SketchyBar/config/items"><link data-rh="true" rel="alternate" href="https://felixkratz.github.io//SketchyBar/config/items" hreflang="en"><link data-rh="true" rel="alternate" href="https://felixkratz.github.io//SketchyBar/config/items" hreflang="x-default"><link rel="stylesheet" href="/SketchyBar/assets/css/styles.d31a9c85.css">
|
||
<link rel="preload" href="/SketchyBar/assets/js/runtime~main.0c574050.js" as="script">
|
||
<link rel="preload" href="/SketchyBar/assets/js/main.3bc8346e.js" as="script">
|
||
</head>
|
||
<body class="navigation-with-keyboard">
|
||
<script>!function(){function e(e){document.documentElement.setAttribute("data-theme",e)}var t=function(){var e=null;try{e=localStorage.getItem("theme")}catch(e){}return e}();null!==t?e(t):window.matchMedia("(prefers-color-scheme: dark)").matches?e("dark"):(window.matchMedia("(prefers-color-scheme: light)").matches,e("light"))}()</script><div id="__docusaurus">
|
||
<div role="region"><a href="#" class="skipToContent_ZgBM">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/SketchyBar/"><div class="navbar__logo"><img src="/SketchyBar/img/logo.svg" alt="SketchyBar Logo" class="themedImage_W2Cr themedImage--light_TfLj"><img src="/SketchyBar/img/logo.svg" alt="SketchyBar Logo" class="themedImage_W2Cr themedImage--dark_oUvU"></div><b class="navbar__title">SketchyBar</b></a></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/SketchyBar/features">Features</a><a class="navbar__item navbar__link" href="/SketchyBar/setup">Setup & Installation</a><a class="navbar__item navbar__link" href="/SketchyBar/config/bar">Configuration</a><a href="https://github.com/FelixKratz/SketchyBar" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"></a><div class="toggle_S7eR colorModeToggle_vKtC"><button class="clean-btn toggleButton_rCf9 toggleButtonDisabled_Pu9x" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_v35p"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_nQuB"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper"><div class="docPage_P2Lg"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_RiI4" type="button"></button><aside class="theme-doc-sidebar-container docSidebarContainer_rKC_"><div class="sidebar_RiAD"><nav class="menu thin-scrollbar menu_izAj"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/SketchyBar/features">Features</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/SketchyBar/setup">Setup</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret menu__link--active" aria-expanded="true" href="/SketchyBar/config/bar">Configuration</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/SketchyBar/config/bar">Bar Properties</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/SketchyBar/config/items">Item Properties</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/SketchyBar/config/components">Special Components</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/SketchyBar/config/popups">Popup Menus</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/SketchyBar/config/events">Events & Scripting</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/SketchyBar/config/querying">Querying Information</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/SketchyBar/config/types">Type Nomenclature</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/SketchyBar/config/tricks">Tips & Tricks</a></li></ul></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/SketchyBar/credits">Credits</a></li></ul></nav></div></aside><main class="docMainContainer_TCnq"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_DM6M"><div class="docItemContainer_vinB"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Xlws" aria-label="breadcrumbs"><ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList"><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/SketchyBar/">🏠</a></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item"><span class="breadcrumbs__link" itemprop="item name">Configuration</span><meta itemprop="position" content="1"></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link" itemprop="item name">Item Properties</span><meta itemprop="position" content="2"></li></ul></nav><div class="tocCollapsible_jdIR theme-doc-toc-mobile tocMobile_TmEX"><button type="button" class="clean-btn tocCollapsibleButton_Fzxq">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>Item Properties</h1></header><h2 class="anchor anchorWithStickyNavbar_mojV" id="items-and-their-properties">Items and their properties<a class="hash-link" href="#items-and-their-properties" title="Direct link to heading"></a></h2><p>Items are the main building blocks of sketchybar and can be configured in a number of ways. Items have the following basic structure:</p><p><img loading="lazy" alt="Item Structure" src="/SketchyBar/assets/images/bar_item-5cca16299fe8addecdacb3808b574cff.svg" width="499" height="473" class="img_E7b_"></p><h3 class="anchor anchorWithStickyNavbar_mojV" id="adding-items-to-sketchybar">Adding items to sketchybar<a class="hash-link" href="#adding-items-to-sketchybar" title="Direct link to heading"></a></h3><div class="codeBlockContainer_I0IT language-bash theme-code-block"><div class="codeBlockContent_wNvx" style="color:#bfc7d5;background-color:#292d3e"><pre tabindex="0" class="prism-code language-bash codeBlock_jd64 thin-scrollbar"><code class="codeBlockLines_mRuA"><span class="token-line" style="color:#bfc7d5"><span class="token plain">sketchybar --add item </span><span class="token operator" style="color:rgb(137, 221, 255)"><</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">></span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)"><</span><span class="token plain">position</span><span class="token operator" style="color:rgb(137, 221, 255)">></span><br></span></code></pre><button type="button" aria-label="Copy code to clipboard" title="Copy" class="copyButton_eDfN clean-btn"><span class="copyButtonIcons_W9eQ" aria-hidden="true"><svg class="copyButtonIcon_XEyF" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg class="copyButtonSuccessIcon_i9w9" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div><p>where the <code><name></code> should not contain whitespaces (or must be quoted), it can be used to further configure the item.
|
||
The <code><position></code> is the placement in the bar and can be either <em>left</em>, <em>right</em> or <em>center</em>. The items will appear in the bar in the order
|
||
in which they are added, but can be moved later on.</p><table><thead><tr><th><code><name></code></th><th><code><string></code></th></tr></thead><tbody><tr><td><code><position></code></td><td><code>left</code>, <code>right</code>, <code>center</code>, (<code>q</code>, <code>e</code> <a href="https://github.com/FelixKratz/SketchyBar/issues/120" target="_blank" rel="noopener noreferrer">#120</a>)</td></tr></tbody></table><h3 class="anchor anchorWithStickyNavbar_mojV" id="changing-item-properties">Changing item properties<a class="hash-link" href="#changing-item-properties" title="Direct link to heading"></a></h3><div class="codeBlockContainer_I0IT language-bash theme-code-block"><div class="codeBlockContent_wNvx" style="color:#bfc7d5;background-color:#292d3e"><pre tabindex="0" class="prism-code language-bash codeBlock_jd64 thin-scrollbar"><code class="codeBlockLines_mRuA"><span class="token-line" style="color:#bfc7d5"><span class="token plain">sketchybar --set </span><span class="token operator" style="color:rgb(137, 221, 255)"><</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">></span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)"><</span><span class="token plain">property</span><span class="token operator" style="color:rgb(137, 221, 255)">>=</span><span class="token operator" style="color:rgb(137, 221, 255)"><</span><span class="token plain">value</span><span class="token operator" style="color:rgb(137, 221, 255)">></span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">..</span><span class="token plain">. </span><span class="token operator" style="color:rgb(137, 221, 255)"><</span><span class="token plain">property</span><span class="token operator" style="color:rgb(137, 221, 255)">>=</span><span class="token operator" style="color:rgb(137, 221, 255)"><</span><span class="token plain">value</span><span class="token operator" style="color:rgb(137, 221, 255)">></span><br></span></code></pre><button type="button" aria-label="Copy code to clipboard" title="Copy" class="copyButton_eDfN clean-btn"><span class="copyButtonIcons_W9eQ" aria-hidden="true"><svg class="copyButtonIcon_XEyF" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg class="copyButtonSuccessIcon_i9w9" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div><p>where the <em>name</em> is used to target the item with this name.
|
||
(The <em>name</em> can be a regular expression inside of two '/': <em>/\<regex<!-- -->><!-- -->/</em>)</p><p>A list of properties available to the <em>set</em> command is listed below (components might have additional properties, see the respective component section for them):</p><h3 class="anchor anchorWithStickyNavbar_mojV" id="geometry-properties">Geometry Properties<a class="hash-link" href="#geometry-properties" title="Direct link to heading"></a></h3><table><thead><tr><th align="center"><property<!-- -->></th><th align="center"><value<!-- -->></th><th align="center">default</th><th>description</th></tr></thead><tbody><tr><td align="center"><code>position</code></td><td align="center"><code>left</code>, <code>right</code>, <code>center</code></td><td align="center"></td><td>Position of the item in the bar</td></tr><tr><td align="center"><code>associated_space</code></td><td align="center"><code><positive_integer list></code></td><td align="center"><code>0</code></td><td>Spaces to show this item on</td></tr><tr><td align="center"><code>associated_display</code></td><td align="center"><code><positive_integer list></code></td><td align="center"><code>0</code></td><td>Displays to show this item on</td></tr><tr><td align="center"><code>ignore_association</code></td><td align="center"><code><boolean></code></td><td align="center"><code>off</code></td><td>Ignores all space / display associations while on (Only on HEAD)</td></tr><tr><td align="center"><code>y_offset</code></td><td align="center"><code><integer></code></td><td align="center"><code>0</code></td><td>Vertical offset applied to the item</td></tr><tr><td align="center"><code>width</code></td><td align="center"><code><positive_integer></code> or <code>dynamic</code></td><td align="center"><code>dynamic</code></td><td>Makes the <em>item</em> use a fixed <em>width</em> given in points</td></tr><tr><td align="center"><code>align</code></td><td align="center"><code>center</code>, <code>left</code>, <code>right</code></td><td align="center"><code>left</code></td><td>Aligns the <code>item</code> content in its container when it has a fixed <code>width</code> larger than the content width</td></tr></tbody></table><h3 class="anchor anchorWithStickyNavbar_mojV" id="drawing-properties">Drawing properties<a class="hash-link" href="#drawing-properties" title="Direct link to heading"></a></h3><table><thead><tr><th align="center"><property<!-- -->></th><th align="center"><value<!-- -->></th><th align="center">default</th><th>description</th></tr></thead><tbody><tr><td align="center"><code>drawing</code></td><td align="center"><code><boolean></code></td><td align="center"><code>on</code></td><td>If the item should be drawn into the bar</td></tr><tr><td align="center"><code>lazy</code></td><td align="center"><code><boolean></code></td><td align="center"><code>off</code></td><td>Changes do not trigger a redraw of the bar, item is refreshed when the bar is redrawn anyways</td></tr></tbody></table><h3 class="anchor anchorWithStickyNavbar_mojV" id="icon-properties">Icon properties<a class="hash-link" href="#icon-properties" title="Direct link to heading"></a></h3><table><thead><tr><th align="center"><property<!-- -->></th><th align="center"><value<!-- -->></th><th align="center">default</th><th>description</th></tr></thead><tbody><tr><td align="center"><code>icon</code></td><td align="center"><code><string></code></td><td align="center"></td><td>Icon of the item</td></tr><tr><td align="center"><code>icon.<text_property></code></td><td align="center"></td><td align="center"></td><td>Icons support all <em>text</em> properties</td></tr></tbody></table><h3 class="anchor anchorWithStickyNavbar_mojV" id="label-properties">Label properties<a class="hash-link" href="#label-properties" title="Direct link to heading"></a></h3><table><thead><tr><th align="center"><property<!-- -->></th><th align="center"><value<!-- -->></th><th align="center">default</th><th>description</th></tr></thead><tbody><tr><td align="center"><code>label</code></td><td align="center"><code><string></code></td><td align="center"></td><td>Label of the item</td></tr><tr><td align="center"><code>label.<text_property></code></td><td align="center"></td><td align="center"></td><td>Labels support all <em>text</em> properties</td></tr></tbody></table><h3 class="anchor anchorWithStickyNavbar_mojV" id="scripting-properties">Scripting properties<a class="hash-link" href="#scripting-properties" title="Direct link to heading"></a></h3><table><thead><tr><th align="center"><property<!-- -->></th><th align="center"><value<!-- -->></th><th align="center">default</th><th>description</th></tr></thead><tbody><tr><td align="center"><code>script</code></td><td align="center"><code><path></code>, <code><string></code></td><td align="center"></td><td>Script to run on an <code>event</code></td></tr><tr><td align="center"><code>click_script</code></td><td align="center"><code><path></code>, <code><string></code></td><td align="center"></td><td>Script to run on a mouse click (Difference to <code>mouse.clicked</code> event: <a href="https://github.com/FelixKratz/SketchyBar/discussions/109" target="_blank" rel="noopener noreferrer">#109</a>)</td></tr><tr><td align="center"><code>update_freq</code></td><td align="center"><code><positive_integer></code></td><td align="center"><code>1</code></td><td>Time in seconds between routine script executions</td></tr><tr><td align="center"><code>updates</code></td><td align="center"><code><boolean></code>, <code>when_shown</code></td><td align="center"><code>on</code></td><td>If and when the item updates e.g. via script execution</td></tr></tbody></table><h3 class="anchor anchorWithStickyNavbar_mojV" id="text-properties">Text properties<a class="hash-link" href="#text-properties" title="Direct link to heading"></a></h3><table><thead><tr><th align="center"><text_property<!-- -->></th><th align="center"><value<!-- -->></th><th align="center">default</th><th>description</th></tr></thead><tbody><tr><td align="center"><code>drawing</code></td><td align="center"><code><boolean></code></td><td align="center"><code>on</code></td><td>If the text is rendered</td></tr><tr><td align="center"><code>highlight</code></td><td align="center"><code><boolean></code></td><td align="center"><code>off</code></td><td>If the text uses the <code>highlight_color</code> or the regular <code>color</code></td></tr><tr><td align="center"><code>color</code></td><td align="center"><code><argb_hex></code></td><td align="center"><code>0xffffffff</code></td><td>Color used to render the text</td></tr><tr><td align="center"><code>highlight_color</code></td><td align="center"><code><argb_hex></code></td><td align="center"><code>0xff000000</code></td><td>Highlight color of the text (e.g. for active space icon</td></tr><tr><td align="center"><code>padding_left</code></td><td align="center"><code><integer></code></td><td align="center"><code>0</code></td><td>Padding to the left of the <code>text</code></td></tr><tr><td align="center"><code>padding_right</code></td><td align="center"><code><integer></code></td><td align="center"><code>0</code></td><td>Padding to the right of the <code>text</code></td></tr><tr><td align="center"><code>y_offset</code></td><td align="center"><code><integer></code></td><td align="center"><code>0</code></td><td>Vertical offset applied to the <code>text</code></td></tr><tr><td align="center"><code>font</code></td><td align="center"><code><family>:<type>:<size></code></td><td align="center"><code>Hack Nerd Font:Bold:14.0</code></td><td>The font to be used for the <code>text</code></td></tr><tr><td align="center"><code>width</code></td><td align="center"><code><positive_integer></code> or <code>dynamic</code></td><td align="center"><code>dynamic</code></td><td>Makes the <code>text</code> use a fixed <code>width</code> given in points</td></tr><tr><td align="center"><code>align</code></td><td align="center"><code>center</code>, <code>left</code>, <code>right</code></td><td align="center"><code>left</code></td><td>Aligns the <code>text</code> in its container when it has a fixed <code>width</code> larger than the content width</td></tr><tr><td align="center"><code>background.<background_property></code></td><td align="center"></td><td align="center"></td><td>Texts support all <code>background</code> properties</td></tr><tr><td align="center"><code>shadow.<shadow_property></code></td><td align="center"></td><td align="center"></td><td>Texts support all <code>shadow</code> properties</td></tr></tbody></table><h3 class="anchor anchorWithStickyNavbar_mojV" id="background-properties">Background properties<a class="hash-link" href="#background-properties" title="Direct link to heading"></a></h3><table><thead><tr><th align="center"><background_property<!-- -->></th><th align="center"><value<!-- -->></th><th align="center">default</th><th>description</th></tr></thead><tbody><tr><td align="center"><code>drawing</code></td><td align="center"><code><boolean></code></td><td align="center"><code>off</code></td><td>If the <code>background</code> should be rendered</td></tr><tr><td align="center"><code>color</code></td><td align="center"><code><argb_hex></code></td><td align="center"><code>0x00000000</code></td><td>Fill color of the <code>background</code></td></tr><tr><td align="center"><code>border_color</code></td><td align="center"><code><argb_hex></code></td><td align="center"><code>0x00000000</code></td><td>Color of the backgrounds border</td></tr><tr><td align="center"><code>border_width</code></td><td align="center"><code><positive_integer></code></td><td align="center"><code>0</code></td><td>Width of the background border</td></tr><tr><td align="center"><code>height</code></td><td align="center"><code><positive_integer></code></td><td align="center"><code>0</code></td><td>Overrides the <code>height</code> of the background</td></tr><tr><td align="center"><code>corner_radius</code></td><td align="center"><code><positive_integer></code></td><td align="center"><code>0</code></td><td>Corner radius of the background</td></tr><tr><td align="center"><code>padding_left</code></td><td align="center"><code><integer></code></td><td align="center"><code>0</code></td><td>Padding to the left of the <code>background</code></td></tr><tr><td align="center"><code>padding_right</code></td><td align="center"><code><integer></code></td><td align="center"><code>0</code></td><td>Padding to the right of the <code>background</code></td></tr><tr><td align="center"><code>y_offset</code></td><td align="center"><code><integer></code></td><td align="center"><code>0</code></td><td>Vertical offset applied to the <code>background</code></td></tr><tr><td align="center"><code>image</code></td><td align="center"><code><path></code></td><td align="center"></td><td>The path to a png or jpeg image file</td></tr><tr><td align="center"><code>image.<image_property></code></td><td align="center"></td><td align="center"></td><td>Backgrounds support all <code>image</code> properties</td></tr><tr><td align="center"><code>shadow.<shadow_property></code></td><td align="center"></td><td align="center"></td><td>Backgrounds support all <code>shadow</code> properties</td></tr></tbody></table><h3 class="anchor anchorWithStickyNavbar_mojV" id="image-properties">Image properties<a class="hash-link" href="#image-properties" title="Direct link to heading"></a></h3><table><thead><tr><th align="center"><image_property<!-- -->></th><th align="center"><value<!-- -->></th><th align="center">default</th><th>description</th></tr></thead><tbody><tr><td align="center"><code>drawing</code></td><td align="center"><code><boolean></code></td><td align="center"><code>off</code></td><td>If the image should draw</td></tr><tr><td align="center"><code>scale</code></td><td align="center"><code><positive_integer></code></td><td align="center"><code>0</code></td><td>The scale factor that should be applied to the image</td></tr></tbody></table><h3 class="anchor anchorWithStickyNavbar_mojV" id="shadow-properties">Shadow properties<a class="hash-link" href="#shadow-properties" title="Direct link to heading"></a></h3><table><thead><tr><th align="center"><shadow_property<!-- -->></th><th align="center"><value<!-- -->></th><th align="center">default</th><th>description</th></tr></thead><tbody><tr><td align="center"><code>drawing</code></td><td align="center"><code><boolean></code></td><td align="center"><code>off</code></td><td>If the shadow should be drawn</td></tr><tr><td align="center"><code>color</code></td><td align="center"><code><argb_hex></code></td><td align="center"><code>0xff000000</code></td><td>Color of the shadow</td></tr><tr><td align="center"><code>angle</code></td><td align="center"><code><positive_integer></code></td><td align="center"><code>30</code></td><td>Angle of the shadow</td></tr><tr><td align="center"><code>distance</code></td><td align="center"><code><positive_integer></code></td><td align="center"><code>5</code></td><td>Distance of the shadow</td></tr></tbody></table><h3 class="anchor anchorWithStickyNavbar_mojV" id="changing-the-default-values-for-all-further-items">Changing the default values for all further items<a class="hash-link" href="#changing-the-default-values-for-all-further-items" title="Direct link to heading"></a></h3><p>It is possible to change the <em>defaults</em> at every point in the configuration. All item created <em>after</em> changing the defaults will
|
||
inherit these properties from the default item.</p><div class="codeBlockContainer_I0IT language-bash theme-code-block"><div class="codeBlockContent_wNvx" style="color:#bfc7d5;background-color:#292d3e"><pre tabindex="0" class="prism-code language-bash codeBlock_jd64 thin-scrollbar"><code class="codeBlockLines_mRuA"><span class="token-line" style="color:#bfc7d5"><span class="token plain">sketchybar --default </span><span class="token operator" style="color:rgb(137, 221, 255)"><</span><span class="token plain">property</span><span class="token operator" style="color:rgb(137, 221, 255)">>=</span><span class="token operator" style="color:rgb(137, 221, 255)"><</span><span class="token plain">value</span><span class="token operator" style="color:rgb(137, 221, 255)">></span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">..</span><span class="token plain">. </span><span class="token operator" style="color:rgb(137, 221, 255)"><</span><span class="token plain">property</span><span class="token operator" style="color:rgb(137, 221, 255)">>=</span><span class="token operator" style="color:rgb(137, 221, 255)"><</span><span class="token plain">value</span><span class="token operator" style="color:rgb(137, 221, 255)">></span><br></span></code></pre><button type="button" aria-label="Copy code to clipboard" title="Copy" class="copyButton_eDfN clean-btn"><span class="copyButtonIcons_W9eQ" aria-hidden="true"><svg class="copyButtonIcon_XEyF" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg class="copyButtonSuccessIcon_i9w9" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div><p>this works for all item properties.</p><h3 class="anchor anchorWithStickyNavbar_mojV" id="item-reordering">Item Reordering<a class="hash-link" href="#item-reordering" title="Direct link to heading"></a></h3><p>It is possible to reorder items by invoking</p><div class="codeBlockContainer_I0IT language-bash theme-code-block"><div class="codeBlockContent_wNvx" style="color:#bfc7d5;background-color:#292d3e"><pre tabindex="0" class="prism-code language-bash codeBlock_jd64 thin-scrollbar"><code class="codeBlockLines_mRuA"><span class="token-line" style="color:#bfc7d5"><span class="token plain">sketchybar --reorder </span><span class="token operator" style="color:rgb(137, 221, 255)"><</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">></span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">..</span><span class="token plain">. </span><span class="token operator" style="color:rgb(137, 221, 255)"><</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">></span><br></span></code></pre><button type="button" aria-label="Copy code to clipboard" title="Copy" class="copyButton_eDfN clean-btn"><span class="copyButtonIcons_W9eQ" aria-hidden="true"><svg class="copyButtonIcon_XEyF" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg class="copyButtonSuccessIcon_i9w9" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div><p>where a new order can be supplied for arbitrary items. Only the specified items get reordered, by swapping them around, everything else stays the same. E.g. if you want to swap two items
|
||
simply call</p><div class="codeBlockContainer_I0IT language-bash theme-code-block"><div class="codeBlockContent_wNvx" style="color:#bfc7d5;background-color:#292d3e"><pre tabindex="0" class="prism-code language-bash codeBlock_jd64 thin-scrollbar"><code class="codeBlockLines_mRuA"><span class="token-line" style="color:#bfc7d5"><span class="token plain">sketchybar --reorder </span><span class="token operator" style="color:rgb(137, 221, 255)"><</span><span class="token plain">item </span><span class="token operator file-descriptor important" style="color:rgb(137, 221, 255)">1</span><span class="token operator" style="color:rgb(137, 221, 255)">></span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)"><</span><span class="token plain">item </span><span class="token operator file-descriptor important" style="color:rgb(137, 221, 255)">2</span><span class="token operator" style="color:rgb(137, 221, 255)">></span><br></span></code></pre><button type="button" aria-label="Copy code to clipboard" title="Copy" class="copyButton_eDfN clean-btn"><span class="copyButtonIcons_W9eQ" aria-hidden="true"><svg class="copyButtonIcon_XEyF" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg class="copyButtonSuccessIcon_i9w9" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div><h3 class="anchor anchorWithStickyNavbar_mojV" id="moving-items-to-specific-positions">Moving Items to specific positions<a class="hash-link" href="#moving-items-to-specific-positions" title="Direct link to heading"></a></h3><p>It is possible to move items and order them next to a reference item.</p><p>Move Item <code><name></code> to appear <em>before</em> item <code><reference name></code>:</p><div class="codeBlockContainer_I0IT language-bash theme-code-block"><div class="codeBlockContent_wNvx" style="color:#bfc7d5;background-color:#292d3e"><pre tabindex="0" class="prism-code language-bash codeBlock_jd64 thin-scrollbar"><code class="codeBlockLines_mRuA"><span class="token-line" style="color:#bfc7d5"><span class="token plain">sketchybar --move </span><span class="token operator" style="color:rgb(137, 221, 255)"><</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">></span><span class="token plain"> before </span><span class="token operator" style="color:rgb(137, 221, 255)"><</span><span class="token plain">reference name</span><span class="token operator" style="color:rgb(137, 221, 255)">></span><br></span></code></pre><button type="button" aria-label="Copy code to clipboard" title="Copy" class="copyButton_eDfN clean-btn"><span class="copyButtonIcons_W9eQ" aria-hidden="true"><svg class="copyButtonIcon_XEyF" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg class="copyButtonSuccessIcon_i9w9" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div><p>Move Item <code><name></code> to appear <em>after</em> item <code><reference name></code>:</p><div class="codeBlockContainer_I0IT language-bash theme-code-block"><div class="codeBlockContent_wNvx" style="color:#bfc7d5;background-color:#292d3e"><pre tabindex="0" class="prism-code language-bash codeBlock_jd64 thin-scrollbar"><code class="codeBlockLines_mRuA"><span class="token-line" style="color:#bfc7d5"><span class="token plain">sketchybar --move </span><span class="token operator" style="color:rgb(137, 221, 255)"><</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">></span><span class="token plain"> after </span><span class="token operator" style="color:rgb(137, 221, 255)"><</span><span class="token plain">reference name</span><span class="token operator" style="color:rgb(137, 221, 255)">></span><br></span></code></pre><button type="button" aria-label="Copy code to clipboard" title="Copy" class="copyButton_eDfN clean-btn"><span class="copyButtonIcons_W9eQ" aria-hidden="true"><svg class="copyButtonIcon_XEyF" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg class="copyButtonSuccessIcon_i9w9" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div><h3 class="anchor anchorWithStickyNavbar_mojV" id="item-cloning">Item Cloning<a class="hash-link" href="#item-cloning" title="Direct link to heading"></a></h3><p>It is possible to clone another item instead of adding a completely blank item</p><div class="codeBlockContainer_I0IT language-bash theme-code-block"><div class="codeBlockContent_wNvx" style="color:#bfc7d5;background-color:#292d3e"><pre tabindex="0" class="prism-code language-bash codeBlock_jd64 thin-scrollbar"><code class="codeBlockLines_mRuA"><span class="token-line" style="color:#bfc7d5"><span class="token plain">sketchybar --clone </span><span class="token operator" style="color:rgb(137, 221, 255)"><</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">></span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)"><</span><span class="token plain">parent name</span><span class="token operator" style="color:rgb(137, 221, 255)">></span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">optional: before/after</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><br></span></code></pre><button type="button" aria-label="Copy code to clipboard" title="Copy" class="copyButton_eDfN clean-btn"><span class="copyButtonIcons_W9eQ" aria-hidden="true"><svg class="copyButtonIcon_XEyF" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg class="copyButtonSuccessIcon_i9w9" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div><p>the new item will inherit <em>all</em> properties of the parent item. The optional <em>before</em> and <em>after</em> modifiers can be used
|
||
to move the item <em>before</em>, or <em>after</em> the parent, equivalently to a --move command.</p><h3 class="anchor anchorWithStickyNavbar_mojV" id="renaming-items">Renaming Items<a class="hash-link" href="#renaming-items" title="Direct link to heading"></a></h3><p>It is possible to rename any item. The new name should obviously not be in use by another item:</p><div class="codeBlockContainer_I0IT language-bash theme-code-block"><div class="codeBlockContent_wNvx" style="color:#bfc7d5;background-color:#292d3e"><pre tabindex="0" class="prism-code language-bash codeBlock_jd64 thin-scrollbar"><code class="codeBlockLines_mRuA"><span class="token-line" style="color:#bfc7d5"><span class="token plain">sketchybar --rename </span><span class="token operator" style="color:rgb(137, 221, 255)"><</span><span class="token plain">old name</span><span class="token operator" style="color:rgb(137, 221, 255)">></span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)"><</span><span class="token plain">new name</span><span class="token operator" style="color:rgb(137, 221, 255)">></span><br></span></code></pre><button type="button" aria-label="Copy code to clipboard" title="Copy" class="copyButton_eDfN clean-btn"><span class="copyButtonIcons_W9eQ" aria-hidden="true"><svg class="copyButtonIcon_XEyF" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg class="copyButtonSuccessIcon_i9w9" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div><h3 class="anchor anchorWithStickyNavbar_mojV" id="removing-items">Removing Items<a class="hash-link" href="#removing-items" title="Direct link to heading"></a></h3><p>It is possible to remove any item by invoking, the item will be completely destroyed and removed from brackets </p><div class="codeBlockContainer_I0IT language-bash theme-code-block"><div class="codeBlockContent_wNvx" style="color:#bfc7d5;background-color:#292d3e"><pre tabindex="0" class="prism-code language-bash codeBlock_jd64 thin-scrollbar"><code class="codeBlockLines_mRuA"><span class="token-line" style="color:#bfc7d5"><span class="token plain">sketchybar --remove </span><span class="token operator" style="color:rgb(137, 221, 255)"><</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">></span><br></span></code></pre><button type="button" aria-label="Copy code to clipboard" title="Copy" class="copyButton_eDfN clean-btn"><span class="copyButtonIcons_W9eQ" aria-hidden="true"><svg class="copyButtonIcon_XEyF" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg class="copyButtonSuccessIcon_i9w9" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div><p>the <code><name></code> can again be a regex: <code>/<regex>/</code>.</p></div></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/SketchyBar/config/bar"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Bar Properties</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/SketchyBar/config/components"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Special Components</div></a></div></nav></div></div><div class="col col--3"><div class="tableOfContents_cNA8 thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#items-and-their-properties" class="table-of-contents__link toc-highlight">Items and their properties</a><ul><li><a href="#adding-items-to-sketchybar" class="table-of-contents__link toc-highlight">Adding items to sketchybar</a></li><li><a href="#changing-item-properties" class="table-of-contents__link toc-highlight">Changing item properties</a></li><li><a href="#geometry-properties" class="table-of-contents__link toc-highlight">Geometry Properties</a></li><li><a href="#drawing-properties" class="table-of-contents__link toc-highlight">Drawing properties</a></li><li><a href="#icon-properties" class="table-of-contents__link toc-highlight">Icon properties</a></li><li><a href="#label-properties" class="table-of-contents__link toc-highlight">Label properties</a></li><li><a href="#scripting-properties" class="table-of-contents__link toc-highlight">Scripting properties</a></li><li><a href="#text-properties" class="table-of-contents__link toc-highlight">Text properties</a></li><li><a href="#background-properties" class="table-of-contents__link toc-highlight">Background properties</a></li><li><a href="#image-properties" class="table-of-contents__link toc-highlight">Image properties</a></li><li><a href="#shadow-properties" class="table-of-contents__link toc-highlight">Shadow properties</a></li><li><a href="#changing-the-default-values-for-all-further-items" class="table-of-contents__link toc-highlight">Changing the default values for all further items</a></li><li><a href="#item-reordering" class="table-of-contents__link toc-highlight">Item Reordering</a></li><li><a href="#moving-items-to-specific-positions" class="table-of-contents__link toc-highlight">Moving Items to specific positions</a></li><li><a href="#item-cloning" class="table-of-contents__link toc-highlight">Item Cloning</a></li><li><a href="#renaming-items" class="table-of-contents__link toc-highlight">Renaming Items</a></li><li><a href="#removing-items" class="table-of-contents__link toc-highlight">Removing Items</a></li></ul></li></ul></div></div></div></div></main></div></div></div>
|
||
<script src="/SketchyBar/assets/js/runtime~main.0c574050.js"></script>
|
||
<script src="/SketchyBar/assets/js/main.3bc8346e.js"></script>
|
||
</body>
|
||
</html> |