Steam Client like Theme for ProtonUp-Qt

[DavidoTek]

A Steam-like theme was added with PR #316

---

Qt allows loading custom themes from Qt Style Sheet files.

To improve the UX of ProtonUp-Qt for Steam Deck users, a Steam-like theme can be introduced to ProtonUp-Qt. See #55 (comment).

I've implemented a basic theme loader for a Steam-like theme here: 2dee02f

---

How would a Steam-like theme look like?

• Button Hover Background: #464D58 + shadow

[DavidoTek]

---

Steam-like Theme Code

Color Palette definition:

def PALETTE_STEAMUI():
    """ returns a Steam-ui like color palette """
    palette_steam = QPalette()
    # Needed for theming Qt's Wayland Client Side Decoration
    palette_steam.setColor(QPalette.Window, QColor(23, 29, 37))  #171D25
    palette_steam.setColor(QPalette.WindowText, Qt.white)
    return palette_steam

• Wayland CSD decoration theming: https://codebrowser.dev/qt5/qtwayland/src/plugins/decorations/bradient/main.cpp.html#102

Theme definition (.qss):

QWidget {
    color: white;
    background-color: #171D25;
}

QPushButton {
    background-color: #282D36;
    border: none;
    border-radius: 2px;
    padding: 8px;
}

QPushButton:hover {
    background-color: #464D58;
}

That's less code than I thought 😆

[sonic2kk]

Maybe the color for the compatibility tools list should be more like the background color for textboxes? #282d36 I think? That way it stands out a bit more.

Also, extremely minor, but maybe we could change the font color as well to match the Steam color, which appears to be slightly more muted? It may fit these colors better :-) I'm not sure how much control we have over its color, or even things like the hover/selected color.

[DavidoTek]

font color as well to match the Steam color

I'm not sure if it is actually some shade of gray or it just looks like that because of the font size.
I took a screen shot and the text is actually gray, but that may also be a result of the anti aliasing.

Could be something like #EEEEEE? Also, the font weight is a bit lower. Qt probably supports changing that, not sure if that could mess something up if the user has a custom font.

even things like the hover/selected color.

I guess Qt style sheets work like css: https://www.w3schools.com/CSSref/tryit.php?filename=trycss_sel_link_more1

[sonic2kk]

Good point about the weight and anti aliasing.

One very bonkers way to check that would make the text bigger and thus give more area to check, would be to set Steam's STEAM_FORCE_DESKTOPUI_SCALING=<something large>. This takes a decimal scale value, i.e. 2 is like setting 200% scale. This would make the text very big and allow for picking a potentially "more accurate" font colour, by giving more area :-)

Though, be careful, when I was testing this environment variable a few months ago, unsetting it caused Steam to forget all of my library folders and I had to manually re-add them.

[DavidoTek]

Steam seems to not be very consistent either: #282D36 seems to be the default color for buttons. But when there are buttons which may be disabled (Settings "Storage" Tab), they are #475261 by default and #282D36 when disabled.
I chose #282D36 for normal buttons and #1D2026 for disabled buttons for now.

Also, some dialogs which have a fixed size don't like the added padding.

#282D36 and #1D2026

#475261 and #282D36

newest qss code

QWidget {
    color: #EEEEEE;
    background-color: #171D25;
    font-weight: 300;
}

QPushButton, QListWidget, QComboBox, QToolButton, QLineEdit {
    background-color: #282D36;
    border: none;
    border-radius: 2px;
    padding: 8px;
}

QListWidget::item {
    padding: 4px;
}

QPushButton:hover {
    background-color: #464D58;
}

QPushButton::pressed {
    background-color: #393F49;
}

QPushButton::disabled {
    background-color: #1D2026;
}

[sonic2kk]

I think, personally, I like the first screenshot more (#282D36 and #1D2026) which are slightly more muted, but I like darker color schemes so I'm not sure what strikes a good balance. Both are used by Steam.

The button for the dropdown stands out a little, but not sure it's worth changing that too much. To match Steam, we could make its color flat with the rest of the dropdown (maybe there's way to remove the border) and make it blue. Not sure if we can match the actual caret icon that Steam uses though (which can often be misaligned anyway).

The screenshot posted also reminded me of the fixed window sizes we have, which is something I didn't consider... Maybe QSS lets us set some kind of overflow but hmm. Having conditionals to update the window size based on theme is probably not a great approach. We could first try just making the dialog bigger to accomodate this theme and then seeing the "damage" on other themes. If it looks fine, then we don't have a problem :-)

Otherwise, I wonder how feasible it would be to have window sizes defined for each theme, and we can resize each window on initialization. Each theme could have defaults that they can override. I'm not really sure where or how we could define that though...

I think overall this looks pretty awesome! 😄

[DavidoTek]

I think, personally, I like the first screenshot more (#282D36 and #1D2026) which are slightly more muted

I agree. It is also a bit closer to the actual Steam theme.

The button for the dropdown stands out a little

It should be possible to change that

Not sure if we can match the actual caret icon that Steam uses though

I don't know if that is possible to do from qss, but there probably is a way.

The screenshot posted also reminded me of the fixed window sizes we have [...] Having conditionals to update the window size based on theme is probably not a great approach

I think the best would be to get rid of the static size.

We currently do following in pupgui2_installdialog.ui:

Extract from `pupgui2_installdialog.ui`

  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>320</width>
    <height>280</height>
   </rect>
  </property>
  <property name="minimumSize">
   <size>
    <width>320</width>
    <height>280</height>
   </size>
  </property>
  <property name="maximumSize">
   <size>
    <width>320</width>
    <height>280</height>
   </size>
  </property>

I think overall this looks pretty awesome! 😄

🚀

[sonic2kk]

I think once this is complete, we should update the screenshots on the Readme, on Flathub, and on the website. They're a little behind now and also the website explicitly shows the themes, so we can update the older screenshots and include this new theme :-)