diff --git a/files/templates/CHRISTMAS/mobile_navigation_bar.html b/files/templates/CHRISTMAS/mobile_navigation_bar.html
index 40236da707..4cf43d6031 100644
--- a/files/templates/CHRISTMAS/mobile_navigation_bar.html
+++ b/files/templates/CHRISTMAS/mobile_navigation_bar.html
@@ -1,6 +1,6 @@
 <div class="container inline-flex sm:hidden">
 
-	<div class="z-100 fixed shadow-sm bottom-0 w-full dark:bg-none bg-gradient-to-t from-gray-200 to-gray-100 dark:bg-gray-700 border-t border-gray-300 dark:border-gray-900 px-4 py-3" id="mobile-bottom-navigation-bar" style="transition: transform cubic-bezier(0, 0, 0.2, 1) 220ms;">
+	<div class="z-100 fixed shadow-sm bottom-0 w-full dark:bg-none bg-gradient-to-t from-gray-200 to-gray-100 dark:bg-gray-700 border-t border-gray-300 dark:border-none px-4 py-3" id="mobile-bottom-navigation-bar" style="transition: transform cubic-bezier(0, 0, 0.2, 1) 220ms;">
 
 		<ul class="flex flex-nowrap justify-around text-shadow mb-0">
 			<li>
diff --git a/files/templates/CHRISTMAS/settings.html b/files/templates/CHRISTMAS/settings.html
index 72bcc03a68..a15811ee4e 100644
--- a/files/templates/CHRISTMAS/settings.html
+++ b/files/templates/CHRISTMAS/settings.html
@@ -1,5 +1,11 @@
+ {% if v and v.theme2 %}
+ 	{% set theme = v.theme2 %}
+ {% else %}
+ 	{% set theme = 'theme-iron dark' %}
+ {% endif %}
+
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="{{ theme }}">
 <head>
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
@@ -57,13 +63,7 @@
 	</style>
 </head>
 
-{% if v and v.theme2 %}
- 	{% set theme = v.theme2 %}
- {% else %}
- 	{% set theme = 'theme-iron dark' %}
- {% endif %}
-
- <body class="{{ theme }} overflow-hidden overflow-y-auto sm:overflow-y-none antialiased bg-cover bg-center bg-gray-500 text-black dark:bg-gray-700 dark:text-gray-100">
+ <body class="overflow-hidden overflow-y-auto sm:overflow-y-none antialiased bg-cover bg-center bg-gray-500 text-black dark:bg-gray-700 dark:text-gray-100">
 
 	{% include "CHRISTMAS/header-tw.html" %}
 
@@ -217,7 +217,7 @@
 		});
 	</script>
 
-	<script src="/assets/CHRISTMAS/js/mobile_navigation_bar.js?v=200"></script>
+	<script src="/assets/CHRISTMAS/js/mobile_navigation_bar.js?v=207"></script>
 
 	{% if v %}
 		<script>function formkey() {return '{{v.formkey}}';}</script>
@@ -225,13 +225,13 @@
 		<script>
 			var previousTheme = '{{ v.theme2 }}'.split(' ');
 			function changeTheme(theme) {
-				const body = document.body;
-				// if previous selection has a value, remove them from body tag
+				const root = document.documentElement
+				// if previous selection has a value, remove them from root html tag
 				if (previousTheme.length) {
-					previousTheme.map(v => body.classList.toggle(v));
+					previousTheme.map(v => root.classList.toggle(v));
 				}
-				// toggle classes in body tag
-				theme.map(v => body.classList.toggle(v));
+				// toggle classes in root html tag
+				theme.map(v => root.classList.toggle(v));
 				// Set global previous selection to current selection
 				previousTheme = theme;
 			}
