Mirrors/SketchyBar
2
0
Fork 0
mirror of https://github.com/FelixKratz/SketchyBar synced 2024-11-22 19:33:03 +00:00
Code Issues Projects Releases Packages Wiki Activity
SketchyBar/config/tricks.html
Felix Kratz c4757af613 documentation update for v2.22.0
2024-11-18 17:00:12 +01:00

34 lines
No EOL
34 KiB
HTML
Raw Permalink Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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/tricks">
<head>
<meta charset="UTF-8">
<meta name="generator" content="Docusaurus v2.2.0">
<title data-rh="true">Tips &amp; Tricks | SketchyBar</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><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/tricks"><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="Tips &amp; Tricks | SketchyBar"><meta data-rh="true" name="description" content="Batching of configuration commands"><meta data-rh="true" property="og:description" content="Batching of configuration commands"><link data-rh="true" rel="icon" href="/SketchyBar/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://felixkratz.github.io/SketchyBar/config/tricks"><link data-rh="true" rel="alternate" href="https://felixkratz.github.io/SketchyBar/config/tricks" hreflang="en"><link data-rh="true" rel="alternate" href="https://felixkratz.github.io/SketchyBar/config/tricks" hreflang="x-default"><link rel="stylesheet" href="/SketchyBar/assets/css/styles.21661fb5.css">
<link rel="preload" href="/SketchyBar/assets/js/runtime~main.8da24e80.js" as="script">
<link rel="preload" href="/SketchyBar/assets/js/main.2fa6f050.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" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#docusaurus_skipToContent_fallback">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><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_ToTc themedImage--light_HNdA"><img src="/SketchyBar/img/logo.svg" alt="SketchyBar Logo" class="themedImage_ToTc themedImage--dark_i4oU"></div><b class="navbar__title text--truncate">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 &amp; 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_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)" aria-live="polite"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_pyhR"><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_wfgR"><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 class="searchBox_ZlJk"><div class="navbar__search searchBarContainer_NW3z"><input placeholder="Search" aria-label="Search" class="navbar__search-input"><div class="loadingRing_RJI3 searchBarLoadingRing_YnHq"><div></div><div></div><div></div><div></div></div></div></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0 docsWrapper_BCFX"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docPage__5DB"><aside class="theme-doc-sidebar-container docSidebarContainer_b6E3"><div class="sidebar_njMd"><nav class="menu thin-scrollbar menu_SIkG"><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" 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 &amp; 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/animations">Animations</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/reloading">Reloading the configuration</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/tricks">Tips &amp; 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_gTbr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/SketchyBar/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_OVgt"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><span class="breadcrumbs__link">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="name">Tips &amp; Tricks</span><meta itemprop="position" content="2"></li></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>Tips &amp; Tricks</h1></header><h2 class="anchor anchorWithStickyNavbar_LWe7" id="batching-of-configuration-commands">Batching of configuration commands<a class="hash-link" href="#batching-of-configuration-commands" title="Direct link to heading">​</a></h2><p>It is possible to batch commands together into a single call to <em>SketchyBar</em>, this can be helpful to
keep the configuration file a bit cleaner and also to reduce startup times.
Assume 5 individual configuration calls to <em>SketchyBar</em>:</p><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#bfc7d5"><span class="token plain">sketchybar --bar </span><span class="token assign-left variable" style="color:rgb(191, 199, 213)">position</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">top</span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain">sketchybar --bar </span><span class="token assign-left variable" style="color:rgb(191, 199, 213)">margin</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">5</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain">sketchybar --add item demo left</span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain">sketchybar --set demo </span><span class="token assign-left variable" style="color:rgb(191, 199, 213)">label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">Hello</span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain">sketchybar --subscribe demo system_woke</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg class="copyButtonIcon_y97N" 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_LjdS" 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></div><p>after each configuration command the bar is redrawn (if needed), thus it is
faster to append these calls into a single command like so:</p><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#bfc7d5"><span class="token plain">sketchybar --bar </span><span class="token assign-left variable" style="color:rgb(191, 199, 213)">position</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">top </span><span class="token punctuation" style="color:rgb(199, 146, 234)">\</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token assign-left variable" style="color:rgb(191, 199, 213)">margin</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">5</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">\</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> --add item demo left </span><span class="token punctuation" style="color:rgb(199, 146, 234)">\</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> --set demo </span><span class="token assign-left variable" style="color:rgb(191, 199, 213)">label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">Hello </span><span class="token punctuation" style="color:rgb(199, 146, 234)">\</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> --subscribe demo system_woke</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg class="copyButtonIcon_y97N" 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_LjdS" 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></div><p>The backslash at the end of the first 4 lines is the default bash way to join lines together and should not be followed by a whitespace. </p><h3 class="anchor anchorWithStickyNavbar_LWe7" id="using-bash-arrays-for-cleaner-configuration">Using bash arrays for cleaner configuration<a class="hash-link" href="#using-bash-arrays-for-cleaner-configuration" title="Direct link to heading">​</a></h3><p>Lets assume this bar configuration command (from the default config):</p><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#bfc7d5"><span class="token plain">sketchybar --bar </span><span class="token assign-left variable" style="color:rgb(191, 199, 213)">height</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">32</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">\</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token assign-left variable" style="color:rgb(191, 199, 213)">blur_radius</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">30</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">\</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token assign-left variable" style="color:rgb(191, 199, 213)">position</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">top </span><span class="token punctuation" style="color:rgb(199, 146, 234)">\</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token assign-left variable" style="color:rgb(191, 199, 213)">sticky</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">off </span><span class="token punctuation" style="color:rgb(199, 146, 234)">\</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token assign-left variable" style="color:rgb(191, 199, 213)">padding_left</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">\</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token assign-left variable" style="color:rgb(191, 199, 213)">padding_right</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">\</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token assign-left variable" style="color:rgb(191, 199, 213)">color</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">0x15ffffff</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg class="copyButtonIcon_y97N" 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_LjdS" 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></div><p>We can rewrite this as a bash array to get rid of the backslashes and pass the
contents of the array to the <code>--bar</code> command:</p><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#bfc7d5"><span class="token assign-left variable" style="color:rgb(191, 199, 213)">bar</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token assign-left variable" style="color:rgb(191, 199, 213)">height</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">32</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token assign-left variable" style="color:rgb(191, 199, 213)">blur_radius</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">30</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token assign-left variable" style="color:rgb(191, 199, 213)">position</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">top</span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token assign-left variable" style="color:rgb(191, 199, 213)">sticky</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">off</span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token assign-left variable" style="color:rgb(191, 199, 213)">padding_left</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token assign-left variable" style="color:rgb(191, 199, 213)">padding_right</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token assign-left variable" style="color:rgb(191, 199, 213)">color</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">0x15ffffff</span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain">sketchybar --bar </span><span class="token string" style="color:rgb(195, 232, 141)">&quot;</span><span class="token string variable" style="color:rgb(191, 199, 213)">${bar</span><span class="token string variable punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string variable" style="color:rgb(191, 199, 213)">@</span><span class="token string variable punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token string variable" style="color:rgb(191, 199, 213)">}</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg class="copyButtonIcon_y97N" 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_LjdS" 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></div><h2 class="anchor anchorWithStickyNavbar_LWe7" id="debugging-problems">Debugging Problems<a class="hash-link" href="#debugging-problems" title="Direct link to heading">​</a></h2><p>If you are experiencing problems with the configuration of <em>SketchyBar</em> it might be helpful to work through the following steps:</p><ul><li>1.) Start <code>sketchybar</code> directly from the commandline to see the verbose error/warning messages</li><li>2.) Make sure you have no trailing whitespaces after the bash newline escape char <code>\</code></li><li>3.) Make sure your scripts are made executable via: <code>chmod +x script.sh</code></li><li>4.) Reduce the configuration to a minimal example and narrow down the problematic region</li><li>5.) Try running erroneous scripts directly in the commandline</li><li>6.) Query <em>SketchyBar</em> for relevant properties and use them to deduce the problems root cause</li><li>7.) Create an <a href="https://github.com/FelixKratz/SketchyBar/issues" target="_blank" rel="noopener noreferrer">Issue</a> on GitHub, a second pair of eyes might now be the only thing that helps</li></ul><h2 class="anchor anchorWithStickyNavbar_LWe7" id="color-picker">Color Picker<a class="hash-link" href="#color-picker" title="Direct link to heading">​</a></h2><p>SketchyBar uses the argb hex color format, which means: <code>0xAARRGGBB</code> encodes a
color.</p><div><div style="padding:5px;background:#fff;-ms-border-radius:1px;-moz-border-radius:1px;-o-border-radius:1px;-webkit-border-radius:1px;border-radius:1px;-ms-box-shadow:0 0 0 1px rgba(0,0,0,.1);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1);-o-box-shadow:0 0 0 1px rgba(0,0,0,.1);-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1);display:inline-block;cursor:pointer"><div style="width:36px;height:14px;-ms-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;background:rgba(241, 112, 19, 1)"></div></div><div id="color">Try the Picker!</div></div><h2 class="anchor anchorWithStickyNavbar_LWe7" id="finding-icons">Finding Icons<a class="hash-link" href="#finding-icons" title="Direct link to heading">​</a></h2><p>The default font <em>SketchyBar</em> uses is the <em>Hack Nerd Font</em> which means all <em>Nerdfont</em> icons can be used.
Refer to the <em>Nerdfont</em> <a href="https://www.nerdfonts.com/cheat-sheet" target="_blank" rel="noopener noreferrer">cheat-sheet</a> to find new icons.</p><p>Additionally, it is possible to use other icons and glyphs from different fonts,
such as the <a href="https://developer.apple.com/sf-symbols/" target="_blank" rel="noopener noreferrer">sf-symbols</a> from apple.
Those symbols can be installed via brew:</p><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#bfc7d5"><span class="token plain">brew </span><span class="token function" style="color:rgb(130, 170, 255)">install</span><span class="token plain"> --cask sf-symbols</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg class="copyButtonIcon_y97N" 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_LjdS" 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></div><p>After installing this package, an app called <code>SF Symbols</code> will be available where you can find all the available icons.
Once you find a fitting icon, right click it, select <em>Copy Symbol</em> and paste it in the relevant configuration file.</p><p>If you are looking for stylised app icons you might want to checkout the excellent community maintained
<a href="https://github.com/kvndrsslr/sketchybar-app-font" target="_blank" rel="noopener noreferrer">app-icon-font</a> for SketchyBar.</p><h2 class="anchor anchorWithStickyNavbar_LWe7" id="multiple-bars">Multiple Bars<a class="hash-link" href="#multiple-bars" title="Direct link to heading">​</a></h2><p>It is possible to have multiple independent instances of SketchyBar running.
This is possible by changing the <code>argv[0]</code> of the sketchybar program. This is
very easy, e.g. by symlinking the sketchybar binary with a different name, e.g.
<code>bottom_bar</code>:</p><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#bfc7d5"><span class="token function" style="color:rgb(130, 170, 255)">ln</span><span class="token plain"> -s </span><span class="token variable" style="color:rgb(191, 199, 213)">$(</span><span class="token variable function" style="color:rgb(130, 170, 255)">which</span><span class="token variable" style="color:rgb(191, 199, 213)"> sketchybar</span><span class="token variable" style="color:rgb(191, 199, 213)">)</span><span class="token plain"> </span><span class="token variable" style="color:rgb(191, 199, 213)">$(</span><span class="token variable function" style="color:rgb(130, 170, 255)">dirname</span><span class="token variable" style="color:rgb(191, 199, 213)"> </span><span class="token variable punctuation" style="color:rgb(199, 146, 234)">$(</span><span class="token variable" style="color:rgb(191, 199, 213)">which sketchybar</span><span class="token variable punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token variable" style="color:rgb(191, 199, 213)">)</span><span class="token plain">/bottom_bar</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg class="copyButtonIcon_y97N" 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_LjdS" 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></div><p>This symlink can now be used to spawn and target an additional bar, i.e. for
this bar we do not call <code>sketchybar --bar color=0xffff0000</code>, but rather
<code>bottom_bar --bar color=0xffff0000</code> and start it by running <code>bottom_bar</code> in the
commandline.</p><p>The config path for this additional bar is in <code>$HOME/.config/bottom_bar/</code>.
Of course <code>bottom_bar</code> is only an example and can be freely replaced with any
other identifier. The name of the bar is available in the environment variable <code>$BAR_NAME</code> in all scripts, making it possible to create bar-agnostic scripts by replacing <code>sketchybar</code> with <code>$BAR_NAME</code>.</p><h2 class="anchor anchorWithStickyNavbar_LWe7" id="performance-optimizations">Performance optimizations<a class="hash-link" href="#performance-optimizations" title="Direct link to heading">​</a></h2><p><em>SketchyBar</em> can be configured to have a <em>very</em> small performance footprint. In the following I will highlight some optimizations that can be used to reduce the footprint further. </p><ul><li>Batch together configuration commands where ever possible.</li><li>Set <em>updates=when_shown</em> for items that do not need to run their script if they are not rendered.</li><li>Reduce the <em>update_freq</em> of <em>scripts</em> and <em>aliases</em> and use event-driven scripting when ever possible.</li><li>Do not add <em>aliases</em> to apps that are not always running, otherwise <em>SketchyBar</em> searches for them continuously.</li><li>(Advanced; Only &gt;=v2.9.0) Use compiled <code>mach_helper</code> programs that directly interface with <em>SketchyBar</em> <a href="https://github.com/FelixKratz/SketchyBarHelper" target="_blank" rel="noopener noreferrer">example</a> for performance sensitive tasks</li></ul></div></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages navigation"><a class="pagination-nav__link pagination-nav__link--prev" href="/SketchyBar/config/reloading"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Reloading the configuration</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/SketchyBar/credits"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Credits</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#batching-of-configuration-commands" class="table-of-contents__link toc-highlight">Batching of configuration commands</a><ul><li><a href="#using-bash-arrays-for-cleaner-configuration" class="table-of-contents__link toc-highlight">Using bash arrays for cleaner configuration</a></li></ul></li><li><a href="#debugging-problems" class="table-of-contents__link toc-highlight">Debugging Problems</a></li><li><a href="#color-picker" class="table-of-contents__link toc-highlight">Color Picker</a></li><li><a href="#finding-icons" class="table-of-contents__link toc-highlight">Finding Icons</a></li><li><a href="#multiple-bars" class="table-of-contents__link toc-highlight">Multiple Bars</a></li><li><a href="#performance-optimizations" class="table-of-contents__link toc-highlight">Performance optimizations</a></li></ul></div></div></div></div></main></div></div></div>
<script src="/SketchyBar/assets/js/runtime~main.8da24e80.js"></script>
<script src="/SketchyBar/assets/js/main.2fa6f050.js"></script>
</body>
</html>
Reference in a new issue View git blame Copy permalink