diff --git a/config-dist.php b/config-dist.php
index 3718c1c7..715a3484 100644
--- a/config-dist.php
+++ b/config-dist.php
@@ -36,6 +36,7 @@ DefaultUserSetting('night_mode_enabled', false); // If night mode is enabled alw
 DefaultUserSetting('auto_night_mode_enabled', false); // If night mode is enabled automatically when inside a given time range (see the two settings below)
 DefaultUserSetting('auto_night_mode_time_range_from', "20:00"); // Format HH:mm
 DefaultUserSetting('auto_night_mode_time_range_to', "07:00"); // Format HH:mm
+DefaultUserSetting('auto_night_mode_time_range_goes_over_midnight', true); // If the time range above goes over midnight
 
 # If the page should be automatically reloaded when there was
 # an external change
diff --git a/localization/de.php b/localization/de.php
index aadbc31e..4346acfc 100644
--- a/localization/de.php
+++ b/localization/de.php
@@ -249,6 +249,14 @@ return array(
 	'Already expired' => 'Bereits abgelaufen',
 	'Due soon' => 'Bald fällig',
 	'Overdue' => 'Überfällig',
+	'View settings' => 'xxx',
+	'Auto reload on external changes' => 'Autom. akt. bei externen Änderungen',
+	'Enable night mode' => 'Nachtmodus aktivieren',
+	'Auto enable in time range' => 'Autom. akt. in diesem Zeitraum',
+	'From' => 'Von',
+	'in format' => 'im Format',
+	'To' => 'Bis',
+	'Time range goes over midnight' => 'Zeitraum geht über Mitternacht',
 	
 	//Constants
 	'manually' => 'Manuell',
diff --git a/public/js/grocy_nightmode.js b/public/js/grocy_nightmode.js
index 05ccba79..45c9e67c 100644
--- a/public/js/grocy_nightmode.js
+++ b/public/js/grocy_nightmode.js
@@ -16,7 +16,74 @@ $("#auto-night-mode-enabled").on("change", function()
 	var value = $(this).is(":checked");
 	$("#auto-night-mode-time-range-from").prop("readonly", !value);
 	$("#auto-night-mode-time-range-to").prop("readonly", !value);
+
+	if (!value && !BoolVal(Grocy.UserSettings.night_mode_enabled))
+	{
+		$("body").removeClass("night-mode");
+	}
+});
+
+$(document).on("keyup", "#auto-night-mode-time-range-from, #auto-night-mode-time-range-to", function()
+{
+	var value = $(this).val();
+	var valueIsValid = moment(value, "HH:mm", true).isValid();
+	
+	if (valueIsValid)
+	{
+		$(this).removeClass("bg-danger");
+	}
+	else
+	{
+		$(this).addClass("bg-danger");
+	}
+
+	CheckNightMode();
+});
+
+$("#auto-night-mode-time-range-goes-over-midgnight").on("change", function()
+{
+	CheckNightMode();
 });
 
 $("#night-mode-enabled").prop("checked", Grocy.NightModeEnabled);
 $("#auto-night-mode-enabled").prop("checked", Grocy.UserSettings.auto_night_mode_enabled);
+$("#auto-night-mode-time-range-goes-over-midgnight").prop("checked", Grocy.UserSettings.auto_night_mode_time_range_goes_over_midnight);
+$("#auto-night-mode-enabled").trigger("change");
+$("#auto-night-mode-time-range-from").val(Grocy.UserSettings.auto_night_mode_time_range_from);
+$("#auto-night-mode-time-range-from").trigger("keyup");
+$("#auto-night-mode-time-range-to").val(Grocy.UserSettings.auto_night_mode_time_range_to);
+$("#auto-night-mode-time-range-to").trigger("keyup");
+
+function CheckNightMode()
+{
+	if (!Grocy.UserSettings.auto_night_mode_enabled)
+	{
+		return;
+	}
+
+	var start = moment(Grocy.UserSettings.auto_night_mode_time_range_from, "HH:mm", true);
+	var end = moment(Grocy.UserSettings.auto_night_mode_time_range_to, "HH:mm", true);
+	var now = moment();
+
+	if (!start.isValid() || !end.isValid)
+	{
+		return;
+	}
+
+	if (BoolVal(Grocy.UserSettings.auto_night_mode_time_range_goes_over_midnight))
+	{
+		end.add(1, "day");
+	}
+
+	if (start.isSameOrBefore(now) && end.isSameOrAfter(now)) // We're INSIDE of night mode time range
+	{
+		$("body").addClass("night-mode");
+	}
+	else // We're OUTSIDE of night mode time range
+	{
+		$("body").removeClass("night-mode");
+	}
+}
+CheckNightMode();
+//setInterval(CheckNightMode, 60000);
+setInterval(CheckNightMode, 4000);
diff --git a/views/layout/default.blade.php b/views/layout/default.blade.php
index 34f2b45e..8ed1ab58 100644
--- a/views/layout/default.blade.php
+++ b/views/layout/default.blade.php
@@ -231,6 +231,12 @@
 								<input type="text" class="form-control my-1 user-setting-control" readonly id="auto-night-mode-time-range-from" placeholder="{{ $L('From') }} ({{ $L('in format') }} HH:mm)" data-setting-key="auto_night_mode_time_range_from">
 								<input type="text" class="form-control user-setting-control" readonly id="auto-night-mode-time-range-to" placeholder="{{ $L('To') }} ({{ $L('in format') }} HH:mm)" data-setting-key="auto_night_mode_time_range_to">
 							</div>
+							<div class="form-check mt-1">
+								<input class="form-check-input user-setting-control" type="checkbox" id="auto-night-mode-time-range-goes-over-midgnight" data-setting-key="auto_night_mode_time_range_goes_over_midnight">
+								<label class="form-check-label" for="auto-night-mode-time-range-goes-over-midgnight">
+									{{ $L('Time range goes over midnight') }}
+								</label>
+							</div>
 						</div>
 					</div>
 				</li>