Spice Up Your Cinnamon Themes – It’s Easy!

Ivana Isadora Devcic 22-03-2015

Ever wanted to customize your Linux desktop, but just couldn’t find that one perfect theme?


If Cinnamon is your current desktop environment, creating your own theme is easy to learn. You don’t need any special tools, either  a regular text editor with syntax highlighting Geany - A Great Lightweight Code Editor For Linux Surprisingly, Linux doesn't offer that many good IDE's (Integrated Development Environments). I believe this is because back in the day most Linux programmers took out good old Notepad (or gedit in this case), and started... Read More will do just fine.

Cinnamon has come a long way since it first appeared in 2011 as a fork of Gnome Shell Gnome-Based Desktop Environments Explained: MATE vs. Gnome Shell vs. Unity vs. Cinnamon Ever since Gnome went ahead with their Gnome Shell idea, the Linux community has been at a frenzy to find a new desktop environment that is right for them. A majority of users used Gnome... Read More . It used to depend on Gnome to work properly, but today it’s a complete, standalone desktop environment Cinnamon 2.0 Ditches GNOME, Features Enhanced User and Window Management Cinnamon, the desktop shell using in Linux Mint, has finally released v2.0, which features new window tiling and snapping, along with enhanced user management options. Read More with its own set of basic applications. This quick guide is based on Cinnamon 2.4 that ships with the latest Linux Mint release (version 17.1 “Rebecca”), but our theme will be compatible with any Linux distribution running Cinnamon.

Understanding Cinnamon Themes

Cinnamon themes are both simple and complex. Sounds paradoxical, right? They are simple because the entire theme is written in CSS, but complex because the theme file is huge and not very well documented. For the most part you can deduce which rules modify which desktop elements, but for some you’ll have to go through trial and error. It’s expected you’re familiar with CSS before you try this, but if you’re not, have no worries  you can quickly learn CSS online Top 5 Sites To Learn CSS Online Read More with helpful tutorials.

It’s important to note that Cinnamon themes do not change window borders, buttons, or any other application elements. These objects are controlled by GTK themes Want A Mac OS Look With Linux Power? Have It All With Zukimac, A GTK Theme It's OK if you enjoy the power of Linux but the aesthetics of Mac OS X. You can get your Linux installation to look more like Mac OS X with the Zukimac theme. Read More , which you have to download separately. The Cinnamon theme itself affects only the Mint Menu, panel, tooltips, notifications, applets and some dialogs.

Getting Started

Generally speaking, there are two ways to create a Cinnamon theme: code it from scratch or use an existing one as a template. We’re going with the latter approach as it’s much easier. Don’t forget to check for license restrictions if you decide to redistribute the modified theme. It’s usually enough to contact the author and ask for permission.


Before diving into CSS, it’s good to have a plan of what exactly you want to change. In this example, we’ll resize the digital clock, change the menu font and background color, and make the panel transparent. To ensure that your new theme is easy on the eyes, you can use free online tools to build color schemes Color Me Impressed: 3 Tools For Effortlessly Finding Beautiful Color Schemes For Any Project Color is important. It's one of those primeval things -- colors make us feel. They can communicate danger, passion, calmness, and almost any other emotion. They work across language barriers, and they can clash in... Read More .

Don’t forget that some changes have “dependencies”. If you change the panel background from dark to white, you’ll have to change the colors of panel buttons and applets, too. Otherwise they might be invisible in your new theme, because they were white on the previously dark panel. If you want to create a dark theme, be wise and start with a template that is already dark-colored.

Choosing a Template

A good choice is the default Cinnamon theme, available on the project’s GitHub pages. The deviantART community makes wonderful Cinnamon themes, and more can be downloaded from the official Linux Mint Spices page and the old faithful

If you want to use default themes, they are either in /home/$USERNAME/.themes or /usr/share/themes. Themes located in the latter directory affect applications run by all users (including root), while those in the /home/$USERNAME directory apply only to one user. I recommend you keep your work-in-progress theme in your /home directory. Once it’s done, you can just symlink it using this command:


sudo ln -s /home/username/.themes/ThemeName /usr/share/themes/ThemeName

You’ll notice that some themes contain subfolders named “gtk-2.0” and “gtk-3.0”. This means they include GTK themes along with the Cinnamon theme. However, you only need the “cinnamon” folder.


There might be subfolders in it  they contain assets, small images which can be used to style desktop elements. For example, your Mint Menu can have a background image, and you would keep it in one of these subfolders. We need the file called “cinnamon.css”, and now is the time to open it.


Theme Structure

I’m using “Linux Mint”, one of the default themes. It’s quite a lengthy CSS file. Luckily, the comments in the code provide a sense of direction. They divide the code into sections, each corresponding to one desktop element. Some of the sections are:

  • PopupMenu (popupMenu.js): modifies all popup menus, right-click panel menu and the main menu;
  • Panel (panel.js): self-explanatory;
  • Desklets (desklet.js) for desktop widgets and Applets (applet.js) for widgets on the panel;
  • Looking Glass: modifies the graphical debugging interface (cinnamon-looking-glass);
  • Menu (menu.js): affects only the main menu (MintMenu);
  • Window list (windowList.js): applies to the list of opened windows in the panel.

Modifying a Cinnamon Theme

We’ll make a few small changes just to show how it’s done. Once you’re more comfortable with editing CSS, you can modify many elements at once and create new assets to completely transform any Cinnamon theme. Here’s our “before” version:


Change the Panel Background Color and Transparency

In the “cinnamon.css” file, find the line starting with #panel.



We’ll replace the gradient with a solid color and some transparency. Remove the entries:


and add background-color: rgba(152,13,13,0.6); to get this:


By declaring the color in RGBa format, we make it easy to change color and transparency in one go. The last number in the brackets is the transparency value; 0 is completely transparent, and 1 is fully opaque.

The Cinnamon panel is divided into three areas (left, center, right). There’s a special setting for changing the highlight color of each area when dragging a new applet into it. You can adjust this by modifying the values under #panelLeft:dnd, #panelRight:dnd and #panelCenter:dnd.

Change the Main Menu Color, Transparency and Font

The main menu is controlled by two sections: “PopupMenu” and “Menu”. Changes in the first one affect all popup menus. The “Menu” section contains options for Favorites, Categories, Places and the search box. That’s why we have to change color and transparency under .popup-menu-boxpointer.


I copied the RGBa value of our new panel and added it after -arrow-background-color:, increased the border width to 2px and changed border color to gray. To change the font, I modified the font-family value at the beginning of the “cinnamon.css” file. This affects the entire theme, but can be adjusted individually for some elements. We went from this:


to this:


Make the Digital Clock on the Panel Bigger

Clock is a panel applet, but unlike Window List and Calendar, it doesn’t have its own appearance settings defined in the theme file. You’ll have to modify the general “Applets” settings, and that will affect the size of the menu button text, along with any other panel applet that’s not individually adjustable.


To make the clock bigger, find .applet-label and increase the font-size value. Here you can override the font setting that we previously added for the main menu by changing the font-family value. In this example, I changed the clock into a sans-serif font, while the popup menus retained a serif font.

To modify the look of the Calendar applet (which you access by clicking the clock), look in the “Date applet” section. For example, .datemenu-date-label lets you change the size, color and font of the text at the top of the calendar applet (in this picture, it’s “Sunday March 8…”).

The “after” version is obviously not the prettiest theme in existence, but it shows the changes we’ve made.


The “Menu” button and clock are bigger, colors are changed and the font is different. The next step would be to tweak the less prominent elements of the interface, like the run dialog, end session dialog, or notifications.

Testing and Learning More

You can live-preview your changes if you place the theme files in /home/$USERNAME/.themes/ThemeName and set that theme as active in the All Settings - Themes - Desktop dialog.


If changes are not visible immediately, restart Cinnamon by pressing Alt+F2 to bring up the Run dialog, typing r and pressing Enter. Of course, you can edit everything first, then apply the new theme and check if anything needs fixing.

Beyond these basic instructions, you can find advice on Cinnamon theming on Linux Mint forums. There you can get feedback from users and other theme creators. As with many other creative activities, practice makes perfect, so the more themes you make (or edit), the easier it will become, and you’ll be “all about that CSS, no trouble”. Here’s hoping that the Cinnamon development team will soon provide official, detailed theming documentation.

Related topics: Linux Desktop Environment, Linux Mint.

Affiliate Disclosure: By buying the products we recommend, you help keep the site alive. Read more.

Whatsapp Pinterest

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Friar Tux
    April 7, 2020 at 8:31 pm

    I understand that this article is a few years old, but for those of you that are here searching for some way to change/enhance your Cinnamon theme, I recommend the Oomox Theme Builder. It is quite good. My pet peeve has always been that 'dark' themes were mostly an ugly grey. I spent a lot of time manually editing as explained here, until I found Oomox. (Just google it. There are a variety of sites you can choose from, though I think 'GitHub' may be the best.)

  2. ioinut c
    December 7, 2017 at 9:54 am

    what entry do i have to modify to change the window background color?

    • Emin
      January 12, 2018 at 8:24 pm

      Loinut, if you mean the File Manager (Nemo) background, I managed to make a nice dark background:

      First, copy one of the Mint-X folders from /usr/share/themes to the .themes folder you have created in your home folder.. For example Mint-X folder.. (You can give a new name to recognize it when choosing among the other themes later.. i.e. Mint-X-YourName )

      Then, open the file /home/yourusername/.themes/Mint-X-YourName/gtk-3.0/apps/cinnamon-applications.css

      Then look at first 12 lines.. For example (simply for black bg):

      1st line: @define-color nemo_sidebar_bg #000000; (for the left side backgroud)

      ... NemoWindow .view {
      10th line: background-color: #000000; (this is the one you ask)

      In my case, I gave the same color to both left and right sections, of course you don't have to.. (for black #000000 simply)... But don't forget to change the other colors under those lines (lines 2,3 and 11)(for items' font colors to be visible :)) to a light color whatever you like (simply #ffffff for white).. After you save, go to System Settings ->Themes -> Controls .. You'll see your customized folder there.. Choose it :)

      • Emin
        January 13, 2018 at 11:38 pm

        By the way, and if you mean the window colors (borders, especially grey parts and white spaces etc), go to your custumized folder : /home/yourusername/.themes/Mint-X-YourName/gtk-3.0/gtk-main.css

        And the first 10 lines.. Especially 3rd and 5th rows.. Base color also affects the right-click menu and the menus in File Manager Window..

        @define-color theme_bg_color #D6D6D6; (Grey)
        @define-color theme_fg_color #000000; (Font Color)
        @define-color theme_base_color #F9F9F9; (Light Grey)
        Just change these to colorful ones and see how cool it becomes :D

        P.S. : Keep the theme settings window open (System Settings ->Themes -> Controls) and after saving the changes in the css file -each time you try new colors- ; simply select another theme (i.e. Mint-X) and then reselect your customized one. This way it will take effect and you'll see the results :)

  3. Albert Note
    June 27, 2017 at 12:20 pm

    how do you change the SIZE of the menu. it really is no fun to always scroll in the short columns although the screen is so large - but not used by the tiny menu

    • Emin
      January 14, 2018 at 5:18 pm

      Albert, as far as I understand, it is automatic, once I managed even to make bigger and nicer fonts and consequently a bigger menu :)

      But the simple solution is: You can right-click on a few programs' name (calculator, update manager etc.) and "add to favorites" (to the left side of the menu).. The menu will automatically become longer :)

    • Ken
      November 2, 2019 at 6:02 pm

      To make fonts larger at the menu on taskbar find .popup-menu.
      I have Mint 17.1 and use Mint-X as my theme. Changing the font size go on the terminal and find the correct cinnamon.css file. I use Mint-X so my file is /usr/share/themes/Mint-X/cinnamon/cinnamon.css. Find your Theme at System Settings. Use tab continuation on the terminal to easier get to the css file. Be sure to make a back-up. font-size: 16pt; Use your favorite utility. and find ".popup-menu {" (without quotes) and change font-size (example font-size: 16pt;) make it perfect. Optional - Make comments /* */ with position and line number like at the top. Finally, reboot. Or some people toggle between themes to see changes. Good Luck

  4. Carl
    May 1, 2017 at 9:02 am

    What is the name of the sepia/brown theme in the bottom right corner of the image in the background in the beginning?

  5. Derick
    September 28, 2016 at 12:07 am

    For some reason, every time I try to edit cinnamon.css, the edits don't show up. I save it as root, and it doesn't show up. I want to make the panel more transparent as well as change it's color, and then do the same to the menu, and window applications color and border-radius is also something I want to change. I'm really frustrated with this.

    • Emin
      January 19, 2018 at 2:09 pm

      Derick, I know this ia a bit "late" reply but maybe other people read and use it;

      I was being frustrated just as you, as I was trying to make a completely transparent panel, and I did it in a simpler way flawlessly:

      Similar to what I mentioned above, after creating a .themes folder, you create a folder in it with any name you like (i.e. Yourname) and take a copy the cinnamon folder in /usr/share/themes/Linux Mint and paste in your folder.

      Then open the file /home/yourname/.themes/Yourname/cinnamon/cinnamon.css

      I was playing with the transparency numbers, but then I said to myself "why is the panel divided in three sections? Is ist a must? Left panel, right panel etc..?" And I decided to make the panel "mono-block" and deleted all the lines having the titles like "panelLeft, panelRight, panelCenter" etc.. yes all 3 lined ones looking like this:

      #panelLeft:dnd {
      background-gradient-direction: vertical;
      background-gradient-start: rgba(255,0,0,0.05);
      background-gradient-end: rgba(255,0,0,0.2);
      #panelLeft.vertical:dnd {
      background-gradient-direction: horizontal;
      background-gr ......

      just paying attention to the brackets open /close .. delete from # including the } )

      And shortened it by about 100 lines :) And since there is nothing telling about the background color or gradient start-end etc, it automatically becomes fully transparent . (And after saving the file, go to Settings -> Themes -> Desktop and choose Your customized folder there..

      After I saw that everything was as I wanted; in order to create a colored, particularly a dark colored panel - as transparent panel is so nice with dark colored wallpapers but the icons don't look well on light colored ones- I simply copied (reproduced) my folder in .themes (i.e. Yourname-2) and opened the cinnamon.css , then added just one line: background color among the lines, as an example, mine looks like this:

      #panel {
      color: #ffffff;
      font-size: 11pt;
      font-weight: normal;
      height: 27px;
      width: 32px;
      background-color: #000000;

      000000 is plain black just for example (it's also nice)... and of course you can give any color you like to the panel, .. Hope it works ... (I know it's a long comment, sorry for that :) )

      • Michael Biller
        October 2, 2018 at 10:01 pm

        Very nice

  6. Anonymous
    July 17, 2016 at 6:44 pm

    really great and helpful article

  7. Mayank Garg
    April 3, 2015 at 12:14 pm

    Very helpful and guiding article for changing the themes .it helps novice like me very much. Thanks a lot

    • Ivana Isadora
      April 3, 2015 at 12:26 pm

      Thank you for the nice comment! :)

      Of course, there's so much more to Cinnamon theming - we could write a book about it :), but you can use this article as an introduction, and then later experiment with different settings.

    March 26, 2015 at 2:12 pm

    a little and to the point article!

  9. Ed
    March 22, 2015 at 9:20 pm

    Very interesting. Currently learning front-end development and this would be a fun and unique way to brush up on CSS.


    • Ivana Isadora
      March 22, 2015 at 10:10 pm

      Thank you for the comment, Ed. I'm glad you liked the article. :)

      I am by no means a CSS expert, but this was really easy to understand and modify, so I'm sure you won't have any problems if you decide to tinker with Cinnamon themes.