Sunday, May 4, 2008

Using a dark theme in ubuntu

After installing a dark theme on my "new" laptop the other day, I've been adding quite a few tweaks in order to make it render correctly with the rest of Ubuntu 08.04 - Hardy Heron.

Theme installed: Darklooks - you can find it in Synaptic Package Manager (gnome-themes-extras).

Edit the theme file:

cd /usr/share/themes/Darklooks/gtk-2.0/

edit gtkrc, changing lines 181 and 182 from:

bg[NORMAL] = @tooltip_bg_color
fg[NORMAL] = @tooltip_fg_color


bg[NORMAL] = @tooltips_bg_color
fg[NORMAL] = @tooltips_fg_color

This will keep the theme from crashing, I have yet to change the notifications and tooltips to be a dark color rather than yellow.

Enable the darklooks theme for gnome.

You can test it by opening firefox. If you have done the last step correctly, the theme should stick. Otherwise, it will revert back to a blocky theme.

Now for specific Apps, these tweaks are not theme specific - they should fix most dark themes.

The biggest concern for most people will be Firefox:

First, make a backup of your .mozilla profile folder (in your home folder)
uninstall firefox-3, and then install:


Why are we doing this? Firefox 3 has automated gtk integration - but, all those large dark widgets on top of light colored sites ... not very pretty. Firefox 2 has a way to get around this, but as of this post, Firefox 3 has disabled that option. You can write to your nearest Firefox developer and ask for this to be added back in!

Once you have firefox 2 up and running, merge your profile data back into your new .mozilla folder (bookmarks, add-ons, etc)

Go into the firefox preferences Edit > Preferences , and choose the Content tab. Click on the Colors button, and make sure 'Use System Colors' is unchecked. Save your changes and close that window. Next click on the Advanced fonts tab, and change the monospace font size to 14. Save and close all the way.

Download this archive, and extract it to a convenient place.

go to: /home/**/.mozilla/firefox/**/chrome , replacing the ** s with your user name and the correct profile code.

If you want to keep the ugly firefox 2 widgets, move the 'userContent-restore to firefox defaults.css' file into this folder, and remove everything after Content.

If you want prettier widgets, move the 'userContent.css' file into the chrome folder. You will not need to change its name. Next, go to /usr/share/firefox/res , and make a backup of your forms.css file. This folder belongs only to root, so you may have to do this in terminal.

sudo mv forms.css forms-backup.css

or some other such name. DO NOT SKIP THIS STEP! you should always make a backup when changing system files. Now, move the form-widgets folder, again using the terminal:

sudo cp -r where/ever/you/extracted/the/folder/form-widgets /usr/share/firefox/res/form-widgets

You should be done! You can use this page to test with.

If you know css, you can edit any of the .css files to change anything you like. You can also change the way the widgets look by opening them in your favorite image editing program.

These are the web pages that I visited in order to put all of these files together (along with a lot of my own tweaking):

Firefox Widgets
Instructions for FF3 I found this after I uninstalled FF3, according to a comment, it only works for FF2 ...
the stylish style referenced above
the unhelpful mozilla page
specific Darklooks theme problems
ubuntu forum thread with some helpful links
a possible fix for the auto complete bar in FF3
some good info

Things to fix still:

When you search for a word, it still uses a minty green color
The address bar on a secure page clashes, but is readable.
In the built in firefox boxes with hint text (like the search bar on the top right), the text is too dark to read easily.

One more thing! If you want to, you can install the stylish firefox extension, and then install a dark google theme, that way it will feel more like the rest of your desktop.

Open Office:
I haven't opened up anything but Writer, so, I don't know what else needs fixing yet.

Download this archive (7.7mb) and move the file into /usr/lib/openoffice/share/config/ Don't extract it.

To change the icon theme so that it matches better (unless you like orange of course), go to the Tools > Options menu. Under the section, choose View. Change the icon size to small (if you think they are too large), and set the style to tango.

Next, to change the page background color from dark gray to white, choose Appearance from the left. Change document background to white, and font color to black. As you run into any other glitches, you can change them here.

First, make sure you are running the new pidgin, it should be 2.4.1 or higher. If you have Hardy Heron installed, you are good to go.

In the Tools > Plugins menu, turn on 'Conversation Colors' and set Sent and Received Messages to #ADADAD (you can go lighter or darker, at your preference).

Next, turn on the 'Pidgin GTK+ Theme Control', and set the hyperlink color to #576BBE , the Sent Message Name color to #8496DD , and the Received Message Name color to #EA987D . Again, you can change these as you like, but this is a good starting place.

If you have a smaller screen (1024x768), you won't be able to see the save or close button. Click tab until you get to the re-read gtkrc files, then click tab again, and push your [ENTER] key.

Open Gedit, \go to the Edit > Preferences menu, and choose the Fonts and Colors Tab. Change the theme to Oblivion. This theme is not ideal, color wise, but it's readable!

Open up your terminal, go to the Edit > Current Profile menu, choose the Colors tab, you can try using the colors from the system, or change the scheme white or green on black. Whichever suits your fancy. You can also change the colors individually if you like.

That's it for now, as I use the theme, I know I'll run into more things that need fixing, and I will either add them to this post, or make a new one.


Anonymous said...

In the firefox section, you have "Download this archive, and extract it to a convenient place." There's no link.

Susie Day said...

Yikes! you are right .. I'll have that up in a second.

Susie Day said...

I found this - it might fix some of the few bugs that are left.


Anonymous said...

Note that the "FF3 instructions" above are not in fact for FF3... they are for FF2 because someone was asking how the OP did it in FF2... at the end of the instructions he says "Still need to know how I can keep this in FF3, though!"

Susie Day said...

that's why my ubuntu machine is still using FF2 ... it's too bad really. i keep hoping that 3.1 will give some of the flexibility and customization back to the users.

David W. said...

I found another method that allowed me to use firefox 3. I renamed /usr/bin/firefox to /usr/bin/firefox_bin. Then I created a new shell script at /usr/bin/firefox (do a chmod +x /usr/bin/firefox to make sure it's executable), with this inside:

env GTK2_RC_FILES=/usr/share/themes/THEME_NAME/gtk-2.0/gtkrc /usr/bin/firefox_bin "$@"

(that command is all on one line)

Pick another (light) theme for the location of the gtkrc file. After this, running "firefox" will cause it to open with the different theme, which will fix the form items -- and you can let your selected firefox skin handle the rest.

Term Papers said...

I have been visiting various blogs for my term papers writing research. I have found your blog to be quite useful. Keep updating your blog with valuable information... Regards