Adventures in Theming

During the last four years of Froggum’s development, there have been several pauses. Some were due to school or other responsibilities taking priority, some were due to ambiguous specifications, and some were due to really annoying bugs.

The latest development-stopping bug was a simple one: all info bars appear dull yellow.

Image of Froggum with yellow info bar

This seems to happen because I’m on Windows, which does not have the same default Gtk stylesheet as elementary OS, where Froggum is intended to be used.

For the error bar to look like an error, it is reasonably important for it to be red. The next (and last) major feature will also have an info bar, which needs to be a different color. Therefore, all info bars being the same color is a problem.

I tried to fix this a few ways. There is a MinGW package gtk-elementary-theme, which I installed. This had no effect. I installed elementary/stylesheet from source. This had no effect. I tried writing custom CSS. This had an effect, but it didn’t look good, and wouldn’t look good on elementary either.

This is where development paused, because I had no idea what to do about this, but it needed to be fixed.

The Solution

Today, I decided to get back to working on Froggum by searching “gtk4 set default theme” on Google. This led me to a Reddit post which, among other suggestions, included the line export GTK_THEME=Your-Theme-Name.

I tried it.

$ export GTK_THEME=io.elementary.stylesheet.lime
$ io.github.sapoturge.froggum

Image of Froggum with pink info bar

It worked.

Since this isn’t a code change, I can’t make it work for everyone automatically. I will put it in the documentation that I need to start writing. I also seem to need the icon theme.

The important part is that I can now continue working on Froggum without this bug hanging over me.

Conclusion

In order for the error bar to look correct on Windows, you need to install and use the elementary stylesheet.

$ git clone https://github.com/elementary/stylesheet
$ cd stylesheet
$ meson setup build
$ cd build
$ ninja install
$ export GTK_THEME=io.elementary.stylesheet.lime

elementary has several theme colors; lime may be switched for any other (options include banana, blueberry, bubblegum, cocoa, grape, latte, lime, mint, orange, slate, strawberry, and dark variants of each base color).

On elementary itself, the system theme should be used automatically, so none of this should matter.