Hatena Blog Tags
はてなブログ トップ
Dark mode
このタグでブログを書く
言葉の解説
ネットで話題
関連ブログ

Dark mode

このタグの解説についてこの解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。
一斗缶観測日記•2年前

Zoteroのダークモードへの切り替え方（Windowsの場合）

Zoteroのダークモードへの切り替え方法についての自分用メモ。 Zoteroのデフォルトの画面だと白すぎてまぶしいので、ダークモードに切り替える方法がないかと探したところ、以下のリポジトリがヒットしました。 GitHub - Rosmaninho/Zotero-Dark-Theme: userChrome.css file for a Zotero dark theme. Suggestions for improvements are welcome. CSSファイルを作成してやると設定できるようなので、以下の手順で設定しました。 Zoteroの関連フォルダ（C:\Users\【ユーザー名…

#zotero

関連ブログ

かもメモ•3年前

favicon をダークモード対応したい

webサイトやwebサービスでタブとかに表示される favicon 。favicon もダークモード対応ができるらしいのでやってみたのメモ favicon を SVG にする 昔から .ico みたいなファイル作ってたけど、最近では SVG もサポートされているらしい。SVG は内部にスタイルシートを持てるのでダークモード用のメディアクエリを埋め込んでしまえばダークモード対応された favicon になるみたい。簡単だ… HTML の <head> 内の favicon の指定を SVG にする <link rel="icon" type="image/svg+xml" href="/favi…

#favicon#Dark mode
かもメモ•3年前

Sass の変数で CSS のカスタムプロパティ(変数)を定義したい

Sass (SCSS) を使って CSS のカスタムプロパティ (変数) を定義するときのメモ Sass の変数を #{} で囲ってあげればOK $textColor: #000; $backgroundColor: #FFF; // カスタムプロパティを定義 :root { --text-color: #{$textColor}; --background-color: #{$backgroundColor}; } 👇 コンパイル結果 :root { --text-color: #000; --background-color: #FFF; } ₍ ᐢ. ̫ .ᐢ ₎ よき！ 🙅 #{} で…

#SCSS#CSS
かもメモ•3年前

CSS 今更のダークモード入門

ダークモード…やってこなかったので今更の入門したのでメモ。 prefers-color-scheme を使う prefers-color-scheme をメディアクエリの中で使用することでデバイスのダークモード/ライトモードの設定を識別できます。 light ... ユーザーがシステムに、明色のテーマを持つインターフェイスにしたいと通知したか、アクティブな設定を示さなかったことを示します。 dark ... ユーザーがシステムに、暗色のテーマを持つインターフェイスにしたいと通知したことを示します。 cf. prefers-color-scheme - CSS: カスケーディングスタイルシート …

#CSS#Dark mode#Sass
つれづれなる備忘録•5年前

ブログデザイン備忘録～ダークモード時の表示改修など

1. 本文サイド領域の配色 2. 画像の明るさ・輝度設定 3. デザインCSS 4. jQueryの読み込み先変更 前回紹介したダークモード対応に関して、今回は本文だけでなくサイドバーの部分も変更したので紹介する。またTOPへ戻る矢印を表示するjQueryの読み込み先(CDN)も変更した。 atatat.hatenablog.com 1. 本文サイド領域の配色 ダークモード時のデザインを指定するにはメディアクエリ@media(prefers-color-scheme:dark)内に追記していく。前回は本文の背景色を変更するセレクタ.entryとリンク文字色.entry-content aを使用…

#CSS#Dark mode
つれづれなる備忘録•5年前

ブログデザイン備忘録～ダークモード対応

今回は本ページをダークモード対応にしてみたので、それを紹介したい。 Webページをダークモード対応させるにはCSSのデザインにメディアクエリ「prefers-color-scheme」を用いて設定する。：CSSでダークモード対応、メディアクエリ「prefers-color-scheme」の使用方法と注意点 | コリス 具体的には以下のように、ダークモードになった場合の背景色や文字色を設定する。 @media (prefers-color-scheme: dark) { .entry{ background-color:darkkhaki; } .entry-content a{ color:b…

#CSS#Dark mode