diff --git a/includes/Hooks.php b/includes/Hooks.php
index ac8609f..92dc638 100644
--- a/includes/Hooks.php
+++ b/includes/Hooks.php
@@ -87,6 +87,27 @@ class NextBestNetworkHooks {
 	 */
 	public static function onBeforePageDisplay( OutputPage $out, Skin $skin ) {
 		if( $skin->getSkinName() == 'nextbestnetwork' ) {
+            $out->addHeadItem( 'nextbestnetwork-darkmode-init', '
+				<script>
+					(function() {
+						const getStoredTheme = () => localStorage.getItem("theme");
+						const getPreferredTheme = () => {
+							const storedTheme = getStoredTheme();
+							if (storedTheme) return storedTheme;
+							return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+						};
+						const setTheme = theme => {
+							if (theme === "auto") {
+								document.documentElement.setAttribute("data-bs-theme", window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
+							} else {
+								document.documentElement.setAttribute("data-bs-theme", theme);
+							}
+						};
+						setTheme(getPreferredTheme());
+					})();
+				</script>
+			' );
+
 			$config = \MediaWiki\MediaWikiServices::getInstance()->getConfigFactory()->makeConfig( 'nextbestnetwork' );
 
 			$styles = [];
diff --git a/resources/styles/nextbestnetwork/_loginext.scss b/resources/styles/nextbestnetwork/_loginext.scss
index 2b5c698..71c02c2 100644
--- a/resources/styles/nextbestnetwork/_loginext.scss
+++ b/resources/styles/nextbestnetwork/_loginext.scss
@@ -33,4 +33,4 @@
 .dropdown-menu > li#tw-createaccount > a:focus {
   color:#000;
   background-color:transparent;
-}
+}
\ No newline at end of file