Customizing Sample Skin (Black Monkey) for Dark Mode

[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



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:


Sorry for bumpy english an thanks for helping out.

[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.

[janko74]

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:


Amazing!

Seems that my next quest is figuring out, which class defines font-color of the wikipedia excerpts?

[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:

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.

[janko74]

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:

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]

Great! Glad it's helpful

[Ludek]

Looks nice!

Feel free to submit it here: https://www.mediamonkey.com/addons/brow ... 1/skins-1/
for others to benefit

[janko74]

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.

[drakinite]

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.

It actually wasn't me who made the skin - I was just the one that uploaded it. 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!

[janko74]

Hi,
I updated MM to MM2024 (3082), but now the little "Terminal Green Text" workaround is broken. Any tips where and what to change to get back to green text in dark mode (using Skin "Dark Monkey")?

Before the update i could change the @textcolor in skin_base.less (in C:\Program Files (x86)\MediaMonkey 5\skin)
from
@textColor: contrast(@baseColor, black, white);
to
@textColor: #33FF33;

and everything was fine. When i change it like that now, MM gives an error message and won't startup properly.

Greetings & thx for helping me out.

[janko74]

Hi,
I updated MM to MM2024 (3082), but now the little "Terminal Green Text" workaround is broken. Any tips where and what to change to get back to green text in dark mode (using Skin "Dark Monkey")?

Before the update i could change the @textcolor in skin_base.less (in C:\Program Files (x86)\MediaMonkey 5\skin)
from
@textColor: contrast(@baseColor, black, white);
to
@textColor: #33FF33;

and everything was fine. When i change it like that now, MM gives an error message and won't startup properly.

Greetings & thx for helping me out.

Ah, found it out myself: @baseColor was missing

@textColor: #33FF33;
@baseColor: #000000;