diff --git a/docs/documentation/release_notes/topics/26_1_0.adoc b/docs/documentation/release_notes/topics/26_1_0.adoc
new file mode 100644
index 00000000000..53961ad8b10
--- /dev/null
+++ b/docs/documentation/release_notes/topics/26_1_0.adoc
@@ -0,0 +1,10 @@
+= Dark mode enabled for the welcome theme
+
+We've now enabled dark mode support for all the `keycloak` themes. This feature was previously present in the admin console, account console and login, and is now also available in the welcome page. If a user indicates their preference through an operating system setting (e.g. light or dark mode) or a user agent setting, the theme will automatically follow these preferences.
+
+If you are using a custom theme that extends any of the `keycloak` themes and are not yet ready to support dark mode, or have styling conflicts that prevent you from implementing dark mode, you can disable support by adding the following property to your theme:
+
+[source,properties]
+----
+darkMode=false
+----
diff --git a/js/apps/account-ui/maven-resources/theme/keycloak.v3/account/index.ftl b/js/apps/account-ui/maven-resources/theme/keycloak.v3/account/index.ftl
index e0befb22eca..ea568b9116d 100644
--- a/js/apps/account-ui/maven-resources/theme/keycloak.v3/account/index.ftl
+++ b/js/apps/account-ui/maven-resources/theme/keycloak.v3/account/index.ftl
@@ -5,6 +5,7 @@
     <base href="${resourceUrl}/">
     <link rel="icon" type="${properties.favIconType!'image/svg+xml'}" href="${resourceUrl}${properties.favIcon!'/favicon.svg'}">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="color-scheme" content="light${(properties.darkMode)?boolean?then(' dark', '')}">
     <meta name="description" content="${properties.description!'The Account Console is a web-based interface for managing your account.'}">
     <title>${properties.title!'Account Management'}</title>
     <style>
@@ -57,6 +58,25 @@
         }
       }
     </script>
+    <#if properties.darkMode?boolean>
+      <script type="module" async blocking="render">
+          const DARK_MODE_CLASS = "${properties.kcDarkModeClass}";
+          const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+
+          updateDarkMode(mediaQuery.matches);
+          mediaQuery.addEventListener("change", (event) => updateDarkMode(event.matches));
+
+          function updateDarkMode(isEnabled) {
+            const { classList } = document.documentElement;
+
+            if (isEnabled) {
+              classList.add(DARK_MODE_CLASS);
+            } else {
+              classList.remove(DARK_MODE_CLASS);
+            }
+          }
+      </script>
+    </#if>
     <#if !isSecureContext>
       <script type="module" src="${resourceCommonUrl}/vendor/web-crypto-shim/web-crypto-shim.js"></script>
     </#if>
diff --git a/js/apps/account-ui/maven-resources/theme/keycloak.v3/account/theme.properties b/js/apps/account-ui/maven-resources/theme/keycloak.v3/account/theme.properties
index fb2e245ea51..2e80b8fe5b6 100644
--- a/js/apps/account-ui/maven-resources/theme/keycloak.v3/account/theme.properties
+++ b/js/apps/account-ui/maven-resources/theme/keycloak.v3/account/theme.properties
@@ -1,2 +1,5 @@
 parent=base
-deprecatedMode=false
\ No newline at end of file
+deprecatedMode=false
+darkMode=true
+
+kcDarkModeClass=pf-v5-theme-dark
diff --git a/js/apps/account-ui/src/main.tsx b/js/apps/account-ui/src/main.tsx
index f756e540bd2..fc7a509724d 100644
--- a/js/apps/account-ui/src/main.tsx
+++ b/js/apps/account-ui/src/main.tsx
@@ -1,15 +1,12 @@
 import "@patternfly/react-core/dist/styles/base.css";
 import "@patternfly/patternfly/patternfly-addons.css";
 
-import { initializeDarkMode } from "@keycloak/keycloak-ui-shared";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import { i18n } from "./i18n";
 import { routes } from "./routes";
 
-initializeDarkMode();
-
 // Initialize required components before rendering app.
 await i18n.init();
 
diff --git a/js/apps/admin-ui/maven-resources/theme/keycloak.v2/admin/index.ftl b/js/apps/admin-ui/maven-resources/theme/keycloak.v2/admin/index.ftl
index aaba7f9c417..acc7cbcded1 100644
--- a/js/apps/admin-ui/maven-resources/theme/keycloak.v2/admin/index.ftl
+++ b/js/apps/admin-ui/maven-resources/theme/keycloak.v2/admin/index.ftl
@@ -5,6 +5,7 @@
     <base href="${resourceUrl}/">
     <link rel="icon" type="${properties.favIconType!'image/svg+xml'}" href="${resourceUrl}${properties.favIcon!'/favicon.svg'}">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="color-scheme" content="light${(properties.darkMode)?boolean?then(' dark', '')}">
     <meta name="description" content="${properties.description!'The Keycloak Administration Console is a web-based interface for managing Keycloak.'}">
     <title>${properties.title!'Keycloak Administration Console'}</title>
     <style>
@@ -57,6 +58,25 @@
         }
       }
     </script>
+    <#if properties.darkMode?boolean>
+      <script type="module" async blocking="render">
+          const DARK_MODE_CLASS = "${properties.kcDarkModeClass}";
+          const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+
+          updateDarkMode(mediaQuery.matches);
+          mediaQuery.addEventListener("change", (event) => updateDarkMode(event.matches));
+
+          function updateDarkMode(isEnabled) {
+            const { classList } = document.documentElement;
+
+            if (isEnabled) {
+              classList.add(DARK_MODE_CLASS);
+            } else {
+              classList.remove(DARK_MODE_CLASS);
+            }
+          }
+      </script>
+    </#if>
     <#if !isSecureContext>
       <script type="module" src="${resourceCommonUrl}/vendor/web-crypto-shim/web-crypto-shim.js"></script>
     </#if>
diff --git a/js/apps/admin-ui/maven-resources/theme/keycloak.v2/admin/theme.properties b/js/apps/admin-ui/maven-resources/theme/keycloak.v2/admin/theme.properties
index f1dbb7215d4..42faf1768b5 100644
--- a/js/apps/admin-ui/maven-resources/theme/keycloak.v2/admin/theme.properties
+++ b/js/apps/admin-ui/maven-resources/theme/keycloak.v2/admin/theme.properties
@@ -1 +1,4 @@
-parent=base
\ No newline at end of file
+parent=base
+darkMode=true
+
+kcDarkModeClass=pf-v5-theme-dark
diff --git a/js/apps/admin-ui/src/main.tsx b/js/apps/admin-ui/src/main.tsx
index 4219348065b..76c6acb3623 100644
--- a/js/apps/admin-ui/src/main.tsx
+++ b/js/apps/admin-ui/src/main.tsx
@@ -1,7 +1,6 @@
 import "@patternfly/patternfly/patternfly-addons.css";
 import "@patternfly/react-core/dist/styles/base.css";
 
-import { initializeDarkMode } from "@keycloak/keycloak-ui-shared";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { createHashRouter, RouterProvider } from "react-router-dom";
@@ -10,8 +9,6 @@ import { RootRoute } from "./routes";
 
 import "./index.css";
 
-initializeDarkMode();
-
 // Initialize required components before rendering app.
 await i18n.init();
 
diff --git a/js/libs/ui-shared/src/main.ts b/js/libs/ui-shared/src/main.ts
index b4334dc2715..6eb7c5d760a 100644
--- a/js/libs/ui-shared/src/main.ts
+++ b/js/libs/ui-shared/src/main.ts
@@ -93,4 +93,3 @@ export {
 } from "./utils/ErrorBoundary";
 export type { FallbackProps } from "./utils/ErrorBoundary";
 export { OrganizationTable } from "./controls/OrganizationTable";
-export { initializeDarkMode } from "./utils/darkMode";
diff --git a/js/libs/ui-shared/src/utils/darkMode.ts b/js/libs/ui-shared/src/utils/darkMode.ts
deleted file mode 100644
index fb845b36065..00000000000
--- a/js/libs/ui-shared/src/utils/darkMode.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-const DARK_MODE_CLASS = "pf-v5-theme-dark";
-const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-
-function updateDarkMode(isEnabled: boolean) {
-  const { classList } = document.documentElement;
-
-  if (isEnabled) {
-    classList.add(DARK_MODE_CLASS);
-  } else {
-    classList.remove(DARK_MODE_CLASS);
-  }
-}
-
-export function initializeDarkMode() {
-  updateDarkMode(mediaQuery.matches);
-  mediaQuery.addEventListener("change", (event) =>
-    updateDarkMode(event.matches),
-  );
-}
diff --git a/themes/src/main/resources/theme/keycloak.v2/login/template.ftl b/themes/src/main/resources/theme/keycloak.v2/login/template.ftl
index fbf1f71a461..a2a3761a845 100644
--- a/themes/src/main/resources/theme/keycloak.v2/login/template.ftl
+++ b/themes/src/main/resources/theme/keycloak.v2/login/template.ftl
@@ -28,6 +28,7 @@
     <meta charset="utf-8">
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <meta name="robots" content="noindex, nofollow">
+    <meta name="color-scheme" content="light${(properties.darkMode)?boolean?then(' dark', '')}">
 
     <#if properties.meta?has_content>
         <#list properties.meta?split(' ') as meta>
@@ -53,6 +54,25 @@
             }
         }
     </script>
+    <#if properties.darkMode?boolean>
+      <script type="module" async blocking="render">
+          const DARK_MODE_CLASS = "${properties.kcDarkModeClass}";
+          const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+
+          updateDarkMode(mediaQuery.matches);
+          mediaQuery.addEventListener("change", (event) => updateDarkMode(event.matches));
+
+          function updateDarkMode(isEnabled) {
+            const { classList } = document.documentElement;
+
+            if (isEnabled) {
+              classList.add(DARK_MODE_CLASS);
+            } else {
+              classList.remove(DARK_MODE_CLASS);
+            }
+          }
+      </script>
+    </#if>
     <#if properties.scripts?has_content>
         <#list properties.scripts?split(' ') as script>
             <script src="${url.resourcesPath}/${script}" type="text/javascript"></script>
@@ -70,21 +90,6 @@
         checkCookiesAndSetTimer(
             "${url.ssoLoginInOtherTabsUrl?no_esc}"
         );
-
-        const DARK_MODE_CLASS = "pf-v5-theme-dark";
-        const mediaQuery =window.matchMedia("(prefers-color-scheme: dark)");
-        updateDarkMode(mediaQuery.matches);
-        mediaQuery.addEventListener("change", (event) =>
-          updateDarkMode(event.matches),
-        );
-        function updateDarkMode(isEnabled) {
-          const { classList } = document.documentElement;
-          if (isEnabled) {
-            classList.add(DARK_MODE_CLASS);
-          } else {
-            classList.remove(DARK_MODE_CLASS);
-          }
-        }
     </script>
 </head>
 
diff --git a/themes/src/main/resources/theme/keycloak.v2/login/theme.properties b/themes/src/main/resources/theme/keycloak.v2/login/theme.properties
index 02a678e26cf..e90bad0f676 100644
--- a/themes/src/main/resources/theme/keycloak.v2/login/theme.properties
+++ b/themes/src/main/resources/theme/keycloak.v2/login/theme.properties
@@ -4,6 +4,8 @@ import=common/keycloak
 styles=css/styles.css
 stylesCommon=vendor/patternfly-v5/patternfly.min.css vendor/patternfly-v5/patternfly-addons.css
 
+darkMode=true
+
 kcFormGroupClass=pf-v5-c-form__group
 kcFormGroupLabelClass=pf-v5-c-form__group-label
 kcLabelClass=pf-v5-c-form__label
@@ -90,4 +92,6 @@ kcLoginOTPListItemHeaderClass=pf-v5-c-tile__header pf-m-stacked
 kcLoginOTPListItemIconBodyClass=pf-v5-c-tile__icon
 kcLoginOTPListItemIconClass=fa fa-mobile
 kcLoginOTPListItemTitleClass=pf-v5-c-tile__title
-kcLoginOTPListSelectedClass=pf-m-selected
\ No newline at end of file
+kcLoginOTPListSelectedClass=pf-m-selected
+
+kcDarkModeClass=pf-v5-theme-dark
diff --git a/themes/src/main/resources/theme/keycloak/welcome/index.ftl b/themes/src/main/resources/theme/keycloak/welcome/index.ftl
index 39d0945c420..b41b9d3de44 100755
--- a/themes/src/main/resources/theme/keycloak/welcome/index.ftl
+++ b/themes/src/main/resources/theme/keycloak/welcome/index.ftl
@@ -4,8 +4,28 @@
     <meta charset="utf-8">
     <meta name="robots" content="noindex, nofollow">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="color-scheme" content="light${(properties.darkMode)?boolean?then(' dark', '')}">
     <title>Welcome to ${productName}</title>
     <link rel="shortcut icon" href="${resourcesCommonPath}/img/favicon.ico">
+    <#if properties.darkMode?boolean>
+      <script type="module" async blocking="render">
+          const DARK_MODE_CLASS = "${properties.kcDarkModeClass}";
+          const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+
+          updateDarkMode(mediaQuery.matches);
+          mediaQuery.addEventListener("change", (event) => updateDarkMode(event.matches));
+
+          function updateDarkMode(isEnabled) {
+            const { classList } = document.documentElement;
+
+            if (isEnabled) {
+              classList.add(DARK_MODE_CLASS);
+            } else {
+              classList.remove(DARK_MODE_CLASS);
+            }
+          }
+      </script>
+    </#if>
     <#if properties.stylesCommon?has_content>
       <#list properties.stylesCommon?split(' ') as style>
         <link rel="stylesheet" href="${resourcesCommonPath}/${style}">
diff --git a/themes/src/main/resources/theme/keycloak/welcome/theme.properties b/themes/src/main/resources/theme/keycloak/welcome/theme.properties
index 17f7fb42180..1a14a5dced5 100644
--- a/themes/src/main/resources/theme/keycloak/welcome/theme.properties
+++ b/themes/src/main/resources/theme/keycloak/welcome/theme.properties
@@ -5,3 +5,6 @@ styles=css/welcome.css
 
 # When set to true, the user will be redirected to the Administration Console if an administrative users already exists.
 redirectToAdmin=true
+darkMode=true
+
+kcDarkModeClass=pf-v5-theme-dark