From 8cbded79db4b9b5848151ed7cec1be1541262079 Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Wed, 10 Apr 2019 23:29:45 +0200
Subject: [PATCH] add dynamic theme switcher js utility

---
 templates/default-layout.julius | 27 +++++++++++++++++++++++++++
 templates/profile.julius        | 24 ++++++++++++++++++++++++
 2 files changed, 51 insertions(+)
 create mode 100644 templates/profile.julius

diff --git a/templates/default-layout.julius b/templates/default-layout.julius
index 27a220a02..6c5e8bfc1 100644
--- a/templates/default-layout.julius
+++ b/templates/default-layout.julius
@@ -49,3 +49,30 @@ if (I18n) {
 document.addEventListener('DOMContentLoaded', function() {
   setupDatepicker(document.body);
 });
+
+/**
+ * The following code should be moved to profile.julius as soon as the widget file is actually used.
+ */
+(function() {
+  'use strict';
+
+  var DEFAULT_THEME = 'theme--default';
+
+  document.addEventListener('DOMContentLoaded', function() {
+
+    var themeSwitcher = document.querySelector('#theme-select');
+    var currentTheme = DEFAULT_THEME;
+
+    if (themeSwitcher) {
+      currentTheme = 'theme--' + themeSwitcher.value;
+      themeSwitcher.addEventListener('input', function() {
+
+        var desiredTheme = 'theme--' + themeSwitcher.value;
+        document.body.classList.remove(currentTheme);
+        document.body.classList.add(desiredTheme);
+        currentTheme = desiredTheme;
+      });
+    }
+  });
+
+})();
diff --git a/templates/profile.julius b/templates/profile.julius
new file mode 100644
index 000000000..9e125f982
--- /dev/null
+++ b/templates/profile.julius
@@ -0,0 +1,24 @@
+
+(function() {
+  'use strict';
+
+  var DEFAULT_THEME = 'theme--default';
+
+  document.addEventListener('DOMContentLoaded', function() {
+
+    var themeSwitcher = document.querySelector('#theme-select');
+    var currentTheme = DEFAULT_THEME;
+
+    if (themeSwitcher) {
+      currentTheme = 'theme--' + themeSwitcher.value;
+      themeSwitcher.addEventListener('input', function() {
+
+        var desiredTheme = 'theme--' + themeSwitcher.value;
+        document.body.classList.remove(currentTheme);
+        document.body.classList.add(desiredTheme);
+        currentTheme = desiredTheme;
+      });
+    }
+  });
+
+})();