| |
>後からprefers-color-schemeをいじる方法もあるのですね。情報ありがとうござい
>ます。
あ、そうではなく、(prefers-color-scheme という名前で勘違いさせてしまったかも)
「秀丸用にカラーテーマの属性を新設」し、そこに値を設定すればよいのでは？
ということです。
秀丸のブラウザ枠やレンダリング枠で、HTMLコンテンツ内部で
カラーテーマをコントロールするやり方をまとめました。
(@media {***}は使えなくなるという前提で)
https://xn--pckzexbx21r8q9b.net/?page=nobu_tool_hm_webview2_pane_dark
そうすると行き着く先は、２つになるかと思っています。
①その先のページのように、カラー情報を伝達して、HTML側で受け取る。
（HTMLが100行などある場合、重複で持ちたくない場合に有効)
②HTML自体をライトモードとダークモードで分けてしまう。
(HTMLが30行未満だと、こちらの方が手っ取り早いと判断する人も多そう）
①の場合は、行き着く先は概ね 先のURLの一番下、もしくは下から2番目のような形
になっていきます。
--- test.mac ----
jsmode "WebView2";
js {
// 対象のHTML
let targetfile = `${currentmacrodirectory()}\\test.html`;
// URLオブジェクトに直す
let absoluteUrl = new URL(targetfile);
// GETパラメターとして darkmode=1 という形で追加
let params = new URLSearchParams();
params.set('darkmode', darkmode());
absoluteUrl.search = params.toString();
// 個別ブラウザ枠として開く
browserpanecommand(
{
target: "_each",
url : absoluteUrl,
initialize: "async",
show: 1
}
);
}
-------- test.html -----------
<html>
<head>
<style>
[hm-theme-color="dark"] {
color-scheme: dark;
}
[hm-theme-color="light"] {
color-scheme: light;
}
</style>
</head>
<body>
あああ
<a href="aaa">bbbb</a>
<script>
let targetColor ;
const urlSearchParams = new URLSearchParams(window.location.search);
const isDarkModeEnabled = urlSearchParams.get('darkmode');
if (isDarkModeEnabled == 1) {
document.documentElement.setAttribute('hm-theme-color', "dark");
} else {
document.documentElement.setAttribute('hm-theme-color', "light");
}
</script>
</body>
</html>
これってめんどくさいのでは？
という話です。
(@media で拾えなくなるということは、お手軽な手法が結構一気に崩壊するので...)
ネイティブ側で
private void WebView2_NavigationCompleted(object sender, NavigationCompleted
EventArgs e)
{
bool darkmode = hidemaru.isDarkMode(); // ネイティブで秀丸本体のダーク
モードを得て...
if (darkmode) {
webView2.CoreWebView2.ExecuteScriptAsync(
@"
window.addEventListener('DOMContentLoaded', function() {
if (document) document.documentElement.setAttribute('hm-them
e-color', 'dark');
});
";
} else {
// ほとんどの人は、lightだろうから、lightの時にわざわざ値をlightとい
う設定しない方がよいかもしれない。余計な実行もなくなるし...
webView2.CoreWebView2.ExecuteScriptAsync(
@"
window.addEventListener('DOMContentLoaded', function() {
if (document) document.documentElement.setAttribute('hm-them
e-color', 'light');
});
";
}
}
HTMLのルート属性として「hm-theme-color」に値が設定されますよ、という決め事を
しておけば、
「マクロからの伝達も不要」になり、
「HTMLのJSも不要」になり、
各ユーザーは以下みたいなHTMLで切り替えられるようになりますよ、
といった話です。
<html>
<head>
<style>
[hm-theme-color="dark"] {
color-scheme: dark;
}
[hm-theme-color="light"] {
color-scheme: light;
}
</style>
</head>
<body>
あああ
<a href="aaa">bbbb</a>
</body>
</html>
これにこだわる必要はないですが、
何かブラウザ枠やレンダリング枠のテーマカラーを
本体のテーマカラーを合わせる「パターン」や「イディオム」
みたいなものは提示しておいたほうが良いかなとは思います。
(@media が使えなくなるなら、一気に書き方が揺れるし難度も上がると思いますので）
|
|