Can't change color of workspaces icons #3843

KiraKyatto · 2024-12-21T16:46:58Z

Hello, I recently tried to configure waybar on my arch hyprland but I'm not able to change the base color of the workspace icon. Here are my config files :

config :

{
        //Position TOP
        "layer": "top",
        "margin-top": 14,
        "margin-bottom": 0,

        //Load modules
        "include":["~/.config/waybar/modules.json"],

        //Modules LEFT
        "modules-left":[
                "clock",
                "wlr/taskbar",
        ],

        //Modules CENTER
        "modules-center":[
                "hyprland/workspaces",
        ],
}

style.css :

@import "/home/alex/.cache/wal/colors-waybar.css";

* {
        border: none;
        border-radius: 0;
        font-size: 18px;
        background: transparent;
}

#workspaces button {
        padding: 0 5px;
        color: @color3;
}

.modules-center {
        background-color: @color1;
        border-radius: 15px;
        padding: 0 10px;
}

modules.json :

{
        "clock":{
                "tooltip": true,
        },
        "hyprland/workspaces":{
                "persistent-workspaces": {"DP-1":[1,2,3], "HDMI-A-1":[1,2,3]},
                "format": "{icon}",
                "format-icons":{
                        "active": "",  //these two are icons from nerd fonts
                        "default": ""
                },
        },
}

Thanks to whoever tries to help me.

The text was updated successfully, but these errors were encountered:

msmafra · 2024-12-23T14:34:21Z

To do this, you mean?

waybar-tests.webm

test.css
@import "palette.css";

{
border: none;
border-radius: 0;
font-size: 18px;
background: transparent;
}

#workspaces button {
padding: 0 5px;
color: @tertiarycritical;
}

#workspaces button:hover {
color: @quarternarytext;
}

#workspaces button:active {
color: @tertiarynarytext;
}

#workspaces button.visible {
color: @secondarytext;
}

.modules-center {
background-color: @tertiarybackground;
border-radius: 15px;
padding: 0 10px;
}

test.jsonc
{
//Position TOP
"reload_style_on_change": true,
"layer": "top",
"margin-top": 14,
"margin-bottom": 0,
//Load modules
// "include": [
// "~/.config/waybar/modules.json"
// ],
//Modules LEFT
"modules-left": [
"clock",
"wlr/taskbar",
],
//Modules CENTER
"modules-center": [
"hyprland/workspaces",
],
"clock": {
"tooltip": true,
},
"hyprland/workspaces": {
"persistent-workspaces": {
"DP-1": [
1,
2,
3
],
"HDMI-A-1": [
1,
2,
3
]
},
"format": "{icon}",
"format-icons": {
"active": "", //these two are icons from nerd fonts
"default": ""
},
}
}

tvannoy · 2024-12-26T03:03:27Z

@msmafra What version of waybar are you using?

I'm using waybar v0.11.0 and I, like OP, have not been able to get the workspace icon colors to change via css. I resorted to using pango markup in the json config file.

msmafra · 2024-12-26T12:58:05Z

@tvannoy I'm using waybar 0.11.0

tvannoy · 2024-12-26T15:56:37Z

@KiraKyatto Your config works fine for me:

I modified it for my monitor setup and hardcoded a color since we don't have your css colors.

test.css

* {
        border: none;
        border-radius: 0;
        font-size: 18px;
        background: transparent;
        font-family: "BlexMono Nerd Font";
}

#workspaces button {
        padding: 0 5px;
        color: #31ade1;
}

.modules-center {
        background-color: #333333;
        border-radius: 15px;
        padding: 0 10px;
}

test.jsonc

{
        //Position TOP
        "layer": "top",
        "margin-top": 14,
        "margin-bottom": 0,

        //Load modules
        "include":["~/.config/waybar/modules.json"],

        //Modules LEFT
        "modules-left":[
                "clock",
                "wlr/taskbar",
        ],

        //Modules CENTER
        "modules-center":[
                "hyprland/workspaces",
        ],
}

modules.json

{
        "clock":{
                "tooltip": true,
        },
        "hyprland/workspaces":{
                "persistent-workspaces": {"*":[1,2,3],},
                "format": "{icon}",
                "format-icons":{
                        "active": "",  //these two are icons from nerd fonts
                        "default": ""
                },
        },
}

A slightly more involved minimal config from @msmafra's example:
test.jsonc

{
    //Position TOP
    "reload_style_on_change": true,
    "layer": "top",
    "margin-top": 14,
    "margin-bottom": 0,

    //Modules CENTER
    "modules-center": [
        "hyprland/workspaces",
    ],
    "hyprland/workspaces": {
        "persistent-workspaces": {
            "*": 3,
        },
        "format": "{icon}",
        "format-icons": {
        "active": "", //these two are icons from nerd fonts
        "default": ""
    },
    }
}

test.css

* {
    border: none;
    border-radius: 0;
    font-size: 18px;
    background: transparent;
    font-family: "BlexMono Nerd Font";
}

#workspaces button {
    padding: 0 5px;
    color: #11e1ff;
}


#workspaces button:active {
    color: #555555;
}

#workspaces button.visible {
    color: #ffffff;
}

#workspaces button:hover {
    color: #ff0000;
}

.modules-center {
    background-color: #222222;
    border-radius: 15px;
    padding: 0 10px;
}

You can run it with waybar -c ~/.config/waybar/test.jsonc -s ~/.config/waybar/test.css

tvannoy · 2024-12-26T15:58:55Z

@KiraKyatto What version of waybar are you using?

Can you post a screenshot of what your bar looks like with your config?

Manually running waybar with an increased log-level might be worthwhile: waybar -l debug

tvannoy · 2024-12-26T16:03:17Z

Several other users were having the same issue of not being able to set hyprland workspace icons using css #2635 #3515

I'm beginning to think that the issue was actually something in the css order, as stated in the wiki, although I couldn't get the workspace icon colors working by following the wiki example.

msmafra · 2024-12-26T17:51:29Z

As I'm trying to keep my "environment" consistent and not pull my hair off 🥲 . I try to reuse some of the CSS between the tools I use (nwg-drawer, wlgout, waybar etc).
I reset everything at the beginning and use REM instead of PX or other unit. The reset, the CSS ordering, some checks in the GTK3/4 CSS accepted properties side, using a non-monospaced font for symbols, solved other problems for me too like a unintended ghost colour effect when hovering buttons on my bar, some weird resizing also on hover etc.

@import url("palette.css");

* {
    all: unset;
    font-size: 16px;
    font-family: 'Inter Variable', 'Symbols Nerd Font';
    font-feature-settings: '"zero", "tnum", "ss01", "ss02", "ss03", "cv01", "cv05", "cv08", "cv10", "cv11", "cpsp", "case"';
    font-weight: 700;
    animation-timing-function: steps(12);
    animation-duration: 0.3s;
    transition: all 0.3s cubic-bezier(0.79, 0.33, 0.14, 0.53);
}

KiraKyatto · 2025-01-02T13:10:14Z

@tvannoy here are the screenshots you asked for

and I also tried with hardcoded colors (same as yours to be sure) but it doesn't work

msmafra · 2025-01-02T23:49:53Z

@tvannoy here are the screenshots you asked for

and I also tried with hardcoded colors (same as yours to be sure) but it doesn't work

Please share your full waybar config (CSS and JSON).

KiraKyatto · 2025-01-03T12:36:03Z

Her are my config files :

config.jsonc

{
        //Position TOP
        "layer": "top",
        "margin-top": 14,
        "margin-bottom": 0,

        //Load modules
        "include":["~/.config/waybar/modules.json"],

        //Modules LEFT
        "modules-left":[
                "clock",
                "wlr/taskbar",
        ],

        //Modules CENTER
        "modules-center":[
                "hyprland/workspaces",
        ],

        //Modules RIGHT
        "modules-right":[
                "network",
        ]
}

modules.json

{
        "clock":{
                "tooltip": true,
        },
        "hyprland/workspaces":{
                "persistent-workspaces": {"DP-1":[1,2,3], "HDMI-A-1":[1,2,3]},
                "format": "{icon}",
                "format-icons":{
                        "active": "",
                        "default": ""
                },
        },
        "network":{
                "format": "{bandwidthDownBits}    {bandwidthUpBits}  "
        },
}

style.css

@import "/home/alex/.cache/wal/colors-waybar.css";

* {
        border: none;
        border-radius: 0;
        font-size: 18px;
        background: transparent;
}

#workspaces button {
        padding: 0 5px;
        color: @color2;
}


#network {
        font-size: 12px;
}

.modules-center, .modules-left, .modules-right {
        background-color: @color1;
        border-radius: 15px;
        padding: 0 10px;
}

colors-waybar.css

@define-color foreground #dee1d5;
@define-color background #0f1421;
@define-color cursor #dee1d5;

@define-color color0 #0f1421;
@define-color color1 #75A39A;
@define-color color2 #9AAB9C;
@define-color color3 #B9B297;
@define-color color4 #C3B99B;
@define-color color5 #C4BDA2;
@define-color color6 #D1CDAE;
@define-color color7 #dee1d5;
@define-color color8 #9b9d95;
@define-color color9 #75A39A;
@define-color color10 #9AAB9C;
@define-color color11 #B9B297;
@define-color color12 #C3B99B;
@define-color color13 #C4BDA2;
@define-color color14 #D1CDAE;
@define-color color15 #dee1d5;

and here is what it looks like with this config :

msmafra · 2025-01-03T14:48:29Z

waybar-kirakyatto.webm

I added "reload_style_on_change" to the config.jsonc just to not have to kill waybar on CSS changes while testing. #workpaces button:hover with the format/effects/colors you want will work with this.

config.jsonc

{
        //Position TOP
        "layer": "top",
        "margin-top": 14,
        "margin-bottom": 0,
        "reload_style_on_change": true,

        //Load modules
        "include":["$HOME/.config/hypr/waybar/kirakyatto-modules.jsonc"],

        //Modules LEFT
        "modules-left":[
                "clock",
                "wlr/taskbar",
        ],

        //Modules CENTER
        "modules-center":[
                "hyprland/workspaces",
        ],

        //Modules RIGHT
        "modules-right":[
                "network",
        ]
}

style.css

@import "kirakyatto-colors.css";

* {
        all: unset;
        font-size: 18px;
        font-family: 'Inter Variable', 'Symbols Nerd Font';
        font-feature-settings: '"zero", "tnum", "ss01", "ss02", "ss03", "cv01"';
        background: transparent;
}

#workspaces button {
        color: @color2;
        padding: 0 5px;
        margin: 10px 5px 10px 5px;
}

#workspaces button:hover {
        color: @color15;
        border-radius: 15px;
}

#network {
        font-size: 12px;
}

.modules-center,
.modules-left,
.modules-right {
        background-color: @color1;
        border-radius: 15px;
        padding: 0 10px;
}

KiraKyatto · 2025-01-04T14:30:58Z

@msmafra Thank you so much , it finally worked, it was a headache for me. Have a nice day and sorry for inconvenience.

github-actions bot added clock custom hyprland inhibitor labels Dec 21, 2024

KiraKyatto closed this as completed Jan 4, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Can't change color of workspaces icons #3843

Can't change color of workspaces icons #3843

KiraKyatto commented Dec 21, 2024

msmafra commented Dec 23, 2024

tvannoy commented Dec 26, 2024

msmafra commented Dec 26, 2024 •

edited

Loading

tvannoy commented Dec 26, 2024

tvannoy commented Dec 26, 2024

tvannoy commented Dec 26, 2024

msmafra commented Dec 26, 2024 •

edited

Loading

KiraKyatto commented Jan 2, 2025 •

edited

Loading

msmafra commented Jan 2, 2025

KiraKyatto commented Jan 3, 2025

msmafra commented Jan 3, 2025

KiraKyatto commented Jan 4, 2025

Can't change color of workspaces icons #3843

Can't change color of workspaces icons #3843

Comments

KiraKyatto commented Dec 21, 2024

msmafra commented Dec 23, 2024

tvannoy commented Dec 26, 2024

msmafra commented Dec 26, 2024 • edited Loading

tvannoy commented Dec 26, 2024

tvannoy commented Dec 26, 2024

tvannoy commented Dec 26, 2024

msmafra commented Dec 26, 2024 • edited Loading

KiraKyatto commented Jan 2, 2025 • edited Loading

msmafra commented Jan 2, 2025

KiraKyatto commented Jan 3, 2025

msmafra commented Jan 3, 2025

KiraKyatto commented Jan 4, 2025

msmafra commented Dec 26, 2024 •

edited

Loading

msmafra commented Dec 26, 2024 •

edited

Loading

KiraKyatto commented Jan 2, 2025 •

edited

Loading