Customizing Sample Skin (Black Monkey) for Dark Mode

Post a reply

Smilies
:D :) :( :o :-? 8) :lol: :x :P :oops: :cry: :evil: :roll: :wink:

BBCode is ON
[img] is ON
[url] is ON
Smilies are ON

Topic review
   

Expand view Topic review: Customizing Sample Skin (Black Monkey) for Dark Mode

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

by drakinite » Wed Sep 22, 2021 8:10 pm

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!

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

by janko74 » Wed Sep 22, 2021 2:21 pm

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

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

by Ludek » 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 :-)

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

by drakinite » Mon Sep 13, 2021 12:59 pm

Great! Glad it's helpful :)

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

by janko74 » Tue Sep 07, 2021 3:27 am

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.

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

by drakinite » 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.

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

by janko74 » Mon Sep 06, 2021 5:19 pm

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?

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

by TIV73 » 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.

Image

Customizing Sample Skin (Black Monkey) for Dark Mode

by janko74 » Mon Sep 06, 2021 12:35 pm

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.

Top