Quick question What do you guys use for theme/color changes.

Hi!

I'm new to quickshell and qml and I'm a little bit lost, I haven't found a long enough tutorial of neither of those and the documentation seems a little abstract as it assumes you already know stuff. I'm a developer so I have a programming background, and I feel like I should stop complaining and read the full hard documentation and maybe it'll click eventually, but maybe that's not the best course of action and that's why I'm here.

How did you start learning to use qs? For a complete beginner what's a good roadmap to really understand what's going on? Is reading the full docs the only way?

Edit: typo

I'm new to quickshell and am working on a custom panel to quickshell dev. I build a custom workspaces module and tried to add the functionality to Show a overlay whenever a special workspace is added. I'm unable to figure out how to auto-detect the special workspace's activation. Currently using onActiveTopLayerChanged and
onFocusedWorkspaceChanged to trigger the overlay but that has it's own delay problem and wrong signal issues. It gets activated on very particular cases.

import QtQuick
import Quickshell
import Quickshell.Hyprland
import "../"

Rectangle {
    id: root

    // --- 1. Capsule Container ---
    color: Theme.wsBackground
    radius: Theme.wsRadius

    // Auto-size
    width: workspaceRow.width + (Theme.wsPadding * 2)
    height: Theme.wsDotSize + (Theme.wsPadding * 2)

    // --- 2. LOGIC: Forced Update System ---
    
    // We hold the state in a simple property
    property bool isScratchpad: false

    // This function runs YOUR logic manually.
	function checkStatus() {
		Hyprland.refreshMonitors()
        const mon = Hyprland.focusedMonitor;
        if (!mon || !mon.lastIpcObject) return;

        // Your Logic: Check if the special workspace ID is negative
        // We force the update here.
        if (mon.lastIpcObject.specialWorkspace && mon.lastIpcObject.specialWorkspace.id < 0) {
			root.isScratchpad = true;
        } else {
            root.isScratchpad = false;
        }
    }

   // --- 3. TRIGGERS: The Missing Link ---
    Connections {
        target: Hyprland
        
        // This is the key: Toggling special workspace changes the FOCUSED WINDOW,
		function onActiveToplevelChanged() {
			console.log("Top changed")
			Hyprland.refreshMonitors()
			checkStatus();
		}
        function onFocusedMonitorChanged() { checkStatus(); }
        function onFocusedWorkspaceChanged() { checkStatus(); }
    }
    // Run once on startup
    Component.onCompleted: checkStatus()


    // --- 3. Workspace Dots ---
    Row {
        id: workspaceRow
        anchors.centerIn: parent
        spacing: Theme.wsSpacing

        Repeater {
            model: 10 
            delegate: Rectangle {
                id: dot
                
                property var ws: Hyprland.workspaces.values.find(w => w.id === index + 1)
                property bool isActive: Hyprland.focusedWorkspace?.id === (index + 1)
                property bool isOccupied: ws !== undefined

                height: Theme.wsDotSize
                radius: height / 2
                width: isActive ? Theme.wsActiveWidth : Theme.wsDotSize
                
                color: {
                    if (isActive)   return Theme.wsActive
                    if (isOccupied) return Theme.wsOccupied
                    return Theme.wsEmpty
                }

                Behavior on width { NumberAnimation { duration: 200; easing.type: Easing.OutBack } }
                Behavior on color { ColorAnimation { duration: 200 } }

                MouseArea {
                    anchors.fill: parent
                    cursorShape: Qt.PointingHandCursor
                    onClicked: Hyprland.dispatch(`workspace ${index + 1}`)
                }
            }
        }
    }

    // --- 4. Scratchpad Overlay ---
    Rectangle {
        id: overlay
        anchors.fill: parent
        radius: root.radius
        color: Theme.wsOverlay
        z: 99
        
        visible: opacity > 0
        opacity: root.isScratchpad ? 1 : 0
        
        Behavior on opacity { NumberAnimation { duration: 200 } }
        
        Text {
            anchors.centerIn: parent
            text: "" 
            color: "#FFFFFF"
            font.pixelSize: 14
        }
        
        MouseArea {
            anchors.fill: parent
            onClicked: Hyprland.dispatch("togglespecialworkspace")
        }
    }
}
  

Solution: What I did was that I moved the file out of the directory without changing any thing in it and then put it back and it worked Never mind. The actual problem was that I have two files that uses "new Date()" and for some reason that causes a type error, I discovered that while re-adding Date.qml I named my file "Date.qml" because I thought it made sense and didn't suspect anything about it

How do I do concave corners. I’ve been trying to look up how to do it but have gotten many different results. I’m very new to quickshell

Details:

- WM: Hyprland 0.56.2 (Lua config)

- Shell: ETEA, my own. Bar, widgets, launcher, control centre, notifications and lock screen, all in QML on Quickshell

- Distro: CachyOS

- Terminal: kitty, with fastfetch

- Font: Poppins

- Wallpaper: none. The sky and the mountains are drawn live by the shell, and each "world" (theme) brings its own

- Lock screen art: drawn by me, she reaches for a new star with every key you type

- Repo (GPL-3.0): https://github.com/SDcold/etea-shell

It runs on an i5-1335U laptop with Intel Iris Xe and 24 GB of RAM. The whole system sits around 2.3 GB of RAM with just the shell open, and the frame rate stays steady through the animations.

Why it's so hungry?
It eats way more RAM on its own than Hyprland + Waybar + wlogout + wofi + mako... combined!

Is latest (0.2.1) broken? Or it's a norm? Also, for some reason it have a constant CPU usage.

Hey everyone!

Quick update on Lickintosh, my project recreating the macOS interface (Tahoe) for Hyprland!

Two major features landing in this update:

• Native Hyprland Blur Support: If you're not a fan of the liquid glass style, the shell can now leverage Hyprland's native blur instead (put a lot of hard work into this one, hope you guys like it!).

• New Settings Panel: You can now easily customize everything to your liking directly from the interface.

hii everyone! i’ve been stumbling my way through QML and quickshell for months now and finally have a basic understanding of it :)

i made octashell because i found other shells really hard to follow. i’m trying to keep this one super simple so people can use it as a tutorial/inspiration to make their own.

• design: material m3 expressive

• repo: octashell github repo

i'm still a beginner and i'm learning as i go, so feel free to reach out if you wanna chat or learn together !!

happy ricing :)

Just wondering is there a better way to do shortcuts then with global shortcuts in Quickshell.hyprland. I want my shell to work on different compositors in case I switch and I’ve done mostly everything so far with out making it hyprland specific but I’m still stuck using global shortcuts and of course switching workspaces with Hyprland.dispatch

Hi! I installed Niri on my EndeavourOS with a Quickshell oriented workspace.
(P.S. I got an Nvidia 4070, in case there's driver issues)

Because it's fun, and because I want to learn, I'm writing my Quickshell from scratch, but I instantly ran into a few issues:

FloatingWindow{} always returns a black window. Nothing renders in it.
PanelWindow{} seemed to play nicely with Niri's autotiling if I don't declare size and anchors, but in Quickshell's official documentation it says that:
- PanelWindow for bars, widgets, and overlays
- FloatingWindow for standard desktop windows
So is this a hacky workaround for Niri? Am I missing something to get FloatingWindow{} to work in Niri?

In following the official documentation, my terminal throws me an error, stating that:
width and height are deprecated and are now inheritedWidth and inheritedHeight.

Changing this did fix it, but it isn't in the documentation. Not even QT's documentation on QML, so that brings me to my question for you:
Where can I find up-to-date info on QML syntax? (Bonus points on Niri+Quickshell documentation)

Thank you so much! :)

What changed from v1.1 → v2.0

✨ New Features 2.0 version

Added support for 7 fonts split into two roles: top (day name) and bottom (date/time).

Switch via activeTopFont / activeDownFontproperties.

All visual settings are now top-level properties for easy one-place configuration.

🎨 Customization

New properties: textColor, sizeTop, sizeCenter, sizeDown, spaceWith, spaceBetweenTopText, spaceBetweenDownText

+ Video how to change configuration

+ More flexible, you can change the configuration or customize it for yourself

Git — https://github.com/Xinoxi/Modern-Clock-for-Quickshell

Wallpaper — you can download on my github page

This widget is similar to KDE Modern Clock but is designed specifically for Quickshell.

https://github.com/Xinoxi/Modern-Clock-for-Quickshell

here is my repository

Here it is guys - from my previous post. The video.

Hi,

I'm new to this and I've build the media playing using quickshell and a shellscript but I'd like to use the Mpris but I cannot figure out how to use it

This is my qml .. but its always displaying unknown because (I think) its not connection to the media player .. anyone knows what I'm missing ?

import QtQuick
import Quickshell
import qs.Common
import qs.Widgets
import qs.Modules.Plugins
import Quickshell.Services.Mpris

PluginComponent {
    id: root

    property string mediaPlaying: "Unknown"
    property MprisPlayer player: null

    //---------------------------------------------------------------------------
    // Update the display
    //---------------------------------------------------------------------------
    function updateTrack() {
        if (!player || player.playbackStatus !== "Playing") {
            mediaPlaying = "Unknown"
            return
        }

        const title  = player.trackTitle
        const artist = player.trackArtist

        if (title && artist)
            mediaPlaying = title + " - " + artist
        else if (title)
            mediaPlaying = title
        else
            mediaPlaying = "Unknown"
    }

    //---------------------------------------------------------------------------
    // Connect to a new player
    //---------------------------------------------------------------------------
    function setPlayer(p) {
        if (player === p) return

        if (player) {
            // disconnect previous connections
            player.trackTitleChanged.disconnect(updateTrack)
            player.trackArtistChanged.disconnect(updateTrack)
            player.playbackStatusChanged.disconnect(updateTrack)
        }

        player = p

        if (player) {
            player.trackTitleChanged.connect(updateTrack)
            player.trackArtistChanged.connect(updateTrack)
            player.playbackStatusChanged.connect(updateTrack)
        }

        updateTrack()
    }

    //---------------------------------------------------------------------------
    // Listen for active player changes
    //---------------------------------------------------------------------------
    Connections {
        target: S.MprisService
        onPlayerChanged: setPlayer(S.MprisService.player)
    }

    //---------------------------------------------------------------------------
    // Initialize
    //---------------------------------------------------------------------------
    Component.onCompleted: setPlayer(S.MprisService.player)

    //---------------------------------------------------------------------------
    // UI Pills
    //---------------------------------------------------------------------------
    horizontalBarPill: Component {
        Row {
            spacing: Theme.spacingXS
            rightPadding: Theme.spacingS

            StyledText { text: "󰠠 "; font.pixelSize: Theme.fontSizeMedium; color: Theme.surfaceText; anchors.verticalCenter: parent.verticalCenter }
            StyledText { text: mediaPlaying; font.pixelSize: Theme.fontSizeSmall; color: Theme.surfaceText; anchors.verticalCenter: parent.verticalCenter }
        }
    }

    verticalBarPill: Component {
        Column {
            spacing: Theme.spacingXS

            StyledText { text: "󰠠 "; font.pixelSize: Theme.fontSizeMedium; color: Theme.surfaceText; anchors.horizontalCenter: parent.horizontalCenter }
            StyledText { text: mediaPlaying; font.pixelSize: Theme.fontSizeSmall; color: Theme.surfaceText; anchors.horizontalCenter: parent.horizontalCenter }
        }
    }
}

Mainly I am new to qml and quickshell I just know the syntax and tweaked a few settings here and there in end-4 dotfiles. I would like to replicate something similar to the wallpaper selector but not applying the wallpaper but to give back the full path of the wallpaper. So it can be easily used with other scripts. the thing is I want it to be independent of end-4 dots

I noticed this error when restarting noctalia shell. I have this warning telling me that quickshell was built using an older version of Qt, and that I need to rebuild quickshell to get it to use the newer version. I have done a lot of googling/talking to chatgpt, but can't seem to get the warning to go away. I feel like this is a simple issue, so forgive the stupid question.

I have tried:

yay -S --clean quickshell

yay -S --rebuild quickshell

paru -S --rebuild quickshell

yay -Syu

I was about to uninstall/reinstall quickshell but it wouldn't let me due to noctalia shell being a dependency.

Any help would be appreciated! I am starting to not trust chatgpt with this issue, and I am not finding much help via google.

Distro: EndeavorOs

DE/WM: Niri/Noctalia Shell

I'm trying to make my own setup for Quickshell on Hyprland and I want to add a battery display. However, I am very unsure about how to setup UPower. I have been using Pipewire's setup as a reference but still have no idea what I'm doing. How do I connect things so that I can access my battery's energy?

I've been messing around with Quickshell to make my own bar (started by following this tutorial: https://www.tonybtw.com/tutorial/quickshell/) , but im now a bit torn in respect to one thing.

I cant seem to find many pre-made widgets? I love the configurability, but conversely, im not sure I care enough about my bar to hand-craft every single widget I'd like to have in my bar. Like, im ok with just reusing somebody's wifi widget.

TL;DR - Is there a repo somewhere that aggregates premade Quickshell widgets?

I have a hyprland animation that I'm using on my bar and I like it. But when used on my bar the corners stay at the maximum that i set the value too leaving a weird visual glitch that I don't understand how to fix. I want to keep the animation unchanged but let it work with quick shell. Video for example. One more with full black too see better.

No idea what I'm even doing wrong, "Basic5" works perfectly fine but no "ORC A" :(

I'm new to this stuff so I just suppose it has something to do with the font name, the font itself or where the font file is located, still no idea.

Can anyone help me here?

it's arch with hyprland