themeswitcher v3
This commit is contained in:
Peter Molnar
parent
7edea821f4
commit
534daff81a
3 changed files with 91 additions and 65 deletions
|
|
@ -4,6 +4,7 @@
|
|||
<title>{% block title %}{{ post.title }} - {{ site.domain }}{% endblock %}</title>
|
||||
<meta charset="UTF-8" />
|
||||
<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" />
|
||||
{% block licence %}{% endblock %}
|
||||
{% for key, value in meta.items() %}
|
||||
|
|
@ -19,26 +20,6 @@
|
|||
<style media="print">
|
||||
{% include 'style-print.css' %}
|
||||
</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>
|
||||
<body itemscope="" itemtype="http://schema.org/Blog http://schema.org/WebPage">
|
||||
|
||||
|
|
@ -81,17 +62,27 @@
|
|||
</nav>
|
||||
|
||||
<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">
|
||||
<label for="q">Search</label>
|
||||
<input type="search" placeholder="search..." value="" name="q" id="q" title="Search for:" />
|
||||
<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>
|
||||
|
||||
<p class="follow">
|
||||
|
|
@ -102,6 +93,7 @@
|
|||
follow
|
||||
</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
|
@ -422,6 +414,10 @@
|
|||
</p>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
{% include 'themeswitcher.js' %}
|
||||
</script>
|
||||
|
||||
{% include 'symbols.svg' %}
|
||||
|
||||
{% block prism %}
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ body {
|
|||
background-color: #222;
|
||||
font-size: 100%;
|
||||
line-height: 1.3em;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
svg {
|
||||
|
|
@ -123,24 +124,44 @@ li p {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
input, button {
|
||||
input, button, label {
|
||||
border: none;
|
||||
color: #ccc;
|
||||
background-color: transparent;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
button svg {
|
||||
transition: all 0.2s;
|
||||
label {
|
||||
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 {
|
||||
border-bottom: 3px solid #ccc;
|
||||
}
|
||||
|
||||
label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
|
|
@ -223,11 +244,9 @@ body > header form {
|
|||
}
|
||||
|
||||
body > header p {
|
||||
margin: 1em 0 0 0;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
|
||||
body > svg,
|
||||
body > script {
|
||||
display: none;
|
||||
|
|
@ -337,4 +356,4 @@ body > footer > ul >li > a > span {
|
|||
body > header a svg {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,47 +1,58 @@
|
|||
var DEFAULT_THEME = 'dark';
|
||||
var ALT_THEME = 'light';
|
||||
var STORAGE_KEY = 'theme';
|
||||
var colorscheme = document.getElementsByName('colorscheme');
|
||||
|
||||
function setTheme(mode) {
|
||||
var st = document.querySelector('#css_alt');
|
||||
var cb = document.querySelector('#contrast');
|
||||
if (mode == DEFAULT_THEME) {
|
||||
st.setAttribute("media", "speech");
|
||||
cb.checked = true;
|
||||
function setTheme(e) {
|
||||
var mode = e.target.value;
|
||||
if (mode == 'auto') {
|
||||
localStorage.removeItem(STORAGE_KEY);
|
||||
}
|
||||
else {
|
||||
st.setAttribute("media", "all");
|
||||
cb.checked = false;
|
||||
localStorage.setItem(STORAGE_KEY, mode);
|
||||
}
|
||||
applyTheme(mode);
|
||||
}
|
||||
|
||||
function toggleTheme(e) {
|
||||
var mode = DEFAULT_THEME;
|
||||
if (e.checked == false) {
|
||||
mode = ALT_THEME;
|
||||
function applyTheme(mode) {
|
||||
var st = document.getElementById('css_alt');
|
||||
if (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) {
|
||||
console.log(e);
|
||||
if (localStorage.getItem(STORAGE_KEY) != null) {
|
||||
return false;
|
||||
}
|
||||
if (e.matches) {
|
||||
setTheme(ALT_THEME);
|
||||
applyTheme(ALT_THEME);
|
||||
}
|
||||
else {
|
||||
setTheme(DEFAULT_THEME);
|
||||
applyTheme(DEFAULT_THEME);
|
||||
}
|
||||
}
|
||||
|
||||
var theme = localStorage.getItem("theme");
|
||||
if (theme != null) {
|
||||
setTheme(theme);
|
||||
var current = localStorage.getItem(STORAGE_KEY);
|
||||
if (current == null) { current = 'auto'; }
|
||||
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 + ")");
|
||||
if(mql.matches) {
|
||||
setTheme(ALT_THEME);
|
||||
}
|
||||
mql.addListener(mqlTheme);
|
||||
|
||||
var themeforms = document.getElementsByClassName(STORAGE_KEY);
|
||||
for(var i = themeforms.length; i--; ) {
|
||||
themeforms[i].style.display = 'inline-block';
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue