XF 2.2 Get style type in HTML template

Lorthirk

New member
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

HTML:
<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!
 
Last edited:

valdet

Active member
Eventually I managed to find a solution, using property() to read style properties:
HTML:
<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

Code:
<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
Code:
<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>
 

valdet

Active member
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 :)

Code:
<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

New member
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 :)
 
Top