Using color variables not defined in a stylesheet

[mattsson]

For our current project we need to develop an app with two different themes, i.e. mainly different fonts and colors. To achieve this we have created a target for each theme, and a Theme Manager class with a bunch of class method that return correct colors depending on the currently built target. So, for example, I can call UIColor *color = [ThemeManager mainBackgroundColor]; anywhere to get the main background color for the currently built theme.

However, we would like to integrate Classy into our project, and we are trying to find a workaround for the above without having two separate stylesheets for the color variables of each theme. In Classy you have made it possible to specify a bunch of colors using their names, e.g. "orangered", and I was wondering how you are making that possible, since I would like to try to extend these colors to include, for example, mainBackgroundColor.

Any help would be very much appreciated!

[cloudkite]

@mattsson any static methods on UIColor with suffix Color can be used by classy. So to add your own colors you need to create a UIColor category ie

@interface UIColor (MYColors)

+(UIColor *)mainBackgroundColor;

@end

You can then use this color in your stylesheets, you need to drop the Color suffix

UILabel {
  text-color mainBackground
}

[skeeet]

Maybe not totally related, but i'm using two files in similar project (one base with multiple targets). One with all variables declared (something like $mainBackground Color = #123456) and one with actual stylesheets, using variables. Then on build time i have script, that merges both files to actual stylesheet, used in app.

[mattsson]

@skeeet We thought about doing it like that, but that would mean having two stylesheets with lists of variables with the same variable names but different colors, meaning that we would have to always make sure the variable names are in sync across the files, which we would prefer to avoid.

@cloudkite That is awesome, thanks a lot.

[cloudkite]

@skeeet cool approach I'm guessing you lose live reload though? Since the original unmerged stylesheets are not watched by classy?

Would it be helpful to be able to inject values into a stylesheet? So that you can alter stylesheets at runtime level ie

[CASStyler defaultStyler].injectVariables = @{ @"$variables-stylesheet-name" : @"dark-theme-vars.cas" };

Then in classy stylesheet

@import $variables-stylesheet-name

UILabel {
...

[skeeet]

@cloudkite Yeah no live reload for me. And injection would be really helpfull. I'm wondering if it is something you're working on.

[cloudkite]

@skeeet not sure when I'll get time as I'm currently travelling, if you want to have a go at it let me know :)

[skeeet]

@cloudkite have no time as well. Probably will look at that after february 15th.

[cloudkite]

@skeeet had a few hours free so implemented injecting variables into stylesheets https://github.com/cloudkite/Classy/commit/aa2f35da176fd91ebbb376fab376142d07b4b412 let me know if it works fo r you. For efficiency you should set these variables before you set [CASStyler defaultStyler].filePath otherwise classy will reload the stylesheet. http://classy.as/getting-started/#default-stylesheet