サイトにダークモードを実装したものの、はてなブログのリンクカードなど外部iframeが白いままで浮いてしまう問題を、CSSフィルターを使って解決したので備忘録を残します。
<h2 id="%E5%A4%96%E9%83%A8iframe%E3%81%8C%E3%83%80%E3%83%BC%E3%82%AF%E3%83%A2%E3%83%BC%E3%83%89%E3%81%AB%E5%AF%BE%E5%BF%9C%E3%81%97%E3%81%AA%E3%81%84" data-line="3" class="code-line"><a class="header-anchor-link" href="#%E5%A4%96%E9%83%A8iframe%E3%81%8C%E3%83%80%E3%83%BC%E3%82%AF%E3%83%A2%E3%83%BC%E3%83%89%E3%81%AB%E5%AF%BE%E5%BF%9C%E3%81%97%E3%81%AA%E3%81%84" aria-hidden="true"></a> 外部iframeがダークモードに対応しない</h2>
ブログサイトでダークモード対応を実装しましたが、はてなブログのリンクカードのiframeだけが白背景のまま残ってしまいました。
はてなブログのリンクカードは以下のようなiframeで表示されており、hatenablog-parts.comという外部ドメインのため、直接CSSでスタイリングすることができません。
<div class="code-block-container"><pre class="language-html"><code class="language-html code-line" data-line="9">&lt;iframe 
 class="hatenablogcard" 
 style="width:100%;height:155px;max-width:680px;" 
 src="https://hatenablog-parts.com/embed?url=https://example.com" 
 width="300" 
 height="150" 
 frameborder="0" 
 scrolling="no"&gt;
&lt;/iframe&gt;
</code></pre></div><h2 id="same-origin-policy%EF%BC%88%E5%90%8C%E4%B8%80%E3%82%AA%E3%83%AA%E3%82%B8%E3%83%B3%E3%83%9D%E3%83%AA%E3%82%B7%E3%83%BC%EF%BC%89" data-line="21" class="code-line"><a class="header-anchor-link" href="#same-origin-policy%EF%BC%88%E5%90%8C%E4%B8%80%E3%82%AA%E3%83%AA%E3%82%B8%E3%83%B3%E3%83%9D%E3%83%AA%E3%82%B7%E3%83%BC%EF%BC%89" aria-hidden="true"></a> Same-Origin Policy（同一オリジンポリシー）</h2>
外部ドメインのiframe内のコンテンツは、セキュリティ上の理由でJavaScriptやCSSから直接操作することができません。
これにより、通常のCSS手法では外部サービスのダークモード対応ができません。
<h2 id="css%E3%83%95%E3%82%A3%E3%83%AB%E3%82%BF%E3%83%BC%E3%81%AB%E3%82%88%E3%82%8B%E8%89%B2%E5%8F%8D%E8%BB%A2" data-line="27" class="code-line"><a class="header-anchor-link" href="#css%E3%83%95%E3%82%A3%E3%83%AB%E3%82%BF%E3%83%BC%E3%81%AB%E3%82%88%E3%82%8B%E8%89%B2%E5%8F%8D%E8%BB%A2" aria-hidden="true"></a> CSSフィルターによる色反転</h2>
CSSの<code>filter</code>プロパティを使用することで、iframe全体の色を反転させることでダークモード風の見た目を実現します。
<h3 id="%E5%9F%BA%E6%9C%AC%E7%9A%84%E3%81%AA%E5%AE%9F%E8%A3%85" data-line="31" class="code-line"><a class="header-anchor-link" href="#%E5%9F%BA%E6%9C%AC%E7%9A%84%E3%81%AA%E5%AE%9F%E8%A3%85" aria-hidden="true"></a> 基本的な実装</h3>
<div class="code-block-container"><pre class="language-css"><code class="language-css code-line" data-line="33">/* ダークモード時に外部iframeを反転 */
[data-theme="dark"] .external-iframe,
.dark .external-iframe {
 filter: invert(1) hue-rotate(180deg) brightness(0.9) contrast(0.9);
 border-radius: 8px;
}
</code></pre></div><h3 id="%E3%81%AF%E3%81%A6%E3%81%AA%E3%83%96%E3%83%AD%E3%82%B0%E3%82%AB%E3%83%BC%E3%83%89%E3%81%AE%E5%A0%B4%E5%90%88" data-line="42" class="code-line"><a class="header-anchor-link" href="#%E3%81%AF%E3%81%A6%E3%81%AA%E3%83%96%E3%83%AD%E3%82%B0%E3%82%AB%E3%83%BC%E3%83%89%E3%81%AE%E5%A0%B4%E5%90%88" aria-hidden="true"></a> はてなブログカードの場合</h3>
<div class="code-block-container"><pre class="language-css"><code class="language-css code-line" data-line="44">/* はてなブログリンクカードのダークモード対応 */
[data-theme="dark"] .hatenablogcard,
.dark .hatenablogcard {
 filter: invert(1) hue-rotate(180deg) brightness(0.9) contrast(0.9) !important;
 border-radius: 8px !important;
}
</code></pre></div>このCSSを適用することで、はてなブログのリンクカードがダークモードに対応し、白背景が黒背景に変わります。
その他の外部iframeでも同様の方法でダークモード対応が可能です。
<h2 id="%E3%83%95%E3%82%A3%E3%83%AB%E3%82%BF%E3%83%BC%E3%81%AE%E8%A9%B3%E7%B4%B0%E8%A7%A3%E8%AA%AC" data-line="57" class="code-line"><a class="header-anchor-link" href="#%E3%83%95%E3%82%A3%E3%83%AB%E3%82%BF%E3%83%BC%E3%81%AE%E8%A9%B3%E7%B4%B0%E8%A7%A3%E8%AA%AC" aria-hidden="true"></a> フィルターの詳細解説</h2>
<h3 id="%E5%90%84%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E3%81%AE%E5%BD%B9%E5%89%B2" data-line="59" class="code-line"><a class="header-anchor-link" href="#%E5%90%84%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E3%81%AE%E5%BD%B9%E5%89%B2" aria-hidden="true"></a> 各プロパティの役割</h3>
<table data-line="61" class="code-line">
<thead data-line="61" class="code-line">
<tr data-line="61" class="code-line">
<th>プロパティ</th>
<th>値</th>
<th>効果</th>
</tr>
</thead>
<tbody data-line="63" class="code-line">
<tr data-line="63" class="code-line">
<td><code>invert(1)</code></td>
<td>100%反転</td>
<td>白→黒、黒→白に色を反転</td>
</tr>
<tr data-line="64" class="code-line">
<td><code>hue-rotate(180deg)</code></td>
<td>180度回転</td>
<td>色相を調整してより自然な色に</td>
</tr>
<tr data-line="65" class="code-line">
<td><code>brightness(0.9)</code></td>
<td>90%の明度</td>
<td>少し暗くしてダークモード感を演出</td>
</tr>
<tr data-line="66" class="code-line">
<td><code>contrast(0.9)</code></td>
<td>90%のコントラスト</td>
<td>コントラストを下げて目に優しく</td>
</tr>
</tbody>
</table>
<h3 id="%E3%83%91%E3%83%A9%E3%83%A1%E3%83%BC%E3%82%BF%E3%81%AE%E8%AA%BF%E6%95%B4%E4%BE%8B" data-line="68" class="code-line"><a class="header-anchor-link" href="#%E3%83%91%E3%83%A9%E3%83%A1%E3%83%BC%E3%82%BF%E3%81%AE%E8%AA%BF%E6%95%B4%E4%BE%8B" aria-hidden="true"></a> パラメータの調整例</h3>
用途に応じてパラメータを調整できます：
<div class="code-block-container"><pre class="language-css"><code class="language-css code-line" data-line="72">/* より暗いダークモード */
filter: invert(1) hue-rotate(180deg) brightness(0.8) contrast(0.8);

/* コントラスト重視 */
filter: invert(1) hue-rotate(180deg) brightness(0.9) contrast(1.1);

/* 色味を変えたい場合 */
filter: invert(1) hue-rotate(200deg) brightness(0.9) contrast(0.9);
</code></pre></div>外部iframeのダークモード対応は<code>filter</code>プロパティを使用することで実現できます。
完璧ではありませんが、ユーザビリティを大幅に改善できる実用的な解決策です。
<h2 id="%E5%8F%82%E8%80%83" data-line="87" class="code-line"><a class="header-anchor-link" href="#%E5%8F%82%E8%80%83" aria-hidden="true"></a> 参考</h2>
<ul data-line="89" class="code-line">
<li data-line="89" class="code-line"><a href="https://developer.mozilla.org/ja/docs/Web/CSS/filter" target="_blank" rel="nofollow noopener noreferrer">MDN - CSS filter</a></li>
<li data-line="90" class="code-line"><a href="https://caniuse.com/css-filters" target="_blank" rel="nofollow noopener noreferrer">Can I use - CSS Filter Effects</a></li>
</ul>

外部iframe(はてなブログカード)のダークモードに対応する