diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js
index ebc08c1..42584bc 100644
--- a/resources/assets/js/app.js
+++ b/resources/assets/js/app.js
@@ -4,6 +4,7 @@ require('./base-setup')
 require('./modules/block-collapse')
 require('./modules/flash-messages')
 require('./modules/form-autoalias')
+require('./modules/dark-mode')
 require('./vue-init')
 
 $(function () {
diff --git a/resources/assets/js/modules/dark-mode.js b/resources/assets/js/modules/dark-mode.js
new file mode 100644
index 0000000..d955b00
--- /dev/null
+++ b/resources/assets/js/modules/dark-mode.js
@@ -0,0 +1,35 @@
+$(function () {
+  // theme switcher without reloading
+
+  let themeStyle = $('#theme-style');
+  const lightURL = themeStyle.data('light-url');
+  const darkURL = themeStyle.data('dark-url');
+  const navbar = $('.page-navbar');
+  const logo = $('#navbar-logo');
+
+  window.toggleDarkMode = function () {
+    let newStyle = document.createElement('link');
+    newStyle.rel = 'stylesheet';
+    if (themeStyle.attr('href') === lightURL) {
+      newStyle.href = darkURL;
+      navbar.removeClass('navbar-light');
+      navbar.addClass('navbar-dark');
+      logo.attr('src', logo.data('src-dark'));
+
+      document.cookie = "dark_mode=1";
+    } else {
+      newStyle.href = lightURL;
+      navbar.removeClass('navbar-dark');
+      navbar.addClass('navbar-light');
+      logo.attr('src', logo.data('src-light'));
+
+      document.cookie = "dark_mode=0;expires=" + new Date().toUTCString();
+    }
+
+    // remove old css after new css has loaded to prevent FOUC
+    let oldThemeStyle = themeStyle;
+    themeStyle = $(newStyle);
+    themeStyle.on('load', () => oldThemeStyle.remove());
+    $(document.head).append(themeStyle);
+  };
+});