Level 73
Why not using the browser localStorage for that? You need that value to travel with each request?
1 like
Feb 24, 2022
8
Level 4
Laravel cannot define cookies on any browser except chrome
I created a dark and light mode in my laravel project and whenever the vue JS toggle is clicked it should create a cookie that saves the value. It works perfectly fine on google chrome but when i tried it on edge and firefox it showed (Undefined array key "isDarkModeOn").
I just want this cookie to be saved to any browser
My toggle Vue component which includes create cookie
<template>
<div
class="flex cursor-pointer items-center justify-between"
@click="store.modeToggle(), modeToggle()"
>
<div
class="flex h-4 w-12 items-center rounded-full bg-gray-300 p-1 duration-300 ease-in-out"
:class="{ 'bg-green-400': store.toggleActive }"
>
<div
class="h-3 w-3 transform rounded-full bg-white shadow-md duration-300 ease-in-out"
:class="{ 'translate-x-7': store.toggleActive }"
></div>
</div>
</div>
</template>
<script>
import { store } from "./store.js";
export default {
props: ["theme"],
data() {
return {
store,
};
},
mounted() {
if (this.theme === "false") {
store.light();
} else {
store.dark();
}
},
methods: {
dark() {
this.$emit("dark");
},
light() {
this.$emit("light");
},
modeToggle() {
if (
this.darkMode ||
document.querySelector("body").classList.contains("dark")
) {
this.light();
} else {
this.dark();
}
const isDarkModeOn = store.toggleActive;
createCookie("isDarkModeOn", isDarkModeOn.toString(), 60 * 60 * 24);
},
},
};
</script>
<style></style>
my Js file which contains the logic for creating the cookie
function createCookie(name, value, timeInSeconds) {
var date = new Date();
date.setTime(date.getTime() + timeInSeconds * 1000);
var expires = "; expires=" + date.toGMTString();
document.cookie = name + "=" + value + expires + "; path=/";
}
function getCookie(cname) {
let name = cname + "=";
let decodedCookie = decodeURIComponent(document.cookie);
let ca = decodedCookie.split(";");
for (let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == " ") {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
window.onload = function () {
const isDarkModeOn = getCookie("isDarkModeOn");
if (isDarkModeOn === "true") document.body.classList.add("dark");
};
and this is how I tell browser to display dark class or hide it according to the cookie if it exists
<body id="app" style="font-family: Open Sans, sans-serif" class="scroll-smooth {{ $_COOKIE[('isDarkModeOn')] === 'true' ? 'dark' : '' }}">
It works on chrome but not on any other browser.
Level 4
@Nakov I have Vue JS toggle that changes a value of 'toggleActive' and when this is true i'm creating a cookie called 'isDarkModeOn' and I'm using this cookie to tell php (since it renders first and avoiding flash of the wrong theme) anyway i'm using this cookie to tell php the value of it 'true' or 'false' and i'm using it in body class to echo dark or nothing which without it everything works but i get flash of incorrect theme until JS code renders which is a fraction of a second. i hope i explained my issue. I'm sure there is an easier logic or solution
Level 73
@MooseSaid Here is a version that Jeffrey did on Laracasts sometime ago, it uses Laravel and Vue and the local storage: https://laracasts.com/series/build-a-laravel-app-with-tdd/episodes/38
It might require a subscription, but it is a very valuable lesson for your case.
1 like
Level 4
Issue is solved by adding the below lines of code before the body
<?php
if (isset($_COOKIE['isDarkModeOn'])) {
$cookie = $_COOKIE['isDarkModeOn'];
} else {
$cookie = '';
}
?>
Not the best way to do it but It did the trick
Please or to participate in this conversation.