Recipe : Adding a 3rd party Javascript package

app/assets/app.js

@@ -2,4 +2,5 @@
 require('@userfrosting/theme-adminlte');
 
 // ------ Custom Code ------
-// Add you own code below
+// Add you own code below
+require('./darkreader.js')

app/assets/darkreader.js

@@ -0,0 +1,24 @@
+const DarkReader = require('darkreader/darkreader');
+
+// Function used to toggle the state
+function toggleDarkMode() {
+    if (DarkReader.isEnabled()) {
+        DarkReader.disable();
+        localStorage.setItem('UF-DarkMode-enabled', false);
+    } else {
+        DarkReader.enable();
+        localStorage.setItem('UF-DarkMode-enabled', true);
+    }
+}
+
+// Init when document is ready
+$(function() { 
+    // Init event listener for button
+    $('.darkmode-btn').on( "click", function() {
+        toggleDarkMode();
+    });
+
+    // Set initial state as saved in local storage 
+    const enabled = localStorage.getItem('UF-DarkMode-enabled');
+    if (enabled === "true") { DarkReader.enable(); }
+});

app/templates/navigation/main-nav.html.twig

@@ -0,0 +1,8 @@
+{% extends '@adminlte-theme/navigation/main-nav.html.twig' %}
+
+{% block secondary_nav %}
+<li>
+    <a href="#" class="nav-highlight darkmode-btn"><i class="fa-regular fa-lightbulb"></i></a>
+</li>
+{{ parent() }}
+{% endblock %}

app/templates/navigation/navbar.html.twig

@@ -0,0 +1,7 @@
+{% extends '@admin-sprinkle/navigation/navbar.html.twig' %}
+
+{% block dashboard_navbar_extra %}
+<li>
+    <a href="#" class="nav-highlight darkmode-btn"><i class="fa-regular fa-lightbulb"></i></a>
+</li>
+{% endblock %}

package.json

@@ -1,7 +1,8 @@
 {
     "dependencies": {
         "@userfrosting/sprinkle-admin": "~5.1.0",
-        "@userfrosting/theme-adminlte": "~5.1.0"
+        "@userfrosting/theme-adminlte": "~5.1.0",
+        "darkreader": "^4.9.83"
     },
     "devDependencies": {
         "@symfony/webpack-encore": "^4.4.0",