diff --git a/resources/js/app.js b/resources/js/app.js
index c689b7bdf..b44019f19 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -1,5 +1,42 @@
import './../../vendor/power-components/livewire-powergrid/dist/powergrid';
+/**
+ * Dark mode toggle
+ */
+document.addEventListener('alpine:init', () => {
+ Alpine.store('darkMode', {
+ mode: 'light',
+
+ init() {
+ if (localStorage.theme === 'dark') { this.dark() }
+ else if (localStorage.theme === 'light') { this.light() }
+ else { this.system() }
+ },
+
+ dark() {
+ document.documentElement.classList.add('dark')
+ localStorage.theme = 'dark'
+ this.mode = 'dark'
+ },
+ system() {
+ if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+ document.documentElement.classList.add('dark')
+ }
+ else {
+ document.documentElement.classList.remove('dark')
+ }
+ localStorage.theme = 'system'
+ this.mode = 'system'
+ },
+ light() {
+ document.documentElement.classList.remove('dark')
+ localStorage.theme = 'light'
+ this.mode = 'light'
+ }
+ })
+})
+
+
/**
* Copy short url to clipboard
*
diff --git a/resources/views/components/theme-toggle.blade.php b/resources/views/components/theme-toggle.blade.php
new file mode 100644
index 000000000..5a48ea612
--- /dev/null
+++ b/resources/views/components/theme-toggle.blade.php
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+