Bonsoir,

j'ai besoin d'aide pour un petit script, j'ai fait une fonction js pour changer de feuille de css et faire un mode dark/light sur mon app laravel lorsqu'on clique sur un bouton, j'aurai besoin d'aide pour faire persister ce changement au rechargement de la page, et que ça revienne en mode light que si on clique sur le bouton par exemple, voici le code :

    <script>
        function changeCSS(cssFile, cssLinkIndex) {

            var oldlink = document.getElementsByTagName("link").item(cssLinkIndex);

            var newlink = document.createElement("link");
            newlink.setAttribute("rel", "stylesheet");
            newlink.setAttribute("type", "text/css");
            newlink.setAttribute("href", cssFile);

            document.getElementsByTagName("head").item(0).replaceChild(newlink, oldlink);
        }

    </script>

<a href="#" onclick="changeCSS('{{ asset('css/main-dark.css') }}', 12); changeCSS('{{ asset('css/bootstrap-dark.css') }}', 5);">Dark</a>

        <a href="#" onclick="changeCSS('{{ asset('css/main.css') }}', 12); changeCSS('{{ asset('css/bootstrap.css') }}', 5);" >LIGHT</a>

J'ai pensé aux cookies, mais aucune idée de comment intégrer ça..

Merci beaucoup d'avance

-
Edité par AlexisMoren 20 octobre 2020 à 2:04:46

Salut,

Tu n'utilises pas de cookie pour ça, mais plutôt 'localStorage'.

Plus d'info ici : https://developer.mozilla.org/fr/docs/Web/API/Window/localStorage

-
Edité par BrainError 20 octobre 2020 à 8:19:05

Salut, j'ai essayé deux trois trucs mais j'y arrive pas :/ Si je passe un item dans le localstorage, je fais comment ensuite depuis ma fonction js pour persister le theme choisi ?  tu as une idée de comment appliquer ça à partir de mon code ci-dessus ?

        <a href="#" onclick="
        changeCSS('{{ asset('css/main-dark.css') }}', 12);
        changeCSS('{{ asset('css/bootstrap-dark.css') }}', 5);
        localStorage.setItem('theme', 'light');
        ">Dark</a>

        <a href="#" onclick="
        changeCSS('{{ asset('css/main.css') }}', 12);
        changeCSS('{{ asset('css/bootstrap.css') }}', 5);
        localStorage.removeItem('theme', 'light');
        " >LIGHT</a>

-
Edité par AlexisMoren 20 octobre 2020 à 14:00:23