Playnite Forums
Harmony | Clean theme with modern design - Printable Version

+- Playnite Forums (https://playnite.link/forum)
+-- Forum: Extension Database (https://playnite.link/forum/forum-3.html)
+--- Forum: Themes - Desktop (https://playnite.link/forum/forum-8.html)
+--- Thread: Harmony | Clean theme with modern design (/thread-457.html)

Pages: 1 2


Harmony | Clean theme with modern design - darklinkpower - 11-02-2020

Harmony | Clean theme with modern design

Description
                                                                                                                                                                             
Clean theme with modern design for Playnite Desktop Mode.

GitHub Repository: https://github.com/darklinkpower/Harmony

Feature requests and bug reports:
Create an issue on the theme GitHub repository after verifying it doesn't already exists.
Make sure to fill all the requested information when opening the issue.


I don't use the forums frequently so please use GitHub for requests and bug reports. You can join the Playnite discord where I am active if you have questions or need support

Theme goals
                                                                                                                                                                             
  • Use a simple pallete and have better contrast and hierarchies using color without the need of borders.
  • Achieve a more modern and clean design with the chosen pallete and things like rounded corners in certain elements like the windows, borders, buttons and controls.
  • Improve the user experience with small animations in certain parts.
  • Change the aesthetic without affecting functionality.
  • Polish certain parts of the UI to give a better user experience.
  • Different aesthetic of other available themes available by default in Playnite and created by the community.
  • Achieve features that are not available by default on Playnite via community extensions.

Installation
                                                                                                                                                                             
Option A. Download from the Addons browser in Playnite.
Option B. Click here to start the install process
Option C. Download the latest package from here and open it

Edit the theme settings to your preference: https://github.com/darklinkpower/Stardust/wiki#editing-theme-settings

Functionalities and features
                                                                                                                                                                             
  • Full support for features available in the default Playnite Desktop themes
  • Customization: Customization of certain aspects of the theme can be done via custom integration of the ThemeModifier extension.
  • Achievements: via custom integration of the SuccessStory extension.
  • HowLongToBeat data: via custom integration of the HowLongToBeat extension.
  • Game statistics: via custom integration of the GameActivity extension.
  • Logos: Via Extra Metadata Loader extension.
  • Videos: Via Extra Metadata Loader extension.

Screenshots
                                                                                                                                                                             
[Image: screenshot_01.jpg]

[Image: screenshot_02.jpg]

[Image: screenshot_03.jpg]

[Image: screenshot_04.jpg]


RE: Harmony | Clean theme with modern design - hunt363 - 11-02-2020

This is a great, clean theme! How did you get the game background to span the entirety of the window background though? Like in the first screenshot with Deep Rock Galactic. Also what is the font you're using?


RE: Harmony | Clean theme with modern design - darklinkpower - 11-02-2020

(11-02-2020, 07:24 AM)hunt363 Wrote: This is a great, clean theme! How did you get the game background to span the entirety of the window background though? Like in the first screenshot with Deep Rock Galactic. Also what is the font you're using?
1. Disable the layout border in Settings>Appereance>Draw separator...
2. Enable the image in Settings>General>Use game background as image background

The font is Arial Smile


RE: Harmony | Clean theme with modern design - Le Mal - 11-02-2020

This is great ! I should do a clean presentation like this with Photoshop


RE: Harmony | Clean theme with modern design - lolight2 - 11-02-2020

Hey! Amazing theme! Big Grin
How did you get that side bar on the left?
EDIT: Nevermind i found out! For those that want it, click on the playnite logo, view, sidebar enabled! Smile


RE: Harmony | Clean theme with modern design - darklinkpower - 11-06-2020

New version

v0.85
  • General: All buttons corners are now rounded
  • General: Common buttons have the same color change behavior when hover
  • General: Change Calendar colors
  • General: Misc changes, fixes and improvements
  • Explorer panel: Fix background not being transparent when "Use game background image as window background" option has been enabled
  • Filter panel: controls now have a background color
  • Main panel: Background now uses a solid color when the "Draw separator between panels" and "Use game background image as window background" options have been enabled
  • Main panel: Filter button uses a more subtle color when no filters have been enabled
  • Main panel: Search bar now uses the same width as the Game List from Details view
  • Statistics view: Expanders now have a color
  • Details view: Play, Context and More action buttons have a color change animation when hovered
  • Details view: Quick edit button shows with very low opacity and animates to normal opacity when hovered
  • Details view: Changed the Font weight of the selected game in game list to Normal
  • Grid view: Covers increase size when hovered
  • Grid view: Change grid image background color to match buttons
  • Grid view: Game names on Grid view text color is now white when the "Draw grid item background" option is disabled
  • Grid view: Background color for game name area and for cover is separate
  • Grid view: Moved Play/Install and information buttons to the bottom of game covers
  • Grid view: Installed games now don't lower brightness on hover. A subtle gradient is now used from bottom to top.
  • Grid view: Moved Play/Install and information buttons to the bottom of game covers
  • Grid view: Play, Context and More action buttons have a color change animation when hovered
  • Grid view: Quick edit button shows with very low opacity and animates to normal opacity when hovered



RE: Harmony | Clean theme with modern design - sheepbeep - 11-07-2020

Some suggestions:
- make it an option to have the buttons rounded or not (rounded buttons look SOOO like 1983 aka Windows 2.x)
- make the border with between the "windows" and covers configurable (waste of space)


RE: Harmony | Clean theme with modern design - Le Mal - 11-07-2020

What ? Rounded corners and everything is a thing of today. Everything was square and grey before


RE: Harmony | Clean theme with modern design - darklinkpower - 11-07-2020

(11-07-2020, 08:49 AM)sheepbeep Wrote: Some suggestions:
- make it an option to have the buttons rounded or not (rounded buttons look SOOO like 1983 aka Windows 2.x)
- make the border with between the "windows" and covers configurable (waste of space)
1. You must be joking.
2. Not a waste of space, it's an aesthethic choice. You can disable the borders in Playnite settings or edit the theme if you want to reduce the borders size, I can't make them configurable.

New version

v0.90
  • General: Add border to the checkbox control to make them noticeable in filter panel filters
  • General: Changed toggle button colors
  • Main Menu: Use rounded corners
  • Tray Menu: Use rounded corners
  • Tooltip: Use rounded corners
  • Tooltip: Changed background and border colors
  • Notifications Panel: Change notification messages background color to a different one from the panel background color
  • Details view: Increase default opacity of quick edit button from 0.1 to 0.2
  • Details view and Grid view: Game description text is now justified
  • Details view: Added support for the HowLongToBeat extension. A toggle button was added to show the extension data in the game details
  • Details view: Added support for the SuccessStory extension. A toggle button was added to show the extension data in the game details
  • Details view: Added support for the GameActivity extension. A toggle button was added to show the extension data in the game details



RE: Harmony | Clean theme with modern design - darklinkpower - 11-08-2020

New version

v0.91
  • General: Added Github link to theme manifest
  • Details view: Added HowLongToBeat logo to HowLongToBeat extension toggle button
  • Details view: Added margin between elements of the SuccessStory extension to prevent clipping of icons glow



RE: Harmony | Clean theme with modern design - darklinkpower - 11-11-2020

New version

v1.00
  • General: Add rotation animation to Expander arrow
  • Grid view: Increase the width of the zoom slider



RE: Harmony | Clean theme with modern design - darklinkpower - 11-16-2020

New version

v1.05
  • Sidebar: Change default color of not active items
  • Sidebar: Set a background color to prevent blurring when image background blur has been enabled in settings
  • Details view: Make notes textbox transparent
  • Details view: Swap SuccessStory Locked and Unlocked sections
  • Grid view: Make notes textbox transparent



RE: Harmony | Clean theme with modern design - darklinkpower - 12-04-2020

New version

v1.08
  • General: Make GameMenu fontweight normal
  • Main panel: Add border and change MouseOver color of notifications button
  • Main Panel: Fix Steam friends button not working when clicking the border
  • Notification panel: Change color of notification message on hover
  • Details view: Add small dropshadow effect to cover
  • Details view: Rounded corners for cover can be configured in constants file
  • Grid view: Rounded corners for covers can be configured in constants file



RE: Harmony | Clean theme with modern design - SuperGamer1337 - 12-28-2020

Could you post all the settings used for the first image? I can't for the life of me figure out how to make it look like that... but then again, I may be blind or an idiot xD


RE: Harmony | Clean theme with modern design - darklinkpower - 12-29-2020

(12-28-2020, 06:55 PM)SuperGamer1337 Wrote: Could you post all the settings used for the first image? I can't for the life of me figure out how to make it look like that... but then again, I may be blind or an idiot xD
Enable "Use game background image as window background" in Settings->Appearance->General. Blur is disabled in my screenshots.
Disable "Background Image" in Settings->Appearance->Details View.
Enable the Sidebar in MainMenu->View->Sidebar->Enabled.


RE: Harmony | Clean theme with modern design - SuperGamer1337 - 12-29-2020

(12-29-2020, 04:01 PM)darklinkpower Wrote:
(12-28-2020, 06:55 PM)SuperGamer1337 Wrote: Could you post all the settings used for the first image? I can't for the life of me figure out how to make it look like that... but then again, I may be blind or an idiot xD
Enable "Use game background image as window background" in Settings->Appearance->General. Blur is disabled in my screenshots.
Disable "Background Image" in Settings->Appearance->Details View.
Enable the Sidebar in MainMenu->View->Sidebar->Enabled.

Thanks! Looks great  Big Grin

Seem to have a problem with a line going down where the seperator was previously though...


RE: Harmony | Clean theme with modern design - darklinkpower - 01-28-2021

New version

v1.11


RE: Harmony | Clean theme with modern design - Landxhent - 01-28-2021

(11-07-2020, 01:37 PM)darklinkpower Wrote:
(11-07-2020, 08:49 AM)sheepbeep Wrote: Some suggestions:
- make it an option to have the buttons rounded or not (rounded buttons look SOOO like 1983 aka Windows 2.x)
- make the border with between the "windows" and covers configurable (waste of space)
1. You must be joking.
2. Not a waste of space, it's an aesthethic choice. You can disable the borders in Playnite settings or edit the theme if you want to reduce the borders size, I can't make them configurable.


I would like to agree with sheepbeep regarding rounded corners (not with the part about 1983 xD). Just wondering if I can reconfigure it by myself and where to do it.

I personally prefer the square ones, like in the Magpie theme, but still prefer your theme more <3. Great job! Thanks for your efforts!


RE: Harmony | Clean theme with modern design - darklinkpower - 01-28-2021

(01-28-2021, 03:36 PM)Landxhent Wrote:
(11-07-2020, 01:37 PM)darklinkpower Wrote:
(11-07-2020, 08:49 AM)sheepbeep Wrote: Some suggestions:
- make it an option to have the buttons rounded or not (rounded buttons look SOOO like 1983 aka Windows 2.x)
- make the border with between the "windows" and covers configurable (waste of space)
1. You must be joking.
2. Not a waste of space, it's an aesthethic choice. You can disable the borders in Playnite settings or edit the theme if you want to reduce the borders size, I can't make them configurable.


I would like to agree with sheepbeep regarding rounded corners (not with the part about 1983 xD). Just wondering if I can reconfigure it by myself and where to do it.

I personally prefer the square ones, like in the Magpie theme, but still prefer your theme more <3. Great job! Thanks for your efforts!

You can change the radius of different elements in the theme constants.xaml file, you can change the value to 0
https://github.com/darklinkpower/Harmony/blob/master/Harmony/Constants.xaml#L23-L28

The file will be here in the portable version
<PlayniteInstallationDirectory>\Themes\Desktop\Harmony[...]\Constants.xaml
or in the installable version
%AppData%\Playnite\Themes\Desktop\Harmony[...]\Constants.xaml
https://playnite.link/docs/tutorials/themes/installing.html#manual-installation


RE: Harmony | Clean theme with modern design - Landxhent - 01-29-2021

(01-28-2021, 04:27 PM)darklinkpower Wrote:
(01-28-2021, 03:36 PM)Landxhent Wrote:
(11-07-2020, 01:37 PM)darklinkpower Wrote:
(11-07-2020, 08:49 AM)sheepbeep Wrote: Some suggestions:
- make it an option to have the buttons rounded or not (rounded buttons look SOOO like 1983 aka Windows 2.x)
- make the border with between the "windows" and covers configurable (waste of space)
1. You must be joking.
2. Not a waste of space, it's an aesthethic choice. You can disable the borders in Playnite settings or edit the theme if you want to reduce the borders size, I can't make them configurable.


I would like to agree with sheepbeep regarding rounded corners (not with the part about 1983 xD). Just wondering if I can reconfigure it by myself and where to do it.

I personally prefer the square ones, like in the Magpie theme, but still prefer your theme more <3. Great job! Thanks for your efforts!

You can change the radius of different elements in the theme constants.xaml file, you can change the value to 0
https://github.com/darklinkpower/Harmony/blob/master/Harmony/Constants.xaml#L23-L28

The file will be here in the portable version
<PlayniteInstallationDirectory>\Themes\Desktop\Harmony[...]\Constants.xaml
or in the installable version
%AppData%\Playnite\Themes\Desktop\Harmony[...]\Constants.xaml
https://playnite.link/docs/tutorials/themes/installing.html#manual-installation

Much obliged! Now it meet all my tastes) But when i've made corrections, the next laucnh of playnite was pretty long, i thought i've made smthing wrong, but in the end - it worked!