Help needed to produce Yaru Budgie

Hi all,

I’ve just noticed this outstanding issue on the GTK Theme Yaru asking for help with adding compatibility with Yaru - i.e. the Ubuntu theme.

So please help out:

To get you going - these are the sort of changes you will need

…and check all panels applets against it - pixel-saver and global menu amongst others.

I’ll try to follow that…

I could help with that.

I’ve played a bit with css in the last year. Not later than yesterday, I found out that my Gnome Shell (customized) Materia Dark Compact theme would give an inconsistent white today event box (in Gnome panel calendar) because it was not yet compatible with Gnome 3.38. I ended up taking the relevant section in the Yaru theme (that was updated). And I’ve played a lot with the Matcha (GTK) theme. If I’m not mistaken, it’s the same gtk.css file as for Gnome where all the Budgie customizations are.

Also, I think Yaru makes use of gresource file, and I can manage to extract the actual content from them (the css and images) and rebuild it afterwards. If necessary.

And I’ve played with Suru icons in the Yaru theme to extract some of the folder icons SVG individually.
In the Yaru theme, I believe it’s a big SVG file with all folders inside, and it uses a script to convert them into PNGs for the theme’s sake. SVGs are better in my opinion, so I used Inkscape to reconstruct the icons I need individually.

I might not be good enough technically to do the whole thing, but I had an early start and would be willing to help whoever takes charge catching up.

That’s Gnome (don’t want to log out, sorry), but as explained above it’s pretty similar.

I customized:

  • the shell theme (Materia Dark Compact)
  • the GTK theme (Matcha Aliz from Manjaro)
  • for icons, I use Papirus with those yaru custom folders and I modified Nemo/Nautilus icon SVG to fit the theme colors better)


It’s nice, especially when it’s already done elsewhere. :sweat_smile:
But the Papirus folder icons with “Yaru” color could use some update to the smoothest Yaru/Suru folder icons as mentioned above. The original in the Papirus icon theme are too squared and feels outdated to me.

Just toying around… Papirus Dark Icons, papirus-folders for setting Yaru color for folders, gtk theme is AdaptaNoktoDeepOrange

Here are Yaru icons on the system, no fallback for missing ones :

Adding Papirus and Pocillo to inherits in index.theme and going full-yaru gtk :

As often in Budgie, external gtk-theme show most problems in panels and applets :
⋅ in panels, solid background ? Expected transparent.
⋅ blue dots in icon tasks list ( I’d expect orange, or purple ) + glitches at corners of icons
⋅ truncated icons ( or wrong spacing ) in workspace switcher ( quite top right of screen ).
If you tick ON for « integrated theme » ( second switch ) THEN
⋅ pixel-saver icons are no longer matching,
⋅ global-menu spacing is so short it’s barely usable,
⋅ but workspace switcher then has a better look ( but inverted background ).

Papirus ppa : for icons and utility
Adapta ( archived ) sources : GitHub - adapta-project/adapta-gtk-theme: An adaptive Gtk+ theme based on Material Design Guidelines
Adapta for snap : Install adapta-gtk-snap for Linux using the Snap Store | Snapcraft
Adapta in many many colors : Adapta-gtk-theme-colorpack -
…snap : Install Adapta Theme Colorpack for Snaps for Linux using the Snap Store | Snapcraft
Yaru icons and gtk theme are in regular Ubuntu repositories.

As Adapta has solved most problems regarding Budgie applets and panels, it looks like a sane base to build upon ? Its DeepOrange variant seems to match Ubuntu colors be it in light or nokkto ( dark ).

Some Yaru ( dark ) icons look very thin on light background, but light ones on dark backgrounds are ok, strange. There may be better « inherits » to choose from ( some « rounder » than Papirus, I went with it 'cause it’s there in my system ).

Hello, I made a Yaru Dark Budgie .CSS, it can be found here GitHub - speltriao/Yaru-Dark-Budgie-theme: Simple port of budgie-specific CSS for the default Ubuntu Yaru's theme .
This CSS is based of Marwaita Ubuntu, I’ve adapted it to Yaru colors and flat design, plus extracting only the Budgie-specific CSS.
However, I’m not a designer at all. And gladly will accept any help available!

Ideally the CSS needs to be reworked to be in scss format possibly in a _budgie.scss module here

When compiling the theme a check can be then done to see the generated CSS is similar/same as the CSS in Yaru-Dark-Budgie-theme

I see… The CSS was made for personal usage in mind, a workaround.

If someone could help with that it would be great, maybe it could reach Yaru’s master. But honestly I’m really not good with CSS (let alone scss) and I really don’t have the free time for this right now.

Great great - it does look like a good start so congrats.

If you haven’t already maybe mention on the Yaru issue tracker where you have got-to in terms of the CSS extraction. Hopefully someone from the Yaru community can then look over and do the SCSS conversion. :crossed_fingers:

Ok! Thanks, I’m going to do that. I was the one who opened the original bug report actually, so it will be easy.
Probably there can be things that need to be changed before porting it to SCSS, but it’s a start.

There are a lot of volunteers, already, but if there is still help needed, y’all could count me in.

I change my own CSS theme files frequently, and I have a couple themes on the net, so if I can be of use, let me know. I also have some spare time at the moment.

The only backlash is that I don’t have any experience with scss.