<titledata-rh="true">Special Components | SketchyBar</title><metadata-rh="true"name="twitter:card"content="summary_large_image"><metadata-rh="true"property="og:url"content="https://felixkratz.github.io//SketchyBar/config/components"><metadata-rh="true"name="docusaurus_locale"content="en"><metadata-rh="true"name="docsearch:language"content="en"><metadata-rh="true"name="docusaurus_version"content="current"><metadata-rh="true"name="docusaurus_tag"content="docs-default-current"><metadata-rh="true"name="docsearch:version"content="current"><metadata-rh="true"name="docsearch:docusaurus_tag"content="docs-default-current"><metadata-rh="true"property="og:title"content="Special Components | SketchyBar"><metadata-rh="true"name="description"content="Components -- Special Items with special properties"><metadata-rh="true"property="og:description"content="Components -- Special Items with special properties"><linkdata-rh="true"rel="icon"href="/SketchyBar/img/favicon.ico"><linkdata-rh="true"rel="canonical"href="https://felixkratz.github.io//SketchyBar/config/components"><linkdata-rh="true"rel="alternate"href="https://felixkratz.github.io//SketchyBar/config/components"hreflang="en"><linkdata-rh="true"rel="alternate"href="https://felixkratz.github.io//SketchyBar/config/components"hreflang="x-default"><linkrel="stylesheet"href="/SketchyBar/assets/css/styles.d31a9c85.css">
Currently there are the components (more details in the corresponding sections below):</p><ul><li><em>graph</em>: showing a graph,</li><li><em>space</em>: representing a mission control space</li><li><em>bracket</em>: brackets together other items</li><li><em>alias</em>: an alias of a menu bar item from the macOS bar</li></ul><h3class="anchor anchorWithStickyNavbar_mojV"id="data-graph----draws-an-arbitrary-graph-into-the-bar">Data Graph -- Draws an arbitrary graph into the bar<aclass="hash-link"href="#data-graph----draws-an-arbitrary-graph-into-the-bar"title="Direct link to heading"></a></h3><divclass="codeBlockContainer_I0IT language-bash theme-code-block"><divclass="codeBlockContent_wNvx"style="color:#bfc7d5;background-color:#292d3e"><pretabindex="0"class="prism-code language-bash codeBlock_jd64 thin-scrollbar"><codeclass="codeBlockLines_mRuA"><spanclass="token-line"style="color:#bfc7d5"><spanclass="token plain">sketchybar --add graph </span><spanclass="token operator"style="color:rgb(137, 221, 255)"><</span><spanclass="token plain">name</span><spanclass="token operator"style="color:rgb(137, 221, 255)">></span><spanclass="token plain"></span><spanclass="token operator"style="color:rgb(137, 221, 255)"><</span><spanclass="token plain">position</span><spanclass="token operator"style="color:rgb(137, 221, 255)">></span><spanclass="token plain"></span><spanclass="token operator"style="color:rgb(137, 221, 255)"><</span><spanclass="token plain">width </span><spanclass="token keyword"style="font-style:italic">in</span><spanclass="token plain"> points</span><spanclass="token operator"style="color:rgb(137, 221, 255)">></span><br></span></code></pre><buttontype="button"aria-label="Copy code to clipboard"title="Copy"class="copyButton_eDfN clean-btn"><spanclass="copyButtonIcons_W9eQ"aria-hidden="true"><svgclass="copyButtonIcon_XEyF"viewBox="0 0 24 24"><pathd="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><svgclass="copyButtonSuccessIcon_i9w9"viewBox="0 0 24 24"><pathd="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div><p>Additional graph properties:</p><table><thead><tr><thalign="center"><property<!---->></th><thalign="center"><value<!---->></th><thalign="center">default</th><th>description</th></tr></thead><tbody><tr><tdalign="center"><code>graph.color</code></td><tdalign="center"><code><argb_hex></code></td><tdalign="center"><code>0xcccccc</code></td><td>Color of the graph line</td></tr><tr><tdalign="center"><code>graph.fill_color</code></td><tdalign="center"><code><argb_hex></code></td><tdalign="center"><code>0xcccccc</code></td><td>Fill color of the graph</td></tr><tr><tdalign="center"><code>graph.line_width</code></td><tdalign="center"><code><float></code></td><tdalign="center"><code>0.5</code></td><td>Width of the line in points</td></tr></tbody></table><p>Push data points into the graph via:</p><divclass="codeBlockContainer_I0IT language-bash theme-code-block"><divclass="codeBlockContent_wNvx"style="color:#bfc7d5;background-color:#292d3e"><pretabindex="0"class="prism-code language-bash codeBlock_jd64 thin-scrollbar"><codeclass="codeBlockLines_mRuA"><spanclass="token-line"style="color:#bfc7d5"><spanclass="token plain">sketchybar --push </span><spanclass="token operator"style="color:rgb(137, 221, 255)"><</span><spanclass="token plain">name</span><spanclass="token operator"style="color:rgb(137, 221, 255)">></span><spanclass="token plain"></span><spanclass="token operator"style="color:rgb(137, 221, 255)"><</span><spanclass="token plain">data point</span><spanclass="token operator"style="color:rgb(137, 221, 255)">></span><spanclass="token plain"></span><spanclass="token punctuation"style="color:rgb(199, 146, 234)">..</span><spanclass="token plain">. </span><spanclass="token operator"style="color:rgb(137, 221, 255)"><</span><spanclass="toke
also be moved via a <code>y_offset</code>, e.g.:</p><divclass="codeBlockContainer_I0IT language-bash theme-code-block"><divclass="codeBlockContent_wNvx"style="color:#bfc7d5;background-color:#292d3e"><pretabindex="0"class="prism-code language-bash codeBlock_jd64 thin-scrollbar"><codeclass="codeBlockLines_mRuA"><spanclass="token-line"style="color:#bfc7d5"><spanclass="token plain">sketchybar --set </span><spanclass="token operator"style="color:rgb(137, 221, 255)"><</span><spanclass="token plain">graph name</span><spanclass="token operator"style="color:rgb(137, 221, 255)">></span><spanclass="token plain"> background.color</span><spanclass="token operator"style="color:rgb(137, 221, 255)">=</span><spanclass="token plain">0xff00ff00 background.height</span><spanclass="token operator"style="color:rgb(137, 221, 255)">=</span><spanclass="token number"style="color:rgb(247, 140, 108)">20</span><spanclass="token plain"></span><spanclass="token assign-left variable"style="color:rgb(191, 199, 213)">y_offset</span><spanclass="token operator"style="color:rgb(137, 221, 255)">=</span><spanclass="token number"style="color:rgb(247, 140, 108)">2</span><br></span></code></pre><buttontype="button"aria-label="Copy code to clipboard"title="Copy"class="copyButton_eDfN clean-btn"><spanclass="copyButtonIcons_W9eQ"aria-hidden="true"><svgclass="copyButtonIcon_XEyF"viewBox="0 0 24 24"><pathd="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><svgclass="copyButtonSuccessIcon_i9w9"viewBox="0 0 24 24"><pathd="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div><h3class="anchor anchorWithStickyNavbar_mojV"id="space----associate-mission-control-spaces-with-an-item">Space -- Associate mission control spaces with an item<aclass="hash-link"href="#space----associate-mission-control-spaces-with-an-item"title="Direct link to heading"></a></h3><divclass="codeBlockContainer_I0IT language-bash theme-code-block"><divclass="codeBlockContent_wNvx"style="color:#bfc7d5;background-color:#292d3e"><pretabindex="0"class="prism-code language-bash codeBlock_jd64 thin-scrollbar"><codeclass="codeBlockLines_mRuA"><spanclass="token-line"style="color:#bfc7d5"><spanclass="token plain">sketchybar --add space </span><spanclass="token operator"style="color:rgb(137, 221, 255)"><</span><spanclass="token plain">name</span><spanclass="token operator"style="color:rgb(137, 221, 255)">></span><spanclass="token plain"></span><spanclass="token operator"style="color:rgb(137, 221, 255)"><</span><spanclass="token plain">position</span><spanclass="token operator"style="color:rgb(137, 221, 255)">></span><br></span></code></pre><buttontype="button"aria-label="Copy code to clipboard"title="Copy"class="copyButton_eDfN clean-btn"><spanclass="copyButtonIcons_W9eQ"aria-hidden="true"><svgclass="copyButtonIcon_XEyF"viewBox="0 0 24 24"><pathd="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><svgclass="copyButtonSuccessIcon_i9w9"viewBox="0 0 24 24"><pathd="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div><p>The space component overrides the definition of the following properties:</p><ul><li><em>associated_space</em>: Which space this item represents</li><li>(optional) <em>associated_display</em>: On which display the <em>associated_space</em> is shown.
The <code>associated_space</code> property must be set to properly associate this item with the corresponding mission control space.
Optionally, you can provide an <code>associated_display</code> to force a space item to stay on a specific display, otherwise the
item will draw on the screen on which the space is currently located. </li></ul><p>The space component has additional variables available in <em>scripts</em>:</p><divclass="codeBlockContainer_I0IT language-bash theme-code-block"><divclass="codeBlockContent_wNvx"style="color:#bfc7d5;background-color:#292d3e"><pretabindex="0"class="prism-code language-bash codeBlock_jd64 thin-scrollbar"><codeclass="codeBlockLines_mRuA"><spanclass="token-line"style="color:#bfc7d5"><spanclass="token variable"style="color:rgb(191, 199, 213)">$SELECTED</span><spanclass="token plain"></span><br></span><spanclass="token-line"style="color:#bfc7d5"><spanclass="token plain"></span><spanclass="token variable"style="color:rgb(191, 199, 213)">$SID</span><spanclass="token plain"></span><br></span><spanclass="token-line"style="color:#bfc7d5"><spanclass="token plain"></span><spanclass="token variable"style="color:rgb(191, 199, 213)">$DID</span><br></span></code></pre><buttontype="button"aria-label="Copy code to clipboard"title="Copy"class="copyButton_eDfN clean-btn"><spanclass="copyButtonIcons_W9eQ"aria-hidden="true"><svgclass="copyButtonIcon_XEyF"viewBox="0 0 24 24"><pathd="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><svgclass="copyButtonSuccessIcon_i9w9"viewBox="0 0 24 24"><pathd="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div><p>where <code>$SELECTED</code> has the value <code>true</code> if the associated space is selected and
<code>false</code> if the associated space is not selected, while
<code>$SID</code> holds the space id and <code>$DID</code> the display id.</p><p>By default the space component invokes the following script:</p><divclass="codeBlockContainer_I0IT language-bash theme-code-block"><divclass="codeBlockContent_wNvx"style="color:#bfc7d5;background-color:#292d3e"><pretabindex="0"class="prism-code language-bash codeBlock_jd64 thin-scrollbar"><codeclass="codeBlockLines_mRuA"><spanclass="token-line"style="color:#bfc7d5"><spanclass="token plain">sketchybar --set </span><spanclass="token variable"style="color:rgb(191, 199, 213)">$NAME</span><spanclass="token plain"> icon.highlight</span><spanclass="token operator"style="color:rgb(137, 221, 255)">=</span><spanclass="token variable"style="color:rgb(191, 199, 213)">$SELECTED</span><br></span></code></pre><buttontype="button"aria-label="Copy code to clipboard"title="Copy"class="copyButton_eDfN clean-btn"><spanclass="copyButtonIcons_W9eQ"aria-hidden="true"><svgclass="copyButtonIcon_XEyF"viewBox="0 0 24 24"><pathd="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><svgclass="copyButtonSuccessIcon_i9w9"viewBox="0 0 24 24"><pathd="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div><p>which you can freely configure to your liking by supplying a different script
to the space component:</p><divclass="codeBlockContainer_I0IT language-bash theme-code-block"><divclass="codeBlockContent_wNvx"style="color:#bfc7d5;background-color:#292d3e"><pretabindex="0"class="prism-code language-bash codeBlock_jd64 thin-scrollbar"><codeclass="codeBlockLines_mRuA"><spanclass="token-line"style="color:#bfc7d5"><spanclass="token plain">sketchybar --set </span><spanclass="token operator"style="color:rgb(137, 221, 255)"><</span><spanclass="token plain">name</span><spanclass="token operator"style="color:rgb(137, 221, 255)">></span><spanclass="token plain"></span><spanclass="token assign-left variable"style="color:rgb(191, 199, 213)">script</span><spanclass="token operator"style="color:rgb(137, 221, 255)">=</span><spanclass="token operator"style="color:rgb(137, 221, 255)"><</span><spanclass="token plain">script/path</span><spanclass="token operator"style="color:rgb(137, 221, 255)">></span><br></span></code></pre><buttontype="button"aria-label="Copy code to clipboard"title="Copy"class="copyButton_eDfN clean-btn"><spanclass="copyButtonIcons_W9eQ"aria-hidden="true"><svgclass="copyButtonIcon_XEyF"viewBox="0 0 24 24"><pathd="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><svgclass="copyButtonSuccessIcon_i9w9"viewBox="0 0 24 24"><pathd="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div><p>For performance reasons the space script is only run on a change in the
<code>$SELECTED</code> variable, i.e. if the associated space has become active
or has resigned being active.</p><h3class="anchor anchorWithStickyNavbar_mojV"id="item-bracket----group-items-in-eg-colored-sections">Item Bracket -- Group Items in e.g. colored sections<aclass="hash-link"href="#item-bracket----group-items-in-eg-colored-sections"title="Direct link to heading"></a></h3><p>It is possible to create a common background for any number of items, i.e. to bracket together items, via the command:</p><divclass="codeBlockContainer_I0IT language-bash theme-code-block"><divclass="codeBlockContent_wNvx"style="color:#bfc7d5;background-color:#292d3e"><pretabindex="0"class="prism-code language-bash codeBlock_jd64 thin-scrollbar"><codeclass="codeBlockLines_mRuA"><spanclass="token-line"style="color:#bfc7d5"><spanclass="token plain">sketchybar --add bracket </span><spanclass="token operator"style="color:rgb(137, 221, 255)"><</span><spanclass="token plain">name</span><spanclass="token operator"style="color:rgb(137, 221, 255)">></span><spanclass="token plain"></span><spanclass="token operator"style="color:rgb(137, 221, 255)"><</span><spanclass="token plain">member name</span><spanclass="token operator"style="color:rgb(137, 221, 255)">></span><spanclass="token plain"></span><spanclass="token punctuation"style="color:rgb(199, 146, 234)">..</span><spanclass="token plain">. </span><spanclass="token operator"style="color:rgb(137, 221, 255)"><</span><spanclass="token plain">member name</span><spanclass="token operator"style="color:rgb(137, 221, 255)">></span><br></span></code></pre><buttontype="button"aria-label="Copy code to clipboard"title="Copy"class="copyButton_eDfN clean-btn"><spanclass="copyButtonIcons_W9eQ"aria-hidden="true"><svgclass="copyButtonIcon_XEyF"viewBox="0 0 24 24"><pathd="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><svgclass="copyButtonSuccessIcon_i9w9"viewBox="0 0 24 24"><pathd="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div><p>The <code><member name></code> is a name of any item in the bar that should be added to the bracket.
The <code><member name></code> can also be a <code>/<regex>/</code> expression.
It is now possible to set properties for the bracket, just as for any item or component. Brackets currently only support all background features.
the background will span all the way between those items.</p><h3class="anchor anchorWithStickyNavbar_mojV"id="item-alias----mirror-items-of-the-original-macos-status-bar-into-sketchybar">Item Alias -- Mirror items of the original macOS status bar into sketchybar<aclass="hash-link"href="#item-alias----mirror-items-of-the-original-macos-status-bar-into-sketchybar"title="Direct link to heading"></a></h3><p>It is possible to create an alias for default menu bar items
(such as MeetingBar, etc.) in sketchybar. The default menu bar can be set to
autohide and this should still work.</p><p>To create an alias of a default menu bar item use the following syntax:</p><divclass="codeBlockContainer_I0IT language-bash theme-code-block"><divclass="codeBlockContent_wNvx"style="color:#bfc7d5;background-color:#292d3e"><pretabindex="0"class="prism-code language-bash codeBlock_jd64 thin-scrollbar"><codeclass="codeBlockLines_mRuA"><spanclass="token-line"style="color:#bfc7d5"><spanclass="token plain">sketchybar --add </span><spanclass="token builtin class-name"style="color:rgb(255, 203, 107)">alias</span><spanclass="token plain"></span><spanclass="token operator"style="color:rgb(137, 221, 255)"><</span><spanclass="token plain">application_name</span><spanclass="token operator"style="color:rgb(137, 221, 255)">></span><spanclass="token plain"></span><spanclass="token operator"style="color:rgb(137, 221, 255)"><</span><spanclass="token plain">position</span><spanclass="token operator"style="color:rgb(137, 221, 255)">></span><br></span></code></pre><buttontype="button"aria-label="Copy code to clipboard"title="Copy"class="copyButton_eDfN clean-btn"><spanclass="copyButtonIcons_W9eQ"aria-hidden="true"><svgclass="copyButtonIcon_XEyF"viewBox="0 0 24 24"><pathd="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><svgclass="copyButtonSuccessIcon_i9w9"viewBox="0 0 24 24"><pathd="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div><p>this operation requires <em>screen capture permissions</em>, which should be granted
in the system preferences.</p><p>This will put the default macOS menu bar item into sketchybar. If an
application has multiple menu bar widgets the command can be overloaded by
providing a <em>window_owner</em> and a <em>window_name</em></p><divclass="codeBlockContainer_I0IT language-bash theme-code-block"><divclass="codeBlockContent_wNvx"style="color:#bfc7d5;background-color:#292d3e"><pretabindex="0"class="prism-code language-bash codeBlock_jd64 thin-scrollbar"><codeclass="codeBlockLines_mRuA"><spanclass="token-line"style="color:#bfc7d5"><spanclass="token plain">sketchybar --add </span><spanclass="token builtin class-name"style="color:rgb(255, 203, 107)">alias</span><spanclass="token plain"></span><spanclass="token string"style="color:rgb(195, 232, 141)">"<window_owner>,<window_name>"</span><spanclass="token plain"></span><spanclass="token operator"style="color:rgb(137, 221, 255)"><</span><spanclass="token plain">position</span><spanclass="token operator"style="color:rgb(137, 221, 255)">></span><br></span></code></pre><buttontype="button"aria-label="Copy code to clipboard"title="Copy"class="copyButton_eDfN clean-btn"><spanclass="copyButtonIcons_W9eQ"aria-hidden="true"><svgclass="copyButtonIcon_XEyF"viewBox="0 0 24 24"><pathd="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><svgclass="copyButtonSuccessIcon_i9w9"viewBox="0 0 24 24"><pathd="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div><p>this way the default system items can also be aliased in sketchybar as well,
e.g.:</p><ul><li>"Control Center,Bluetooth"</li><li>"Control Center,WiFi"</li><li>...</li></ul><p>Or the individual widgets of <ahref="https://github.com/exelban/stats"target="_blank"rel="noopener noreferrer">Stats</a>:</p><ul><li>"Stats,CPU_Mini"</li><li>etc...</li></ul><p>All further macOS menu bar items currently available on your system can be
found via the command</p><divclass="codeBlockContainer_I0IT language-bash theme-code-block"><divclass="codeBlockContent_wNvx"style="color:#bfc7d5;background-color:#292d3e"><pretabindex="0"class="prism-code language-bash codeBlock_jd64 thin-scrollbar"><codeclass="codeBlockLines_mRuA"><spanclass="token-line"style="color:#bfc7d5"><spanclass="token plain">sketchybar --query default_menu_items</span><br></span></code></pre><buttontype="button"aria-label="Copy code to clipboard"title="Copy"class="copyButton_eDfN clean-btn"><spanclass="copyButtonIcons_W9eQ"aria-hidden="true"><svgclass="copyButtonIcon_XEyF"viewBox="0 0 24 24"><pathd="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><svgclass="copyButtonSuccessIcon_i9w9"viewBox="0 0 24 24"><pathd="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div><p>where all items with their respective owner and name are listed.</p><p>You can override the color of an alias via the property:</p><divclass="codeBlockContainer_I0IT language-bash theme-code-block"><divclass="codeBlockContent_wNvx"style="color:#bfc7d5;background-color:#292d3e"><pretabindex="0"class="prism-code language-bash codeBlock_jd64 thin-scrollbar"><codeclass="codeBlockLines_mRuA"><spanclass="token-line"style="color:#bfc7d5"><spanclass="token plain">sketchybar --set </span><spanclass="token operator"style="color:rgb(137, 221, 255)"><</span><spanclass="token plain">name</span><spanclass="token operator"style="color:rgb(137, 221, 255)">></span><spanclass="token plain"> alias.color</span><spanclass="token operator"style="color:rgb(137, 221, 255)">=</span><spanclass="token operator"style="color:rgb(137, 221, 255)"><</span><spanclass="token plain">argb_hex</span><spanclass="token operator"style="color:rgb(137, 221, 255)">></span><br></span></code></pre><buttontype="button"aria-label="Copy code to clipboard"title="Copy"class="copyButton_eDfN clean-btn"><spanclass="copyButtonIcons_W9eQ"aria-hidden="true"><svgclass="copyButtonIcon_XEyF"viewBox="0 0 24 24"><pathd="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><svgclass="copyButtonSuccessIcon_i9w9"viewBox="0 0 24 24"><pathd="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div><p>Aliases currently are not clickable but can be modified with all the options
available for simple items.</p></div></article><navclass="pagination-nav docusaurus-mt-lg"aria-label="Docs pages navigation"><divclass="pagination-nav__item"><aclass="pagination-nav__link"href="/SketchyBar/config/items"><divclass="pagination-nav__sublabel">Previous</div><divclass="pagination-nav__label">Item Properties</div></a></div><divclass="pagination-nav__item pagination-nav__item--next"><aclass="pagination-nav__link"href="/SketchyBar/config/popups"><divclass="pagination-nav__sublabel">Next</div><divclass="pagination-nav__label">Popup Menus</div></a></div></nav></div></div><divclass="col col--3"><divclass="tableOfContents_cNA8 thin-scrollbar theme-doc-toc-desktop"><ulclass="table-of-contents table-of-contents__left-border"><li><ahref="#components----special-items-with-special-properties"class="table-of-contents__link toc-highlight">Components -- Special Items with special properties</a><ul><li><ahref="#data-graph----draws-an-arbitrary-graph-into-the-bar"class="table-of-contents__link toc-highlight">Data Graph -- Draws an arbitrary graph into the bar</a></li><li><ahref="#space----associate-mission-control-spaces-with-an-item"class="table-of-contents__link toc-highlight">Space -- Associate mission control spaces with an item</a></li><li><ahref="#item-bracket----group-items-in-eg-colored-sections"class="table-of-contents__link toc-highlight">Item Bracket -- Group Items in e.g. colored sections</a></li><li><ahref="#item-alias----mirror-items-of-the-original-macos-status-bar-into-sketchybar"class="table-of-contents__link toc-highlight">Item Alias -- Mirror items of the original macOS status bar into sketchybar</a></li></ul></li></ul></div></div></div></div></main></div></div></div>
