2026年03月26日(木)
CSSのlight-dark()関数が画像もサポート! これでライトテーマとダークテーマの対応がさらに簡単になります
Webサイトをライトテーマとダークテーマ対応にするには、CSSのlight-dark()関数を使用すると今までより簡単に実装できます。
これまではlight-dark()関数はカラー値()のみしかサポートしていませんでしたが、画像ファイル()もサポートされ、ロゴ画像や背景画像などをライトテーマとダークテーマで切り替えることができるようになります。
![]()
More Easy Light-Dark Mode Switching
by Bramus!はじめに
2023年に私は当時画期的だったlight-dark()関数を使ったCSSによるカラーの切り替えについて記事を書きました(翻訳記事)。この記事...
author:
コリス
2006年の開設以来、一貫してサイト制作に関する最新情報を提供しているクリエイティブブログ
‹ PREV
metaタグや構造化データの重複をチェックできるおすすめツール
NEXT ›
cookie等も不要でGDPR準拠、AI機能も搭載したオープンソースのWeb分析アプリ・「Ninelytics」
関連記事
Ads
2006年の開設以来、一貫してサイト制作に関する最新情報を提供しているクリエイティブブログコリスの記事『CSSのlight-dark()関数が画像もサポート! これでライトテーマとダークテーマの対応がさらに簡単になります』についてまとめています。
この記事は特にSVG・SEO・ロゴ・Chrome・Firefox・safari・LINEについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のコリスで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとコリスの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。















