Desktop Theming and Icons

For some time now there has been a general move over to darker themes in GNOME-land. I have tried a bunch of themes here and there but I have always moved back to the default Ubuntu theme: I always found the dark theme less usable and harder to look at in my day to day work. Last night though, I decided to give it a decent shot and customized the bejesus out of my desktop. I now have a pretty snazzy looking desktop and I (a) wanted to show it off (b) share how to make your own and (c) ask you folks if one final icon tweak is doable.

So, let’s kick off with (a): this my new desktop:

My desktop

If you want to see the full sized image, click here.

Now onto (b). To make my desktop look like this, I took my normal Ubuntu Jaunty desktop and made the following changes:

  • Changed my theme to Dust (System->Preferences->Appearance->Theme tab)- this ships with Ubuntu.
  • Changed the panel to use a specific background found in /usr/share/themes/Dust/panel-background-32px.png. To set this, right click each panel, click Properties and click the Background tab.
  • Set my panel size to 29 pixels.
  • Made a bunch of font changes (System->Preferences->Appearance->Fonts tab):
    • Application Font: Rehan – size 9
    • Document Font: Rehan – size 9
    • Desktop Font: Rasheeq Bold – size 9
    • Window Title Font: Rasheeq Bold – size 9
    • Fixed Width Font: Monospace – size 10
    • Used Subpixel smoothing (LCDs)
  • Switched on Desktop Effects (System->Preferences->Appearance->Visual Effects tab) and click Extra.

I am really happy with the results.

So finally, onto (c). One element in my desktop that is bugging me right now is the notification area:

Notification area

I think that a black panel with colored icons does not look good. Ideally what I am looking for are the icons in the notification area to be all colored white or grey. You can see a similar effect in how icons on the Mac OS X panel are all black: they look great and bring contrast to the notification area.

I did a little bit of digging to see if I someone had managed to do this, but I didn’t find anything. So my first question is, is there a solution to this out there? If so, I would appreciate any pointers.

I know that one approach to solving this is to simply load the icons into the GIMP and to color them. But I was thinking, would it be possible to patch the panel and to run each icon in the notification area through a function that colors the icon white or grey?

If anyone has any solutions, thanks in advance. Thanks also to everyone who has worked on the technologies that mean that without writing a line of code I can so dramatically change the look and feel of my desktop. Another notch on the wall of awesome for the desktop community. :-)

Finally, just to add my voice to the anti-anti-Mono nonsense that is engulfing the Internet:

I am not scared of Mono

  • Jono Bacon (jonobacon) ‘s status on Saturday, 11-Jul-09 17:04:06 UTC –

    […] blog post on my desktop, how I customized it and icons – !ubuntu […]

  • joe

    problem with the dark themes is that they only seem to darken the title bar/menu bar… rest of the gtk widgets just look out of place, imho

  • Emmanuel

    I agree with “joe” on the menu bar getting darker. Otherwise it looks awesome. I’ve been interested in dark themes for some time now. However, many dark themes want everything to be dark. I’m not a vampire, and I’m afraid of the dark (at least in a theme :-)), but this configuration that you posted up looks like something I’ll have to do in my desktop. Thanks for sharing your recipe! :-)

  • Joaquim Rocha

    Hey Jono,

    I just tried the changes you suggest here and I really like it. You have good taste!

    Cheers man, it was good catching up with you at GCDS!

    — Joaquim Rocha

  • Ross Burton

    Joe: decent dark themes have dark widgets, see Darkilouche or Darklooks.

    Jono: most notification icons are loaded from the icon theme, so a custom icon theme can override them. Fixing the applications which don’t use icon themes is an exercise left to the reader. :)

  • tretle

    Hmmmmm…. I was looking to do the exact same thing for a long time until I found shiki-colors and the gnome-colors icon theme. You should give it a try, the icons in the panel are still coloured but they look better than the stock ubuntu icon theme.

  • James

    It looks pretty, but I wish the whole black area were draggable. My sense of style conflicts with my sense of usability. :-(

  • ethana2

    Try gnome-globalmenu, with gnome-do docky. ..then try xmonad.

    My problem with dust is that part of the window is black and part is grey. I see no reason to have the background of the window be more than one continuous region of one color. It makes it less elegant.

  • Koolinus

    Do you know if Andrea Cimitan is reading you? He’s into Gnome project …

    Also Nicubunu & Mairin of Fedora Art team could give you an hand or a valid tip!

  • Regarding Richard Stallman :

    […] jumping onto the meme a little bit late. I go offline for 24 hours and when I come back at least half of Planet GNOME has blue […]

  • John (J5) Palmieri

    Regarding a high contrast status bar. I had mused on the same thing about a year ago –

    Good news is I believe the teams involved with the GNOME 3.0 Shell have this or something similar on their roadmap.

  • jono

    Great to see you too, Joaquim! :-)

  • d0od

    I have a similar set up to you, and find that meliae white is perfect. Most of the panel icons are white and look verrrry nice.

  • joe

    hmm… a bit better, but open up evolution/eclipse/gedit and all the text is still black on a white background… seems like inverse should apply more globally, though not exactly sure how webpages should work…

  • Icon Theme Hacking Progress | jonobacon@home

    […] Human icon, edited theme.index to change the name of the theme and then went around coloring icons. Thanks to d0od for pointing me at the Meliae White theme too. I used some of those icons in my own cobbled […]

  • Roshan

    I was about to suggest hitting Meta + N to let Compiz make a negative of the window, but that’s a bit harsh-looking.

  • bne

    Wow el consumo de memoria de Seesmic Desktop es BESTIAL!!! (no es nada Firefox)

  • pikkio

    I agree. The menubar should be draggable. Even more, “blank” space on the UI (that is, with no clickable widgets on it) should be draggable. It’s just a matter of usability and consistency. OSX and Vista have this feature. Even Google Chrome on Linux has it.

  • I was wondering what peoplethought about the mini laptop computers. I want to buy like the cheapest one? | Buy Notebook Laptop

    […] Desktop Theming and Icons | jonobacon@home […]

  • Jeff

    Sure, there have been some nonsense arguments on both sides of the debate. But this chanting of “I AM NOT AFRAID OF PEOPLE WRITING CODE” is simplifying a genuine issue to the point of absurdity.

    Mocking other members of the community like this hardly seems constructive.

  • Desktop Theming and Icons | jonobacon@home « Propos et Commentaires du Climenole

    […] } via […]

  • Myke

    I really like the look of it. I too also fight with myself on light vs. dark but light is winning at the moment.

    Here’s mine:

    Also, for what it’s worth, I stand by you on your anti-anti-mono stance.

  • Astron

    For the font, may I suggest you use the generic FreeSans (all the other FreeSans-like fonts, including Rehan / Rasheeq are just the FreeSans’ latin characters + a character set not included in FreeSans — however FreeSans should still include more and more important character sets than any single of its localised copies) instead? Btb, I’ve opened a bug about updating FreeSans (which would fix the odd kerning) in Ubuntu: .

  • Martin

    Well, if you don’t mind the whole panel being affected, you can get a saturated panel with the Compiz plugin “Opacity, Brightness and Saturation”.

    Granted, it’s not an ideal solution. It would have been nice if the gnome-panel had some more options regarding the size, as it is now you can only have it dynamically expanding or expanded over the whole screen width. If one could have set a fixed width on the panel, one could have split the panel in two and just saturated the one with the notification icons and still have the impression of a complete panel (although, in that case I’d like some option for the ugly handles as well).

    Anyhow, maybe a bit saturated icons makes it easier on your eyes :)

  • Martin

    I just scrolled up on Planet Ubuntu and saw your other blog post regarding the icons, so you can disregard of this and previous comments I have made 😛

    Nicely done btw! Gonna try that myself.

  • Joeb454

    Jono – I have to commend you on this.

    I never knew about the panel backgrounds for Dust, but they’re very nice.

    Also I was using Deja Vu Sans for my font’s (my terminal is still DVS Mono 10) but rasheeq & rehan are both very nice fonts, just taking the time to get my eyes to adjust, may have to go back up to 10pt

  • John

    Jono Said: “For some time now there has been a general move over to darker themes in GNOME-land.”

    No – not in GNOME-land, just in UBUNTU-land where the little kiddies don’t do anything productive but play with their desktop themes 😉

  • Links 23/07/2009: Sony Ericsson Dumps Windows for Linux, US Free Software Coalition Formed | Boycott Novell

    […] Desktop Theming and Icons For some time now there has been a general move over to darker themes in GNOME-land. I have tried a bunch of themes here and there but I have always moved back to the default Ubuntu theme: I always found the dark theme less usable and harder to look at in my day to day work. Last night though, I decided to give it a decent shot and customized the bejesus out of my desktop. […]

  • Joe Barker (joeb454) ‘s status on Sunday, 26-Jul-09 02:25:58 UTC –
  • Joel Goguen (jgoguen) ‘s status on Monday, 27-Jul-09 00:33:51 UTC –
  • Mario

    Perhaps you already knew of this, a firefox theme that integrates smoothly with the dust theme:

    I’ve set up your configuration + this ffox theme and I have to say and more than happy with the results.

    Thanks for sharing!