<?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://muslimtify.vercel.app/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://muslimtify.vercel.app/blog"/>
    <subtitle>Muslimtify Blog</subtitle>
    <icon>https://muslimtify.vercel.app/img/favicon.ico</icon>
    <entry>
        <title type="html"><![CDATA[Integrate muslimtify with waybar]]></title>
        <id>https://muslimtify.vercel.app/blog/integrate-muslimtify-with-waybar</id>
        <link href="https://muslimtify.vercel.app/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://muslimtify.vercel.app/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 --headless          # Show today's prayer times in key=value format</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">muslimtify show --next --headless   # 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://muslimtify.vercel.app/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 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://muslimtify.vercel.app/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 set --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 set --lat=-6.21 --long=106.84 --timezone=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 --auto   # Auto-select from your country</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">muslimtify madzhab shafi   # 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 --headless</span><br></div></code></pre></div></div>
<p>You should see five <code>key=value</code> prayer lines (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://muslimtify.vercel.app/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 plain">#!/bin/bash</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"># Next prayer: `muslimtify show --next --headless` emits two key=value lines,</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain"># e.g.  asr=15:22  /  remaining=03:08  (prayer name is lowercase)</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">name=""</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">time=""</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">remaining=""</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">while IFS='=' read -r key val; do</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">    [[ -z "$key" ]] &amp;&amp; continue</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">    if [[ "$key" == "remaining" ]]; then</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">        remaining="$val"</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">    else</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">        name="$key"</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">        time="$val"</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">    fi</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">done &lt; &lt;(muslimtify show --next --headless 2&gt;/dev/null)</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">if [[ -n "$name" &amp;&amp; -n "$time" &amp;&amp; -n "$remaining" ]]; then</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">    display_name="${name^}"   # Capitalize first letter for display</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">    # Build beautiful tooltip from prayer times</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">    tooltip="󰧧  &lt;b&gt;Prayer Times&lt;/b&gt;\n━━━━━━━━━━━━━━━━━━━━━"</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">    while IFS='=' read -r prayer ptime; do</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">        [[ -z "$prayer" ]] &amp;&amp; continue</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">        icon=""</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">        case "$prayer" in</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">            fajr)    icon="󰖜" ;;</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">            dhuhr)   icon="󰖙" ;;</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">            asr)     icon="󰖚" ;;</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">            maghrib) icon="󰖛" ;;</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">            isha)    icon="󰖔" ;;</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">        esac</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">        pretty="${prayer^}"</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">        padded=$(printf '%-9s' "$pretty")   # pad name so times align in a column</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">        if [[ "$prayer" == "$name" ]]; then</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">            tooltip+="\n${icon}  &lt;b&gt;${padded}${ptime}&lt;/b&gt;  󰁍"</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">        else</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">            tooltip+="\n${icon}  ${padded}${ptime}"</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">        fi</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">    done &lt; &lt;(muslimtify show --headless 2&gt;/dev/null)</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">    tooltip+="\n━━━━━━━━━━━━━━━━━━━━━"</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">    tooltip+="\n󰔟  Next: &lt;b&gt;${display_name}&lt;/b&gt; in &lt;b&gt;${remaining}&lt;/b&gt;"</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">    printf '{"text": "󱠧  %s %s | 󰔟 %s", "tooltip": "%s"}\n' \</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">        "$display_name" "$time" "$remaining" "$tooltip"</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">else</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">    printf '{"text": "󱠧 --:--", "tooltip": "Prayer times unavailable"}\n'</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">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 plain">chmod +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.</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://muslimtify.vercel.app/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://muslimtify.vercel.app/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://muslimtify.vercel.app/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 plain">killall waybar &amp;&amp; waybar &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://muslimtify.vercel.app/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://muslimtify.vercel.app/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>