「ブラウザ枠」や「レンダリング枠」と「Bootstrapによるダークモード」

最終更新日 2025-07-22

ここでは「ブラウザ枠」や「レンダリング枠」でカラーテーマを「ダークモード」にするのに、
別の考え方としては、Bootstrapを使うというものがあります。

<html lang="ja" data-bs-theme="dark">

Bootstrapを利用すれば、htmlの属性として、data-bs-theme に「dark」や「light」を設定することで、
ダークモードやライトモードを切り替えることができます。

Bootstrapが管理するHTMLコンポーネントの全てに反映されるため、メジャーなUIタグは色を自動で切り替えることが出来ると考えて良いでしょう

test.html

<!DOCTYPE HTML>
<html lang="ja">

    <head>
        <script>
            const params = new URLSearchParams(window.location.search);
            const theme = params.get('theme')
            document.documentElement.setAttribute('data-bs-theme', theme);
        </script>
        <meta charset="utf-8">
        <title>Bootstrap demo</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.4/css/bootstrap.min.css">
    </head>

    <body>
        <h1>Hello, world!</h1>
        <button>abcdefg</button>
    </body>

</html>

test.html?theme=dark

ならダークモード

test.html?theme=light

ならライトモードです。

秀丸本体のマクロからカラー情報を伝達する

秀丸本体から伝える場合は、ブラウザ枠( or レンダリング枠)を開く際に、
カラーリング情報を伝えるのが良いでしょう。

.mac 側から URLでカラー情報を伝達

test.mac

jsmode "WebView2\\" + currentmacrofilename;;

js {
    // 対象のHTML
    let targetfile = `${currentmacrodirectory()}\\test.html`;

    // URLオブジェクトに直す
    let absoluteUrl = new URL(targetfile);

    // GETパラメターとして theme="dark" という形で追加
    let params = new URLSearchParams();
    params.set('theme', darkmode() ? 'dark' : 'light');
    absoluteUrl.search = params.toString();

    // 個別ブラウザ枠として開く
    browserpanecommand(
    {
        target: "_each",
        url : absoluteUrl,
        initialize: "async",
        show: 1
    }
    );
}