Conditional rendering embedding depending upon theme.

[iamwatchdogs]

Checklist

• I have read and accepted the contributing guidelines.

How did you create the site?

Generated from chirpy-starter

Description

I have created a repo from chirpy-starter template and I have added my custom twitter/x embedding template (not so optimal but it does the job) and can be accessible as follows...

{% 
  include embed/twitter.html
  id="<id>"
  theme="<light | dark>"               <!-- default: dark -->
  align="<left | center | right>"      <!-- default: center-->
  width="[width]"                      <!-- optional -->
  cards="[hidden]"                     <!-- optional -->
  conversation="[none]"                <!-- optional -->
%}

Now, I wanted to perform a conditional rendering using liquid templating, but I was unable to access the site.theme_mode value. I knew using {: .light} and {: .dark} won't help me much in this case, but I still tried it anyways, but it wasn't that helpful.

Operations you have already tried

Initial I have tried to use site.theme_mode after coming across these lines. So, I came up with the following logic...

{% if site.theme_mode == "light" %}
  {% include embed/twitter.html id="<id>"  theme="light"%}
{% else %}
   {% include embed/twitter.html id="<id>" %}
{% endif %}

But somehow that didn't work. Then I tried using {: .light} and {: .dark} class specifiers and modify the template to render the tweet based on input from classes. But as soon as I tried to implement that, it got a bit more complex and had to change the original logic more than I thought.

Is there any possible way I could implement conditional rendering just like the one above?

Anything else?

No response