Changing Twitter Timeline background for dark theme

[angle4cor]

Hello,

I'm using the default "Twitter Timeline" block on my board. I have both bright and dark styles installed into my forums. The issue I have is that when using the dark theme, the background of this block is still white and way too bright, which is quite uncomfortable for the users.

 

Is it possible to set: light color skin of the "Twitter Timeline" for the bright board theme and similarly dark for a dark the one?

 

Any help will be greatly appreciated, 

Thanks!

Edited January 31, 2023 by angle4cor

[Nathan Explosion]

The twitter timeline is in an iframe - the background colour on it is dictated by the URL retrieving the timeline (based on the 'Light'/'Dark' setting on the block), you'd have to manipulate the URL to modify the 'theme' parameter dependent on the theme being used.

Example:

• configure block to use 'Light'
• Theme 1 - light - all OK
• Theme 2 - dark - manipulate the code to change 'theme' parameter from 'light' to 'dark'

Probably achievable by creating a new block (if using Pages) based on the existing Twitter timeline block and then modifying the content to allow you edit the template:

<div class='ipsPad_half'>
	<a class="twitter-timeline" data-lang="{$locale}" data-height="500" {{if $style}}data-theme="{$style}"{{endif}} {{if $color}}data-link-color="{$color}"{{endif}} href="https://twitter.com/{$username}?ref_src=twsrc%5Etfw">Tweets by {$username}</a> 		<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

It's the "{{if $style}}data-theme="{$style}"{{endif}}" entry there that would need something around it to check the theme in use and make the modification based on that.

Edited January 31, 2023 by Nathan Explosion

[angle4cor]

Thank you for your response. I am not sure if I can get it done on my own, but I will do some more research. I am not using Pages though.

 

Thanks again!

[Nathan Explosion]

22 minutes ago, angle4cor said:

I am not using Pages though.

Then you won't be able to do the above via a custom block.

Found another option though...you might be able to to do this at the theme template level itself by editing the following template:

core -> front -> widgets -> twitter

Change the following

{{if $style}}data-theme="{$style}"{{endif}}

to either:

data-theme="light"

or

data-theme="dark"

Not sure how this will behave with regards to caching though.

[angle4cor]

@Nathan Explosion it works. Thanks! 

My dark theme has a different color than plain black used by Twitter and it looks a bit odd, but still, its hundred times better than the bright white Twitter feed background I used to have in there. 

 

Thanks again for taking your time!