🍴 Merge pull request #38 from SwiddisZwei/master

Disable CSS transition during initial theme change

app.css

@@ -56,6 +56,13 @@
   transition: 0.2s ease-in-out;
 }
 
+.notransition {
+  -webkit-transition: none;
+  -moz-transition: none;
+  -o-transition: none;
+  transition: none;
+}
+
 .withImageBackground {
   background-image: var(--imgcol), var(--imgbg);
   background-size: cover;

assets/js/greeting.js

@@ -16,7 +16,7 @@ const gree3 = `${CONFIG.greetingAfternoon}\xa0`;
 const gree4 = `${CONFIG.greetingEvening}\xa0`;
 
 // Define the hours of the greetings
-if (hour >= 23 && hour < 5) {
+if (hour >= 23 || hour < 5) {
   document.getElementById('greetings').innerText = gree1 + name;
 } else if (hour >= 6 && hour < 12) {
   document.getElementById('greetings').innerText = gree2 + name;

assets/js/theme.js

@@ -25,7 +25,11 @@ const disableDark = () => {
 
 //Toggle theme
 if (darkTheme === 'enabled') {
+  // Temporarily disable transitions when changing theme on startup
+  document.body.classList.add('notransition');
   enableDark();
+  document.body.offsetHeight; // Trigger reflow to flush CSS changes
+  document.body.classList.remove('notransition');
 } else {
   disableDark();
 }