WebアプリのスタイルをテーマごとにCSSファイルで定義し、設定画面のフォーム操作などで使用するCSSファイルを切り替えてスタイルを更新する、というのをできるか試してみたところDOM操作で普通にできたので、そのやり方について。

通常のCSSファイル指定

通常CSSファイルを指定する場合はこんな感じ。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>sample</title>
        <link href="style1.css" rel="stylesheet" type="text/css" media="all" id="style"/>

        <!-- snip -->

ここで<link href="style.css">の部分をストレートにスクリプトから変更してやればOK

JavaScriptでCSSファイルの指定を更新

以下は、IDの値(上記例ではid="style")を使って要素を探し、href属性を使ったCSSファイルの指定をstyle2.cssで上書きするコード。

document.getElementById("style").setAttribute("href", "style2.css");

実装例

styleの値によって使用するCSSファイルを変更している。

const switch_app_style = (style = null) => {
    switch (style) {
        case "njgk":
            document.getElementById("style").setAttribute("href", "style/njgk.css");
            break;
        case "sgbt":
        default:
            document.getElementById("style").setAttribute("href", "style/sgbt.css");
            break;
    }
}