Experiment with a new UI Theme for MuseScore 3

• Sep 30, 2016 - 09:36

In MuseScore 2, we choose to have a single theme for all supported OSes. It came with two variants "light" and "dark". Having a single theme makes it easier to document MuseScore, to answer support questions etc... it also makes our maintenance work smaller and we can focus on actual musical features. MuseScore 2 used a greatly modified version of KDE-Oxygen theme. The theme is a mix of a customized C++ theme (25k lines), some CSS and two color palettes (one light, one dark). The KDE-Oxygen theme has been written for Qt4, and we did our best to port it to Qt5.

It would be great if in MuseScore 3, we could improve this state. In particular, I would like MuseScore to look even more beautiful and have even less maintenance work. Hopefully, we can have a decent theme using only a color palette and some CSS and get rid of the 25k lines of C++. The good news is that Qt5 comes with a built-in theme called Fusion, it could replace Oxygen for our purpose. Then we will need to tweak our existing Palette and CSS to make it good looking.

In order to experiment with this, I added a two items in the Theme combobox in Preferences > General. You can now switch to Fusion light and Fusion dark. For now, it just load Fusion instead of Oxygen and it uses the exact same palette and CSS.

The palette and CSS used to be hardcoded in the C++ code. They are now external resources, embedded in the MuseScore binary, and they can also be loaded from Documents/MuseScoreDevelopment to make it easier to experiment. For example, if you want to change the style sheet, create a file called style.css (follow the link for an example) in this folder. This file is a Qt StyleSheet, the syntax is documented and there is a reference page. You can also create a palette_light.json or palette_dark.json in the same folder to change the color palette. This is all experimental and a way to experiment, it will disappear in a future. Ideally, we would settle on a single Theme, Palette and Stylesheet for MuseScore 3.

It's still very early, but please try a nightly build. If you have any kind of constructive feedback (hint: "it's ugly" it's not considered constructive), feel free to comment.

Capture d'écran 2016-09-30 10.35.34.png

Comments

• Sep 30, 2016 - 09:55

I love the theme Dark Fusion. The clear and contrasting separators are the most beautiful effect, and allow better readability.
I wish the same (separators) to improve the readability of the palettes (but I know that's a different question)
The Light Fusion is less good (in my opinion): the separators are not enough contrasting vs. Dark Fusion.
separators.jpg

Reply

• Sep 30, 2016 - 11:19

I disliked the old dark theme and still do, and I also dislike the new dark theme, looks way to depressive to me.
My vote would be to switch to Fusion (which should get us rid of 25k lines of code, wouldn't it?), but keep light and dark.

Reply

• Sep 30, 2016 - 14:53

Commenting on Shoichi's image: that readability problem (i.e. grey with clear shadowing over dark background) appears only for disabled submenus, I see the same on my pc (Windows 10); enabled submenus are shown in white over dark background and readable.

Reply

• Sep 30, 2016 - 16:02

To me, this theme looks functional but a bit unfriendly. It feels like it's based on a pre-anti-aliasing design concept, and it gives off a low-resolution air even on a high-resolution monitor. I particularly have problems with the scroll bars and checkboxes, the lack of distinction between the edges of the score view and the Inspector and Palettes, and above all else the context menus!

Reply

• Oct 2, 2016 - 16:44

My initial reaction has been tempered, so hopefully I can be more constructive. Here are some things that I think must change if this theme (Light Fusion) is to become the new default:

- Context menus! Round the corners, and mute the white. Ditto for the Note Input dropdown menu.
context.png
- Scroll bars. Can you tell which part is the scroll bar and which is the background?
scroll.png
- Tabs. The spacing and the color palette make them all sort of merge. And, in some places (e.g. Preferences), the foreground tab and all content below it are darkened.
tabs.png
- Color of depressed toolbar buttons. Not such a dark gray.
toolbar.png
- Toolbar handles. Should be made clearly visible to the naked eye. (There are two of them in the above image.)

- New lines separating things that should not be present. For example, between the rows of toolbars, and in the Start Center.
lines.png
- Missing lines separating things that should be present. For example, around the borders of the Inspector and Palettes.
line.png

Reasonable?

Reply

• Oct 3, 2016 - 11:16

Ideally, this combobox should be remove from the stable version... I can take a look if it's possible to dynamically reload the style, the palette and/or the stylesheet to make experimentation easier but I don't want to overengineer this for now since it should be removed anyway.

Reply

• Oct 3, 2016 - 11:17

I just edited the top post to reflect the latest change. The palette and the stylesheet can now be modified without recompiling MuseScore, so it's easier to experiment with design changes.

Reply

Do you still have an unanswered question? Please log in first to post your question.