diff --git a/public/css/grocy_night_mode.css b/public/css/grocy_night_mode.css
new file mode 100644
index 00000000..b89b816c
--- /dev/null
+++ b/public/css/grocy_night_mode.css
@@ -0,0 +1,186 @@
+.night-mode body {
+	color: #c1c1c1;
+}
+
+.night-mode .table-info,
+.night-mode .table-info > td,
+.night-mode .table-info > th {
+	background-color: #07373f;
+}
+
+.night-mode .btn-info {
+	color:#c1c1c1;
+	background-color:#07373f;
+	border-color:#07373f;
+}
+
+.night-mode .btn-warning {
+	color:#c1c1c1;
+	background-color:#473604;
+	border-color:#473604;
+}
+
+.night-mode .btn-danger {
+	color:#c1c1c1;
+	background-color:#471116;
+	border-color:#471116;
+}
+
+.night-mode .btn-success {
+	color:#c1c1c1;
+	background-color:#0d3a18;
+	border-color:#0d3a18;
+}
+
+.night-mode .form-control {
+	color: #495057;
+	background-color: #333131;
+	border: 1px solid #ced4da;
+}
+
+.night-mode .content-wrapper {
+	background: #333131;
+}
+
+.night-mode table.dataTable tr.group td {
+	font-weight: bold;
+	background-color: #333131;
+}
+
+.night-mode .table-danger,
+.night-mode .table-danger > td,
+.night-mode .table-danger > th {
+	background-color: #471116;
+}
+
+.night-mode .table-warning,
+.night-mode .table-warning > td,
+.night-mode .table-warning > th {
+	background-color: #473604;
+}
+
+.night-mode .bg-warning {
+	background-color: #473604!important;
+}
+
+.night-mode .bg-info {
+	background-color: #07373f!important;
+}
+
+.night-mode .bg-danger {
+	background-color: #471116!important;
+}
+
+.night-mode .form-control:focus {
+	color: #495057;
+	background-color: #333131;
+	border-color: #80bdff;
+}
+
+.night-mode .dropdown-item:focus,
+.night-mode .dropdown-item:hover {
+	color: #16181b;
+	background-color: #333131;
+}
+
+.night-mode .dropdown-item {
+	color: #7c7b6f;
+	background-color: #333131;
+}
+
+.night-mode .list-group-item {
+	background-color: #333131;
+}
+
+.night-mode .modal-content {
+	background-color: #1a1919;
+	border: 1px solid rgba(186, 189, 189, 0.66);
+}
+
+.night-mode .modal-footer {
+	border-top: 1px solid #6f7173;
+}
+
+.night-mode .container-fluid {
+	background-color: #333131;
+}
+
+.night-mode a.discrete-link:hover {
+	color: #16354f !important;
+	text-decoration: none !important;
+	background-color: #333131;
+}
+
+.night-mode a.discrete-link:focus {
+	color: #3a0b0f !important;
+	background-color: #333131;
+}
+
+.night-mode .card {
+	border: 2px solid;
+	border-color: #383838;
+	background-color: #333131;
+}
+
+.night-mode .card-header {
+	background-color: #333131;
+}
+
+.night-mode #mainNav {
+	background-color: #333131 !important;
+	border-bottom: 2px solid !important;
+	border-color: #383838 !important;
+}
+
+.night-mode .navbar-sidenav,
+.night-mode .sidenav-second-level {
+	background-color: #333131 !important;
+	border-right: 2px solid !important;
+	border-color: #383838 !important;
+}
+
+.night-mode .navbar-nav .dropdown-menu {
+	background-color: #333131 !important;
+}
+
+.night-mode .navbar-nav .dropdown-divider {
+	border-color: #383838 !important;
+	background-color: #333131;
+}
+
+.night-mode .sidenav-toggler {
+	background-color: #383838 !important;
+	border-right: 2px solid !important;
+	border-color: #383838 !important;
+}
+
+.night-mode .navbar-sidenav > li:hover,
+.night-mode .sidenav-second-level > li:hover,
+.night-mode .navbar-nav .dropdown-item:hover {
+	box-shadow: inset 5px 0 0 #112a3f !important;
+	background-color: #383838 !important;
+}
+
+.night-mode .navbar-sidenav > li > a:focus,
+.night-mode .sidenav-second-level > li > a:focus,
+.night-mode .navbar-nav .dropdown-item:focus {
+	box-shadow: inset 5px 0 0 #350a0f !important;
+	background-color: #383838 !important;
+}
+
+.night-mode .active-page {
+	box-shadow: inset 5px 0 0 #350a0f !important;
+	background-color: #383838 !important;
+}
+
+.night-mode .toast-success {
+		background-color: #092810;
+}
+
+.night-mode .toast-error {
+background-color: #471015;
+}
+
+.night-mode .typeahead .active {
+	background-color: #333131;
+}
diff --git a/public/js/grocy_nightmode.js b/public/js/grocy_nightmode.js
new file mode 100644
index 00000000..ab357352
--- /dev/null
+++ b/public/js/grocy_nightmode.js
@@ -0,0 +1,20 @@
+$("#night-mode-enabled").on("change", function()
+{
+	var value = $(this).is(":checked");
+	window.localStorage.setItem("night_mode", value);
+
+	if (value)
+	{
+		$("body").addClass("night-mode");
+	}
+	else
+	{
+		$("body").removeClass("night-mode");
+	}
+});
+
+if (window.localStorage.getItem("night_mode") === "true")
+{
+	$("body").addClass("night-mode");
+	$("#night-mode-enabled").prop("checked", true);
+}
diff --git a/views/layout/default.blade.php b/views/layout/default.blade.php
index 3d9b0091..1a408c7f 100644
--- a/views/layout/default.blade.php
+++ b/views/layout/default.blade.php
@@ -26,6 +26,7 @@
 	<link href="{{ $U('/node_modules/tempusdominus-bootstrap-4/build/css/tempusdominus-bootstrap-4.min.css?v=', true) }}{{ $version }}" rel="stylesheet">
 	<link href="{{ $U('/components_unmanaged/noto-sans-v6-latin/noto-sans-v6-latin.css?v=', true) }}{{ $version }}" rel="stylesheet">
 	<link href="{{ $U('/css/grocy.css?v=', true) }}{{ $version }}" rel="stylesheet">
+	<link href="{{ $U('/css/grocy_night_mode.css?v=', true) }}{{ $version }}" rel="stylesheet">
 	@stack('pageStyles')
 
 	@if(file_exists(GROCY_DATAPATH . '/custom_css.html'))
@@ -190,6 +191,15 @@
 					<div class="dropdown-menu dropdown-menu-right">
 						<a class="dropdown-item logout-button discrete-link" href="{{ $U('/logout') }}"><i class="fas fa-sign-out-alt"></i>&nbsp;{{ $L('Logout') }}</a>
 						<div class="dropdown-divider"></div>
+						<div class="dropdown-item">
+							<div class="form-check">
+								<input class="form-check-input" type="checkbox" id="night-mode-enabled">
+								<label class="form-check-label" for="night-mode-enabled">
+									{{ $L('Enable night mode') }}
+								</label>
+							</div>
+						</div>
+						<div class="dropdown-divider"></div>
 						<a class="dropdown-item logout-button discrete-link" href="{{ $U('/user/' . GROCY_USER_ID . '?changepw=true') }}"><i class="fas fa-key"></i>&nbsp;{{ $L('Change password') }}</a>
 					</div>
 				</li>
@@ -270,6 +280,7 @@
 	<script src="{{ $U('/js/extensions.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/js/grocy.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/js/grocy_dbchangedhandling.js?v=', true) }}{{ $version }}"></script>
+	<script src="{{ $U('/js/grocy_nightmode.js?v=', true) }}{{ $version }}"></script>
 	@stack('pageScripts')
 	@stack('componentScripts')
 	<script src="{{ $U('/viewjs', true) }}/@yield('viewJsName').js?v={{ $version }}"></script>