Accord/yuzu-mirror
1
0
Fork 0
Code Issues 1.6k Pull requests 44 Projects Releases Packages Wiki Activity Actions

open [12744] Custom Qt themes and dark mode switching #12744

Open
Accord wants to merge 6 commits from __refs_pull_12744_head into master
pull from: __refs_pull_12744_head
merge into: Accord:master
Conversation 0 Commits 6 Files changed 97 +1084 -1413
Accord commented 2026-01-02 20:41:09 -03:00
Owner
Copy link

Branch: __refs_pull_12744_head

flodavid opened issue at 2024-01-22 09:28:

Custom themes

If themes are present in the "qt_themes" subfolder of Yuzu data dir, they are added to theme selection list of the UI

  • Each theme goes in its sub-directory
  • The name should be a lowercase string separated by underscores (snake case)
  • To adapt to light/dark mode, they have two options:
  • Have a style.qss file at the root of the theme folder, that uses "palette(XXX)" (see here https://doc.qt.io/qt-5/qml-palette.html)
  • Have light.qss and dark.qss, with different color values
  • A theme folder may contain an "icons" folder, with an index.theme files referencing the folders containing icons and the fallback ("Inherits" option)
  • Dark variant icons should in a folder next to the theme one, named "THEME_NAME_dark". A theme name must not end with "_dark" for this reason

Dark theme switching

  • Improve Linux dark mode detection:
  • Uses D-Bus to listen to event. It reads "color-scheme" value using gdbus, or falls back on gsettings on failure, reading "color-scheme" and "gtk-theme" values
  • Implement Windows dark mode detection
  • It uses "fusion" style, which has minor differences to the light theme ("windowsvista")
  • Add setting to force or disable dark mode
  • On Windows, the application needs a restart to apply the settings
  • On Windows, forcing dark mode is not possible

Rework themes

  • Default theme can now be dark, so we use it instead of "Dark" theme
  • "Dark" theme as been renamed to "Mine Shaft" to reflect this

Resolves https://github.com/yuzu-emu/yuzu/issues/12307

flodavid commented at 2024-01-22 09:36:

Example of custom theme in "pink_dark" folder

Screenshot from 2024-01-21 21-18-19

flodavid commented at 2024-01-22 13:47:

Windows compilation should be fixed, but theme switching is not consistent for colorful themes

liamwhite commented at 2024-01-23 17:29:

Can you fix the format job so we can get a full CI run

flodavid commented at 2024-01-26 00:25:

Thank you for your feedback, its appreciated. All issues should be fixed now. I reworked the loading of stylesheet to use a string instead of QFile. Its simplifies things and its clearer why we are returning early.
I added the feature allowing to override icons in addition to the stylesheet. I also added "midnight" as a word that defines the theme as dark.
Example of an ugly test theme that swaps "folder" and "bad_folder" icons:
pink_dark.zip
I am still working on this PR to see if I can improve the handling of automatic dark/light mode switching.

liamwhite commented at 2024-02-12 18:31:

Please fix windows build

flodavid commented at 2024-02-14 18:31:

I removed logs or reduced level. Add details to commit messages.
This PR has been tested on Pop!_OS 22.04 and Windows 11.
New dark mode option :

Screenshot from 2024-02-14 19-28-39

flodavid commented at 2024-02-22 12:51:

Dark mode "Always On" option did not work on Windows, I removed it.
Since a restart is needed to apply the dark mode setting on Windows, the label indicates it and the setting is applied on application start only.
I fixed the Volume Slider appearance on Windows with dark mode, by modifying the style sheet when the "fusion" style is used. (And removed tweaks in the default style.qss file).
Controller and Keyboard applets now use their dark icons when dark mode is enabled.
Directories in local "qt_themes" end with "_dark" are not listed as custom styles anymore, as they should only contain dark variant icons of their respective style.

flodavid commented at 2024-02-23 15:44:

Before After
Screenshot from 2024-02-23 16-34-21 image

I fixed the last commit, that broke Auto dark mode on Linux.
I also added a new commit that fixes the style of the qdarkstyle and qdarkstyle_midnight_blue sliders, they were cropped for the ZR and ZL threshold, and the volume level:

[Export of Github issue for yuzu-emu/yuzu. Generated on 2024.02.28 at 10:04:32.]

**Branch:** [__refs_pull_12744_head](https://accord.dravee.dev/Accord/yuzu-mirror/src/branch/__refs_pull_12744_head) #### <div><img width="50" height="50" src="https://avatars.githubusercontent.com/u/11854849?u=7d079e6737153cbd7b70e4feacc41cba312cf666&v=4" width="50"></div>[flodavid](https://github.com/flodavid) opened issue at [2024-01-22 09:28](https://github.com/yuzu-emu/yuzu/pull/12744): > ## Custom themes > If themes are present in the "qt_themes" subfolder of Yuzu data dir, they are added to theme selection list of the UI > - Each theme goes in its sub-directory > - The name should be a lowercase string separated by underscores (snake case) > - To adapt to light/dark mode, they have two options: > - Have a style.qss file at the root of the theme folder, that uses "palette(XXX)" (see here <https://doc.qt.io/qt-5/qml-palette.html>) > - Have light.qss and dark.qss, with different color values > - A theme folder may contain an "icons" folder, with an index.theme files referencing the folders containing icons and the fallback ("Inherits" option) > - Dark variant icons should in a folder next to the theme one, named "THEME_NAME_dark". A theme name must not end with "_dark" for this reason > ## Dark theme switching > - Improve Linux dark mode detection: > - Uses D-Bus to listen to event. It reads "color-scheme" value using gdbus, or falls back on gsettings on failure, reading "color-scheme" and "gtk-theme" values > - Implement Windows dark mode detection > - It uses "fusion" style, which has minor differences to the light theme ("windowsvista") > - Add setting to force or disable dark mode > - On Windows, the application needs a restart to apply the settings > - On Windows, forcing dark mode is not possible > ## Rework themes > - Default theme can now be dark, so we use it instead of "Dark" theme > - "Dark" theme as been renamed to "Mine Shaft" to reflect this > --- > Resolves https://github.com/yuzu-emu/yuzu/issues/12307 #### <div><img width="50" height="50" src="https://avatars.githubusercontent.com/u/11854849?u=7d079e6737153cbd7b70e4feacc41cba312cf666&v=4" width="50"></div>[flodavid](https://github.com/flodavid) commented at [2024-01-22 09:36](https://github.com/yuzu-emu/yuzu/pull/12744#issuecomment-1903597710): > Example of custom theme in "pink_dark" folder ![Screenshot from 2024-01-21 21-18-19](https://github.com/yuzu-emu/yuzu/assets/11854849/2c6c9555-b36b-4f24-b9c5-37f4fde7cf0d) #### <div><img width="50" height="50" src="https://avatars.githubusercontent.com/u/11854849?u=7d079e6737153cbd7b70e4feacc41cba312cf666&v=4" width="50"></div>[flodavid](https://github.com/flodavid) commented at [2024-01-22 13:47](https://github.com/yuzu-emu/yuzu/pull/12744#issuecomment-1904039442): > Windows compilation should be fixed, but theme switching is not consistent for colorful themes #### <div><img width="50" height="50" src="https://avatars.githubusercontent.com/u/9658600?v=4" width="50"></div>[liamwhite](https://github.com/liamwhite) commented at [2024-01-23 17:29](https://github.com/yuzu-emu/yuzu/pull/12744#issuecomment-1906569634): > Can you fix the format job so we can get a full CI run #### <div><img width="50" height="50" src="https://avatars.githubusercontent.com/u/11854849?u=7d079e6737153cbd7b70e4feacc41cba312cf666&v=4" width="50"></div>[flodavid](https://github.com/flodavid) commented at [2024-01-26 00:25](https://github.com/yuzu-emu/yuzu/pull/12744#issuecomment-1911214778): > Thank you for your feedback, its appreciated. All issues should be fixed now. I reworked the loading of stylesheet to use a string instead of QFile. Its simplifies things and its clearer why we are returning early. > I added the feature allowing to override icons in addition to the stylesheet. I also added "midnight" as a word that defines the theme as dark. > Example of an ugly test theme that swaps "folder" and "bad_folder" icons: > [pink_dark.zip](https://github.com/yuzu-emu/yuzu/files/14065008/pink_dark.zip) > I am still working on this PR to see if I can improve the handling of automatic dark/light mode switching. #### <div><img width="50" height="50" src="https://avatars.githubusercontent.com/u/9658600?v=4" width="50"></div>[liamwhite](https://github.com/liamwhite) commented at [2024-02-12 18:31](https://github.com/yuzu-emu/yuzu/pull/12744#issuecomment-1939308274): > Please fix windows build #### <div><img width="50" height="50" src="https://avatars.githubusercontent.com/u/11854849?u=7d079e6737153cbd7b70e4feacc41cba312cf666&v=4" width="50"></div>[flodavid](https://github.com/flodavid) commented at [2024-02-14 18:31](https://github.com/yuzu-emu/yuzu/pull/12744#issuecomment-1944380125): > I removed logs or reduced level. Add details to commit messages. > This PR has been tested on Pop!_OS 22.04 and Windows 11. > New dark mode option : ![Screenshot from 2024-02-14 19-28-39](https://github.com/yuzu-emu/yuzu/assets/11854849/70278308-334b-4ac1-abe8-0e036fa584ce) #### <div><img width="50" height="50" src="https://avatars.githubusercontent.com/u/11854849?u=7d079e6737153cbd7b70e4feacc41cba312cf666&v=4" width="50"></div>[flodavid](https://github.com/flodavid) commented at [2024-02-22 12:51](https://github.com/yuzu-emu/yuzu/pull/12744#issuecomment-1959393960): > Dark mode "Always On" option did not work on Windows, I removed it. > Since a restart is needed to apply the dark mode setting on Windows, the label indicates it and the setting is applied on application start only. > I fixed the Volume Slider appearance on Windows with dark mode, by modifying the style sheet when the "fusion" style is used. (And removed tweaks in the default style.qss file). > Controller and Keyboard applets now use their dark icons when dark mode is enabled. > Directories in local "qt_themes" end with "_dark" are not listed as custom styles anymore, as they should only contain dark variant icons of their respective style. #### <div><img width="50" height="50" src="https://avatars.githubusercontent.com/u/11854849?u=7d079e6737153cbd7b70e4feacc41cba312cf666&v=4" width="50"></div>[flodavid](https://github.com/flodavid) commented at [2024-02-23 15:44](https://github.com/yuzu-emu/yuzu/pull/12744#issuecomment-1961560511): > I fixed the last commit, that broke Auto dark mode on Linux. > I also added a new commit that fixes the style of the qdarkstyle and qdarkstyle_midnight_blue sliders, they were cropped for the ZR and ZL threshold, and the volume level: > | Before| After | > |-----------|---------| > | ![Screenshot from 2024-02-23 16-34-21](https://github.com/yuzu-emu/yuzu/assets/11854849/33177046-f0c1-42a6-ac0d-6391ef789664) | ![image](https://github.com/yuzu-emu/yuzu/assets/11854849/3dec0294-98ea-4bfc-bd2a-0049495a7381) | > ------------------------------------------------------------------------------- > [Export of Github issue for [yuzu-emu/yuzu](https://github.com/yuzu-emu/yuzu). Generated on 2024.02.28 at 10:04:32.]
- Directory is qt_themes, each theme must be in one folder
    - It should contain a file "style.qss"
    - It may contain an "icons" sub-directory, to override included icons
      (with files like mytheme/icons/colorful/48x48/star.png for example)
    - Directories ending by "_dark" are reserved for dark variant icons.
      They are not listed as themes in the UI.
- If theme directory contains "dark" or "midnight", theme will be considered dark
- Windows dark theme uses "fusion" style, which is better suited, but has minor differences
- Improve OS theme detection
  - Linux:
    - Listen for OS color schemes changes on D-Bus
    - Read OS scheme for D-Bus. Fallback with gsettings, reading org.gnome.desktop.interface.
      First "color-scheme" key, then "gtk-theme". Finally, fallback to checking window palette
  - Windows (dark mode detection was not implemented before):
    - Force dark palette when OS uses dark mode by setting QT_QPA_PLATFORM to "windows:darkmode=2"
    - This enables to detect dark mode by checking the window palette
- Improve theming capabilites:
  - Linux uses custom palette when dark mode is detected.
    By using palette(xxx) in .qss files, there is no need to create a dark stylesheet
  - Allow themes to have stylesheet variants, dark.qss and light.qss
  - If current mode is dark, use dark icons for controller and keyboard applets
  - Add "dark" property to RendererStatusBarButton and GPUStatusBarButton, set to true when dark mode is used.
    Allows to have distinct colors for GPU API and accuracy buttons depending on dark mode or not
  - Enable all themes to have dark icon alternatives, not just "default" and "colorful"
    - If dark mode, icons are loaded from the directory "THEME-NAME_dark/icons"
  - If current mode is dark, use dark icons for controller and keyboard applets
  - Only qdarkstyle, qdarkstyle_midnight_blue, colorful_dark and
    colorful_midnight_blue used elements specific to dark themes
- Renamed themes:
  - "colorful" to "default" and "colorful_dark" to "default_dark"
  - "default" to "monochrome" and "default_dark" to "monochrome_dark"
  - "colorful_midnight_blue" to "qdarkstyle_midnight_blue"
  - "qdarkstyle_midnight_blue" to "qdarkstyle_midnight_blue_monochrome"
  - qdarkstyle is renamed from "Dark" to "Mine Shaft" in the UI
- default and monochrome themes all use the same qss stylesheet
- Remove the ability to select "default_dark" directly
- Add "qdarkstyle_monochrome" theme
- Remove duplicated icon files
- Allows to choose "Auto", "Always On" or "Always Off".
- If Auto is chosen, value is retrieved from OS
  - On Windows, the application needs a restart to apply the settings
  - On Windows, "Always On" is not available, the OS is responsible for
    selecting the dark palette
- Allow Threshold sliders in control configuration to be up to 40px tall, instead of 15
yuzu:configuration: Add "Always On" dark mode option to Windows
Some checks failed
yuzu-ci / transifex (pull_request) Has been cancelled
Details
yuzu-ci / reuse (pull_request) Has been cancelled
Details
codespell / Check for spelling errors (pull_request) Has been cancelled
Details
yuzu verify / verify format (pull_request) Has been cancelled
Details
yuzu verify / test build (windows, msvc) (pull_request) Has been cancelled
Details
yuzu verify / test build (pull_request) Has been cancelled
Details
yuzu verify / test build-1 (pull_request) Has been cancelled
Details
yuzu verify / test build-2 (pull_request) Has been cancelled
Details
yuzu verify / test build (macos) (pull_request) Has been cancelled
Details
yuzu verify / android (pull_request) Has been cancelled
Details
2bda317d7d 
- Use the default dark palette for Windows, like on Linux
Some checks failed
yuzu-ci / transifex (pull_request) Has been cancelled
Details
yuzu-ci / reuse (pull_request) Has been cancelled
Details
codespell / Check for spelling errors (pull_request) Has been cancelled
Details
yuzu verify / verify format (pull_request) Has been cancelled
Details
yuzu verify / test build (windows, msvc) (pull_request) Has been cancelled
Details
yuzu verify / test build (pull_request) Has been cancelled
Details
yuzu verify / test build-1 (pull_request) Has been cancelled
Details
yuzu verify / test build-2 (pull_request) Has been cancelled
Details
yuzu verify / test build (macos) (pull_request) Has been cancelled
Details
yuzu verify / android (pull_request) Has been cancelled
Details
This pull request can be merged automatically.
This branch is out-of-date with the base branch
You are not authorized to merge this pull request.
View command line instructions

Checkout

From your project repository, check out a new branch and test the changes.
git fetch -u origin __refs_pull_12744_head:__refs_pull_12744_head
git switch __refs_pull_12744_head

Merge

Merge the changes and update on Forgejo.

Warning: The "Autodetect manual merge" setting is not enabled for this repository, you will have to mark this pull request as manually merged afterwards.

git switch master
git merge --no-ff __refs_pull_12744_head
git switch __refs_pull_12744_head
git rebase master
git switch master
git merge --ff-only __refs_pull_12744_head
git switch __refs_pull_12744_head
git rebase master
git switch master
git merge --no-ff __refs_pull_12744_head
git switch master
git merge --squash __refs_pull_12744_head
git switch master
git merge --ff-only __refs_pull_12744_head
git switch master
git merge __refs_pull_12744_head
git push origin master
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
Accord/yuzu-mirror!12744
No description provided.