Theme request (and also how can I edit the app.css now?)

[alpenandrew]

A while back I bodged together a quick theme:

html.material {
--white: #001a02; /* unselected contact list, message input, contact message bubble bg /
--ghostwhite: #2d3d46;
--lightgrey: #002903; / message thread and active contact background /
--altgrey: #003d04; / own message bubble bg /
--grey: #303F47;
--darkgrey: #d9d9d9; / time-date above contact names /
--lightblack: #e6e6e6; / contact names /
--black: #e6e6e6; / message text /
--green: #005e06; / window title bar */
--darkgreen: #57b9ae;
--red: #996DBF;
--darkred: #804cad;
--link: #F9C15C;
--tweetbg: #644104;
--instagrambg: #333940;
}

I just replaced the Material theme at the time with it.

It'd be cool if it could be added. Meanwhile, is there any easy way to edit the app.css file to scrap it together again? I am on Windows 10 and not very savvy; I tried editing the app.css file within the app.asar file and it didn't work (now yakyak does not launch)

[averissimo]

To add it, you need to fork the project (button on top right corner of the yakyak page)

Go to your forked repository, change 2 files on it and then create a pull request against yakyak

1. First file to change is src/ui/css/yakyak/colors.less
   • Then add your code in the same way the other themes are set (with html.material replaced by &.name_of_your_theme_here
2. Add it to the menu as a link in src/ui/views/menu.coffee
   • Add it after "gruvy".. copy the same structure and change the ids to match the name you defined in step 1

Last step is to create a pull request, you can do that on the main page of your forked repository

You can do all these steps in github web interface (even changing the files and committing the changes).

[HomerSp]

I'm working on a feature to use custom themes for the next release, so this should be possible soon - it'll be in the v1.5.12 beta release today or tomorrow. I'll update you when it's ready for testing!

[HomerSp]

The latest v1.5.12 beta now has support for loading a custom theme from a css file. Simply use this file https://github.com/yakyak/yakyak/blob/master/resources/custom.css as a base, and create the directory %APPDATA%\yakyak\colorscheme and copy custom.css to that directory. Now simply select the Custom theme option in yakyak.
YakYak will reload automatically as you make changes to custom.css, so you'll be able to see live what the different variables do.

I might add a more robust theme system in the future, but for now this will do. Let me know if it works!

[alpenandrew]

thanks!

[Trahloc]

Would it be possible if the custom.css had the additional option to control white space between messages / width of messages so we could compact things a bit more? Being able to adjust the timestamp location from between messages to being on the same line but opposite side of the icon for instance would save almost an inch of screen space per message. Also being able to move the location of the account icon, for instance bring it down a touch so it's middle edge of the message instead of top corner would save another 1/4". Just some items from my wishlist since action on the theme was occurring.

[HomerSp]

@Trahloc You can in fact customize any part of the UI through custom.css, even though the sample one only overrides a few colour variables. Simply find the element you wish to change and add a selector for it, with html[theme="custom"] as the base.
For example, to move the timestamp to the opposite side of the message, simply do this:
html[theme="custom"] .messages .timestamp {
float: right;
}

And to move the user image down you could do this:
html[theme="custom"] .messages .ugroup .sender-wrapper .sender img {
top: 50%;
margin-top: -25px;
}

[alpenandrew]

Sorry, I'm a little confused, did the custom theme option disappear in a recent release?

EDIT: sorry, I didn't realise it was still only in beta releases, my bad