Laravel - 選択時にCSSページスタイルを変更する

私は自分のプロジェクトの設定ページを作成しています。そのページの中に複数のCSSテーマを選択するオプションをユーザに与えたいと思っています。ドロップダウンメニュー。 Dark、Light、Regularの3つのオプションがあります。どうすればこれを達成できますか？Laravel - 選択時にCSSページスタイルを変更する

私はjQueryのようなものを使うことができると知っていますが、各タグに個々のクラスを追加する必要があるため、ファイルはこのようになります。

$("#Red").click(function() { 
    $(".txt-bubble-response").css('background-color', '#FA3C4C'); 
    $(".noti-badge").css('background-color', '#FA3C4C'); 
    $(".btn-send-msg").css('border-color', '#FA3C4C'); 
    $(".btn-send-msg").css('color', '#FA3C4C'); 
    saveColor('#FA3C4C'); 
});

ページ全体を変更したいです。 navbarの色からページ全体の背景色まで、はるかに多く。もちろん、ユーザーのために保存する必要があります。これを達成するための最良かつ効率的な方法は何ですか？私はインターネットで見てきましたが、私はそれを見つけることができませんでした。前もってありがとう

出典

2017-12-07 Rainier laan

html要素またはbody要素に1つのクラスを追加します。 JavaScriptの終わり。残りはあなたのスタイルシートで起こります。 'html.red .txt-bubble-response、html.red .noti-badge、... {背景色：＃FA3C4C; } ' – CBroe

CSS変数はこれを処理するためのより効率的で簡単な方法ですが、IEはまだそれらをサポートしていません。https://caniuse.com/#feat=css-variables（しかし、そこには多分polyfillがあります。） – CBroe

@CBroeは言った。 – VilleKoo

私は個人的にこれをデータベースフィールド（多分ユーザー）に保存してから、別のCSSページやクラスを作成することをお勧めします。あなたのCSSを含めるマスターでは、

<link href="css/{{$user->theme}}.css>のような何かをすることができます。

あなたは本当にJQueryを必要としません。これが役立つことを願っています。

出典

2017-12-07 08:41:44

Laravel - 選択時にCSSページスタイルを変更する

答えて

関連する問題