Dark Side of the Web 2019/3/29 #@WEBMeetupJP Jxck

No content

Dark Side

Light Side ~陽のあたる場所~

Dark Side ~闇をまといし暗黒の地~

Light Pill or Dark Pill ~深淵の入り口~

なぜ人は闇に落ちるのか

● 目に優しい ○ 体質や人種によっては現状の Web を眩しいと感じる 人も ○ そうでなくてもベッドで見るスマホは眩しい ○ 支援技術の一環として似たものは昔からあった ● バッテリー消費 ○ 液晶は黒を出すのに電力を使うので効果は薄い ○ 有機 EL は光らない状態が黒なので効果が期待される ● 見た目 ○ 僕が見てる世界は暗い、君たちとは違うんだ、、 ○ (意訳: ヤベー画面黒い俺カッケー、マジどうみてもハッカーだわこれ) なぜダークサイドモードに落ちるのか？

Dark Code

prefers-color-scheme ● Media Query の仕様 ● OS の Color Mode を取得 ● そこで Dark Mode 用の CSS を書ける

@media (prefers-color-scheme: light) { background-color: white; color: black; } @media (prefers-color-scheme: dark) { background-color: black; color: white; } Sample Code ~黒魔法~

Demo of Switching Dark Mode ~闇落の儀式~

Theme for scheme ~とある書物の彩色目録~ @media (prefers-color-scheme: light) { --theme-base: white; --theme-font: black; --theme-accent: red; } @media (prefers-color-scheme: dark) { --theme-base: black; --theme-font: white; --theme-accent: red; } body { background-color: var(--them-base); font: var(--them-font); } strong { font: var(--them-accent); }

Dark Image

画像問題 ● Dark Mode 時の画像はどうなるべきか ● 画像全部を直すとか無理 ● そのままでも良さそうな気もするが ● 画像だけ眩しさが目立つ気もする

色彩改変魔法 CSS Filter

SVG などは作りによっては反転してもいける filter: invert(100%)

写真だとこれじゃない感 filter: invert(100%)

色味が近いという意味では無くはない filter: grayscale(100%)

調整するとそれっぽくなる filter: grayscale(50%)

Dark Scripts

Syntax Highlight は反転でいける filter: invert(100%)

と思ってた

No content

これは始まりにすぎなかった..

User Preference Media Features

User Preference Media Features ● ユーザが閲覧環境に設定した内容を取得 ○ inverted-colors: 反転設定 ○ prefers-reduced-motion: アニメーションの削減 ○ prefers-reduced-transparency: 透過表現の削減 ○ prefers-contrast: コントラスト変更 ○ prefers-color-scheme: カラーテーマ変更

ただし方向が微妙に違う ● Dark Mode (opt-in) ○ OS は Web コンテンツに手を入れない ○ 代わりに対応して欲しい旨を伝える ○ コンテンツ開発者は Opt-In で対応 ● High Contrast Mode (intervention) ○ OS が Web コンテンツに手を入れる(反転など) ○ 手を入れている旨を伝える ○ コンテンツ開発者は Override で対応

最適な閲覧環境 ● 閲覧環境はユーザが決めるもの ● コンテンツは邪魔や拒否ではなく補助を行う ● 全環境で同じように見えるという幻想を捨てる ● わからなければ OS の邪魔をしない方向に ● 特定の挙動に特化しすぎない ● 設計の早い段階から意識しておく

Welcome to Dark Side Jxck