diff --git a/allianceauth/static/css/auth-base.css b/allianceauth/static/css/auth-base.css
index 73400a1f..32f03efd 100644
--- a/allianceauth/static/css/auth-base.css
+++ b/allianceauth/static/css/auth-base.css
@@ -53,22 +53,34 @@ ul.list-group.list-group-horizontal > li.list-group-item {
 .table-aa > thead > tr > th{
     border-bottom: 1px solid #f2f2f2;
 }
-.table-aa > thead > tr > th{    
+.table-aa > thead > tr > th{
     vertical-align: middle;
 }
 .table-aa > tbody > tr > td{
     border-bottom: 1px solid #f2f2f2;
 }
-.table-aa > tbody > tr > td {    
+.table-aa > tbody > tr > td {
     vertical-align: middle;
 }
-.table-aa > tbody > tr:last-child {    
+.table-aa > tbody > tr:last-child {
     border-bottom: none;
 }
 
+/* highlight active menu items
+--------------------------------------------------------------------------------------------------------------------- */
+@media all {
+    .template-light-mode .nav-pills > li > a.active {
+        background-color: rgb(236, 240, 241);
+    }
+
+    .template-dark-mode .nav-pills > li > a.active {
+        background-color: rgb(48, 48, 48);
+    }
+}
+
 /* Small devices (tablets, 768px and up) */
 @media (min-width: 768px) {
-    
+
     /* class for vertically aligning columns in a bootstrap row */
     .row.vertical-flexbox-row2 {
         display:  -webkit-box;
@@ -77,7 +89,7 @@ ul.list-group.list-group-horizontal > li.list-group-item {
         display:         flex;
         flex-wrap: wrap;
       }
-      
+
       .row.vertical-flexbox-row2 > [class*='col-'] {
         display: flex;
         flex-direction: column;
@@ -89,4 +101,4 @@ ul.list-group.list-group-horizontal > li.list-group-item {
     .button-wrapper .btn {
         margin-bottom:5px;
     }
-}
\ No newline at end of file
+}
diff --git a/allianceauth/templates/allianceauth/base.html b/allianceauth/templates/allianceauth/base.html
index ee7db14d..e976c386 100644
--- a/allianceauth/templates/allianceauth/base.html
+++ b/allianceauth/templates/allianceauth/base.html
@@ -3,52 +3,60 @@
 {% load navactive %}
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="description" content="">
-    <meta name="author" content="">
-    {% include 'allianceauth/icons.html' %}
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta name="description" content="">
+        <meta name="author" content="">
 
-    <title>{% block title %}{% block page_title %}{% endblock page_title %} - Alliance Auth{% endblock title %}</title>
+        {% include 'allianceauth/icons.html' %}
 
-    {% include 'bundles/bootstrap-css.html' %}
-    {% include 'bundles/fontawesome.html' %}
+        <title>{% block title %}{% block page_title %}{% endblock page_title %} - Alliance Auth{% endblock title %}</title>
 
-    <link href="{% static 'css/auth-base.css' %}" type="text/css" rel="stylesheet">
-    {% block extra_css %}{% endblock extra_css %}
-</head>
-<body>
-{% if user.is_authenticated %}
-    <div id="wrapper" class="container">
-        <!-- Navigation -->
-        {% include 'allianceauth/top-menu.html' %}
-        <div class="row" id="site-body-wrapper">
-            {% include 'allianceauth/side-menu.html' %}
-            <div class="col-sm-10">
-                {% if messages %}
-                    <br>
-                    {% for message in messages %}
-                        <div class="alert alert-{{ message.level_tag }}">{{ message }}</div>
-                        {% if not forloop.last %}
+        {% include 'bundles/bootstrap-css.html' %}
+        {% include 'bundles/fontawesome.html' %}
+
+        <link href="{% static 'css/auth-base.css' %}" type="text/css" rel="stylesheet">
+
+        {% block extra_css %}{% endblock extra_css %}
+    </head>
+
+    <body class="{% if NIGHT_MODE %}template-dark-mode{% else %}template-light-mode{% endif %}">
+        {% if user.is_authenticated %}
+            <div id="wrapper" class="container">
+                <!-- Navigation -->
+                {% include 'allianceauth/top-menu.html' %}
+
+                <div class="row" id="site-body-wrapper">
+                    {% include 'allianceauth/side-menu.html' %}
+                    <div class="col-sm-10">
+                        {% if messages %}
                             <br>
+                            {% for message in messages %}
+                                <div class="alert alert-{{ message.level_tag }}">{{ message }}</div>
+                                {% if not forloop.last %}
+                                    <br>
+                                {% endif %}
+                            {% endfor %}
                         {% endif %}
-                    {% endfor %}
-                {% endif %}
-                {% block content %}
-                {% endblock content %}
+
+                        {% block content %}
+                        {% endblock content %}
+                    </div>
+                    <div class="clearfix"></div>
+                </div>
             </div>
-            <div class="clearfix"></div>
-        </div>
-    </div>
-{% endif %}
-{% include 'bundles/bootstrap-js.html' %}
-{% block extra_javascript %}
-{% endblock extra_javascript %}
-<script>
-    {% block extra_script %}
-    {% endblock extra_script %}
-</script>
-</body>
+        {% endif %}
+
+        {% include 'bundles/bootstrap-js.html' %}
+
+        {% block extra_javascript %}
+        {% endblock extra_javascript %}
+
+        <script>
+            {% block extra_script %}
+            {% endblock extra_script %}
+        </script>
+    </body>
 </html>
