Dark Reader - 任意のWebサイトをダークモードで表示
ダークモードに対応したサイトが増えてきています。多くは自動的に設定されたり、設定画面を使って自分で切り替えるようになっています。しかし、まだまだ未対応のサイトが多いのも事実です。 そこで使ってみたいのがDark Readerです。任意のWebサイトをダークモード対応にします。 Dark Readerの使い方 MOONGIFTを表示した例です。 輝度やコントラストを変更できます。 設定メニューです。 Googleの検索結果。 Wikipedia。 Dark Readerを使えばどんなWebサイトでもダークモードとして目に優しい表示にできます。開発時にはエディタやターミナルを暗くしているのに、Webブラウザだけ明るいと目が辛いです。Dark Readerを使えば目に優しく、可読性も上がるでしょう。 Dark ReaderはGoogle Chrome/Firefox/Safari/Edge用、T
軽量で非依存な、ダーク/ライトモード切り替えスクリプト・「DarkModeJS」
DarkModeJSは軽量で非依存なダークモード/ライトモードの切り替えスクリプトです 以前ご紹介した本スクリプトど同名のDarkmode.Jsは同じく軽量で非依存でしたがmix-blend-modeを使う、といったものである程度コンテンツを選ぶ類のものでした 今日のDarkModeJSは少し異なり、多少手間にはなりますがボタンのクリックや指定した時間で任意のCSSを読み込む、というものになります メリットとして任意の専用CSSを用意するのでどんなコンテンツでも正確なダークモード/ライトモードを自作出来ますが、デメリットとしては面倒な点でしょうか 手軽さは変わりませんが多少手間でも自作したほうがメンテナンスは楽な気がしますね。ライセンスはMITです DarkModeJS
ダークモードの検証が簡単にできるようになった！Chrome 79 デベロッパーツールの新機能
ダークモード対応のサイトを制作する時に面倒なのが、ダークモードとライトモードでの表示確認方法です。OSでモードを切り替えたり、2つ用意するのは面倒です。 Chrome 79 デベロッパーツールの新機能で、簡単にダークモードの検証ができるようになりました。下記のようにOS（ブラウザ）がライトモードでも、Webページをダークモードで表示できます。 画像はダークモード対応サイト: Tom Brow ダークモードの実装については、当ブログの以前の記事をご覧ください。 CSSのメディアクエリ「prefers-color-scheme」でダークモード対応にする方法と注意点 Chrome 79 デベロッパーツールで、prefers-color-schemeとprefers-reduced-motionの設定がシミュレートできるようになりました。 What's New In DevTools (Chrom
Dark Mode Toggle - ダークモード切り替え用Webコンポーネント
macOSから始まったダークモードは一気に広がっています。デスクトップはもちろん、Webサイトにおいてもダークモードの需要が高まっています。しかし、単純に暗いCSSを用意すれば良いだけではありません。 ユーザにとって使いやすいダークモードを提供するために使ってみたいのがDark Mode Toggleです。Googleが作成したダークモード用のカスタムエレメントです。 Dark Mode Toggleの使い方 HTMLへの記述は次のようになります。 <dark -mode-toggle id="dark-mode-toggle-1" legend="Theme Switcher" appearance="switch" dark="Dark" light="Light" remember="Remember this" ></dark> 右上に表示されているのがダークモードの切り替えコンポ
Darkmode.js - Webサイトにダークモードを手軽に導入 MOONGIFT
macOSでダークモードが導入されて以降、一気にその波が広がっています。アプリなどもダークモードをサポートしたり、Webサイトでも行われるようになっています。プログラマやエンジニアでは背景を黒くするのが当たり前だったので、時代が追いついたと言えなくもなさそうです。 そんなダークモードをWebサイトでも使えるようにするのがDarkmode.jsです。切り替えを簡単にできます。 Darkmode.jsの使い方 実際に使っているところです。クリック一つで表示が切り替わります。 MOONGIFTで試したところ。 Darkmode.jsはmix-blend-modeというCSSプロパティを使うことで、全体の配色を逆転させています。MOONGIFTをデフォルトのまま適用すると見づらいですが、設定を変更することで容易にダークモードを導入できそうです。 Darkmode.jsはJavaScript製のオー
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
flavio on Twitter: "A little HTML trick you can use to show a different image in dark mode https://t.co/yyFIGAPRcA"
