[Blackened] Trying to get the Cloudflare captcha to be dark like it is on the default xenforo style

[latropa]

It looks like this now:

I asked chatgpt and it told me to change the Color palette from the default light to dark but that messed up other areas of the theme so I changed it back to dark.

Then it told me to add data-theme=dark to AppearanceStyles > My Darkened Style - Templates > captcha_turnstile like this:

<xf:js src="xf/captcha.js" min="1" />

<div data-xf-init="turnstile" data-sitekey="{$siteKey}" data-action="{$context}" data-theme="dark"></div>

And that still didn't work so I'm asking here now instead of letting ChatGPT take me on another wild goose chase.

 

[Russ]

So, this is indeed a problem unique to Blackened Pro. It's an old XF1 style that was ported to XF2, when XF 2.2 introduced dark mode, it was never officially deemed a "dark style" in the eyes of the style system. We had to make a lot of changes to update it which probably would have broken many users styles (like you saw when switching it) so we left it alone.

I think there's a super easy fix though, open PAGE_CONTAINER and find:

data-app="public"

Add right below:

data-color-scheme="dark"

Like so:

This will make it so Cloudflare recognizes the style as dark while letting XenForo still serve the normal style colors (when you switch to dark, it changes how it calculates color codes).

Let me know if that works for you.

 

[latropa]

So, this is indeed a problem unique to Blackened Pro. It's an old XF1 style that was ported to XF2, when XF 2.2 introduced dark mode, it was never officially deemed a "dark style" in the eyes of the style system. We had to make a lot of changes to update it which probably would have broken many users styles (like you saw when switching it) so we left it alone.

I think there's a super easy fix though, open PAGE_CONTAINER and find:

data-app="public"

Add right below:

data-color-scheme="dark"

Like so:
View attachment 15669


This will make it so Cloudflare recognizes the style as dark while letting XenForo still serve the normal style colors (when you switch to dark, it changes how it calculates color codes).

Let me know if that works for you.

That works great and is MUCH simpler than what ChatGPT had me do... yeah, I was bored last night after posting this thread and decided to see what path it would take me down:

Bad AI advice 1. Create /js/myboard/turnstile-dark.js with the following contents

(() =>
{
    const originalCreate = XF.Turnstile.prototype.create

    XF.Turnstile.prototype.create = function (...args)
    {
        const originalGetColorScheme = XF.StyleVariation.getColorScheme
        XF.StyleVariation.getColorScheme = () => 'dark'

        try
        {
            return originalCreate.apply(this, args)
        }
        finally
        {
            XF.StyleVariation.getColorScheme = originalGetColorScheme
        }
    }
})()

Bad AI advice 2. Change AdminCP > Appearance > Styles > MyBoard Default > Templates > captcha_turnstile

<xf:js src="xf/captcha.js" min="1" />
<xf:js src="myboard/turnstile-dark.js" min="0" />

<div data-xf-init="turnstile" data-sitekey="{$siteKey}" data-action="{$context}"></div>

It worked and I learned some new things having it walk me through it but it was obviously a way more complicated fix and probably has other issues that I'm not seeing since I'm not a coder and my experience with things like html, css, javascript, etc. has basically been just looking at already created files and sometimes understanding enough to make a few minor tweaks to customize it.

Anyway, I undid all that and I'm now just using your simple addition to PAGE_CONTAINER.

Thanks again!

 

[latropa]

Nothing to do with the cloudflare captcha but I decided to keep this all to one thread in case I find other things I want to change. As of now the only thing is I noticed that when setting a font size in a post it would show as the regular light grey color on the desktop but white in the browser. To fix it I added the following to extra.less:

/* Fix Blackened Pro mobile color override on BB code font size/font family */
@media (max-width: @xf-responsiveMedium) {
    .bbWrapper span[style*="font-size:"],
    .bbWrapper span[style*="font-family:"] {
        color: inherit;
    }
}

I also tested doing it this way and it worked too. In xb_style.less find:

<xf:if is="property('xbLogoType') == 'text'">
@media (max-width: @xf-responsiveMedium)
{
    .p-nav-smallLogo a
    {
        font-size: 15px;
        color: @xf-linkColor;
        padding: 15px 10px;
        vertical-align: middle;
        position: relative;
        top: -5px;
    }

    & span
    {
        color: #FFF;
    }
}
</xf:if>

Replace with:

<xf:if is="property('xbLogoType') == 'text'">
@media (max-width: @xf-responsiveMedium)
{
    .p-nav-smallLogo a
    {
        font-size: 15px;
        color: @xf-linkColor;
        padding: 15px 10px;
        vertical-align: middle;
        position: relative;
        top: -5px;

        & span
        {
            color: #FFF;
        }
    }
}
</xf:if>