<?xml version="1.0" encoding="utf-8"?><?xml-stylesheet type="text/xsl" href="atom.xsl"?>
<feed xmlns="http://www.w3.org/2005/Atom">
    <id>https://www.muslimtify.org/blog</id>
    <title>Muslimtify Blog</title>
    <updated>2026-07-13T00:00:00.000Z</updated>
    <generator>https://github.com/jpmonette/feed</generator>
    <link rel="alternate" href="https://www.muslimtify.org/blog"/>
    <subtitle>Muslimtify Blog</subtitle>
    <icon>https://www.muslimtify.org/img/favicon.ico</icon>
    <entry>
        <title type="html"><![CDATA[Integrate muslimtify with waybar]]></title>
        <id>https://www.muslimtify.org/blog/integrate-muslimtify-with-waybar</id>
        <link href="https://www.muslimtify.org/blog/integrate-muslimtify-with-waybar"/>
        <updated>2026-07-13T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[If you're a Muslim using a tiling window manager on Linux, you've probably wished for a subtle, always-visible prayer time indicator on your status bar. In this article, I'll walk you through how I integrated Muslimtify, a prayer time notification tool, with Waybar, the popular status bar for Wayland compositors like Hyprland and Sway.]]></summary>
        <content type="html"><![CDATA[<img width="1920" height="1080" alt="2026-07-13-135546_hyprshot" src="https://github.com/user-attachments/assets/1015c250-6262-4071-a0a5-d0e4c30a6c69" style="height:auto">
<p>If you're a Muslim using a tiling window manager on Linux, you've probably wished for a subtle, always-visible prayer time indicator on your status bar. In this article, I'll walk you through how I integrated Muslimtify, a prayer time notification tool, with Waybar, the popular status bar for Wayland compositors like Hyprland and Sway.</p>
<p>The end result: a clean module in your Waybar that shows the next prayer name, time, and countdown, with a hover tooltip displaying the full prayer schedule.</p>
<!-- -->
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="what-is-muslimtify">What is Muslimtify?<a href="https://www.muslimtify.org/blog/integrate-muslimtify-with-waybar#what-is-muslimtify" class="hash-link" aria-label="Direct link to What is Muslimtify?" title="Direct link to What is Muslimtify?" translate="no">​</a></h2>
<p>Muslimtify is a minimalist prayer time notification daemon for Muslims designed specifically for Linux and Windows desktops (MacOS soon). It calculates Islamic prayer times locally using pure astronomical formulas. It provides a seamless way to receive accurate prayer alerts directly through native system notifications and a clean command-line interface.</p>
<p>Key CLI subcommands we'll use:</p>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><div class="token-line" style="color:#F8F8F2"><span class="token plain">muslimtify show </span><span class="token parameter variable" style="color:rgb(189, 147, 249);font-style:italic">--headless</span><span class="token plain">          </span><span class="token comment" style="color:rgb(98, 114, 164)"># Show today's prayer times in key=value format</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">muslimtify show </span><span class="token parameter variable" style="color:rgb(189, 147, 249);font-style:italic">--next</span><span class="token plain"> </span><span class="token parameter variable" style="color:rgb(189, 147, 249);font-style:italic">--headless</span><span class="token plain">   </span><span class="token comment" style="color:rgb(98, 114, 164)"># Show next prayer's name, time, and remaining countdown in key=value format</span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="prerequisites">Prerequisites<a href="https://www.muslimtify.org/blog/integrate-muslimtify-with-waybar#prerequisites" class="hash-link" aria-label="Direct link to Prerequisites" title="Direct link to Prerequisites" translate="no">​</a></h2>
<ul>
<li class="">Waybar installed and configured</li>
<li class="">Muslimtify installed</li>
<li class="">A Nerd Font (I use JetBrainsMono Nerd Font for the prayer icon)</li>
</ul>
<p>Make sure Muslimtify is working before proceeding:</p>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><div class="token-line" style="color:#F8F8F2"><span class="token plain">muslimtify daemon status</span><br></div></code></pre></div></div>
<p>If this returns with active status, you're good to go, otherwise you can run:</p>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><div class="token-line" style="color:#F8F8F2"><span class="token plain">muslimtify daemon </span><span class="token function" style="color:rgb(80, 250, 123)">install</span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="configure-your-location-optional">Configure Your Location (Optional)<a href="https://www.muslimtify.org/blog/integrate-muslimtify-with-waybar#configure-your-location-optional" class="hash-link" aria-label="Direct link to Configure Your Location (Optional)" title="Direct link to Configure Your Location (Optional)" translate="no">​</a></h2>
<p>Muslimtify calculates prayer times based on your coordinates, which are detected automatically. You can verify your current location and prayer times by running:</p>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><div class="token-line" style="color:#F8F8F2"><span class="token plain">muslimtify show</span><br></div></code></pre></div></div>
<p>If the displayed prayer times are already accurate (within a tolerance of ±2 minutes), you can safely skip this section. Otherwise, follow the steps below to manually adjust your location settings.</p>
<p>The quickest way is to auto-detect from your IP address:</p>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><div class="token-line" style="color:#F8F8F2"><span class="token plain">muslimtify location </span><span class="token builtin class-name" style="color:rgb(189, 147, 249)">set</span><span class="token plain"> </span><span class="token parameter variable" style="color:rgb(189, 147, 249);font-style:italic">--auto</span><br></div></code></pre></div></div>
<p>Or set it manually if you prefer:</p>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><div class="token-line" style="color:#F8F8F2"><span class="token plain">muslimtify location </span><span class="token builtin class-name" style="color:rgb(189, 147, 249)">set</span><span class="token plain"> </span><span class="token parameter variable" style="color:rgb(189, 147, 249);font-style:italic">--lat</span><span class="token operator">=</span><span class="token plain">-6.21 </span><span class="token parameter variable" style="color:rgb(189, 147, 249);font-style:italic">--long</span><span class="token operator">=</span><span class="token number">106.84</span><span class="token plain"> </span><span class="token parameter variable" style="color:rgb(189, 147, 249);font-style:italic">--timezone</span><span class="token operator">=</span><span class="token plain">Asia/Jakarta</span><br></div></code></pre></div></div>
<p>Optionally, pick a calculation method and madzhab that match your region:</p>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><div class="token-line" style="color:#F8F8F2"><span class="token plain">muslimtify method </span><span class="token parameter variable" style="color:rgb(189, 147, 249);font-style:italic">--auto</span><span class="token plain">   </span><span class="token comment" style="color:rgb(98, 114, 164)"># Auto-select from your country</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">muslimtify madzhab shafi   </span><span class="token comment" style="color:rgb(98, 114, 164)"># Or hanafi</span><br></div></code></pre></div></div>
<p>Now verify Muslimtify is returning data:</p>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><div class="token-line" style="color:#F8F8F2"><span class="token plain">muslimtify show </span><span class="token parameter variable" style="color:rgb(189, 147, 249);font-style:italic">--headless</span><br></div></code></pre></div></div>
<p>You should see a <code>date=</code> line followed by one <code>key=value</code> line for each enabled prayer (fajr, dhuhr, asr, maghrib, isha). Once you do, the Waybar module has something to display.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="step-1-create-the-waybar-script">Step 1: Create the Waybar Script<a href="https://www.muslimtify.org/blog/integrate-muslimtify-with-waybar#step-1-create-the-waybar-script" class="hash-link" aria-label="Direct link to Step 1: Create the Waybar Script" title="Direct link to Step 1: Create the Waybar Script" translate="no">​</a></h2>
<p>Waybar custom modules can consume JSON output with <code>text</code> and <code>tooltip</code> fields. We'll write a small shell script that queries Muslimtify and formats the output.</p>
<p>Create <code>~/.local/bin/waybar-muslimtify.sh</code> (or in any location you want):</p>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><div class="token-line" style="color:#F8F8F2"><span class="token shebang important">#!/bin/bash</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token comment" style="color:rgb(98, 114, 164)"># Next prayer: `muslimtify show --next --headless` emits key=value lines,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token comment" style="color:rgb(98, 114, 164)"># e.g.  date=2026-09-16  /  asr=15:22  /  remaining=03:08  (prayer name is lowercase)</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token assign-left variable" style="color:rgb(189, 147, 249);font-style:italic">name</span><span class="token operator">=</span><span class="token string" style="color:rgb(255, 121, 198)">""</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token assign-left variable" style="color:rgb(189, 147, 249);font-style:italic">time</span><span class="token operator">=</span><span class="token string" style="color:rgb(255, 121, 198)">""</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token assign-left variable" style="color:rgb(189, 147, 249);font-style:italic">remaining</span><span class="token operator">=</span><span class="token string" style="color:rgb(255, 121, 198)">""</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">while</span><span class="token plain"> </span><span class="token assign-left variable environment constant" style="color:rgb(189, 147, 249);font-style:italic">IFS</span><span class="token operator">=</span><span class="token string" style="color:rgb(255, 121, 198)">'='</span><span class="token plain"> </span><span class="token builtin class-name" style="color:rgb(189, 147, 249)">read</span><span class="token plain"> </span><span class="token parameter variable" style="color:rgb(189, 147, 249);font-style:italic">-r</span><span class="token plain"> key val</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">do</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">case</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"</span><span class="token string variable" style="color:rgb(189, 147, 249);font-style:italic">$key</span><span class="token string" style="color:rgb(255, 121, 198)">"</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">in</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">        </span><span class="token string" style="color:rgb(255, 121, 198)">""</span><span class="token operator">|</span><span class="token function" style="color:rgb(80, 250, 123)">date</span><span class="token operator">|</span><span class="token plain">*_offset</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token builtin class-name" style="color:rgb(189, 147, 249)">continue</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain">   </span><span class="token comment" style="color:rgb(98, 114, 164)"># not a prayer name</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">esac</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">if</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"</span><span class="token string variable" style="color:rgb(189, 147, 249);font-style:italic">$key</span><span class="token string" style="color:rgb(255, 121, 198)">"</span><span class="token plain"> </span><span class="token operator">==</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"remaining"</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">then</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">        </span><span class="token assign-left variable" style="color:rgb(189, 147, 249);font-style:italic">remaining</span><span class="token operator">=</span><span class="token string" style="color:rgb(255, 121, 198)">"</span><span class="token string variable" style="color:rgb(189, 147, 249);font-style:italic">$val</span><span class="token string" style="color:rgb(255, 121, 198)">"</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">else</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">        </span><span class="token assign-left variable" style="color:rgb(189, 147, 249);font-style:italic">name</span><span class="token operator">=</span><span class="token string" style="color:rgb(255, 121, 198)">"</span><span class="token string variable" style="color:rgb(189, 147, 249);font-style:italic">$key</span><span class="token string" style="color:rgb(255, 121, 198)">"</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">        </span><span class="token assign-left variable" style="color:rgb(189, 147, 249);font-style:italic">time</span><span class="token operator">=</span><span class="token string" style="color:rgb(255, 121, 198)">"</span><span class="token string variable" style="color:rgb(189, 147, 249);font-style:italic">$val</span><span class="token string" style="color:rgb(255, 121, 198)">"</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">fi</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">done</span><span class="token plain"> </span><span class="token operator">&lt;</span><span class="token plain"> </span><span class="token operator">&lt;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">muslimtify show </span><span class="token parameter variable" style="color:rgb(189, 147, 249);font-style:italic">--next</span><span class="token plain"> </span><span class="token parameter variable" style="color:rgb(189, 147, 249);font-style:italic">--headless</span><span class="token plain"> </span><span class="token operator file-descriptor important">2</span><span class="token operator">&gt;</span><span class="token plain">/dev/null</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">if</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token plain"> </span><span class="token parameter variable" style="color:rgb(189, 147, 249);font-style:italic">-n</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"</span><span class="token string variable" style="color:rgb(189, 147, 249);font-style:italic">$name</span><span class="token string" style="color:rgb(255, 121, 198)">"</span><span class="token plain"> </span><span class="token operator">&amp;&amp;</span><span class="token plain"> </span><span class="token parameter variable" style="color:rgb(189, 147, 249);font-style:italic">-n</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"</span><span class="token string variable" style="color:rgb(189, 147, 249);font-style:italic">$time</span><span class="token string" style="color:rgb(255, 121, 198)">"</span><span class="token plain"> </span><span class="token operator">&amp;&amp;</span><span class="token plain"> </span><span class="token parameter variable" style="color:rgb(189, 147, 249);font-style:italic">-n</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"</span><span class="token string variable" style="color:rgb(189, 147, 249);font-style:italic">$remaining</span><span class="token string" style="color:rgb(255, 121, 198)">"</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">then</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token assign-left variable" style="color:rgb(189, 147, 249);font-style:italic">display_name</span><span class="token operator">=</span><span class="token string" style="color:rgb(255, 121, 198)">"</span><span class="token string variable" style="color:rgb(189, 147, 249);font-style:italic">${name</span><span class="token string variable operator" style="color:rgb(189, 147, 249);font-style:italic">^</span><span class="token string variable" style="color:rgb(189, 147, 249);font-style:italic">}</span><span class="token string" style="color:rgb(255, 121, 198)">"</span><span class="token plain">   </span><span class="token comment" style="color:rgb(98, 114, 164)"># Capitalize first letter for display</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token comment" style="color:rgb(98, 114, 164)"># Build beautiful tooltip from prayer times</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token assign-left variable" style="color:rgb(189, 147, 249);font-style:italic">tooltip</span><span class="token operator">=</span><span class="token string" style="color:rgb(255, 121, 198)">"󰧧  &lt;b&gt;Prayer Times&lt;/b&gt;</span><span class="token string entity" style="color:rgb(255, 121, 198)">\n</span><span class="token string" style="color:rgb(255, 121, 198)">━━━━━━━━━━━━━━━━━━━━━"</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">while</span><span class="token plain"> </span><span class="token assign-left variable environment constant" style="color:rgb(189, 147, 249);font-style:italic">IFS</span><span class="token operator">=</span><span class="token string" style="color:rgb(255, 121, 198)">'='</span><span class="token plain"> </span><span class="token builtin class-name" style="color:rgb(189, 147, 249)">read</span><span class="token plain"> </span><span class="token parameter variable" style="color:rgb(189, 147, 249);font-style:italic">-r</span><span class="token plain"> prayer ptime</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">do</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">        </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">case</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"</span><span class="token string variable" style="color:rgb(189, 147, 249);font-style:italic">$prayer</span><span class="token string" style="color:rgb(255, 121, 198)">"</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">in</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">            </span><span class="token string" style="color:rgb(255, 121, 198)">""</span><span class="token operator">|</span><span class="token function" style="color:rgb(80, 250, 123)">date</span><span class="token operator">|</span><span class="token plain">*_offset</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token builtin class-name" style="color:rgb(189, 147, 249)">continue</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain">   </span><span class="token comment" style="color:rgb(98, 114, 164)"># skip the date and day-shift lines</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">        </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">esac</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">        </span><span class="token assign-left variable" style="color:rgb(189, 147, 249);font-style:italic">icon</span><span class="token operator">=</span><span class="token string" style="color:rgb(255, 121, 198)">""</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">        </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">case</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"</span><span class="token string variable" style="color:rgb(189, 147, 249);font-style:italic">$prayer</span><span class="token string" style="color:rgb(255, 121, 198)">"</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">in</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">            fajr</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain">    </span><span class="token assign-left variable" style="color:rgb(189, 147, 249);font-style:italic">icon</span><span class="token operator">=</span><span class="token string" style="color:rgb(255, 121, 198)">"󰖜"</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">            dhuhr</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain">   </span><span class="token assign-left variable" style="color:rgb(189, 147, 249);font-style:italic">icon</span><span class="token operator">=</span><span class="token string" style="color:rgb(255, 121, 198)">"󰖙"</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">            asr</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain">     </span><span class="token assign-left variable" style="color:rgb(189, 147, 249);font-style:italic">icon</span><span class="token operator">=</span><span class="token string" style="color:rgb(255, 121, 198)">"󰖚"</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">            maghrib</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token assign-left variable" style="color:rgb(189, 147, 249);font-style:italic">icon</span><span class="token operator">=</span><span class="token string" style="color:rgb(255, 121, 198)">"󰖛"</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">            isha</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain">    </span><span class="token assign-left variable" style="color:rgb(189, 147, 249);font-style:italic">icon</span><span class="token operator">=</span><span class="token string" style="color:rgb(255, 121, 198)">"󰖔"</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">        </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">esac</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">        </span><span class="token assign-left variable" style="color:rgb(189, 147, 249);font-style:italic">pretty</span><span class="token operator">=</span><span class="token string" style="color:rgb(255, 121, 198)">"</span><span class="token string variable" style="color:rgb(189, 147, 249);font-style:italic">${prayer</span><span class="token string variable operator" style="color:rgb(189, 147, 249);font-style:italic">^</span><span class="token string variable" style="color:rgb(189, 147, 249);font-style:italic">}</span><span class="token string" style="color:rgb(255, 121, 198)">"</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">        </span><span class="token assign-left variable" style="color:rgb(189, 147, 249);font-style:italic">padded</span><span class="token operator">=</span><span class="token variable" style="color:rgb(189, 147, 249);font-style:italic">$(</span><span class="token variable builtin class-name" style="color:rgb(189, 147, 249);font-style:italic">printf</span><span class="token variable" style="color:rgb(189, 147, 249);font-style:italic"> </span><span class="token variable string" style="color:rgb(255, 121, 198);font-style:italic">'%-9s'</span><span class="token variable" style="color:rgb(189, 147, 249);font-style:italic"> </span><span class="token variable string" style="color:rgb(255, 121, 198);font-style:italic">"</span><span class="token variable string variable" style="color:rgb(189, 147, 249);font-style:italic">$pretty</span><span class="token variable string" style="color:rgb(255, 121, 198);font-style:italic">"</span><span class="token variable" style="color:rgb(189, 147, 249);font-style:italic">)</span><span class="token plain">   </span><span class="token comment" style="color:rgb(98, 114, 164)"># pad name so times align in a column</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">        </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">if</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"</span><span class="token string variable" style="color:rgb(189, 147, 249);font-style:italic">$prayer</span><span class="token string" style="color:rgb(255, 121, 198)">"</span><span class="token plain"> </span><span class="token operator">==</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"</span><span class="token string variable" style="color:rgb(189, 147, 249);font-style:italic">$name</span><span class="token string" style="color:rgb(255, 121, 198)">"</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">then</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">            </span><span class="token assign-left variable" style="color:rgb(189, 147, 249);font-style:italic">tooltip</span><span class="token operator">+=</span><span class="token string" style="color:rgb(255, 121, 198)">"</span><span class="token string entity" style="color:rgb(255, 121, 198)">\n</span><span class="token string variable" style="color:rgb(189, 147, 249);font-style:italic">${icon}</span><span class="token string" style="color:rgb(255, 121, 198)">  &lt;b&gt;</span><span class="token string variable" style="color:rgb(189, 147, 249);font-style:italic">${padded}</span><span class="token string variable" style="color:rgb(189, 147, 249);font-style:italic">${ptime}</span><span class="token string" style="color:rgb(255, 121, 198)">&lt;/b&gt;  󰁍"</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">        </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">else</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">            </span><span class="token assign-left variable" style="color:rgb(189, 147, 249);font-style:italic">tooltip</span><span class="token operator">+=</span><span class="token string" style="color:rgb(255, 121, 198)">"</span><span class="token string entity" style="color:rgb(255, 121, 198)">\n</span><span class="token string variable" style="color:rgb(189, 147, 249);font-style:italic">${icon}</span><span class="token string" style="color:rgb(255, 121, 198)">  </span><span class="token string variable" style="color:rgb(189, 147, 249);font-style:italic">${padded}</span><span class="token string variable" style="color:rgb(189, 147, 249);font-style:italic">${ptime}</span><span class="token string" style="color:rgb(255, 121, 198)">"</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">        </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">fi</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">done</span><span class="token plain"> </span><span class="token operator">&lt;</span><span class="token plain"> </span><span class="token operator">&lt;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">muslimtify show </span><span class="token parameter variable" style="color:rgb(189, 147, 249);font-style:italic">--headless</span><span class="token plain"> </span><span class="token operator file-descriptor important">2</span><span class="token operator">&gt;</span><span class="token plain">/dev/null</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token assign-left variable" style="color:rgb(189, 147, 249);font-style:italic">tooltip</span><span class="token operator">+=</span><span class="token string" style="color:rgb(255, 121, 198)">"</span><span class="token string entity" style="color:rgb(255, 121, 198)">\n</span><span class="token string" style="color:rgb(255, 121, 198)">━━━━━━━━━━━━━━━━━━━━━"</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token assign-left variable" style="color:rgb(189, 147, 249);font-style:italic">tooltip</span><span class="token operator">+=</span><span class="token string" style="color:rgb(255, 121, 198)">"</span><span class="token string entity" style="color:rgb(255, 121, 198)">\n</span><span class="token string" style="color:rgb(255, 121, 198)">󰔟  Next: &lt;b&gt;</span><span class="token string variable" style="color:rgb(189, 147, 249);font-style:italic">${display_name}</span><span class="token string" style="color:rgb(255, 121, 198)">&lt;/b&gt; in &lt;b&gt;</span><span class="token string variable" style="color:rgb(189, 147, 249);font-style:italic">${remaining}</span><span class="token string" style="color:rgb(255, 121, 198)">&lt;/b&gt;"</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token builtin class-name" style="color:rgb(189, 147, 249)">printf</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">'{"text": "󱠧  %s %s | 󰔟 %s", "tooltip": "%s"}\n'</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">\</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">        </span><span class="token string" style="color:rgb(255, 121, 198)">"</span><span class="token string variable" style="color:rgb(189, 147, 249);font-style:italic">$display_name</span><span class="token string" style="color:rgb(255, 121, 198)">"</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"</span><span class="token string variable" style="color:rgb(189, 147, 249);font-style:italic">$time</span><span class="token string" style="color:rgb(255, 121, 198)">"</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"</span><span class="token string variable" style="color:rgb(189, 147, 249);font-style:italic">$remaining</span><span class="token string" style="color:rgb(255, 121, 198)">"</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"</span><span class="token string variable" style="color:rgb(189, 147, 249);font-style:italic">$tooltip</span><span class="token string" style="color:rgb(255, 121, 198)">"</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">else</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token builtin class-name" style="color:rgb(189, 147, 249)">printf</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">'{"text": "󱠧 --:--", "tooltip": "Prayer times unavailable"}\n'</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">fi</span><br></div></code></pre></div></div>
<p>Make it executable:</p>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><div class="token-line" style="color:#F8F8F2"><span class="token function" style="color:rgb(80, 250, 123)">chmod</span><span class="token plain"> +x ~/.local/bin/waybar-muslimtify.sh</span><br></div></code></pre></div></div>
<p><strong>How the script works:</strong></p>
<ul>
<li class="">It runs <code>muslimtify show --next --headless</code> once and parses the <code>key=value</code> lines it emits to get the next prayer's name, time, and remaining countdown. The <code>date</code> line, and any <code>&lt;prayer&gt;_offset</code> line for a prayer that falls on another day, are skipped because they are not prayer names.</li>
<li class="">For the tooltip, it runs <code>muslimtify show --headless</code> to read the full prayer times as <code>key=value</code> pairs, then builds a formatted list with a Nerd Font icon for each prayer and marks the next prayer with an arrow.</li>
<li class="">If any data is missing (e.g., Muslimtify isn't configured yet), it falls back to a placeholder <code>--:--</code> display.</li>
<li class="">The output is a JSON object that Waybar's <code>return-type: json</code> consumes directly.</li>
</ul>
<p>The <code>󱠧</code> character is a mosque/prayer icon from Nerd Fonts, feel free to swap it for any icon you prefer or delete it.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="step-2-add-the-custom-module-to-waybar-config">Step 2: Add the Custom Module to Waybar Config<a href="https://www.muslimtify.org/blog/integrate-muslimtify-with-waybar#step-2-add-the-custom-module-to-waybar-config" class="hash-link" aria-label="Direct link to Step 2: Add the Custom Module to Waybar Config" title="Direct link to Step 2: Add the Custom Module to Waybar Config" translate="no">​</a></h2>
<p>Open your Waybar config (typically <code>~/.config/waybar/config.jsonc</code>) and add the custom module definition:</p>
<div class="language-jsonc codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-jsonc codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><div class="token-line" style="color:#F8F8F2"><span class="token plain">"custom/muslimtify": {</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">  "exec": "~/.local/bin/waybar-muslimtify.sh",</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">  "return-type": "json",</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">  "interval": 30,</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">  "tooltip": true</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">}</span><br></div></code></pre></div></div>
<ul>
<li class=""><code>exec</code>, path to our script</li>
<li class=""><code>return-type</code>, tells Waybar to parse the output as JSON (using <code>text</code> and <code>tooltip</code> fields)</li>
<li class=""><code>interval</code>, refresh every 30 seconds, which is more than enough for minute-level prayer times</li>
<li class=""><code>tooltip</code>, enable the hover tooltip</li>
</ul>
<p>Then, place it in whichever bar section you want. I put it in the left modules, right after workspaces:</p>
<div class="language-jsonc codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-jsonc codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><div class="token-line" style="color:#F8F8F2"><span class="token plain">"modules-left": ["hyprland/workspaces", "custom/muslimtify"],</span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="step-3-style-the-module">Step 3: Style the Module<a href="https://www.muslimtify.org/blog/integrate-muslimtify-with-waybar#step-3-style-the-module" class="hash-link" aria-label="Direct link to Step 3: Style the Module" title="Direct link to Step 3: Style the Module" translate="no">​</a></h2>
<p>Here's where it gets fun. You can use whatever colors you want. I wanted the prayer module to stand out with a warm amber accent, like a gentle reminder.</p>
<p>Add this to your <code>~/.config/waybar/style.css</code>:</p>
<div class="language-css codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-css codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><div class="token-line" style="color:#F8F8F2"><span class="token selector id" style="color:rgb(255, 121, 198)">#custom-muslimtify</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token property">background-color</span><span class="token punctuation" style="color:rgb(248, 248, 242)">:</span><span class="token plain"> </span><span class="token hexcode color">#475258</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token property">color</span><span class="token punctuation" style="color:rgb(248, 248, 242)">:</span><span class="token plain"> </span><span class="token hexcode color">#dbbc7f</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token property">border</span><span class="token punctuation" style="color:rgb(248, 248, 242)">:</span><span class="token plain"> </span><span class="token number">1.5</span><span class="token unit">px</span><span class="token plain"> solid </span><span class="token color function" style="color:rgb(80, 250, 123)">rgba</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token color number">219</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token color"> </span><span class="token color number">188</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token color"> </span><span class="token color number">127</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token color"> </span><span class="token color number">0.35</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token property">border-radius</span><span class="token punctuation" style="color:rgb(248, 248, 242)">:</span><span class="token plain"> </span><span class="token number">1.5</span><span class="token unit">rem</span><span class="token plain"> </span><span class="token number">1.5</span><span class="token unit">rem</span><span class="token plain"> </span><span class="token number">0.3</span><span class="token unit">rem</span><span class="token plain"> </span><span class="token number">0.3</span><span class="token unit">rem</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token property">padding</span><span class="token punctuation" style="color:rgb(248, 248, 242)">:</span><span class="token plain"> </span><span class="token number">0.4</span><span class="token unit">rem</span><span class="token plain"> </span><span class="token number">1.2</span><span class="token unit">rem</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token property">margin</span><span class="token punctuation" style="color:rgb(248, 248, 242)">:</span><span class="token plain"> </span><span class="token number">5</span><span class="token unit">px</span><span class="token plain"> </span><span class="token number">0</span><span class="token plain"> </span><span class="token number">0</span><span class="token plain"> </span><span class="token number">1</span><span class="token unit">rem</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token property">text-shadow</span><span class="token punctuation" style="color:rgb(248, 248, 242)">:</span><span class="token plain"> </span><span class="token number">0</span><span class="token plain"> </span><span class="token number">0</span><span class="token plain"> </span><span class="token number">4</span><span class="token unit">px</span><span class="token plain"> </span><span class="token color function" style="color:rgb(80, 250, 123)">rgba</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token color number">219</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token color"> </span><span class="token color number">188</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token color"> </span><span class="token color number">127</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token color"> </span><span class="token color number">0.25</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token property">box-shadow</span><span class="token punctuation" style="color:rgb(248, 248, 242)">:</span><span class="token plain"> inset </span><span class="token number">0</span><span class="token plain"> </span><span class="token number">1</span><span class="token unit">px</span><span class="token plain"> </span><span class="token number">0</span><span class="token plain"> </span><span class="token color function" style="color:rgb(80, 250, 123)">rgba</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token color number">219</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token color"> </span><span class="token color number">188</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token color"> </span><span class="token color number">127</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token color"> </span><span class="token color number">0.08</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">              </span><span class="token number">0</span><span class="token plain"> </span><span class="token number">1</span><span class="token unit">px</span><span class="token plain"> </span><span class="token number">3</span><span class="token unit">px</span><span class="token plain"> </span><span class="token color function" style="color:rgb(80, 250, 123)">rgba</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token color number">45</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token color"> </span><span class="token color number">53</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token color"> </span><span class="token color number">59</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token color"> </span><span class="token color number">0.6</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token property">transition</span><span class="token punctuation" style="color:rgb(248, 248, 242)">:</span><span class="token plain"> all </span><span class="token number">300</span><span class="token unit">ms</span><span class="token plain"> ease</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token selector id" style="color:rgb(255, 121, 198)">#custom-muslimtify</span><span class="token selector pseudo-class" style="color:rgb(255, 121, 198)">:hover</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token property">background-color</span><span class="token punctuation" style="color:rgb(248, 248, 242)">:</span><span class="token plain"> </span><span class="token color function" style="color:rgb(80, 250, 123)">rgba</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token color number">219</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token color"> </span><span class="token color number">188</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token color"> </span><span class="token color number">127</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token color"> </span><span class="token color number">0.15</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token property">border-color</span><span class="token punctuation" style="color:rgb(248, 248, 242)">:</span><span class="token plain"> </span><span class="token hexcode color">#dbbc7f</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token property">text-shadow</span><span class="token punctuation" style="color:rgb(248, 248, 242)">:</span><span class="token plain"> </span><span class="token number">0</span><span class="token plain"> </span><span class="token number">0</span><span class="token plain"> </span><span class="token number">10</span><span class="token unit">px</span><span class="token plain"> </span><span class="token color function" style="color:rgb(80, 250, 123)">rgba</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token color number">219</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token color"> </span><span class="token color number">188</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token color"> </span><span class="token color number">127</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token color"> </span><span class="token color number">0.6</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token property">box-shadow</span><span class="token punctuation" style="color:rgb(248, 248, 242)">:</span><span class="token plain"> inset </span><span class="token number">0</span><span class="token plain"> </span><span class="token number">1</span><span class="token unit">px</span><span class="token plain"> </span><span class="token number">0</span><span class="token plain"> </span><span class="token color function" style="color:rgb(80, 250, 123)">rgba</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token color number">219</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token color"> </span><span class="token color number">188</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token color"> </span><span class="token color number">127</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token color"> </span><span class="token color number">0.15</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">              </span><span class="token number">0</span><span class="token plain"> </span><span class="token number">2</span><span class="token unit">px</span><span class="token plain"> </span><span class="token number">8</span><span class="token unit">px</span><span class="token plain"> </span><span class="token color function" style="color:rgb(80, 250, 123)">rgba</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token color number">219</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token color"> </span><span class="token color number">188</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token color"> </span><span class="token color number">127</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token color"> </span><span class="token color number">0.2</span><span class="token color punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><br></div></code></pre></div></div>
<p>This gives the module:</p>
<ul>
<li class="">A semi-transparent amber border that subtly glows</li>
<li class="">An asymmetric border-radius (rounded top, nearly square bottom) for a distinctive shape</li>
<li class="">A gentle text shadow that intensifies on hover</li>
<li class="">A subtle inset shadow for depth, with a smooth transition on hover</li>
</ul>
<p>Swap the hex values for any colors you like. If your Waybar setup uses a shared color theme, you can also plug in your theme variables here, for example <code>@warning</code> in place of <code>#dbbc7f</code>.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="step-4-reload-waybar">Step 4: Reload Waybar<a href="https://www.muslimtify.org/blog/integrate-muslimtify-with-waybar#step-4-reload-waybar" class="hash-link" aria-label="Direct link to Step 4: Reload Waybar" title="Direct link to Step 4: Reload Waybar" translate="no">​</a></h2>
<p>Restart Waybar to see the changes:</p>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><div class="token-line" style="color:#F8F8F2"><span class="token function" style="color:rgb(80, 250, 123)">killall</span><span class="token plain"> waybar </span><span class="token operator">&amp;&amp;</span><span class="token plain"> waybar </span><span class="token operator">&amp;</span><br></div></code></pre></div></div>
<p>Or if you're on Hyprland, you can simply reload your config.</p>
<p>You should now see something like this on your bar:</p>
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><div class="token-line" style="color:#F8F8F2"><span class="token plain">󱠧  Asr 15:23 | 󰔟 00:42</span><br></div></code></pre></div></div>
<p>Hovering over it reveals the full prayer times table:</p>
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><div class="token-line" style="color:#F8F8F2"><span class="token plain">󰧧 Prayer Times</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">====================</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">󰖜 Fajr     04:38</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">󰖙 Dhuhr    12:05</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">󰖚 Asr      15:23 &lt;-</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">󰖛 Maghrib  18:12</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">󰖔 Isha     19:23</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">====================</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">󰔟 Next: Asr in 00:42</span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="how-it-all-fits-together">How It All Fits Together<a href="https://www.muslimtify.org/blog/integrate-muslimtify-with-waybar#how-it-all-fits-together" class="hash-link" aria-label="Direct link to How It All Fits Together" title="Direct link to How It All Fits Together" translate="no">​</a></h2>
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><div class="token-line" style="color:#F8F8F2"><span class="token plain">systemd timer (every minute)</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">└─→ muslimtify check → sends desktop notification if prayer time matches</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">Waybar (every 30 seconds)</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">└─→ waybar-muslimtify.sh</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">      ├─→ muslimtify show --next --headless → next prayer name, time, remaining</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">      └─→ muslimtify show --headless        → full prayer times for the tooltip</span><br></div></code></pre></div></div>
<p>Muslimtify handles two separate concerns:</p>
<ol>
<li class=""><strong>Notifications</strong>, the systemd timer runs <code>muslimtify check</code> every minute and sends a desktop notification when it's prayer time.</li>
<li class=""><strong>Status bar</strong>, the Waybar module runs independently, polling the CLI every 30 seconds to show the next prayer.</li>
</ol>
<p>Both use the same local calculation engine, so they're always in sync, no server, no API, no internet required for prayer time data.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="wrapping-up">Wrapping Up<a href="https://www.muslimtify.org/blog/integrate-muslimtify-with-waybar#wrapping-up" class="hash-link" aria-label="Direct link to Wrapping Up" title="Direct link to Wrapping Up" translate="no">​</a></h2>
<p>This integration gives you a persistent, glanceable prayer time widget right in your Waybar without sacrificing privacy or adding bloat. The total setup is just three things:</p>
<ul>
<li class="">A single shell script</li>
<li class="">A 6-line Waybar module config</li>
<li class="">A few lines of CSS</li>
</ul>
<p>You can find my Waybar configuration here: <a href="https://github.com/rizukirr/hyprsimple" target="_blank" rel="noopener noreferrer" class="">Hyprsimple</a></p>
<p>May this small tool help you stay mindful of your prayers throughout the day.</p>]]></content>
        <author>
            <name>Rizki Rakasiwi</name>
            <uri>https://linkedin.com/in/rizki-rakasiwi-87029118a</uri>
        </author>
        <category label="Muslimtify" term="Muslimtify"/>
        <category label="Linux" term="Linux"/>
        <category label="Waybar" term="Waybar"/>
        <category label="Wayland" term="Wayland"/>
    </entry>
</feed>