Customizing Sample Skin (Black Monkey) for Dark Mode

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

Moderators: jiri, drakinite, Addon Administrators

janko74
Posts: 15
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: 167
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: 15
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: 519
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: 15
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: 519
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: 4223
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 :-)
Post Reply