Flashing problem - when GET request is sent to Controller to observe the state

Hello Forum,

Problem: The flash of the dark theme on page load occurs every time I reload the page, it happens because of the logic itself, where by default body has class="darkTheme", and GET request takes about 26-ish milliseconds to load the correct state (which in this case is lightTheme), as I checked later with the setTimout function - even 10ms is enough to see this flashing problem, here's the code:

resources/views/components/elements/switchers/theme-switcher.blade.php:

<switcher>
    @svg('sun', 'b-img b-img_sun icon-inactive', ['id' => 'js-sun'])
    @svg('moon', 'b-img b-img_moon', ['id' => 'js-moon'])
    <input id="js-theme-switcher" type="checkbox">
</switcher>
<script>
    (() => {
        // set default
        const name = "js-theme-switcher";
        (async () => {
            const response = await getRequest(`${window.location.origin}/get/redis/getState?name=${name}`);
            setCurrentTheme(response[name]);
        })();

        const themeSwitcher = getElement(`#${name}`);
        const sunIcon = getElement("#js-sun");
        const moonIcon = getElement("#js-moon");

        themeSwitcher.addEventListener("change", async function(event) {
            event.preventDefault();
            // toggle
            setCurrentTheme(themeSwitcher.checked);
            const url = `${window.location.origin}/post/redis/toggleState`;
            const contentType = "application/x-www-form-urlencoded";
            const data = {
                "name": name
            };
            await postRequest(url, contentType, data);
        });

        // helper functions
        function setCurrentTheme(isLightTheme) {
            document.body.className = isLightTheme ? "lightMode" : "darkMode";
            themeSwitcher.checked = isLightTheme;

            const action = isLightTheme ? 'add' : 'remove';
            const reverseAction = isLightTheme ? 'remove' : 'add';

            moonIcon.classList[action]("icon-inactive");
            sunIcon.classList[reverseAction]("icon-inactive");
        };

    })()
</script>

app/Http/Controllers/RedisController.php:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Redis;

class RedisController extends Controller
{
    function toggleState(Request $request)
    {
        $name = $request->input("name");
        $current_state = Redis::get($name) ?? false;

        Redis::set($name, !$current_state);

        return response()->json([$name => !$current_state]);
    }

    function getState(Request $request)
    {
        $name = $request->query("name");
        $current_state = Redis::get($name);

        return response()->json([$name => $current_state]);
    }
}

I use redis so I thought maybe I should use session driver and set it to redis and then on PHP part make something like class="{{ session()->get($needed_state_key) ? 'lightTheme' : 'darkTheme' }}" for the body but it turns out that it has 120 minutes expiration, I could have changed it to 20 years and be okay, but I feel this is not the correct way to solve it.

Also I have many components, all of them use the same logic, and to manually for example do something like this return view('view', ['themeState' => $themeState]); for all of them would make the code messy and I honestly don't want it.

Another method is to use localStorage but Idk, feels like too many storages, it would turn out later to be something like localStorage -> redis -> db, and it would also have sometimes these flashing 'effects', when user for example removes all cache from the browser.

Any ideas?