lynnesbian/lynnesbian.space
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

add a cool transition effect when changing themes

Browse source
This commit is contained in:
Lynne Megido 2020-03-17 01:28:27 +10:00
parent 2be750d5c6
commit 512c94870c
Signed by: lynnesbian
GPG key ID: F0A184B5213D9F90
2 changed files with 13 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
assets/script.js
View file

@ -1,4 +1,6 @@
var use_local_storage = storage_check(); var use_local_storage = storage_check();
var html_element = null;
function dgel(id) { function dgel(id) {
return document.getElementById(id); return document.getElementById(id);
@ -39,7 +41,6 @@ function theme_set(night) {
function update_page_theme() { function update_page_theme() {
let night = theme_get(); let night = theme_get();
let html_element = document.getElementsByTagName('html')[0];
if (night) { if (night) {
html_element.classList.add('night'); html_element.classList.add('night');
@ -49,8 +50,13 @@ function update_page_theme() {
} }
window.addEventListener('DOMContentLoaded', (event) => { window.addEventListener('DOMContentLoaded', (event) => {
html_element = document.getElementsByTagName('html')[0];
update_page_theme(); update_page_theme();
dgel('theme-control').onclick = function () { dgel('theme-control').onclick = function () {
// only add the 'ready' class upon clicking the button
// this avoids the page transitioning every time you change the page with night theme on
html_element.classList.add('ready');
theme_set(!theme_get()); theme_set(!theme_get());
update_page_theme(); update_page_theme();
}; };

7
assets/style.css
View file

@ -4,6 +4,12 @@ html {
html.night { html.night {
background: #333; background: #333;
} }
html.ready,
html.ready body,
html.ready a,
html.ready header a {
transition: 0.2s all;
}
body { body {
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
display: flex; display: flex;
@ -134,7 +140,6 @@ header a {
color: white; color: white;
display: inline-block; display: inline-block;
padding: 5px 15px; padding: 5px 15px;
transition: 0.2s all;
} }
html.night header a { html.night header a {
color: white; color: white;