Enable light/dark switch without JS

This commit is contained in:
Yusur 2021-02-23 23:54:29 +01:00
parent c2bf966dac
commit 812c95f341
4 changed files with 28 additions and 10 deletions

View file

@ -9,7 +9,7 @@
<!-- material icons -->
<link rel="stylesheet" href="https://cdn.sakuragasaki46.local/common/material-icons.css">
</head>
<body>
<body{% if request.cookies.get('dark') == '1' %} class="dark"{% endif %}>
<div id="__top"></div>
<div class="content">
{% for msg in get_flashed_messages() %}
@ -18,14 +18,14 @@
{% block content %}{% endblock %}
</div>
<ul class="top-menu">
<li class="dark-theme-toggle-anchor"><a href="javascript:toggleDarkTheme(true)" class="dark-theme-toggle-on" title="Dark theme"><span class="material-icons">brightness_3</span></a><a href="javascript:toggleDarkTheme(false)" class="dark-theme-toggle-off" title="Light theme"><span class="material-icons">brightness_5</span></a><script>function toggleDarkTheme(a){document.cookie="dark="+(+a)+";max-age=31556952;path=/";document.body.classList.toggle("dark",a)}if(document.cookie.match(/\bdark=1\b/)){document.body.classList.add("dark")}</script></li>
<li class="dark-theme-toggle-anchor"><a href="{{ url_for('theme_switch', next=request.path) }}" onclick="toggleDarkTheme(true);return false" class="dark-theme-toggle-on" title="Dark theme"><span class="material-icons">brightness_3</span></a><a href="{{ url_for('theme_switch', next=request.path) }}" onclick="toggleDarkTheme(false);return false" class="dark-theme-toggle-off" title="Light theme"><span class="material-icons">brightness_5</span></a><script>function toggleDarkTheme(a){document.cookie="dark="+(+a)+";max-age=31556952;path=/;SameSite=Strict";document.body.classList.toggle("dark",a)}</script></li>
<li><a href="/" title="{{ T('homepage') }}"><span class="material-icons">home</span></a></li>
<li><a href="/search/" title="{{ T('search') }}"><span class="material-icons">search</span></a></li>
<li><a href="/p/random/" title="{{ T('random-page') }}"><span class="material-icons">shuffle</span></a></li>
<li><a href="/create/" title="{{ T('new-note') }}"><span class="material-icons">create</span></a></li>
</ul>
<div class="footer">
<div class="footer-copyright">&copy; 2020 Sakuragasaki46.</div>
<div class="footer-copyright">&copy; 20202021 Sakuragasaki46.</div>
<div class="footer-actions" id="page-actions">{% block actions %}{% endblock %}</div>
</div>
<div class="backontop"><a href="#__top" title="Back on top"><span class="material-icons">arrow_upward</span></a></div>