diff options
Diffstat (limited to 'guides/DynamicThemes/dynamic_themes/index.html')
| -rw-r--r-- | guides/DynamicThemes/dynamic_themes/index.html | 1400 |
1 files changed, 1400 insertions, 0 deletions
diff --git a/guides/DynamicThemes/dynamic_themes/index.html b/guides/DynamicThemes/dynamic_themes/index.html new file mode 100644 index 00000000..fd311916 --- /dev/null +++ b/guides/DynamicThemes/dynamic_themes/index.html @@ -0,0 +1,1400 @@ + +<!doctype html> +<html lang="en" class="no-js"> + <head> + + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width,initial-scale=1"> + + + + + <link rel="prev" href="../../Plugins/2017-04-19-rofi-140-sneak-preview-plugins/"> + + + <link rel="next" href="../../../current/rofi.1/"> + + <link rel="icon" href="../../../assets/images/favicon.png"> + <meta name="generator" content="mkdocs-1.4.2, mkdocs-material-9.0.6"> + + + + <title>Dynamic Theme - Rofi Documentation</title> + + + + <link rel="stylesheet" href="../../../assets/stylesheets/main.558e4712.min.css"> + + + <link rel="stylesheet" href="../../../assets/stylesheets/palette.2505c338.min.css"> + + + + + + + + + + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> + <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback"> + <style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style> + + + + <script>__md_scope=new URL("../../..",location),__md_hash=e=>[...e].reduce((e,_)=>(e<<5)-e+_.charCodeAt(0),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script> + + + + + + + </head> + + + + + + + + <body dir="ltr" data-md-color-scheme="default" data-md-color-primary="" data-md-color-accent=""> + + + + <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off"> + <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off"> + <label class="md-overlay" for="__drawer"></label> + <div data-md-component="skip"> + + + <a href="#dynamic-theme" class="md-skip"> + Skip to content + </a> + + </div> + <div data-md-component="announce"> + + </div> + + + + +<header class="md-header" data-md-component="header"> + <nav class="md-header__inner md-grid" aria-label="Header"> + <a href="../../.." title="Rofi Documentation" class="md-header__button md-logo" aria-label="Rofi Documentation" data-md-component="logo"> + + + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54Z"/></svg> + + </a> + <label class="md-header__button md-icon" for="__drawer"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"/></svg> + </label> + <div class="md-header__title" data-md-component="header-title"> + <div class="md-header__ellipsis"> + <div class="md-header__topic"> + <span class="md-ellipsis"> + Rofi Documentation + </span> + </div> + <div class="md-header__topic" data-md-component="header-topic"> + <span class="md-ellipsis"> + + Dynamic Theme + + </span> + </div> + </div> + </div> + + + + + <div class="md-header__source"> + <a href="https://github.com/davatorium/rofi/" title="Go to repository" class="md-source" data-md-component="source"> + <div class="md-source__icon md-icon"> + + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg> + </div> + <div class="md-source__repository"> + GitHub + </div> +</a> + </div> + + </nav> + +</header> + + <div class="md-container" data-md-component="container"> + + + + + + + <main class="md-main" data-md-component="main"> + <div class="md-main__inner md-grid"> + + + + <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" > + <div class="md-sidebar__scrollwrap"> + <div class="md-sidebar__inner"> + + + +<nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0"> + <label class="md-nav__title" for="__drawer"> + <a href="../../.." title="Rofi Documentation" class="md-nav__button md-logo" aria-label="Rofi Documentation" data-md-component="logo"> + + + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54Z"/></svg> + + </a> + Rofi Documentation + </label> + + <div class="md-nav__source"> + <a href="https://github.com/davatorium/rofi/" title="Go to repository" class="md-source" data-md-component="source"> + <div class="md-source__icon md-icon"> + + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg> + </div> + <div class="md-source__repository"> + GitHub + </div> +</a> + </div> + + <ul class="md-nav__list" data-md-scrollfix> + + + + + + + + + <li class="md-nav__item"> + <a href="../../../COPYING/" class="md-nav__link"> + License + </a> + </li> + + + + + + + + + + + <li class="md-nav__item"> + <a href="https://github.com/davatorium/rofi/issues" class="md-nav__link"> + Issue Tracker + </a> + </li> + + + + + + + + + + + <li class="md-nav__item"> + <a href="https://github.com/davatorium/rofi/discussions" class="md-nav__link"> + Discussions Forum + </a> + </li> + + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../downloads/" class="md-nav__link"> + Downloads + </a> + </li> + + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../INSTALL/" class="md-nav__link"> + Installation + </a> + </li> + + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../CONFIG/" class="md-nav__link"> + Configuration + </a> + </li> + + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../themes/themes/" class="md-nav__link"> + Themes + </a> + </li> + + + + + + + + + + + + + + <li class="md-nav__item md-nav__item--active md-nav__item--nested"> + + + + + <input class="md-nav__toggle md-toggle " data-md-toggle="__nav_8" type="checkbox" id="__nav_8" checked> + + + + <label class="md-nav__link" for="__nav_8" tabindex="0" aria-expanded="true"> + Guides + <span class="md-nav__icon md-icon"></span> + </label> + + <nav class="md-nav" aria-label="Guides" data-md-level="1"> + <label class="md-nav__title" for="__nav_8"> + <span class="md-nav__icon md-icon"></span> + Guides + </label> + <ul class="md-nav__list" data-md-scrollfix> + + + + + + + <li class="md-nav__item"> + <a href="../../Transparency/theme3-transparency/" class="md-nav__link"> + Transparency + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../Positioning/theme3-positioning/" class="md-nav__link"> + Positioning + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../Plugins/2017-04-19-rofi-140-sneak-preview-plugins/" class="md-nav__link"> + Plugins + </a> + </li> + + + + + + + + + + + + <li class="md-nav__item md-nav__item--active"> + + <input class="md-nav__toggle md-toggle" data-md-toggle="toc" type="checkbox" id="__toc"> + + + + + + <label class="md-nav__link md-nav__link--active" for="__toc"> + Dynamic Theme + <span class="md-nav__icon md-icon"></span> + </label> + + <a href="./" class="md-nav__link md-nav__link--active"> + Dynamic Theme + </a> + + + +<nav class="md-nav md-nav--secondary" aria-label="Table of contents"> + + + + + + + <label class="md-nav__title" for="__toc"> + <span class="md-nav__icon md-icon"></span> + Table of contents + </label> + <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix> + + <li class="md-nav__item"> + <a href="#image-browser-example" class="md-nav__link"> + Image browser example + </a> + +</li> + + <li class="md-nav__item"> + <a href="#wallpaper-picker" class="md-nav__link"> + Wallpaper picker + </a> + +</li> + + </ul> + +</nav> + + </li> + + + + + </ul> + </nav> + </li> + + + + + + + + + + + + <li class="md-nav__item md-nav__item--nested"> + + + + + <input class="md-nav__toggle md-toggle " data-md-toggle="__nav_9" type="checkbox" id="__nav_9" > + + + + <label class="md-nav__link" for="__nav_9" tabindex="0" aria-expanded="false"> + Current + <span class="md-nav__icon md-icon"></span> + </label> + + <nav class="md-nav" aria-label="Current" data-md-level="1"> + <label class="md-nav__title" for="__nav_9"> + <span class="md-nav__icon md-icon"></span> + Current + </label> + <ul class="md-nav__list" data-md-scrollfix> + + + + + + + <li class="md-nav__item"> + <a href="../../../current/rofi.1/" class="md-nav__link"> + Rofi + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../current/rofi-theme.5/" class="md-nav__link"> + Themes + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../current/rofi-dmenu.5/" class="md-nav__link"> + Dmenu + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../current/rofi-script.5/" class="md-nav__link"> + Script + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../current/rofi-debugging.5/" class="md-nav__link"> + Debugging + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../current/rofi-keys.5/" class="md-nav__link"> + Keys + </a> + </li> + + + + + </ul> + </nav> + </li> + + + + + + + + + + + + <li class="md-nav__item md-nav__item--nested"> + + + + + <input class="md-nav__toggle md-toggle " data-md-toggle="__nav_10" type="checkbox" id="__nav_10" > + + + + <label class="md-nav__link" for="__nav_10" tabindex="0" aria-expanded="false"> + 1.7.5 + <span class="md-nav__icon md-icon"></span> + </label> + + <nav class="md-nav" aria-label="1.7.5" data-md-level="1"> + <label class="md-nav__title" for="__nav_10"> + <span class="md-nav__icon md-icon"></span> + 1.7.5 + </label> + <ul class="md-nav__list" data-md-scrollfix> + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.5/rofi.1/" class="md-nav__link"> + Rofi + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.5/rofi-theme.5/" class="md-nav__link"> + Themes + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.5/rofi-dmenu.5/" class="md-nav__link"> + Dmenu + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.5/rofi-script.5/" class="md-nav__link"> + Script + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.5/rofi-debugging.5/" class="md-nav__link"> + Debugging + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.5/rofi-keys.5/" class="md-nav__link"> + Keys + </a> + </li> + + + + + </ul> + </nav> + </li> + + + + + + + + + + + + <li class="md-nav__item md-nav__item--nested"> + + + + + <input class="md-nav__toggle md-toggle " data-md-toggle="__nav_11" type="checkbox" id="__nav_11" > + + + + <label class="md-nav__link" for="__nav_11" tabindex="0" aria-expanded="false"> + 1.7.4 + <span class="md-nav__icon md-icon"></span> + </label> + + <nav class="md-nav" aria-label="1.7.4" data-md-level="1"> + <label class="md-nav__title" for="__nav_11"> + <span class="md-nav__icon md-icon"></span> + 1.7.4 + </label> + <ul class="md-nav__list" data-md-scrollfix> + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.4/rofi.1/" class="md-nav__link"> + Rofi + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.4/rofi-theme.5/" class="md-nav__link"> + Themes + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.4/rofi-dmenu.5/" class="md-nav__link"> + Dmenu + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.4/rofi-script.5/" class="md-nav__link"> + Script + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.4/rofi-debugging.5/" class="md-nav__link"> + Debugging + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.4/rofi-keys.5/" class="md-nav__link"> + Keys + </a> + </li> + + + + + </ul> + </nav> + </li> + + + + + + + + + + + + <li class="md-nav__item md-nav__item--nested"> + + + + + <input class="md-nav__toggle md-toggle " data-md-toggle="__nav_12" type="checkbox" id="__nav_12" > + + + + <label class="md-nav__link" for="__nav_12" tabindex="0" aria-expanded="false"> + 1.7.3 + <span class="md-nav__icon md-icon"></span> + </label> + + <nav class="md-nav" aria-label="1.7.3" data-md-level="1"> + <label class="md-nav__title" for="__nav_12"> + <span class="md-nav__icon md-icon"></span> + 1.7.3 + </label> + <ul class="md-nav__list" data-md-scrollfix> + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.3/rofi.1/" class="md-nav__link"> + Rofi + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.3/rofi-theme.5/" class="md-nav__link"> + Themes + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.3/rofi-dmenu.5/" class="md-nav__link"> + Dmenu + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.3/rofi-script.5/" class="md-nav__link"> + Script + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.3/rofi-debugging.5/" class="md-nav__link"> + Debugging + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.3/rofi-keys.5/" class="md-nav__link"> + Keys + </a> + </li> + + + + + </ul> + </nav> + </li> + + + + + + + + + + + + <li class="md-nav__item md-nav__item--nested"> + + + + + <input class="md-nav__toggle md-toggle " data-md-toggle="__nav_13" type="checkbox" id="__nav_13" > + + + + <label class="md-nav__link" for="__nav_13" tabindex="0" aria-expanded="false"> + 1.7.2 + <span class="md-nav__icon md-icon"></span> + </label> + + <nav class="md-nav" aria-label="1.7.2" data-md-level="1"> + <label class="md-nav__title" for="__nav_13"> + <span class="md-nav__icon md-icon"></span> + 1.7.2 + </label> + <ul class="md-nav__list" data-md-scrollfix> + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.2/rofi.1/" class="md-nav__link"> + Rofi + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.2/rofi-theme.5/" class="md-nav__link"> + Themes + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.2/rofi-script.5/" class="md-nav__link"> + Script + </a> + </li> + + + + + </ul> + </nav> + </li> + + + + + + + + + + + + <li class="md-nav__item md-nav__item--nested"> + + + + + <input class="md-nav__toggle md-toggle " data-md-toggle="__nav_14" type="checkbox" id="__nav_14" > + + + + <label class="md-nav__link" for="__nav_14" tabindex="0" aria-expanded="false"> + 1.7.1 + <span class="md-nav__icon md-icon"></span> + </label> + + <nav class="md-nav" aria-label="1.7.1" data-md-level="1"> + <label class="md-nav__title" for="__nav_14"> + <span class="md-nav__icon md-icon"></span> + 1.7.1 + </label> + <ul class="md-nav__list" data-md-scrollfix> + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.1/rofi.1/" class="md-nav__link"> + Rofi + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.1/rofi-theme.5/" class="md-nav__link"> + Themes + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.1/rofi-script.5/" class="md-nav__link"> + Script + </a> + </li> + + + + + </ul> + </nav> + </li> + + + + + + + + + + + + <li class="md-nav__item md-nav__item--nested"> + + + + + <input class="md-nav__toggle md-toggle " data-md-toggle="__nav_15" type="checkbox" id="__nav_15" > + + + + <label class="md-nav__link" for="__nav_15" tabindex="0" aria-expanded="false"> + 1.7.0 + <span class="md-nav__icon md-icon"></span> + </label> + + <nav class="md-nav" aria-label="1.7.0" data-md-level="1"> + <label class="md-nav__title" for="__nav_15"> + <span class="md-nav__icon md-icon"></span> + 1.7.0 + </label> + <ul class="md-nav__list" data-md-scrollfix> + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.0/rofi.1/" class="md-nav__link"> + Rofi + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.0/rofi-theme.5/" class="md-nav__link"> + Themes + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../../../1.7.0/rofi-script.5/" class="md-nav__link"> + Script + </a> + </li> + + + + + </ul> + </nav> + </li> + + + + </ul> +</nav> + </div> + </div> + </div> + + + + <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" > + <div class="md-sidebar__scrollwrap"> + <div class="md-sidebar__inner"> + + +<nav class="md-nav md-nav--secondary" aria-label="Table of contents"> + + + + + + + <label class="md-nav__title" for="__toc"> + <span class="md-nav__icon md-icon"></span> + Table of contents + </label> + <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix> + + <li class="md-nav__item"> + <a href="#image-browser-example" class="md-nav__link"> + Image browser example + </a> + +</li> + + <li class="md-nav__item"> + <a href="#wallpaper-picker" class="md-nav__link"> + Wallpaper picker + </a> + +</li> + + </ul> + +</nav> + </div> + </div> + </div> + + + + <div class="md-content" data-md-component="content"> + <article class="md-content__inner md-typeset"> + + + + + + + + +<h1 id="dynamic-theme">Dynamic Theme</h1> +<p>A new addition in rofi 1.7.5 that did not get a lot of attention is support for +the enabled keyword in the media statement and supporting environment values. +Or more practical, you can modify your theme based on environment variables.</p> +<pre><code class="language-css"> +@media ( enabled: env(DO_X, false)) { + listview { + orientation: vertical; + } +} +</code></pre> +<p>You can now enable this part of the theme by running rofi with <code>DO_X</code> set.</p> +<pre><code class="language-bash">DO_X=true rofi -show combi +</code></pre> +<h2 id="image-browser-example">Image browser example</h2> +<p>In the current release, there is a +<a href="https://github.com/davatorium/rofi/blob/next/themes/fullscreen-preview.rasi">fullscreen_preview</a> +as an example.</p> +<p>In this theme we are going to modify the filebrowser view with a preview widget +that we can enable.</p> +<p>Lets start with the basic theme.</p> +<pre><code class="language-css">* { + background-color: transparent; + text-color: white; +} + +window { + fullscreen: true; + background-color: black/80%; + padding: 4em; + children: [ wrap, listview-split]; + spacing: 1em; +} + + +/** We add an extra child to this if PREVIEW=true */ +listview-split { + orientation: horizontal; + spacing: 0.4em; + children: [listview]; +} + +wrap { + expand: false; + orientation: vertical; + children: [ inputbar, message ]; + background-image: linear-gradient(white/5%, white/40%); + border-color: lightblue; + border: 3px; + border-radius: 0.4em; +} + +icon-ib { + expand: false; + filename: "system-search"; + vertical-align: 0.5; + horizontal-align: 0.5; + size: 1em; +} +inputbar { + spacing: 0.4em; + padding: 0.4em; + children: [ icon-ib, entry ]; +} +entry { + placeholder: "Search"; + placeholder-color: grey; +} +message { + background-color: red/20%; + border-color: lightsalmon; + border: 3px 0px 0px 0px; + padding: 0.4em; + spacing: 0.4em; +} + +listview { + flow: horizontal; + fixed-columns: true; + columns: 7; + lines: 5; + spacing: 1.0em; +} + +element { + orientation: vertical;</ |