Get scheme cookie server-side instead of client-side on page load
This commit is contained in:
parent
75fed3cbc1
commit
6fa9efcc74
4 changed files with 9 additions and 25 deletions
|
@ -12,6 +12,6 @@ class EncryptCookies extends Middleware
|
|||
* @var array<int, string>
|
||||
*/
|
||||
protected $except = [
|
||||
//
|
||||
"colorscheme"
|
||||
];
|
||||
}
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
/**
|
||||
* Retrieves a cookie's value
|
||||
* Retrieves a cookies value
|
||||
* @param {string} cname Cookie name
|
||||
* @returns {string} Cookie value
|
||||
*/
|
||||
|
@ -44,29 +44,10 @@ function cookieExists(cname) {
|
|||
|
||||
/**
|
||||
* Swaps the colorscheme
|
||||
* @param option
|
||||
* @param {string} scheme Color scheme ID
|
||||
*/
|
||||
function swapScheme(scheme) {
|
||||
setCookie("colorscheme", scheme, 90);
|
||||
document.getElementById("css-colorscheme").href = `/css/colorschemes/${scheme}.css`;
|
||||
console.log(`Set colorscheme to ${getCookie("colorscheme")}`)
|
||||
}
|
||||
|
||||
function setDefaultScheme() {
|
||||
if (!cookieExists("colorscheme")) {
|
||||
setCookie("colorscheme", "catppuccin-macchiato", 90);
|
||||
console.debug("Set default colorscheme");
|
||||
} else {
|
||||
const scheme = getCookie("colorscheme");
|
||||
const schemeselector = document.getElementById("scheme-selector");
|
||||
if (scheme && schemeselector) {
|
||||
for (let option of schemeselector.options) {
|
||||
if (option.value == scheme) {
|
||||
option.selected = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
swapScheme(scheme);
|
||||
}
|
||||
}
|
|
@ -1,13 +1,16 @@
|
|||
@php // Get colorscheme from cookie and apply immediately
|
||||
$colorscheme = request()->cookie('colorscheme', 'catppuccin-macchiato');
|
||||
@endphp
|
||||
<!-- Global -->
|
||||
<meta charset="utf-8">
|
||||
<meta property="og:type" content="website">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="theme-color" content="#333333">
|
||||
<link rel="stylesheet" href="/css/colorschemes/catppuccin-macchiato.css" id="css-colorscheme"/>
|
||||
<link rel="stylesheet" href="{{ asset("/css/colorschemes/{$colorscheme}.css") }}" id="css-colorscheme"/>
|
||||
<link rel="stylesheet" href="/css/master.css"/>
|
||||
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"/>
|
||||
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"/>
|
||||
<script src="/js/themeSwap.js"></script>
|
||||
<script src="/js/schemeSwap.js"></script>
|
||||
{!! (intval(date('n')) == 12) ? '<script src="/js/christmas/snow.js"></script>' : '' !!}
|
||||
|
||||
<!-- Page-specific -->
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
@include('includes.head')
|
||||
</head>
|
||||
|
||||
<body onload="setDefaultScheme()">
|
||||
<body>
|
||||
<div class="page">
|
||||
<div id="header" class="header">
|
||||
@include('includes.header')
|
||||
|
|
Loading…
Reference in a new issue