Customizing Sample Skin (Black Monkey) for Dark Mode

To discuss development of addons / skins / customization of MediaMonkey.

Moderators: jiri, drakinite, Addon Administrators

janko74
Posts: 16
Joined: Wed May 04, 2011 7:28 am

Customizing Sample Skin (Black Monkey) for Dark Mode

Post by janko74 »

Hello,
i've tried to customize the "Black Monkey" Skin. I would like the font for dark mode, and kind of old-school-terminal-look to be green everywhere.

Here is what I achieved without programming skills, as i've changed @warningColor in skin_base_add.less to #39ff14 and @windowBorderColor: #0af011

Image

I've tried for hours (trial and error) to get the whole text in green, but i failed. Is there any easy way to set the font color for the whole skin to green?

Which *.less or other file did i have to customize?

In MM4 i fall in love with the Noir Skin Green (1.4.0.1) by Dread M and i need that look back:
Image

Sorry for bumpy english an thanks for helping out.
Last edited by janko74 on Mon Sep 06, 2021 5:31 pm, edited 1 time in total.
TIV73
Posts: 174
Joined: Sat Nov 12, 2011 1:31 pm

Re: Customizing Sample Skin (Black Monkey) for Dark Mode

Post by TIV73 »

Different elements define different font colors for themselves that can change depending on the state of the element, so there isn't a single property you could target to change all font color instances at once.

If you are fine with a good enough approach, append the listview class in skin_listview_add.less with a color property, that should get you most of the way in the main window since almost everything there inherits from listview.

Image
janko74
Posts: 16
Joined: Wed May 04, 2011 7:28 am

Re: Customizing Sample Skin (Black Monkey) for Dark Mode

Post by janko74 »

TIV73 wrote: Mon Sep 06, 2021 3:32 pm Different elements define different font colors for themselves that can change depending on the state of the element, so there isn't a single property you could target to change all font color instances at once.

If you are fine with a good enough approach, append the listview class in skin_listview_add.less with a color property, that should get you most of the way in the main window since almost everything there inherits from listview.

Thanks a lot! Seems like you directed me into the right direction. I figured out that simply adding "color:" could work it out. At the first try I added:

.listview {
.border;
color: #009605;
}

It changed the color, but caused an error, and the Monkey refused to work.

Then i learned, that:

.listview {
color: #009605;
.border;
}

resulted in:

Image
Amazing!

Seems that my next quest is figuring out, which class defines font-color of the wikipedia excerpts?
drakinite
Posts: 572
Joined: Tue May 12, 2020 10:06 am
Contact:

Re: Customizing Sample Skin (Black Monkey) for Dark Mode

Post by drakinite »

It's actually simpler than you might think!

If you take a look at skin_base.less (in MediaMonkey 5/skin), you'll find the following:

Code: Select all

@textColor: contrast(@baseColor, black, white);
If you override @textColor, you can override the base text color for all elements.

Here's what I got by overriding just @textColor, @warningColor, and @windowBorderColor:
Image

Code: Select all

@textColor: rgb(61, 226, 61);
@baseColor: #000000;
@warningColor: #bdffb7;
@controlColor: #101010;
@hoverColor: @warningColor;
@hoverBgColor: darken( @warningColor, 52%);
@borderColor: @warningColor;
@selectedColor: lighten(@baseColor, 20%);
@disabledSelectedColor: mix(@baseColor, @selectedColor, 50%);
@highlightBgColor: @highlightColor;
//@shadowColor: @hoverBgColor;

@windowBorderColor: #4fac47;

@font-face { font-family: Roboto; src: url("/skin/fonts/Roboto-Regular.ttf"); }

body {
    font-family: Roboto, sans-serif;
}
BTW: If you haven't installed the refreshSkinShortcut addon (either by copying the refreshSkinShortcut folder from SampleScripts to Scripts, or installing from here, I'd highly recommend doing so. You just have to click the button once to refresh your skin's LESS/CSS.
Image
Student electrical-computer engineer, web programmer, part-time MediaMonkey developer, full-time MediaMonkey enthusiast
janko74
Posts: 16
Joined: Wed May 04, 2011 7:28 am

Re: Customizing Sample Skin (Black Monkey) for Dark Mode

Post by janko74 »

drakinite wrote: Mon Sep 06, 2021 6:11 pm It's actually simpler than you might think!

If you take a look at skin_base.less (in MediaMonkey 5/skin), you'll find the following:

Code: Select all

@textColor: contrast(@baseColor, black, white);
If you override @textColor, you can override the base text color for all elements.

Here's what I got by overriding just @textColor, @warningColor, and @windowBorderColor:
Image

Code: Select all

@textColor: rgb(61, 226, 61);
@baseColor: #000000;
@warningColor: #bdffb7;
@controlColor: #101010;
@hoverColor: @warningColor;
@hoverBgColor: darken( @warningColor, 52%);
@borderColor: @warningColor;
@selectedColor: lighten(@baseColor, 20%);
@disabledSelectedColor: mix(@baseColor, @selectedColor, 50%);
@highlightBgColor: @highlightColor;
//@shadowColor: @hoverBgColor;

@windowBorderColor: #4fac47;

@font-face { font-family: Roboto; src: url("/skin/fonts/Roboto-Regular.ttf"); }

body {
    font-family: Roboto, sans-serif;
}
BTW: If you haven't installed the refreshSkinShortcut addon (either by copying the refreshSkinShortcut folder from SampleScripts to Scripts, or installing from here, I'd highly recommend doing so. You just have to click the button once to refresh your skin's LESS/CSS.
Yesss! Thanks a lot. Now i feel completely at home again in MM5. The refresh skin button is very practically for fiddling around with skins.
drakinite
Posts: 572
Joined: Tue May 12, 2020 10:06 am
Contact:

Re: Customizing Sample Skin (Black Monkey) for Dark Mode

Post by drakinite »

Great! Glad it's helpful :)
Image
Student electrical-computer engineer, web programmer, part-time MediaMonkey developer, full-time MediaMonkey enthusiast
Ludek
Posts: 4270
Joined: Fri Mar 09, 2007 9:00 am

Re: Customizing Sample Skin (Black Monkey) for Dark Mode

Post by Ludek »

Looks nice!

Feel free to submit it here: https://www.mediamonkey.com/addons/brow ... 1/skins-1/
for others to benefit :-)
janko74
Posts: 16
Joined: Wed May 04, 2011 7:28 am

Re: Customizing Sample Skin (Black Monkey) for Dark Mode

Post by janko74 »

Ludek wrote: Wed Sep 15, 2021 3:05 pm Looks nice!

Feel free to submit it here: https://www.mediamonkey.com/addons/brow ... 1/skins-1/
for others to benefit :-)
I really would like to do that, but it's not mine, i'm not the author. I was just the scriptkiddie here (trapped in the body of someone over 40) ... And I don't even know what to upload, i.e. the whole "Skin" folder, because that's where the skin_base.less folder is stored?

And it's @drakinite who solved my riddle. And now i realized @drakinite uploaded Black Monkey... So all the fame, and work for uploading "Black Monkey - Old School Terminal Look" should go to him. :D
drakinite
Posts: 572
Joined: Tue May 12, 2020 10:06 am
Contact:

Re: Customizing Sample Skin (Black Monkey) for Dark Mode

Post by drakinite »

janko74 wrote: Wed Sep 22, 2021 2:21 pm I really would like to do that, but it's not mine, i'm not the author. I was just the scriptkiddie here (trapped in the body of someone over 40) ... And I don't even know what to upload, i.e. the whole "Skin" folder, because that's where the skin_base.less folder is stored?

And it's @drakinite who solved my riddle. And now i realized @drakinite uploaded Black Monkey... So all the fame, and work for uploading "Black Monkey - Old School Terminal Look" should go to him. :D
It actually wasn't me who made the skin - I was just the one that uploaded it. :slight_smile: It was initially made by Jiri, and over the course of MM5's development, it looks like the whole team has had their hand in it. You're absolutely free to upload the modified skin for others to download - You can just credit Ventis Media for making the original!
Image
Student electrical-computer engineer, web programmer, part-time MediaMonkey developer, full-time MediaMonkey enthusiast
Post Reply