ツイッターの埋め込みでダークモードに自動対応させる裏技

2021-08-31   

表題の件。このブログ、世間様よりイチはやく、たぶん2年くらい前から(←自慢)ダークモード対応しています。でも、PCで見たときに画面の右サイドメニューにあるツイッターのウィジェット埋め込みはダークモードでも「白背景」のままでした2年間ずっと。

twitter埋め込みとGoogle広告はダークモードにならない

これはダサい。だけどこれはこっちのせいでなくツィッター社が対応してないのが悪い、って放置してました。あれから2年経過した2021年夏。web版ツイッターがダークモード対応しましたね。GoogleMapも対応したしweb界が一気にダークモード対応化しております。

で、仕事でやってるサイトもちょいちょいダークモード対応してて気づいたのです。Twitterのウィジェット埋め込みもダークモードに対応していることに。

埋め込みコードのdata-theme="dark" を追加するとダークモードになるそう。

うん、確かにダークモードで埋め込まれる。

黒背景で埋め込まれた

けど、世の中のweb管理者およびブログやってるひとが求めてるのはこれじゃないですよね?

ダークモードとライトモードを自動で判別してくれないと意味ないわけです。世の中の99%の人は自動判別を求めている。けどTwitter社は対応してない(恐らくブラウザのセキュリティ上の制限だと思われますが)。

ググっても、強制ダークモードで埋め込む解説はあるけど、誰も自動判別には触れてないんで、やっぱり正規の方法では無理みたい。なので、ここは俺が一肌脱いで?ちょっとした裏技を試してみたらあっけなく成功したので公開します。完成したアカツキには以下のように埋め込みTwitterも自動でダークモード・ライトモードの切り替えが行われます。

 

夜の中のweb管理者の99%がこの動作を求めてるはず。

 

ってことで以下がやり方です。

Twitter埋め込みダークモード自動対応する方法

答えは、というか仕組みは以下です。

(1)ダークモードとライトモード用2つを埋め込む

(2)CSSの@media (prefers-color-scheme:でどっちかを非表示にする

以上です。

具体的には

※このブログ、HTMLソースを書けないので画像で貼ります。

↑このブログで実際に使っているHTMLソースです

まず2行目のdiv class='tw_dark'から4行目の/divまでに  data-theme="dark" を付加した埋め込みコードを書きます。

5行目のdiv class="tw_light"から7行目の/divまでは data-theme="dark" 無しの普通のコードを書きます。

script!function(d,s,id){var~は1ヶ所でOKです。

以上がHTML部分。

次にCSS。

上をCSSファイルに追加します。ダークモードだったらtw_lightを非表示、ライトモードだったらtw_darkを非常時。たったこれだけです!

たったこれだけで

ダークモードのときは

Twitterもダークモード

ライトモードのときは

って感じで自動で切り替わります。

2つも読み込ませてダサイとか効率悪いとか、俺ならJavascriptでコントロールするぜ!とか細かいツッコミどころはありますが、とりあえず目的は達成できました。

JavaScriptで以下のように簡単にダークモードかどうかを取得できるらしいです。

https://1-notes.com/javascript-determine-dark-mode/より

なのでJavaScriptが得意なかたはちょっとゴニョゴニョすればできそうです。俺は得意じゃないので今回のような裏技に逃げました!ドヤ!

あとはGoogleAdsenseがダークモード対応してくれればいいんですけど、画像が絡むから当分無理だろうなぁ。

あ、ここで書いたのはいわゆるTwitterウィジェットの埋め込みです。個々のツイートを埋め込むタグ、 blockquote class="twitter-tweet" から始まるやつとは違うやつです。でも、blockquote class="twitter-tweet" のもdata-theme="dark"は使えるので、同じ方法で対応できるはずです(未検証)

こんな面倒なことさせないでTwitter側が対応してくれればいいんですけどね(・ω・)ノ

カテゴリ:日記・携帯更新

UNITORO以外の最近の投稿

N/A

twitter

Recent entries

企業のお問合せフォームを使った新手のスパムメールに驚く

バス釣り用品メーカーのブランドロゴを250社くらい集めた結果

ルノー・ルーテシアの一回目の車検受けた。費用は11万くらい。

だだちゃ豆を焼いたやつ&2021年の夏と自転車走行中、下腹部に異変が起きた怪談?!

三菱エアコン霧ヶ峰から異音どころか爆音が出て故障するもすぐに治った

熊谷の「久下橋」からUFOが見える?!謎のめっちゃ明るい光

フェイスブックの「マエザワ」さんからのコメントをブロックする方法

ゆるキャン△聖地巡礼してきた。山中湖・身延周辺編

俺の旅2021 夏の大宮~河口湖編

30日免停になって「停止処分者講習」を受けてきた@埼玉県

スピード違反で一発30日免停になってからの色々な手順

_N09hdkvNELmtvWX.jpg

船津なう

ダイハツムーブキャンバスに試乗してみた

TOKYO2020で山中湖のプリンセスオデット号とテコギボートが世界デビュー

_YWRajgezDWBZiL2.jpg

セブンの「そのまま食べるぶどう」

ハッピーバースデイto俺!自転車のめっちゃ明るいライトとスマホホルダを新調した。

ポルシェパナメーラS E-ハイブリッドに乗ってみた

新型AUDI A3をみたりルノー・トゥインゴに試乗したり

【Park Live】奥田民生|Tamio Okuda 2021.7.13(tue)17:00~にZOOM民として参加してみた

京弥さまの謎の行為の正体は「丁寧なリグり」だった

俺の旅2021 初夏の霞ヶ浦を自転車で

jN40FrbgCDAH5Kc1.jpg

京弥さまの謎の行為

LNkyJR9ExAc0zU7X.jpg

潮来なう2日目、懐かしのドック

CjErkgiCLKlCX0v7.jpg

潮来なう

俺の旅2021 第2戦 茨城県北浦

Sz8fTqu62JWCPi6W.jpg

潮来マリーナに新しい護岸が!

Wt01p8s8pEr9kN3D.jpg

茨城出張!雨だぜ

埼玉のニュルブルクリンクこと森林公園へ行ってきた他、今週のネタ

Adoのクリアファイルゲット他、今週の日記

君はサイコロラバーを知ってるか?

Category

Popular entries 2018

Popular entries 2017

Popular entries 2016