petermolnar/nasg
1
0
Fork 0
Code Issues Pull requests 5 Projects Releases Packages Wiki Activity Actions

themeswitcher v3

Browse source
This commit is contained in:
Peter Molnar 2018-11-15 14:06:35 +00:00
parent 7edea821f4
commit 534daff81a
3 changed files with 91 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
templates/base.j2.html
View file

@ -4,6 +4,7 @@
<title>{% block title %}{{ post.title }} - {{ site.domain }}{% endblock %}</title> <title>{% block title %}{{ post.title }} - {{ site.domain }}{% endblock %}</title>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1" />
<meta name="supported-color-schemes" content="dark light">
<link rel="icon" href="{{ site.url }}/favicon.ico" /> <link rel="icon" href="{{ site.url }}/favicon.ico" />
{% block licence %}{% endblock %} {% block licence %}{% endblock %}
{% for key, value in meta.items() %} {% for key, value in meta.items() %}
@ -19,26 +20,6 @@
<style media="print"> <style media="print">
{% include 'style-print.css' %} {% include 'style-print.css' %}
</style> </style>
<script>
var current = localStorage.getItem("stylesheet");
if (current != null) {
document.querySelector('#css_alt').setAttribute("media", current);
}
else if( ! window.matchMedia("(prefers-color-scheme: dark)").matches) {
toggleStylesheet(this);
}
function toggleStylesheet(trigger){
var setto = 'all';
var e = document.querySelector('#css_alt');
if (e.getAttribute("media") == 'all') {
setto = 'speech';
}
localStorage.setItem("stylesheet", setto);
e.setAttribute("media", setto);
return false;
}
</script>
</head> </head>
<body itemscope="" itemtype="http://schema.org/Blog http://schema.org/WebPage"> <body itemscope="" itemtype="http://schema.org/Blog http://schema.org/WebPage">
@ -81,17 +62,27 @@
</nav> </nav>
<div> <div>
<form class="theme" aria-hidden="true">
<svg width="16" height="16">
<use xlink:href="#icon-contrast"></use>
</svg>
<span>
<input name="colorscheme" value="auto" id="autoscheme" type="radio">
<label for="autoscheme">auto</label>
</span>
<span>
<input name="colorscheme" value="dark" id="darkscheme" type="radio">
<label for="darkscheme">dark</label>
</span>
<span>
<input name="colorscheme" value="light" id="lightscheme" type="radio">
<label for="lightscheme">light</label>
</span>
</form>
<form role="search" method="get" action="{{ site.url }}/search.php"> <form role="search" method="get" action="{{ site.url }}/search.php">
<label for="q">Search</label>
<input type="search" placeholder="search..." value="" name="q" id="q" title="Search for:" /> <input type="search" placeholder="search..." value="" name="q" id="q" title="Search for:" />
<input type="submit" value="➡" /> <input type="submit" value="➡" />
<label for="contrast">Toggle website contrast</label>
<button title="toggle website contrast" id="contrast" name="contrast" onclick="return toggleStylesheet(this)">
<svg width="16" height="16">
<use xlink:href="#icon-contrast"></use>
</svg>
</button>
</form> </form>
<p class="follow"> <p class="follow">
@ -102,6 +93,7 @@
follow follow
</a> </a>
</p> </p>
</div> </div>
</header> </header>
@ -422,6 +414,10 @@
</p> </p>
</footer> </footer>
<script>
{% include 'themeswitcher.js' %}
</script>
{% include 'symbols.svg' %} {% include 'symbols.svg' %}
{% block prism %} {% block prism %}

39
templates/style.css
View file

@ -17,6 +17,7 @@ body {
background-color: #222; background-color: #222;
font-size: 100%; font-size: 100%;
line-height: 1.3em; line-height: 1.3em;
transition: all 0.2s;
} }
svg { svg {
@ -123,24 +124,44 @@ li p {
margin: 0; margin: 0;
} }
input, button { input, button, label {
border: none; border: none;
color: #ccc; color: #ccc;
background-color: transparent; background-color: transparent;
vertical-align: middle;
} }
button svg { label {
transition: all 0.2s; font-weight: bold;
font-size: 0.8em;
cursor: pointer;
margin: 0 0.3em;
}
.theme {
margin: 0 0.3em;
display: none;
color: #ccc;
}
.theme input {
display: none;
}
.theme input + label::before {
content: '\2718';
display: inline-block;
padding: 0 0.1em;
}
.theme input:checked + label::before {
content: '\2714';
} }
input { input {
border-bottom: 3px solid #ccc; border-bottom: 3px solid #ccc;
} }
label {
display: none;
}
nav ul { nav ul {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
@ -223,11 +244,9 @@ body > header form {
} }
body > header p { body > header p {
margin: 1em 0 0 0;
font-size: 0.8em; font-size: 0.8em;
} }
body > svg, body > svg,
body > script { body > script {
display: none; display: none;
@ -337,4 +356,4 @@ body > footer > ul >li > a > span {
body > header a svg { body > header a svg {
display: inline-block; display: inline-block;
} }
} }

65
templates/themeswitcher.js
View file

@ -1,47 +1,58 @@
var DEFAULT_THEME = 'dark'; var DEFAULT_THEME = 'dark';
var ALT_THEME = 'light'; var ALT_THEME = 'light';
var STORAGE_KEY = 'theme';
var colorscheme = document.getElementsByName('colorscheme');
function setTheme(mode) { function setTheme(e) {
var st = document.querySelector('#css_alt'); var mode = e.target.value;
var cb = document.querySelector('#contrast'); if (mode == 'auto') {
if (mode == DEFAULT_THEME) { localStorage.removeItem(STORAGE_KEY);
st.setAttribute("media", "speech");
cb.checked = true;
} }
else { else {
st.setAttribute("media", "all"); localStorage.setItem(STORAGE_KEY, mode);
cb.checked = false;
} }
applyTheme(mode);
} }
function toggleTheme(e) { function applyTheme(mode) {
var mode = DEFAULT_THEME; var st = document.getElementById('css_alt');
if (e.checked == false) { if (mode == ALT_THEME) {
mode = ALT_THEME; st.setAttribute('media', 'all');
}
else {
st.setAttribute('media', 'speech');
}
for(var i = colorscheme.length; i--; ) {
if(colorscheme[i].value == mode) {
colorscheme[i].checked = true;
}
} }
setTheme(mode);
localStorage.setItem("theme", mode);
return true;
} }
function mqlTheme(e) { function mqlTheme(e) {
console.log(e); if (localStorage.getItem(STORAGE_KEY) != null) {
return false;
}
if (e.matches) { if (e.matches) {
setTheme(ALT_THEME); applyTheme(ALT_THEME);
} }
else { else {
setTheme(DEFAULT_THEME); applyTheme(DEFAULT_THEME);
} }
} }
var theme = localStorage.getItem("theme"); var current = localStorage.getItem(STORAGE_KEY);
if (theme != null) { if (current == null) { current = 'auto'; }
setTheme(theme); applyTheme(current);
var mql = window.matchMedia('(prefers-color-scheme: ' + ALT_THEME + ')');
mql.addListener(mqlTheme);
for(var i = colorscheme.length; i--; ) {
colorscheme[i].onclick = setTheme;
} }
else {
var mql = window.matchMedia("(prefers-color-scheme: " + ALT_THEME + ")"); var themeforms = document.getElementsByClassName(STORAGE_KEY);
if(mql.matches) { for(var i = themeforms.length; i--; ) {
setTheme(ALT_THEME); themeforms[i].style.display = 'inline-block';
}
mql.addListener(mqlTheme);
} }