How to edit themes in Linux Mint Cinnamon – Tutorial
Updated: November 14, 2018
I came across an interesting, frustrating problem while testing
Linux Mint 19 Tara. Namely, the Cinnamon edition of this distro uses
the new flat Mint-Y theme. While pretty, it’s also ergonomically bad. It comes with a low font contrast
(pale gray on white), making it very hard to distinguish elements or spend any spell of time reading. I
wanted to fix this right away, and I realized the solution wasn’t trivial.
Similar to what I’ve shown you in my
Gnome theme editing tutorial, I’d like to give you a very similar
take on Cinnamon. This will not be a very long guide, but it should save you a lot of trouble. If you
want to use this desktop environment, and you find the existing theme/font color choices are
inadequate, follow me.
Gnome = Cinnamon
Whenever this kind of comparison is brought up, it provokes ungodly wrath in the community. People
are quick to point that while based and forked off Gnome 3 in the past, Cinnamon is NOT Gnome 3. Well,
whatever the technical reasoning is, under the hood, there are a lot of similarities between the two,
including theme management.
In Gnome, as I’ve shown you in the tutorial above, you can change themes using Gnome Tweak Tool.
Furthermore, you have the option to manually edit themes. Go to either /usr/share/themes or
~/.themes, and then in the relevant theme folder, edit the gtk-3.0/gtk.css file. By edit, I mean you
need to change CSS classes and their attributes, like the font color.
In Cinnamon, the basic principles are the same. But there are also some small differences. Normally,
under each theme folder, you will find the following sub-folders:
- cinnamon – contains declarations that build on top of those listed under gtk-3.0.
- gtk-2.0 – contains declarations specific to Gtk2-based desktops.
- gtk-3.0 – contains declarations specific to Gtk3-based desktops (including Cinnamon).
- Other folders and elements.
In other words, the themes are still very much like Gnome 3, with some overrides and extras that are
specific to Cinnamon. But in essence, most of the theme changes are almost identical to what we’ve
already seen. This is good. Makes our work simpler.
Now, in contrast to Gnome, we need to make
two changes –
cinnamon.css file under the cinnamon folder and
gtk.css file under the gtk-3.0 folder. Most of the actual theme items
will be under the latter. Now, before that, we need to figure what theme our desktop is actually
using.
Indeed, what theme am I using?
This is a good question. Because, before you can edit a theme, you actually need to know which one
you’re using in your Cinnamon desktop. This is not quite as straightforward as in Gnome – although in
Gnome, you don’t get a friendly tool that actually lets you change themes by default.
Open Settings > Themes. Focus on the Themes tab. Here, there are several elements. You can
control windows borders separately from the main theme (more like Gnome 2 and MATE). The section that
reads Control is actually your main theme. This may sound counterintuitive, but borders + controls =
theme. By default, both should be Mint-Y in Mint 19 Cinnamon, so that’s the folder you need to access
and then change the CSS files.
Ignore the specific look & feel of the menu above – the important thing is to
know what to look for.
Edit CSS files
All right. Like Gnome, we’re looking for the font color declaration. In CSS terms, color: #ABCDEF.
Mint-Y uses #4a4a4a for text color. We will do a bulk search & replace in both cinnamon.css and
gtk.css. Please back these files up first please! A common piece of the actual CSS styles will be
something like:
min-height: 20px;
padding: 5px 32px;
transition-duration: 0;
color: #4a4a4a;
background-color: whitesmoke;
border: 1px solid #d9d9d9;
We want to replace #4a4a4a to #000000 (black). Once you’ve done this, log out then log back in – for
me, switching between themes or even restarting Cinnamon was not sufficient. Once you log into a new
session, you should see the theme changes, including ergonomically superior font contrast:
Conclusion
And there we go, job done! In essence, this is easy but also not trivial. Working with CSS files on
the command line, making changes that may require sudo permissions just to have a somewhat altered
desktop theme, well that’s not what I call progress. How many ordinary people feel comfortable playing
with the strange lingo that are CSS directives? And why should they ever need to do that? Why not have
a GUI option?
Then, Cinnamon ups the complexity game with two CSS sources – not just one, so bear that in mind.
Finally, like Gnome, your changes may get
overwritten come the next update, so have backups in place, or better
yet, create your own themes. Copy the Mint-Y folder and call it Mint-YY or something – and edit the
index.theme file to include your own description and name. Anyway, I wish things were simpler,
default font ergonomics better, and theme changes
unnecessary, or rather, much easier to implement. Failing that, you have this little guide to help you
achieve the necessary comfort. See you around.
Cheers.