Mirrors/SketchyBar
2
0
Fork 0
mirror of https://github.com/FelixKratz/SketchyBar synced 2024-11-23 11:53:02 +00:00
Code Issues Projects Releases Packages Wiki Activity
SketchyBar/config/tricks.html
Felix Kratz b791f0c39b add color picker
2022-05-13 12:17:58 +02:00

21 lines
No EOL
18 KiB
HTML
Raw 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="viewport" content="width=device-width,initial-scale=1">
<meta name="generator" content="Docusaurus v2.0.0-beta.18">
<title data-rh="true">Tips &amp; Tricks | 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/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.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 &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_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" 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/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 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_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">Tips &amp; Tricks</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>Tips &amp; Tricks</h1></header><h2 class="anchor anchorWithStickyNavbar_mojV" 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 sketchybar, this can be helpful to
keep the configuration file a bit cleaner and also to reduce startup times.
Assume 5 individual configuration calls to sketchybar:</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 --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><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>after each configuration command the bar is redrawn (if needed), thus it is more perfomant to append these calls into a single command like so:</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 --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><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 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><h2 class="anchor anchorWithStickyNavbar_mojV" 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_mojV" 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 items to be <em>lazy</em>, e.g. I have an alias component in my bar that updates every <em>2</em> seconds, thus I set all <em>non-reactive</em> items to <em>lazy=on</em>,
and only the ones that should react to change instantaneously to <em>lazy=off</em>.</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 sketchybar searches for them continously.</li></ul></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/types"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Type Nomenclature</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/SketchyBar/credits"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Credits</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="#batching-of-configuration-commands" class="table-of-contents__link toc-highlight">Batching of configuration commands</a></li><li><a href="#color-picker" class="table-of-contents__link toc-highlight">Color Picker</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.0c574050.js"></script>
<script src="/SketchyBar/assets/js/main.3bc8346e.js"></script>
</body>
</html>
Reference in a new issue View git blame Copy permalink