• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Changing color palette values inside a template or via a conditional

Mike Creuzer

Well-known member
Hello all,

I would like to change the value of say: @pageBackground via a conditional or some other method. In other words, I would like it to do something like this:

<xen:if is="@isDark">@pageBackground = 'black';<xen:else />@pageBackground = 'white';</xen:if>
Is this easily done?


Mike Creuzer

Well-known member
Well, I wanted to build a theme (just one) without using child themes (obviously I can do it with child themes) where you can change the style from light to dark. It can be done simply by changing the color palette values, but without this ability I must use a child style I believe.

Jake Bunce

XenForo moderator
Staff member
You could use inline styling:

Admin CP -> Appearance -> Templates -> PAGE_CONTAINER

<!DOCTYPE html>
<html style="background: #000000;" id="XenForo" lang="{$visitorLanguage.language_code}" dir="{$visitorLanguage.text_direction}" class="Public {xen:if {$visitor.user_id}, 'LoggedIn', 'LoggedOut'} {xen:if {$sidebar}, 'Sidebar', 'NoSidebar'}" xmlns:fb="http://www.facebook.com/2008/fbml">
<xen:hook name="page_container_head">
	<meta charset="utf-8" />
	<xen:if is="{$requestPaths.fullBasePath}">
		<base href="{$requestPaths.fullBasePath}" />
		<script><xen:comment>/* Chrome bug and for Google cache */</xen:comment>
			var _b = document.getElementsByTagName('base')[0], _bH = "{xen:jsescape $requestPaths.fullBasePath}";
			if (_b && _b.href != _bH) _b.href = _bH;
A conditional can be added so the inline styling depends on some condition.

Mike Creuzer

Well-known member
Since the properties are used in all the xenforo CSS files I would have to change the palette values, inline CSS and stuff wouldn't work unless I want to basically duplicate each CSS file twice which is obviously not worth while.


Well-known member
Could you create a CSS file with all black and other all white and then do a conditional inside the template, if is something, require the css black, if is not require the white.

Will this work for you?

Mike Creuzer

Well-known member
Fuhrmann, I was planning on doing that anyways but I could not customize it fully without editing the color palette itself. The color palette properties are used in almost every instance of a hex or rgb value, so I would need to literally edit those (twice; once for dark and once for light). All this said, it is now clear that I must do a light and dark style separately as opposed to all-in-one.

Thanks for your comments and advice!


Well-known member
I created a helper to do this. This is how I use:

{xen:helper background, 'pageBackground', 'black', 0}

background - The name of the helper.
pageBackground - The property
black - The color to set
0 - The id of the style.

If you want, send me a PC and I can send it to you.