現在、CSSでダークモード対応作業で調整中ですが、Google AdSenseの関連コンテンツの広告とか、ネイティブ広告ってダークモードに対応するには、ダークモードの広告ユニットを別に用意してJavaScriptで差し替えするしかないんですかね。だって眩しいでしょ？
アドセンスの広告をいぢるのはポリシー違反にはならないかと。
試しにダークモードバージョンの関連コンテンツを作っておいて、
ダークモード判定のJavaScriptを探して
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
/* ダークテーマの時 */
} else {
/* ライトテーマの時 */
}
関連コンテンツユニットの場合、こんな感じになるんですかね？
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-xxxxxxxxxxxx"
</ins>
<script>
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
mySlotId = '1234567890';
} else {
mySlotId = '2345678901';
}
(adsbygoogle = window.adsbygoogle || ).push({
params: { google_ad_slot: mySlotId }
});
</script>
記事内広告の場合はこんな感じ？
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-xxxxxxxxxxxx"
</ins>
<script>
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
mySlotId = '1234567890';
} else {
mySlotId = '2345678901';
}
(adsbygoogle = window.adsbygoogle || ).push({
params: { google_ad_slot: mySlotId }
});
</script>
しかし残念ながら、ネイティブ広告（記事内、関連コンテンツ）はうまくいかないようで。あきらめが肝心でしょうかね…。
そんなわけで、アドセンスのサポートに問い合わせたところ、ダークモードは現段階では対応してないとのこと。
ダークモードにつきましては恐縮ながら現段階では仕様としてご用意がない状況となっております。
関連コンテンツの場合、関連コンテンツ及び広告が表示されることから広告のダークモード対応も必須となりますため、広告在庫や広告のブランド毀損なども念頭にプロダクトデザインが必要な仕様となっております。
しかしながら、ダークモードは昨今、特に一般的な仕様となってきているかと存じます。
今後、プロダクト化される可能性につきましては残念ながらお約束はできかねてしまいますが、もし検討、プロダクト化された際にはサイト運営者様へ一斉メールもしくはアカウント内でご案内できればと存じます。
なお、本件につきましては私より先程エンジニアへフィードバックと送らせていただきました。
そこで私は「ダークモードにできるだけ対応するための記事か何かあったら提供お願いしたい」と返信したら、翌日に返答ありました。
本日、プロダクトチームとダークモードの対応についてミーティングにて共有させていただきました。
恐縮ながら現在ダークモード最適化に関する資料のご用意がございませんが、
引き続き今後のプロダクト案として議論を進めて参ります。
収益化された関連コンテンツだと、広告もダークモードに対応する必要があるとかで。しばらく待つしかないですね。
一方、Amazonのウィジェットはダークモードに対応することは可能です。
<script type="text/javascript">
amzn_assoc_ad_type ="responsive_search_widget";
amzn_assoc_tracking_id ="xxxxxxxx-22";
amzn_assoc_marketplace ="amazon";
amzn_assoc_region ="JP";
amzn_assoc_placement ="";
amzn_assoc_search_type = "search_widget";
amzn_assoc_width ="auto";
amzn_assoc_height ="auto";
amzn_assoc_default_search_category ="";
amzn_assoc_default_search_key ="";
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
amzn_assoc_theme ="dark";
} else {
amzn_assoc_theme ="light";
}
amzn_assoc_bg_color ="FFFFFF";
</script>
<script src="//z-fe.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&Operation=GetScript&ID=OneJS&WS=1&Marketplace=JP"></script>
