36 lines
1.3 KiB
Twig
36 lines
1.3 KiB
Twig
{% extends 'base.html.twig' %}
|
|
{% block title %}Settings{% endblock %}
|
|
{% block body %}
|
|
<h1 class="h4 mb-3">Settings</h1>
|
|
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h2 class="h6">Appearance</h2>
|
|
<div class="form-check form-switch mt-2">
|
|
<input class="form-check-input" type="checkbox" role="switch" id="themeToggle">
|
|
<label class="form-check-label" for="themeToggle">Dark mode</label>
|
|
</div>
|
|
<small class="text-secondary">Your choice is saved in a cookie.</small>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
(function(){
|
|
const key = 'theme';
|
|
const root = document.documentElement;
|
|
const current = (document.cookie.match(/(?:^|; )theme=([^;]+)/)?.[1] || '').replace(/\+/g,' ');
|
|
const initial = current || root.getAttribute('data-bs-theme') || 'light';
|
|
const toggle = document.getElementById('themeToggle');
|
|
toggle.checked = initial === 'dark';
|
|
function setTheme(t){
|
|
root.setAttribute('data-bs-theme', t);
|
|
const d = new Date(); d.setFullYear(d.getFullYear()+1);
|
|
document.cookie = key+'='+t+'; path=/; SameSite=Lax; expires='+d.toUTCString();
|
|
}
|
|
toggle.addEventListener('change', ()=> setTheme(toggle.checked ? 'dark' : 'light'));
|
|
})();
|
|
</script>
|
|
{% endblock %}
|
|
|
|
|