[New!] Blender Dark UI theme (4k)
Forum rules
Be nice to others! Respect the FreeCAD code of conduct!
Be nice to others! Respect the FreeCAD code of conduct!
[New!] Blender Dark UI theme (4k)
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.
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: The file menu is now much more readable: 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. 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?
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.
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: The file menu is now much more readable: 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. 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?
Last edited by Hologram on Sat Feb 04, 2023 6:43 pm, edited 5 times in total.
Re: [New!] Blender Dark UI theme (4k)
Known issues continued
3. There are two separator lines in the bottom bar, next to the navigation styles button: 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. 5. Finally, there are some text input fields that do not react to the padding I applied to them:
3. There are two separator lines in the bottom bar, next to the navigation styles button: 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. 5. Finally, there are some text input fields that do not react to the padding I applied to them:
Last edited by Hologram on Tue Jan 31, 2023 12:22 pm, edited 1 time in total.
Re: [New!] Blender Dark UI theme (4k)
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: And I would like it to be like this: 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
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: And I would like it to be like this: 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.
Re: [New!] Blender Dark UI theme (4k)
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.
Re: [New!] Blender Dark UI theme (4k)
Fixed the tasks panel:
Link to the stylesheet is updated.
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.
Re: [New!] Blender Dark UI theme (4k)
Found another issue with the Preferences > General > Manage... > Manage Preference Pack window:
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.
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.
- MisterMaker
- Posts: 744
- Joined: Mon Sep 21, 2020 7:41 am
- Contact:
Re: [New!] Blender Dark UI theme (4k)
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 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
Re: [New!] Blender Dark UI theme (4k)
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).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
- MisterMaker
- Posts: 744
- Joined: Mon Sep 21, 2020 7:41 am
- Contact:
Re: [New!] Blender Dark UI theme (4k)
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.
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.
Re: [New!] Blender Dark UI theme (4k)
Also noticed that from looking at the Qt docs links in your theme.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.
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?