add light/dark theme toggle
This commit is contained in:
parent
834e97971b
commit
2be750d5c6
GPG key ID:
F0A184B5213D9F90
4 changed files with 106 additions and 11 deletions
|
|
@ -6,13 +6,11 @@
|
|||
<a href='{{ html_page.url }}' {%- if page.title == html_page.title %} class='current'{% endif -%}>{{ html_page.title }}</a>
|
||||
{%- endunless -%}
|
||||
{%- endfor -%}
|
||||
|
||||
{%- comment -%} {%- if page.title != "Contact" -%}<a href='/contact.html'>Contact</a>{% endif -%}
|
||||
{%- if page.title != "Projects" -%}<a href='/projects.html'>Projects</a>{% endif -%}
|
||||
{%- if page.title != "Donate" -%}<a href='/donate.html'>Donate</a>{% endif -%} {%- endcomment -%}
|
||||
</span>
|
||||
|
||||
<span class='external'>
|
||||
<span class='other'>
|
||||
<a href='https://bune.city'>Blog</a><a href='https://github.com/lynnesbian'>GitHub</a><a href='https://git.bune.city/lynnesbian'>Gitea</a>
|
||||
|
||||
<span id='theme-control'></span>
|
||||
</span>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" type="text/css" href="/assets/style.css">
|
||||
<script src='/assets/script.js'></script>
|
||||
<title>{{ page.title | default: "lynnesbian dot space" }}</title>
|
||||
</head>
|
||||
|
||||
|
|
|
|||
57
assets/script.js
Normal file
57
assets/script.js
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
var use_local_storage = storage_check();
|
||||
|
||||
function dgel(id) {
|
||||
return document.getElementById(id);
|
||||
}
|
||||
|
||||
function storage_check() {
|
||||
// based on https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API
|
||||
try {
|
||||
let x = 'test';
|
||||
localStorage.setItem(x, x);
|
||||
localStorage.removeItem(x);
|
||||
return true;
|
||||
}
|
||||
catch (e) {
|
||||
// fall back to cookies
|
||||
// i guess this might break if someone has cookies and localstorage disabled but people with first party cookies blocked are used to things breaking anyway ;)
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function theme_get() {
|
||||
// true if night theme
|
||||
if (use_local_storage) {
|
||||
// weakly typed languages. not even once.
|
||||
return localStorage.getItem('theme') == 'true';
|
||||
} else {
|
||||
return document.cookie == 'theme=true';
|
||||
}
|
||||
}
|
||||
|
||||
function theme_set(night) {
|
||||
if (use_local_storage) {
|
||||
localStorage.setItem('theme', night);
|
||||
} else {
|
||||
document.cookie = `theme=${night}`;
|
||||
}
|
||||
}
|
||||
|
||||
function update_page_theme() {
|
||||
let night = theme_get();
|
||||
let html_element = document.getElementsByTagName('html')[0];
|
||||
|
||||
if (night) {
|
||||
html_element.classList.add('night');
|
||||
} else {
|
||||
html_element.classList.remove('night');
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('DOMContentLoaded', (event) => {
|
||||
update_page_theme();
|
||||
dgel('theme-control').onclick = function () {
|
||||
theme_set(!theme_get());
|
||||
update_page_theme();
|
||||
};
|
||||
});
|
||||
|
|
@ -1,6 +1,9 @@
|
|||
html {
|
||||
background: #fafafa;
|
||||
}
|
||||
html.night {
|
||||
background: #333;
|
||||
}
|
||||
body {
|
||||
font-family: "Roboto", sans-serif;
|
||||
display: flex;
|
||||
|
|
@ -8,6 +11,9 @@ body {
|
|||
min-height: 100vh;
|
||||
margin: 0 0 15px 0;
|
||||
}
|
||||
html.night body {
|
||||
color: white;
|
||||
}
|
||||
#main {
|
||||
flex-grow: 1;
|
||||
width: 80%;
|
||||
|
|
@ -49,10 +55,8 @@ a {
|
|||
color: mediumpurple;
|
||||
text-decoration: none;
|
||||
}
|
||||
a.current {
|
||||
background: linear-gradient(to bottom, white, #fafafa);
|
||||
color: mediumpurple;
|
||||
pointer-events: none;
|
||||
html.night a {
|
||||
color: #a9f;
|
||||
}
|
||||
|
||||
#projects, #screenshots, .donation-methods {
|
||||
|
|
@ -81,7 +85,10 @@ a.current {
|
|||
z-index: -1;
|
||||
position: absolute;
|
||||
background: linear-gradient(to bottom right, #00000003, #0000000c);
|
||||
|
||||
}
|
||||
html.night .project::before,
|
||||
html.night .donation-method::before {
|
||||
background: linear-gradient(to bottom right, #ffffff03, #ffffff0c);
|
||||
}
|
||||
.project .footer, .donation-method .footer {
|
||||
position: absolute;
|
||||
|
|
@ -89,7 +96,8 @@ a.current {
|
|||
margin: 10px 0;
|
||||
font-style: italic;
|
||||
}
|
||||
.project .footer a:not(:last-child)::after {
|
||||
.project .footer a:not(:last-child)::after,
|
||||
.subheading-links a:not(:last-child)::after {
|
||||
content: " - ";
|
||||
}
|
||||
.project h2, .donation-method h2 {
|
||||
|
|
@ -116,6 +124,9 @@ header {
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
html.night header {
|
||||
background: #555;
|
||||
}
|
||||
header span {
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
@ -125,9 +136,37 @@ header a {
|
|||
padding: 5px 15px;
|
||||
transition: 0.2s all;
|
||||
}
|
||||
html.night header a {
|
||||
color: white;
|
||||
}
|
||||
header a.current {
|
||||
background: linear-gradient(to bottom, white, #fafafa);
|
||||
color: mediumpurple;
|
||||
pointer-events: none;
|
||||
}
|
||||
html.night header a.current {
|
||||
background: linear-gradient(to bottom, #282828, #333);
|
||||
}
|
||||
header a:hover {
|
||||
background-color: #fff8;
|
||||
}
|
||||
html.night header a:hover {
|
||||
background-color: #0008;
|
||||
}
|
||||
|
||||
#theme-control {
|
||||
color: white;
|
||||
border: thin white solid;
|
||||
border-radius: 2px;
|
||||
padding: 2px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#theme-control::before {
|
||||
content: "Theme: Day";
|
||||
}
|
||||
html.night #theme-control::before {
|
||||
content: "Theme: Night";
|
||||
}
|
||||
|
||||
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
|
||||
#main {
|
||||
|
|
|
|||
Loading…
Reference in a new issue