MM5 Work in progress: a skin based on Windows 11's Fluent Design

If you want to contribute MediaMonkey skins, themes, icons, etc...

Moderators: Morten, Gurus

gege
Posts: 866
Joined: Tue Sep 05, 2006 2:10 pm
Location: Brazil

MM5 Work in progress: a skin based on Windows 11's Fluent Design

Post by gege »

Hi, guys.
Long time no see. It's been a long long time since I posted something in this forum.

So, I'm here basically to talk about the reason I still didn't migrate do MM5 fully, which is... it's appearance.
Although I know the new skinning engine is powerful, up to now I think none of the available skins has made full use of its power.

To be honest, Material Design has aged poorly, especially on Desktop. On the other side, Windows 11's Fluent Design is great. It's fresh, modern, clean and consistent. I love it.

So, I started playing with MM5 skinning capabilities, trying to get MM to a look closer to modern Windows application. For this, I'm taking inspiration on existing applications, like the new Media Player, File Explorer and even Notepad (yes, really). My ultimate goal is to create a skin that gives MM5 an authentic Modern Application look. For this, I enumerated some tasks I'll have to complete:

[Mandatory]
- * New icon package: 95% complete (but needs a lot of cleanup and tweaks, to make colorization easier).
- Redesign titleBar/tabBar and toolBar: I'd say 50% complete. Tabs are now rounded, as I want, but I still need to figure out how to make titleBar and toolBar taller, with the elements correctly aligned. I plan a design like the new File Explorer tabs.
- Round corners everywhere: 50% complete.
- Correct definition of all colors included in the skin: 70% complete.

* I'm using open-source icons available from a variety of sources like: https://fluenticons.co/, https://tabler-icons.io/, https://iconhub.io/, https://iconsvg.xyz/ and others.

[Nice to have]
- Have all colors structured in a way that, with one single color chosen as AccentColor, all the other should adjust accordingly, allowing the creation of distinct color schemes.
- Integrate a color picker, so the aforementioned AccentColor can be easily customized.
- Try to integrate the use of Fluent's Acrylic material (you know: transparency + gaussian blur + texture) in some areas, especially in titleBar and mainTree areas.
- Create a dark theme.

Below is the result so far. I know, it's not even close to what I really expect it to be in the end. But it's good enough for my day to day use. I know CSS reasonably well (W3schools is my friend), but I have a hard time trying to figure out which elements to edit in the skin files (yes, I know how to use debug mode and Inspect Element). So, my progress is terribly slow. Also, I have a life and a full daytime job.

So, tell me what you think... Do you guys think it can be useful or have an appeal to anybody other than me?

Image

Next phase I'll try to have it looking like this: https://postimg.cc/xkQq5V30

Edit: I just forgot to mention that my starting point was Code Monkey (Light) skin, by crutchcorn.
Peke
Posts: 17457
Joined: Tue Jun 10, 2003 7:21 pm
Location: Earth
Contact:

Re: Work in progress: a skin based on Windows 11's Fluent Design

Post by Peke »

Hi,
This looks nice. Finally light skin worth of MM5.

Welcome back.
Best regards,
Peke
MediaMonkey Team lead QA/Tech Support guru
Admin of Free MediaMonkey addon Site HappyMonkeying
Image
Image
Image
How to attach PICTURE/SCREENSHOTS to forum posts
obnubilated
Posts: 1
Joined: Wed Apr 05, 2023 4:24 pm

Re: Work in progress: a skin based on Windows 11's Fluent Design

Post by obnubilated »

This is a really nice skin, I would definitely use it.
jiri
Posts: 5417
Joined: Tue Aug 14, 2001 7:00 pm
Location: Czech Republic
Contact:

Re: Work in progress: a skin based on Windows 11's Fluent Design

Post by jiri »

Wow, I love the simple, yet elegant design and the subtle color palette!

Jiri
drakinite
Posts: 965
Joined: Tue May 12, 2020 10:06 am
Contact:

Re: MM5 Work in progress: a skin based on Windows 11's Fluent Design

Post by drakinite »

That skin looks gorgeous! I love the soft color palette. Very easy on the eyes.
Image
Student electrical-computer engineer, web programmer, part-time MediaMonkey developer, full-time MediaMonkey enthusiast
I uploaded many addons to MM's addon page, but not all of those were created by me. "By drakinite, Submitted by drakinite" means I made it on my own time. "By Ventis Media, Inc., Submitted by drakinite" means it may have been made by me or another MediaMonkey developer, so instead of crediting/thanking me, please thank the team. You can still ask me for support on any of our addons.
Peke
Posts: 17457
Joined: Tue Jun 10, 2003 7:21 pm
Location: Earth
Contact:

Re: MM5 Work in progress: a skin based on Windows 11's Fluent Design

Post by Peke »

gege wrote: Tue Mar 07, 2023 6:15 pm So, tell me what you think... Do you guys think it can be useful or have an appeal to anybody other than me?
I hope it will be ready for Windows 12 as like Drakinite I really get fund of soft colors.
Best regards,
Peke
MediaMonkey Team lead QA/Tech Support guru
Admin of Free MediaMonkey addon Site HappyMonkeying
Image
Image
Image
How to attach PICTURE/SCREENSHOTS to forum posts
Post Reply