Theme changes

[adambelis]

current proposed also would add padding next to icons

[rodlie]

Sure, but this need more planning as everything uses the same style. We don't want to just style the fill/stroke buttons, then they don't fit in with the rest of the app.

Suggestions (with colors alternatives) are welcome.

Our current stylesheet: https://github.com/friction2d/friction/blob/main/src/app/friction.qss

Primary colors we now use:

    palette.setColor(QPalette::Window, QColor(40, 40, 47));
    palette.setColor(QPalette::WindowText, Qt::white);
    palette.setColor(QPalette::Base, QColor(33, 33, 38));
    palette.setColor(QPalette::AlternateBase, QColor(40, 40, 47));
    palette.setColor(QPalette::Link, Qt::white);
    palette.setColor(QPalette::LinkVisited, Qt::white);
    palette.setColor(QPalette::ToolTipText, Qt::white);
    palette.setColor(QPalette::ToolTipBase, Qt::black);
    palette.setColor(QPalette::Text, Qt::white);
    palette.setColor(QPalette::Button, QColor(33, 33, 38));
    palette.setColor(QPalette::ButtonText, Qt::white);
    palette.setColor(QPalette::BrightText, Qt::red);
    palette.setColor(QPalette::Highlight, QColor(177, 16, 20));
    palette.setColor(QPalette::HighlightedText, Qt::white);
    palette.setColor(QPalette::Disabled, QPalette::Text, Qt::darkGray);
    palette.setColor(QPalette::Disabled, QPalette::ButtonText, Qt::darkGray);

[adambelis]

yes this was just an example it aplies to every button

[rodlie]

quick-and-dirty css mod:

https://github.com/friction2d/friction/assets/34516798/78cb10aa-ba31-4d0e-84d0-77a6edfc7ba3

Would also need to adjust the base color, since we now have a bit too much contract. Anyway, just wanted to show how it would look "for real".

[adambelis]

yes this already looks much better need more tweaking but nice

[rodlie]

Started refactoring the code related to theme/colors, this issue was a good excuse to start removing hardcoded stuff everywhere in the code.

Very WIP screenshot (nothing is final and will be easy to modify after refactor):

Also, a very annoying thing in Qt is that if I modify something like a border color through CSS I then need to re-implement the complete style for that widget (modify something and you clear the default css).

"I Just need to change a hover color, easy! Changes color and the widget looses all styling and you waste an hour adding it back..."

[adambelis]

i saw som qt utility tools for styling maybe that would help ? (no idea) https://doc.qt.io/GammaRay/gammaray-widget-inspector.html https://doc.qt.io/GammaRay/gammaray-tools.html

[rodlie]

i saw som qt utility tools for styling maybe that would help ?

I have no issues with doing the styling. But we use the Qt style "fusion" as our base, the problem is that if we override it through CSS then we need to re-implement what "fusion" did. Basically I need to write a complete CSS for the app, not just add minor changes to the "fusion" base. No biggie, just takes extra time.

[adambelis]

ah in gtk this is possible to over with just spesific style (sometime :D).

[adambelis]

btw imho OBS has very nice theme if you alos want to try that as a base https://obsproject.com/forum/resources/yami-resized.1611/updates