JQueryとCookieを使ってサイトの背景色を変えたい

前提・実現したいこと

jqueryとjquery.cookie.jsを使って、webサイトのBackground-colorを変えるコードを作っています。
addClassで追加したclassをクッキーに保存して、リロードしてもclassがついたままにしようとしています。

発生している問題・エラーメッセージ

addClassでつけたclassがリロードしてもついたままにするコードはできたのですが、クッキーを読み込むのが遅いのか、リロードするとaddClassでつけたclassがhtmlに反映するまでに1〜2秒のラグがあり、classをつけていない時のcssが一瞬表示されてしまいます。

エラーメッセージは吐いていません。

該当のソースコード

html
1<body>
2
3<!-- 途中のhtmlは省略 -->
4
5<div class="md-thema" id="themaToggle">
6    <span class="themaLight" style="cursor: pointer;">ライト</span>
7    <span class="themaDark" style="cursor: pointer;">ダーク</span>
8</div>
9
10<!-- 途中のhtmlは省略 -->
11
12</body>

css
1body {
2    background-color: white;
3}
4
5body.dark {
6    background-color: black;
7}
8

jquery
1$(function() {
2    $(".themaDark").click(function() {
3
4            $("body").addClass("dark");
5            $(".themaDark").addClass("current");
6
7            if ($.cookie("color_display")) {
8
9                $.cookie("color_display", '', {expires: -1});
10
11            } else {
12
13                $.cookie("color_display", '1', {expires: 7});
14
15            }
16
17        });
18
19        if ($.cookie("color_display")) {
20
21            $("body").addClass("dark");
22            $(".themaDark").addClass("current");
23
24        } else {
25
26
27        }
28
29});
30
31$(function() {
32    $(".themaLight").click(function() {
33
34            $("body").removeClass("dark");
35            $(".themaDark").removeClass("current");
36            $(".themaLight").addClass("current");
37
38            if ($.cookie("color_display")) {
39
40                $.cookie("color_display", '', {expires: -1});
41
42            } else {
43
44                $.cookie("color_display", '1', {expires: 7});
45
46            }
47
48        });
49
50        if ($.cookie("color_display")) {
51
52            $(".themaLight").addClass("current");
53
54        } else {
55
56
57        }
58
59});

試したこと

クッキーの読み込みが遅いのか、リロードした時にclassがすぐに付かないので、jsの記述をhtml内に記述してみたり、<link>の並び順を変えてみたりしてみましたが素人考えでは歯が立たず。。。

補足情報（FW/ツールのバージョンなど）

サイトはwordpressで作っています。リロードしたさいに、bodyにclassを一瞬でつける方法はないでしょうか？上記の方法だとリロードした際に、classがbodyに付くまでに1-2秒のラグがあり、classの.darkが付く前のbackground-color:white;が一瞬表示されてしまします。

上記の例ではbackgroundを変えているだけですが、実際はbody.darkを元に、その他のcssを結構いじる予定です。colorやborder、box-shadowなどなど。

初めての質問であまり伝わっていないかもしれませんが、解決方法がわかる方は教えていただけると助かります。

行動規範の内容に同意します

回答2件

$(function() {

↑
この記述は「ドキュメント読み込み後」実行されるので、「一瞬表示される」は仕様通りの挙動となります。
既に回答にある通り別のやり方を探られた方が良いかと。
WordPressでどこまで対応できるかわかりませんが、php側で保存したCookieを読んできてbodyにclassつけるように分岐させればまだ実現可能かもしれません。

投稿2018/11/20 00:20

m.ts10806

総合スコア80850

DylanSpriggs

2018/11/20 00:25

回答ありがとうございます。素人考えで申し訳ないのですが、クッキーに保存していても、リロードしたら$(function()を読み込みしなおして、addClassをつけているのでしょうか？もしそうならphpで実装した方がいい気もしてきました。。。

m.ts10806

2018/11/20 00:29

提示のコードにはクリック時のイベントしか書かれてないような。プログラムは指示した通りにしか動かないので自身で何も指示してなければなにもしませんよ

DylanSpriggs

2018/11/20 00:48

すみません、今理解できました。ちょっとjsではなくphpとcookieで別の方法を考えてみようかと思います。

行動規範の内容に同意します

Wordpress使ってるならjsなんかでやらずに
body_classフィルタを使ったらいいんじゃないでしょうか

投稿2018/11/20 00:07

KazuhiroHatano

総合スコア7804

DylanSpriggs

2018/11/20 00:20

回答ありがとうございます。body_classを少し検索してみましたが、body_classだと特定ページのみ背景色の変更となり、サイト全体で、例えば1ヶ月background-colorをbalckにするとかは難しいのではないでしょうか？　https://www.dpreview.com/　このサイトの右上にあるReading mode: Light Darkを実装したいのですが、リロード時や戻るボタンを押した時にclassが付くのが遅いのでちらつきます。

KazuhiroHatano

2018/11/20 00:26

header.phpとかfunctions.phpに書くとかして特に分岐もしてなかったら普通特定のページだけに適用ってことにはならんでしょう

DylanSpriggs

2018/11/20 00:46

回答ありがとうございます。body_classとcookieを使うということでしょうか？ユーザーがダークかライトの背景色の変更をできるようにし、その状態を3ヶ月ほど維持したいのですが。

KazuhiroHatano

2018/11/20 01:08

そうです、$_COOKIE変数から値をとってbody_classフィルタで追加です

DylanSpriggs

2018/11/20 01:20

ありがとうございます！うまく記述できれば解決しそうです。