SafariでASCのスレッドを見るとき、「トピック・タイトルがドロップダウン」します。これを正しく日表示する方法は？

> ２つのCSSをどうやって調べる事が出来たのが不思議になりました。

まず最初に試したのは、userContent.css の方。新規ウインドウ/タブはインスペクターを使わずダーク化できました。

ところが、Firefox 起動時のブランクページが白いまま。インスペクターを見て分からず...。

ならば、Firefox のインターフェースの一部だろうと考え、ブラウザツールボックスで調査。すると、スタートアップ時のブランクページと新規ウインドウ/タブのそれは微妙に異なることが分かりました。

で、該当する箇所の背景色を変更したらビンゴと。Firefox のインターフェースのカスタマイズは userChrome.css で行うので、同ファイルに書き込み保存して完成。

まあ、ソースコードを読み解いて判断するのが正攻法なのでしょうが、そんな気力はありませんでした。

あと、ブラウザーツールボックス使い方は下記のドキュメントを読んでください。これを使いこなせば Firefox のインターフェースを自分でカスタマイズできるようになります。

ブラウザーツールボックス - 開発ツール | MDN

https://developer.mozilla.org/ja/docs/Tools/Browser_Toolbox

Firefoxのダークモード化は、New Tabをしたときのちらつきが気になって止めていたのですが、快適ですね。

私は、Nocturnalを使っており、昼はライトモード、夜はダークモードで使っています。そのためbackground-colorを黒固定にするのは都合が悪いので、少々改変してみました。

https://github.com/HarshilShah/Nocturnal

userContent.css

@media(prefers-color-scheme:light) {
	:root {
		--background-color: #FFFFFF;
	}
}
@media(prefers-color-scheme:dark) {
	:root {
		--background-color: #202020;
	}
}

@-moz-document url("about:blank") {
	body {
		background-color: var(--background-color);
	}
}

userChrome.css

@media(prefers-color-scheme:light) {
	:root {
		--background-color: #FFFFFF;
	}
}
@media(prefers-color-scheme:dark) {
	:root {
		--background-color: #202020;
	}
}

stack.browserStack {
	background-color: var(--background-color);
}

おお、すばらしい。流石です。

Firefox 起動時のブランクページですが、ブラウザツールボックスでもうちょっと丹念に調べたところ、色を指定してる部分を見つけました。

#tabbrowser-tabpanels {
    background-color: #f9f9fa;
}

これを、次のようにすれば良いと思います。まあ、前掲のもの (stack.browserStac) でも問題ないと思いますが...、ご参考まで。

userChrome.css

#tabbrowser-tabpanels {
    background-color: #202020 !important;
}

> 色を指定してる部分を見つけました

おお、有難うございます。早速変更しました。

> 次のようにすれば良いと思います。まあ、前掲のもの (stack.browserStac) でも問題ないと思いますが

私は、Save Page WEを使ってページまるごと保存しているのですが、Dark ReaderをONにしてダークモードで保存したファイルを開くと、#tabbrowser-tabpanelsではちらつきが起こってしまうようです。stack.browserStacでは問題ありませんでした。報告までに。

https://addons.mozilla.org/en-US/firefox/addon/save-page-we/

ありがとうございます。

Save Page WE で保存したページを開いた際の挙動ですが、当方では stack.browserStack、#tabbrowser-tabpanels、共に問題ないようです。環境によるのでしょうか...。原因は分かりませんでした。

ただ、両者の関係はこんな感じになっているので、stack.browserStack の方で指定した方がより確実かもしれませんね。

迷った時は最初のやつが正解？ってことでご勘弁を。

すみません。何度か編集してるうちに変な文章になってしまいました。

誤: レイアウトが好みでなかったり

正: レイアウトに問題があったり

向こうのフォーラムについてはご自身の判断でお願いします。

とにかく、希望が叶ったようで何よりです。

Firefox 67.0.3(en-US)なのですが、chrome://browser/content/browser.xulには、tabpanels#tabbrowser-tabpanelsはみつかりますが、stack.browserStackがみつかりません...