Browse Source

add light/dark theme toggle

master
Lynne Megido 1 year ago
parent
commit
2be750d5c6
Signed by: lynnesbian GPG Key ID: F0A184B5213D9F90
  1. 8
      _includes/header.html
  2. 1
      _layouts/default.html
  3. 57
      assets/script.js
  4. 51
      assets/style.css

8
_includes/header.html

@ -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>

1
_layouts/default.html

@ -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

@ -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();
};
});

51
assets/style.css

@ -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…
Cancel
Save