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
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();
?>