XF 2.2 Get style type in HTML template

[Lorthirk]

Hello,

I have an HTML widget in which I need to identify if I am in a dark or light template, in order to set some colors to pass via query string to a third party script. So I'm doing something like

<div id="my_widget" style=""> </div>
<xf:if is="$xf.style.properties.styleType == 'light'">
    <xf:set var="$textColor1" value="333333"></xf:set>
<xf:elseif is="$xf.style.properties.styleType == 'dark'" />
    <xf:set var="$textColor1" value="dddddd"></xf:set>
<xf:else />
    <xf:set var="$textColor1" value="888888"></xf:set>
</xf:if>
<script>
var my_var = "https://www.myservice.com/service.php?ID=12345678&text={$textColor1}&...
</script>

Unfortunately... it doesn't seem to work. At least, by trying to print {$xf.style.properties.styleType} returns empty; I don't know if there's something else as well...

Any help would be greatly appreciated!

 

[Lorthirk]

Eventually I managed to find a solution, using property() to read style properties:

<xf:if is="property('styleType') == 'dark'">

 

[gouwepeer.nl]

You can add a class in your html widget and add the css in extra.less in your styles.

 

[Lorthirk]

You can add a class in your html widget and add the css in extra.less in your styles.

I don't think that would work, since I would need those values to be set in a JavaScript later on, as you can see.

 

[XDinc]

I don't think that would work, since I would need those values to be set in a JavaScript later on, as you can see.

That's right. (If you are going to make a colour transition according to the style type that is used)
Just adding a class won't work.

 

[Paul B]

This is how to call a style property in a template: {{ property('propertyName') }} .

For example: {{ property('paletteColor1') }} .

 

[valdet]

Eventually I managed to find a solution, using property() to read style properties:

<xf:if is="property('styleType') == 'dark'">

Assuming there are two different styles in play (Light and Dark), a better alternative would be to target the styleid

<xf:if is="$xf.visitor.style_id == 1">Light</xf:if>
<xf:if is="$xf.visitor.style_id == 2">Dark</xf:if>

Your code would be

<xf:if is="$xf.visitor.style_id == 1">
    <xf:set var="$textColor1" value="333333"></xf:set>
<xf:elseif is="$xf.visitor.style_id == 2" />
    <xf:set var="$textColor1" value="dddddd"></xf:set>
<xf:else />
    <xf:set var="$textColor1" value="888888"></xf:set>
</xf:if>

 

[Lorthirk]

Not if I have multiple light and/or dark themes

 

[valdet]

Not if I have multiple light and/or dark themes

Instead of using style name, just target their ids and it would be even easier then

<xf:if is="$xf.visitor.style_id == 1">
    <xf:set var="$textColor1" value="1111aa"></xf:set>
<xf:elseif is="$xf.visitor.style_id == 2" />
    <xf:set var="$textColor1" value="2222bb"></xf:set>
<xf:elseif is="$xf.visitor.style_id == 3" />
    <xf:set var="$textColor1" value="3333cc"></xf:set>
<xf:elseif is="$xf.visitor.style_id == 4" />
    <xf:set var="$textColor1" value="4444dd"></xf:set>
<xf:elseif is="$xf.visitor.style_id == 5" />
    <xf:set var="$textColor1" value="5555ee"></xf:set>
<xf:elseif is="$xf.visitor.style_id == 6" />
    <xf:set var="$textColor1" value="6666ff"></xf:set>
<xf:else />
    <xf:set var="$textColor1" value="8888aa"></xf:set>
</xf:if>

 

[Lorthirk]

Why though? I only care about the style being light or dark, I'm not interested in which one it is exactly. My function does exactly what I need with the minimum effort