How to check cookies before the page loads in?

Question

I'm creating a program and I wanted to be able to change the stylesheets from light to dark by clicking on a moon/sun icon. The icon and stylesheets are supposed to change on click, however, the stylesheet changes immediately and the icon only changes after I refresh the page. This is the code I'm working with.

<?php 
$darkcss = 'dark.css';
$lightcss = 'light.css';
$expire = time()+60*60*24*30;

if ( (isset($_GET['css'])) && ($_GET['css'] == $lightcss) ) { 
    $_SESSION['css'] = $_GET['css']; 
    setcookie('css', $_GET['css'], $expire);
    }

if ( (isset($_GET['css'])) && ($_GET['css'] == $darkcss) ) {
    $_SESSION['css'] = $_GET['css']; 
    setcookie('css', $_GET['css'], $expire); 
    }

if (isset($_COOKIE['css'])) {
    $savedcss = $_COOKIE['css']; 
    } else {
    $savedcss = $lightcss;
    }

if ($_SESSION['css']) {
    $css = $_SESSION['css'];
    } else {
    $css = $savedcss;
    } 
    
echo '<link rel="stylesheet" href="/dashboard/assets/css/lights-out/'.$css.'">';

function iconChanger() {
    
    if(isset($_COOKIE['css']) && $_COOKIE['css'] == "light.css") {
        echo "<li class='nav-item dropdown nav-apps'>
                <a class='nav-link dropdown-toggle' href='?css=dark.css' role='button' aria-haspopup='true' aria-expanded='false'>
                    <i data-feather='moon'></i>
                </a>
              </li>";
    } else {
        echo "<li class='nav-item dropdown nav-apps'>
                <a class='nav-link dropdown-toggle' href='?css=light.css' role='button' aria-haspopup='true' aria-expanded='false'>
                    <i data-feather='sun'></i>
                </a>
              </li>";
    }
}
?>

Answer 1

If I was using that approach I would do something along the lines like this, but honestly, I would use a class for this.

<?php

// little bit of a double up but to make it easier to grab your own data them them as arrays (or you could even do objects)
$css_modes = [
    'light' => [
        'stylesheet' => 'light.css' ,
        'name' => 'light' ,
        'toggle_icon' => 'moon' ,
        'toggle_parameter' => 'dark' ,
    ],
    'dark' => [
        'stylesheet' => 'dark.css' ,
        'name' => 'dark' ,
        'toggle_icon' => 'sun' ,
        'toggle_parameter' => 'light' ,
    ],
];

// set default css...
$current_mode = $css_modes['light'];

//check if cookie set, exists and override if applicable.
if (isset($_COOKIE['css'], $css_modes[$_COOKIE['css']])) {
    // don't trust data from cookies either as these can be manipulated.
    $current_mode = $css_modes[$_COOKIE['css']];
}

//check if index exists in css_modes for security
if (isset($_GET['css'], $css_modes[$_GET['css']])) {
    // if its set that means it exists so $_GET['css'] == light or dark.
    //set current mode
    $current_mode = $css_modes[$_GET['css']];
    //set expiry
    $expire = time() + 60 * 60 * 24 * 30;
    // set cookie and pull data because still dont trust user data.
    // cookie now holds light or dark.
    setcookie('css', $current_mode['name'], $expire);
}

$_SESSION['css_mode'] = $current_mode;

// You can then use
?>
<link rel="stylesheet" href="/dashboard/assets/css/lights-out/<?= $_SESSION['css_mode']['stylesheet']; ?>">

<?php
function displayIcon()
{
    ?>
    <li class='nav-item dropdown nav-apps'>
        <a class='nav-link dropdown-toggle' href='?css=<?= $_SESSION['css_mode']['toggle_parameter']; ?>' role='button' aria-haspopup='true' aria-expanded='false'>
            <i data-feather='<?= $_SESSION['css_mode']['toggle_icon']; ?>'></i>
        </a>
    </li>
    <?php
}

displayIcon();

?>