[New!] Blender Dark UI theme (4k)

A forum for research and development of the user interface of FreeCAD
Forum rules
Be nice to others! Respect the FreeCAD code of conduct!
Hologram
Posts: 201
Joined: Thu Nov 03, 2022 3:05 pm

[New!] Blender Dark UI theme (4k)

Post by Hologram »

Hi,

The past week I have been working on a new UI theme for FreeCAD, because I did not like the ones that are shipped by default. They were pretty hard to read. This new theme is inspired by Blender's dark theme and is made to work for 4k screens. I have added additional padding between text and buttons and also increased the text size. Because I think it is currently quite difficult to figure out what everything does in the stylesheet, I tried to document the more obscure settings. That way, you can easily make modifications. In addition, I made a list of the colours by button type, background colour and accent colour, so you can easily modify those to suit your taste.
Main interface.png
Main interface.png (220.86 KiB) Viewed 2716 times
The preference menu was my go to place to test buttons (it has radio buttons, group buttons, comboboxes, spinboxes, color UI boxes, tabs and more!). So, it's also the best to showcase some of the new UI:
Preferences_shorter.gif
Preferences_shorter.gif (850.73 KiB) Viewed 2716 times
The file menu is now much more readable:
Menu interaction.gif
Menu interaction.gif (500.27 KiB) Viewed 2716 times
WIP stylesheet
This is the WIP stylesheet. Since I have not done any actual work in FreeCAD I would need to spend some time working with it first, to iron out the leftover flaws. Feel free to test it out already though, as feedback helps to improve the theme!
I'll update this post as I go along.

>>> Here's the pre-release stylesheet, it would help me out if you could report any issues you see: https://icedrive.net/s/TZ6A3kFCWihTTjfV54V7jwPzkXP7

Installation
Place the .qss files and /images/ folder in the path that fits your OS:
OSX: — Users/[YOUR_USER_NAME]/Library/Preferences/FreeCAD/Gui/Stylesheets/
WINDOWS — C:/[INSTALLATION_PATH]/FreeCAD/data/Gui/Stylesheets/
LINUX — /home/[YOUR_USER_NAME]/.FreeCAD/Gui/Stylesheets/

Known issues
There are still some issues that I would like to solve before I release the final theme (as a preference pack). However, I don't know how I could solve these, so I would need some help from someone who could look into the code for these, to get to the Qt classes involved.

1. Whenever there are pushbuttons in a cell, the cell also highlights upon hover (which you need for the spreadsheets), but ideally, I would want to add an exception to avoid that.
Cell and button hover.gif
Cell and button hover.gif (90.48 KiB) Viewed 2716 times
2. The Properties View (PropertyEditor) jumps around when you select a cell with a dropdown, that's because it doesn't have the 10 px padding applied I added to the rest of the interface. Where could I add this padding for these cells in the stylesheet?
Cell padding and selection border.gif
Cell padding and selection border.gif (142.54 KiB) Viewed 2716 times
Last edited by Hologram on Sat Feb 04, 2023 6:43 pm, edited 5 times in total.
Hologram
Posts: 201
Joined: Thu Nov 03, 2022 3:05 pm

Re: [New!] Blender Dark UI theme (4k)

Post by Hologram »

Known issues continued
3. There are two separator lines in the bottom bar, next to the navigation styles button:
Separator line.png
Separator line.png (10.73 KiB) Viewed 2678 times
4. Currently, I have yet to figure out how I can add an outline when a QlineEdit is active (for instance launcher when activated with a shortcut). If you hover over a text field while it is active, the outline of the text field disappears.
Text focus.gif
Text focus.gif (103.19 KiB) Viewed 2678 times
5. Finally, there are some text input fields that do not react to the padding I applied to them:
Text that cannot be padded.png
Text that cannot be padded.png (136.45 KiB) Viewed 2678 times
Last edited by Hologram on Tue Jan 31, 2023 12:22 pm, edited 1 time in total.
Hologram
Posts: 201
Joined: Thu Nov 03, 2022 3:05 pm

Re: [New!] Blender Dark UI theme (4k)

Post by Hologram »

Feature requests
For me there are two more UI related things that would help improve readability on my 4k monitor. Cross-posting it here:
I would like to have a radial/ elliptical background gradient option, so the background is more subtle. It is now like this:
Linear gradient.png
Linear gradient.png (22.97 KiB) Viewed 2688 times
And I would like it to be like this:
elliptical gradient.png
elliptical gradient.png (104.44 KiB) Viewed 2688 times
See the Github issue here:
https://github.com/FreeCAD/FreeCAD/issues/8297

And I would like to have dedicated control for scaling the icons in the sketcher https://github.com/FreeCAD/FreeCAD/issues/8288
Last edited by Hologram on Wed Feb 01, 2023 10:34 am, edited 2 times in total.
User avatar
chennes
Veteran
Posts: 3876
Joined: Fri Dec 23, 2016 3:38 pm
Location: Norman, OK, USA
Contact:

Re: [New!] Blender Dark UI theme (4k)

Post by chennes »

Regarding issue #1 above, in that particular instance there is no need for any mouse interaction in the row itself, I can probably filter out those events.
Chris Hennes
Pioneer Library System
GitHub profile, LinkedIn profile, chrishennes.com
Hologram
Posts: 201
Joined: Thu Nov 03, 2022 3:05 pm

Re: [New!] Blender Dark UI theme (4k)

Post by Hologram »

Fixed the tasks panel:
Tasks panel.png
Tasks panel.png (332.38 KiB) Viewed 2547 times
Though I am not sure where the blue hue over the buttons comes from. None of the down-arrow listings have such a colour, nor do I think there are any blues remaining that I have not set explicitly. Checked all the Hex colors in the file #XXXXXX and there are no blues I haven't set myself. Checked all the rgba(XXX,XXX,XXX,XXX) values in the file and there should also be no blues (I opted to use HEX colours, because that gives you an colour-editor in VSCode). There shouldn't be named colours either, at least not ones that have "blue" in their name and it ain't "teal" either. So I'm quite puzzled by this.

Link to the stylesheet is updated.
Last edited by Hologram on Sat Feb 04, 2023 6:44 pm, edited 1 time in total.
Hologram
Posts: 201
Joined: Thu Nov 03, 2022 3:05 pm

Re: [New!] Blender Dark UI theme (4k)

Post by Hologram »

Found another issue with the Preferences > General > Manage... > Manage Preference Pack window:
Manage preference packs.png
Manage preference packs.png (24.87 KiB) Viewed 2323 times
The QPushbuttons in the Qcolumn/ listview need to be styled specifically in the Stylesheet. I wouldn't know which class it is atm. But the cells should be sized in accordance to the Qpushbutton size. It becomes especially obvious with multiple packs, because the buttons will overlap with each other and the hover highlighting will run amok.

I'm testing the preference pack in the latest Linkbranch, if it works as I would expect it to, then I'll make the pack available here.
User avatar
MisterMaker
Posts: 739
Joined: Mon Sep 21, 2020 7:41 am

Re: [New!] Blender Dark UI theme (4k)

Post by MisterMaker »

Uhm that last thingy and a ton of other small annoying things I have fixed in ExtremeProDark, also your theme looks a LOT like ExtremePro.
I would explain what the issue is, but I used a different stylesheet template and that also fixed some bugs like that one. So I don't really know how I fixed it.
You are welcome to use my theme as a base:
https://github.com/MisterMakerNL/ExtremeProDark
Hologram
Posts: 201
Joined: Thu Nov 03, 2022 3:05 pm

Re: [New!] Blender Dark UI theme (4k)

Post by Hologram »

MisterMaker wrote: Thu Feb 23, 2023 8:27 pm Uhm that last thingy and a ton of other small annoying things I have fixed in ExtremeProDark, also your theme looks a LOT like ExtremePro.
I would explain what the issue is, but I used a different stylesheet template and that also fixed some bugs like that one. So I don't really know how I fixed it.
You are welcome to use my theme as a base:
https://github.com/MisterMakerNL/ExtremeProDark
I have looked a lot at your theme in comparison, I initially started building my theme with your file as template, but seeing that there were many things listed that seemingly did not affect anything, I decided to use one of the default dark themes instead. For now I don't plan to make changes, because I decided not to proceed in FreeCAD for my current project. Will definitely revisit this later and create a theme package (the version of Master I used at the time had a bug creating a package).
User avatar
MisterMaker
Posts: 739
Joined: Mon Sep 21, 2020 7:41 am

Re: [New!] Blender Dark UI theme (4k)

Post by MisterMaker »

Extreme Pro uses a standard stylesheet templated, I decided to leave some code in that currently isn't used like a calendar widget. Just to make it more future proof.
I'm not trying too sell my theme I'm more replying because a Blender theme is a good idea, but just don't see the point off fixing all the bugs again. :lol:
Hologram
Posts: 201
Joined: Thu Nov 03, 2022 3:05 pm

Re: [New!] Blender Dark UI theme (4k)

Post by Hologram »

MisterMaker wrote: Fri Feb 24, 2023 4:49 am Extreme Pro uses a standard stylesheet templated, I decided to leave some code in that currently isn't used like a calendar widget. Just to make it more future proof.
Also noticed that from looking at the Qt docs links in your theme. 😉
There were plenty of exceptions and specific bug fixes in the theme I used as template, but that may also complicate finding the solution.
Did you use special software or did you manually change the code like I did?
Post Reply