I am trying to add a button to switch between two different css files. I have another php file where I can choose the option setting with a form. That is why I just wanted to get the option and update it. The problem is when I submit these form now.
When I click on wordpress setting it is good, I have the 2 css files in the network and works. But when I submit Wooster style, it generated compagnon-wooster.css: so it is good but then I click on the switch button, it calls wp.css , ok but the style displayed is not good, it is a mixed of both css because the title is still purple (compagnon-wooster.css ) and the button blue ( wp.css ) but in the network , it is well written wp style.

[enter image description here](https://i.sstatic.net/lGL4KiS9.jpg)

I tried to use Localstorage first and then cookies.

<?php

/**
 * WoosterBanner class
 * It creates  a banner for the Wooster plugin
 *
 * @package Wooster
 */
class WoosterBanner
{
    public function __construct()
    {
        if (isset($_GET['page']) && in_array($_GET['page'], ['wooster', 'wooster-followup', 'wooster-licences', 'wooster-compagnon', 'wooster-customers', 'wooster-partner', 'wooster-settings', 'wooster-setup']) && is_admin()) {
            add_action('admin_enqueue_scripts', array($this, 'enqueue_styles'));
            //add_action('wp_enqueue_scripts', array($this, 'enqueue_styles'));
            add_action('in_admin_header', array($this, 'wooster_header_section'));
            add_action('admin_footer', array($this, 'add_switch_style_button'));
        }
        add_action('wp_enqueue_scripts', array($this, 'enqueue_styles')); // for the front page

    }
    /**
     * Adds the banner to the top of the Wooster plugin settings page
     *
     * @return void
     */
    public function wooster_header_section()
    {
?>
        <div id="top-bar-banner">
            <div class="wooster-banner">
                
                    <button type="button" aria-selected="false" aria-controls="activity-panel-previewStore" id="switch-style" class="components-button wooster-layout__activity-panel-tab"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
                            <path d="M0 224c0 17.7 14.3 32 32 32s32-14.3 32-32c0-53 43-96 96-96H320v32c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l64-64c12.5-12.5 12.5-32.8 0-45.3l-64-64c-9.2-9.2-22.9-11.9-34.9-6.9S320 19.1 320 32V64H160C71.6 64 0 135.6 0 224zm512 64c0-17.7-14.3-32-32-32s-32 14.3-32 32c0 53-43 96-96 96H192V352c0-12.9-7.8-24.6-19.8-29.6s-25.7-2.2-34.9 6.9l-64 64c-12.5 12.5-12.5 32.8 0 45.3l64 64c9.2 9.2 22.9 11.9 34.9 6.9s19.8-16.6 19.8-29.6V448H352c88.4 0 160-71.6 160-160z" />
                        </svg>
                    </button>
                  
    </div>
                    </div>

                </div>
            </div>
        </div>
    <?php
    }
    /**
     * Registers the setting for the Wooster plugin style switch button
     *
     * @return void
     */

    public function add_switch_style_button()
    {
    ?>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var toggleStyleBtn = document.getElementById('switch-style');
    var backendStyle = '<?php echo get_option('wooster_style', 'compagnon-wp.css'); ?>';
    var currentStyle = getCookie('wooster_style') || backendStyle;

    // Update cookie if the style has changed in the backend
    if (currentStyle !== backendStyle) {
        setCookie('wooster_style', backendStyle, 7);
        currentStyle = backendStyle;
    }

    toggleStyleBtn.addEventListener('click', function() {
        currentStyle = currentStyle === 'compagnon-wp.css' ? 'compagnon-wooster.css' : 'compagnon-wp.css';
        changeStyle(currentStyle);
    });

    function changeStyle(styleName) {
        var oldStyleElement = document.getElementById('wooster-custom-style');
        if (oldStyleElement) {
            oldStyleElement.parentNode.removeChild(oldStyleElement);
        }

        var styleElement = document.createElement('link');
        styleElement.id = 'wooster-custom-style';
        styleElement.rel = 'stylesheet';
        styleElement.href = '<?php echo plugins_url('wooster-partner/assets/css/'); ?>' + styleName + '?v=' + new Date().getTime();
        document.head.appendChild(styleElement);
        
        setCookie('wooster_style', styleName, 7);
    }

    // Load the initial style
    changeStyle(currentStyle);
});
function setCookie(name, value, days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days*24*60*60*1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "")  + expires + "; path=/";
}
function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}
</script>
<?php
    }
    /**
     * Enqueues the selected style for Wooster plugin settings page
     *
     * @return void
     */
    public function enqueue_styles()

    {
         // Enqueue other necessary styles and scripts
         wp_enqueue_style('wooster-banner', plugins_url('assets/css/banner.css', __DIR__));
         wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css', array(), '5.15.4');
         wp_enqueue_script('jquery'); // Js library
         // Enqueue your script
         wp_enqueue_script('switch-style');
     }
}

new WoosterBanner();