Enable light/dark switch without JS
This commit is contained in:
parent
c2bf966dac
commit
812c95f341
4 changed files with 28 additions and 10 deletions
8
CHANGELOG.md
Normal file
8
CHANGELOG.md
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
# What’s New
|
||||
|
||||
## 0.2
|
||||
|
||||
+ Some code refactoring.
|
||||
+ Light and dark theme.
|
||||
+ Move database into `database/` folder.
|
||||
+ Style improvements.
|
||||
|
|
@ -13,7 +13,7 @@ suitable as a community or team knowledge base.
|
|||
+ Revision history
|
||||
+ Stored in SQLite databases
|
||||
+ Material Icons
|
||||
+ Light/dark theme (requires JS as of now)
|
||||
+ Light/dark theme
|
||||
+ Works fine even with JavaScript disabled.
|
||||
|
||||
## Requirements
|
||||
|
|
|
|||
22
app.py
22
app.py
|
|
@ -11,7 +11,9 @@ Application is kept compact, with all its core in a single file.
|
|||
Extensions are supported, kept in extensions/ folder.
|
||||
'''
|
||||
|
||||
from flask import Flask, abort, flash, g, jsonify, redirect, request, render_template, send_from_directory
|
||||
from flask import (
|
||||
Flask, abort, flash, g, jsonify, make_response, redirect, request,
|
||||
render_template, send_from_directory)
|
||||
from werkzeug.routing import BaseConverter
|
||||
from peewee import *
|
||||
import datetime, re, markdown, uuid, json, importlib, sys, hashlib, html, os, csv, random
|
||||
|
|
@ -27,7 +29,7 @@ try:
|
|||
except ImportError:
|
||||
slugify = None
|
||||
|
||||
__version__ = '0.1-dev'
|
||||
__version__ = '0.2'
|
||||
|
||||
#### CONSTANTS ####
|
||||
|
||||
|
|
@ -370,9 +372,10 @@ def is_url_available(url):
|
|||
return url not in forbidden_urls and not Page.select().where(Page.url == url).exists()
|
||||
|
||||
forbidden_urls = [
|
||||
'create', 'edit', 'p', 'ajax', 'history', 'manage', 'static', 'media', 'accounts',
|
||||
'tags', 'init-config', 'upload', 'upload-info', 'about', 'stats', 'terms', 'privacy',
|
||||
'easter', 'search', 'help', 'circles'
|
||||
'create', 'edit', 'p', 'ajax', 'history', 'manage', 'static', 'media',
|
||||
'accounts', 'tags', 'init-config', 'upload', 'upload-info', 'about',
|
||||
'stats', 'terms', 'privacy', 'easter', 'search', 'help', 'circles',
|
||||
'protect',
|
||||
]
|
||||
|
||||
app = Flask(__name__)
|
||||
|
|
@ -396,7 +399,7 @@ def _before_request():
|
|||
@app.context_processor
|
||||
def _inject_variables():
|
||||
return {
|
||||
'T': partial(get_string, g.lang)
|
||||
'T': partial(get_string, g.lang),
|
||||
}
|
||||
|
||||
@app.route('/')
|
||||
|
|
@ -626,6 +629,13 @@ def stats():
|
|||
revision_count=PageRevision.select().count()
|
||||
)
|
||||
|
||||
@app.route('/accounts/theme-switch')
|
||||
def theme_switch():
|
||||
cook = request.cookies.get('dark')
|
||||
resp = make_response(redirect(request.args.get('next', '/')))
|
||||
resp.set_cookie('dark', '0' if cook == '1' else '1', max_age=31556952, path='/')
|
||||
return resp
|
||||
|
||||
## easter egg (lol) ##
|
||||
|
||||
MNeaster = {
|
||||
|
|
|
|||
|
|
@ -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">© 2020 Sakuragasaki46.</div>
|
||||
<div class="footer-copyright">© 2020–2021 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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue