Pet Project -- Let's create a GTK-4 and GNOME 45 shell version of Zorin 17 themes

Since Zorin OS 17 ships with GNOME 43, its beautiful theme does not support the newest GNOME 45 shell and applications. This makes sense, since we don't want our beloved devs working extra for something Zorin doesn't support. However, many of us might tinker with an unsupported upgrade to GNOME 45 or even use different distro altogether that uses GNOME 45. Wouldn't it be great to create an unofficial (community) version of the Zorin themes for the world to enjoy?

I have been working on the GTK-4.0 css file for ZorinBlue-Dark with a lot of success, though a few small details are still imperfect


/*
Almost all apps look perfect, but an app like NewsFlash is a bit complicated with three panes (content, sidebar, secondary sidebar):

Any suggestions for perfecting it would be appreciated!

We also need to tinker with the shell theme to make the quick settings work properly:

Screenshot from 2023-12-05 08-39-48

Edit: Here is the Github Repo where you are all welcome to track the progress and create issues/pull requests freely:

4 Likes

If you document your process, it may be helpful to others if you put a tutorial in the guides category to implement this change (for those that want to, but don't have the technical aptitude to reproduce your results).

3 Likes

Quite right, this is just the first post announcing the project and welcoming suggestions from community. I will also post a Proton Drive link with the css code that is a work in progress for applications as well as the official Zorin shell theme to make it easy for anyone to (respectfully) tinker as well.

Actually now that I think about it, maybe Github would be a better choice

1 Like

Github would be better, and more utilized as personal drive links make members wary of clicking them.

1 Like

I definitely prefer something public like GitHub or similar. Cool initiative, I really like the idea but I know it won't be easy :+1:

1 Like

I'll get to setting up the GIthub project. We've got this :zorin:

2 Likes

How did you install and get gnome 45 running? Did you need to add libraries or specific versions? Are there any pitfalls in this upgrade? Does anything not work?

These are the first several questions that came to mind, and I'm sure you will share your findings when you assemble the guide...but as a precursor to any possible issues that you have already remedied, for forum members, it may be prudent to share these while gathering ideas for the customization.

On a recommendation note, if you assign colors to the parent attributes, does it inherit? Example: @define-color sidebar #000000
Then define the foreground, which would simplify things a bit.

I don't understand why they use both bg and background, the same for foreground....It makes it more difficult than it should be.

To answer the first question, I'm pleased to see you fell for my little deception because you are looking at Fedora 39 with GNOME 45 pre-installed, I have just already heavily customized it for the pure Zorin experience other than the icon theme.

I will test Z17 with G-45 as well in the future and will include it for the guide for sure.

With the second point of the @define-color values, that is how the values are set up officially in Zorin's GTK theme, the difference is that I have added the needed sidebar and secondary-sidebar fields to bring it up to the latest standards of Libadwaita. Hence why Nautilus and Gnome Settings look perfect already:

1 Like

You wouldn't need to use both values of -bg and -background. You can even point one to be equal to the other, that way you only have to modify one.

1 Like

I haven't yet implemented/tested the simplification of -bg / -background, but here is the Github Repo:

2 Likes

Now that I re-check the code, there isn't a repeat of bg / background, are you getting it mixed up with backdrop? If so, it isn't the same thing. Backdrop controls if and how the color changes when the window is out of focus.

image

1 Like

Little update, I went ahead and downloaded Biblioteca, the complete GNOME documentation reader, and it offers a lot of information useful for this project:

1 Like


The NewsFlash issue has been fixed and I have updated Github accordingly with the update. I had to use GTK Inspector to find the specific css-classes value and wrote this code to take care of it:

/* NewsFlash-specific fixes */

@define-color custom_color_for_item_count_label #1E2529;
@define-color custom_color_for_item_count_all_label #1E2529;

.item-count {
  color: @custom_color_for_item_count_label;
}

.item-count-all {
  color: @custom_color_for_item_count_all_label;
}

/* Apply custom colors to the pill-shaped frame */
.item-count,
.item-count-all {
  background-color: #BDE6FB;
  border: 1px solid #BDE6FB;
  border-radius: 10px; /* Adjust the border-radius value to match the pill shape */
  padding: 2px 8px; /* Adjust the padding to control the space around the number */
}

The theme is basically ready now. I wouldn't mind having some more eyes on it to tell me if they can find any flaws.

2 Likes

Update: the NewsFlash dev actually asked me to add a Zorin theme to the official application, so pending a Merge Request, we might all see Zorin (Dark Blue) in the list of a handful of themes supported by NewsFlash.

I will make refinements to some elements of sidebars in apps before delving into the shell theme.

:zorin:

1 Like

Love this idea!
The design I was made me choose Zorin in the first place.
I'd love to be able to make Fedora look like Zorin.

If you update NewsFlash, you will now see a Zorin theme option :zorin: