Forum Discussion

b_poplin's avatar
b_poplin
Expert
6 years ago

Community Colors Freemarker

In the new Lithium Responsive, how do we access the custom colors defined in the skin template in Freemarker? Old non-responsive we could define "Roll Over" color, and access in Freemarker with ${sk...
  • AdamA's avatar
    AdamA
    5 years ago

    A few things to note about the Responsive skins:

    1.) Responsive skins use SCSS (libsass) for compilation and have no access to Freemarker inside of a SCSS partial.

    2.) The variables used inside of the SCSS based Responsive skin do not use any variables that come from skin.properties.

    3.) For legacy skins: In Studio, when modifying a theme's variables they are saved into the skin.properties file in the plugin and ultimately they are available in the Freemarker context.

    4.) For Responsive skins: In Studio, when modifying a theme's variables they are saved into a _variables.scss partial which is used during the compilation of the Responsive skin.

    5.) Responsive skin SCSS partial files are not available to any Freemarker context.

    To answer your specific questions:

    > In the new Lithium Responsive, how do we access the custom colors defined in the skin template in Freemarker?

    This is currently not possible, see item 4 and 5 from above.

    > Is there any way to access the defined color values via Freemarker (not inside the CSS definitions).?

    No, this is currently not possible.

    > just checked the entire "properties" object of the skin context object...basically what is accessible via...which is a gigantic (and pretty useless...) object of colors back to the dinosaurs

    Your observation is correct, the values in skin.properties are useless when using Responsive skins as none of them are used during the compilation of the Responsive skin. The values in skin.properties are intended for legacy skins.

    Possible solution

    (the follow code is untested and intended for demonstration purposes)

    If your goal is to access the values of the Responsive skin variables in some client JS, you might consider the following:

    1.) In your skin add a new CSS rule per variable that you wish to access, it might look like this:

    .custom-rule-mapper-brand-primary {
      color: $brand-primary
    }
    
    .custom-rule-mapper-brand-danger {
      color: $brand-danger;
    }

    2.) Create some JS that can read these values:

    // Get the stylesheet for the Responsive skin. Rename skin name accordingly.
    var skinName = 'responsive_peak';
    var responsiveStylesheet = [].slice.call(document.styleSheets).filter(stylesheet => stylesheet.href && stylesheet.href.indexOf(skinName + '.css') > -1)[0];
    
    // Get all CSS Rules that begin with the prefix "custom-rule-mapper"
    var variableMapRules = responsiveStylesheet.cssRules).filter(rule => rule.selectorText && rule.selectorText.indexOf('.custom-rule-mapper') > -1);
    
    // Access CSS rule values
    variableMapRules.forEach(rule => console.log(rule.style));