Browse Source

add a cool transition effect when changing themes

master
Lynne Megido 3 months ago
parent
commit
512c94870c
Signed by: lynnesbian <lynne@bune.city> GPG Key ID: F0A184B5213D9F90
2 changed files with 13 additions and 2 deletions
  1. +7
    -1
      assets/script.js
  2. +6
    -1
      assets/style.css

+ 7
- 1
assets/script.js View File

@@ -1,4 +1,6 @@
var use_local_storage = storage_check();
var html_element = null;


function dgel(id) {
return document.getElementById(id);
@@ -39,7 +41,6 @@ function theme_set(night) {

function update_page_theme() {
let night = theme_get();
let html_element = document.getElementsByTagName('html')[0];

if (night) {
html_element.classList.add('night');
@@ -49,8 +50,13 @@ function update_page_theme() {
}

window.addEventListener('DOMContentLoaded', (event) => {
html_element = document.getElementsByTagName('html')[0];
update_page_theme();

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


+ 6
- 1
assets/style.css View File

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


Loading…
Cancel
Save