Support system dark mode auto switching

src/data/webAuthnAuthenticate.ts

@@ -58,7 +58,7 @@ document.addEventListener('alpine:init', () => {
       }
 
       const publicKey: PublicKeyCredentialRequestOptions = {
-        challenge: base64url.parse(challenge, { loose: true }),
+        challenge: new Uint8Array(base64url.parse(challenge, { loose: true })),
         rpId: rpId,
       };
 
@@ -121,7 +121,7 @@ document.addEventListener('alpine:init', () => {
           authnSelectFormElements.forEach((element) => {
             if (element instanceof HTMLInputElement) {
               allowCredentials.push({
-                id: base64url.parse(element.value, { loose: true }),
+                id: new Uint8Array(base64url.parse(element.value, { loose: true })),
                 type: 'public-key',
               });
             }

src/data/webAuthnRegister.ts

@@ -91,7 +91,7 @@ document.addEventListener('alpine:init', () => {
 
       excludeCredentialIdsList.forEach((value) => {
         excludeCredentials.push({
-          id: base64url.parse(value, { loose: true }),
+          id: new Uint8Array(base64url.parse(value, { loose: true })),
           type: 'public-key',
         });
       });
@@ -121,15 +121,15 @@ document.addEventListener('alpine:init', () => {
         }
 
         const publicKey: PublicKeyCredentialCreationOptions = {
-          challenge: base64url.parse(challenge, { loose: true }),
+          challenge: new Uint8Array(base64url.parse(challenge, { loose: true })),
           pubKeyCredParams: getPubKeyCredParams(signatureAlgorithms),
           rp: {
             id: rpId,
             name: rpEntityName,
           },
           user: {
             displayName: username,
-            id: base64url.parse(userId, { loose: true }),
+            id: new Uint8Array(base64url.parse(userId, { loose: true })),
             name: username,
           },
         };

src/index.css

@@ -20,7 +20,7 @@
   .separate::after,
   .separate::before {
     content: '';
-    @apply border-b border-secondary-200 flex-1;
+    @apply border-b border-secondary-200 dark:border-gray-700 flex-1;
   }
 
   .separate:not(:empty)::after {

src/index.ts

@@ -5,3 +5,39 @@ import Alpine from 'alpinejs';
 window.Alpine = Alpine;
 
 Alpine.start();
+
+// Dark mode detection and class management
+// This runs after page load to handle dynamic changes
+function initDarkMode() {
+  const htmlElement = document.documentElement;
+
+  // Check if Keycloak has already added the dark class
+  // If not, detect system preference and add it
+  const hasDarkClass = htmlElement.classList.contains('dark');
+  const hasLightClass = htmlElement.classList.contains('light');
+
+  if (!hasDarkClass && !hasLightClass) {
+    // Check system preference
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+    if (prefersDark) {
+      htmlElement.classList.add('dark');
+    } else {
+      htmlElement.classList.add('light');
+    }
+  }
+
+  // Listen for system preference changes
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+    if (e.matches) {
+      htmlElement.classList.add('dark');
+      htmlElement.classList.remove('light');
+    } else {
+      htmlElement.classList.remove('dark');
+      htmlElement.classList.add('light');
+    }
+  });
+}
+
+// Initialize dark mode
+initDarkMode();

tailwind.config.ts

@@ -3,6 +3,7 @@ import colors from 'tailwindcss/colors';
 
 export default {
   content: ['./theme/**/*.ftl'],
+  darkMode: 'class',
   experimental: {
     optimizeUniversalDefaults: true,
   },

theme/keywind/login/components/atoms/alert.ftl

@@ -1,19 +1,19 @@
 <#macro kw color="">
   <#switch color>
     <#case "error">
-      <#assign colorClass="bg-red-100 text-red-600">
+      <#assign colorClass="bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400">
       <#break>
     <#case "info">
-      <#assign colorClass="bg-blue-100 text-blue-600">
+      <#assign colorClass="bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400">
       <#break>
     <#case "success">
-      <#assign colorClass="bg-green-100 text-green-600">
+      <#assign colorClass="bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400">
       <#break>
     <#case "warning">
-      <#assign colorClass="bg-orange-100 text-orange-600">
+      <#assign colorClass="bg-orange-100 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400">
       <#break>
     <#default>
-      <#assign colorClass="bg-blue-100 text-blue-600">
+      <#assign colorClass="bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400">
   </#switch>
 
   <div class="${colorClass} p-4 rounded-lg text-sm" role="alert">

theme/keywind/login/components/atoms/body.ftl

@@ -1,5 +1,5 @@
 <#macro kw>
-  <body class="bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
+  <body class="bg-secondary-100 dark:bg-gray-900 flex flex-col items-center justify-center min-h-screen sm:py-16">
     <#nested>
   </body>
 </#macro>

theme/keywind/login/components/atoms/button.ftl

@@ -1,13 +1,13 @@
 <#macro kw color="" component="button" size="" rest...>
   <#switch color>
     <#case "primary">
-      <#assign colorClass="bg-primary-600 text-white focus:ring-primary-600 hover:bg-primary-700">
+      <#assign colorClass="bg-primary-600 dark:bg-primary-500 text-white focus:ring-primary-600 dark:focus:ring-primary-400 hover:bg-primary-700 dark:hover:bg-primary-600">
       <#break>
     <#case "secondary">
-      <#assign colorClass="bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900">
+      <#assign colorClass="bg-secondary-100 dark:bg-gray-700 text-secondary-600 dark:text-gray-300 focus:ring-secondary-600 dark:focus:ring-gray-500 hover:bg-secondary-200 dark:hover:bg-gray-600 hover:text-secondary-900 dark:hover:text-white">
       <#break>
     <#default>
-      <#assign colorClass="bg-primary-600 text-white focus:ring-primary-600 hover:bg-primary-700">
+      <#assign colorClass="bg-primary-600 dark:bg-primary-500 text-white focus:ring-primary-600 dark:focus:ring-primary-400 hover:bg-primary-700 dark:hover:bg-primary-600">
   </#switch>
 
   <#switch size>
@@ -22,7 +22,7 @@
   </#switch>
 
   <${component}
-    class="${colorClass} ${sizeClass} flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2"
+    class="${colorClass} ${sizeClass} flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-800"
 
     <#list rest as attrName, attrValue>
       ${attrName}="${attrValue}"

theme/keywind/login/components/atoms/card.ftl

@@ -1,5 +1,5 @@
 <#macro kw content="" footer="" header="">
-  <div class="bg-white p-8 rounded-lg space-y-6">
+  <div class="bg-white dark:bg-gray-800 p-8 rounded-lg space-y-6">
     <#if header?has_content>
       <div class="space-y-4">
         ${header}

theme/keywind/login/components/atoms/checkbox.ftl

@@ -3,7 +3,7 @@
     <input
       <#if checked>checked</#if>
 
-      class="border-secondary-200 h-4 rounded text-primary-600 w-4 focus:ring-primary-200 focus:ring-opacity-50"
+      class="border-secondary-200 dark:border-gray-600 h-4 rounded text-primary-600 dark:text-primary-400 w-4 focus:ring-primary-200 dark:focus:ring-primary-800 focus:ring-opacity-50"
       id="${name}"
       name="${name}"
       type="checkbox"
@@ -12,7 +12,7 @@
         ${attrName}="${attrValue}"
       </#list>
     >
-    <label class="ml-2 text-secondary-600 text-sm" for="${name}">
+    <label class="ml-2 text-secondary-600 dark:text-gray-300 text-sm" for="${name}">
       ${label}
     </label>
   </div>

theme/keywind/login/components/atoms/heading.ftl

@@ -1,5 +1,5 @@
 <#macro kw>
-  <h1 class="text-center text-xl">
+  <h1 class="text-center text-xl dark:text-white">
     <#nested>
   </h1>
 </#macro>

theme/keywind/login/components/atoms/input.ftl

@@ -4,7 +4,7 @@
 <#macro
   kw
   autofocus=false
-  class="block border-secondary-200 mt-1 rounded-md w-full focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 sm:text-sm"
+  class="block border-secondary-200 dark:border-gray-600 dark:bg-gray-700 dark:text-white mt-1 rounded-md w-full focus:border-primary-300 dark:focus:border-primary-400 focus:ring focus:ring-primary-200 dark:focus:ring-primary-800 focus:ring-opacity-50 sm:text-sm"
   disabled=false
   invalid=false
   label=""
@@ -40,7 +40,7 @@
           @click="show = !show"
           aria-controls="${name}"
           :aria-expanded="show"
-          class="absolute text-secondary-400 right-3 top-3 sm:top-2"
+          class="absolute text-secondary-400 dark:text-gray-400 right-3 top-3 sm:top-2"
           type="button"
         >
           <div x-show="!show">
@@ -70,7 +70,7 @@
       >
     </#if>
     <#if invalid?? && message??>
-      <div class="mt-2 text-red-600 text-sm">
+      <div class="mt-2 text-red-600 dark:text-red-400 text-sm">
         ${message?no_esc}
       </div>
     </#if>

theme/keywind/login/components/atoms/link.ftl

@@ -1,13 +1,13 @@
 <#macro kw color="" component="a" size="" rest...>
   <#switch color>
     <#case "primary">
-      <#assign colorClass="text-primary-600 hover:text-primary-500">
+      <#assign colorClass="text-primary-600 dark:text-primary-400 hover:text-primary-500 dark:hover:text-primary-300">
       <#break>
     <#case "secondary">
-      <#assign colorClass="text-secondary-600 hover:text-secondary-900">
+      <#assign colorClass="text-secondary-600 dark:text-gray-400 hover:text-secondary-900 dark:hover:text-gray-300">
       <#break>
     <#default>
-      <#assign colorClass="text-primary-600 hover:text-primary-500">
+      <#assign colorClass="text-primary-600 dark:text-primary-400 hover:text-primary-500 dark:hover:text-primary-300">
   </#switch>
 
   <#switch size>

theme/keywind/login/components/atoms/logo.ftl

@@ -1,5 +1,5 @@
 <#macro kw>
-  <div class="font-bold text-center text-2xl">
+  <div class="font-bold text-center text-2xl dark:text-white">
     <#nested>
   </div>
 </#macro>

theme/keywind/login/components/atoms/radio.ftl

@@ -3,15 +3,15 @@
     <input
       <#if checked>checked</#if>
 
-      class="border-secondary-200 focus:ring-primary-600"
+      class="border-secondary-200 dark:border-gray-600 focus:ring-primary-600 dark:focus:ring-primary-400"
       id="${id}"
       type="radio"
 
       <#list rest as attrName, attrValue>
         ${attrName}="${attrValue}"
       </#list>
     >
-    <label class="ml-2 text-secondary-600 text-sm" for="${id}">
+    <label class="ml-2 text-secondary-600 dark:text-gray-300 text-sm" for="${id}">
       ${label}
     </label>
   </div>

theme/keywind/login/components/molecules/identity-provider.ftl

@@ -1,7 +1,7 @@
 <#import "/assets/providers/providers.ftl" as providerIcons>
 
 <#macro kw providers=[]>
-  <div class="pt-4 separate text-secondary-600 text-sm">
+  <div class="pt-4 separate text-secondary-600 dark:text-gray-400 text-sm">
     ${msg("identity-provider-login-label")}
   </div>
   <div class="gap-4 grid grid-cols-3">
@@ -63,7 +63,7 @@
       </#switch>
 
       <a
-        class="${colorClass} border border-secondary-200 flex justify-center py-2 rounded-lg hover:border-transparent"
+        class="${colorClass} border border-secondary-200 dark:border-gray-600 flex justify-center py-2 rounded-lg hover:border-transparent dark:hover:border-gray-500"
         data-provider="${provider.alias}"
         href="${provider.loginUrl}"
         type="button"

theme/keywind/login/components/molecules/locale-provider.ftl

@@ -11,7 +11,7 @@
     </@link.kw>
     <div
       @click.away="open = false"
-      class="absolute bg-white bottom-0 -left-4 max-h-80 mb-6 overflow-y-scroll rounded-lg shadow-lg"
+      class="absolute bg-white dark:bg-gray-800 bottom-0 -left-4 max-h-80 mb-6 overflow-y-scroll rounded-lg shadow-lg dark:shadow-gray-900"
       x-cloak
       x-show="open"
     >

theme/keywind/login/components/molecules/username.ftl

@@ -3,7 +3,7 @@
 
 <#macro kw linkHref="" linkTitle="" name="">
   <div class="flex items-center justify-center mb-4 space-x-2">
-    <span class="font-medium">${name}</span>
+    <span class="font-medium dark:text-white">${name}</span>
     <@link.kw
       color="primary"
       href=linkHref

theme/keywind/login/document.ftl

@@ -4,6 +4,23 @@
   <meta charset="utf-8">
   <meta name="robots" content="noindex, nofollow">
   <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <script>
+    // Dark mode detection - runs immediately to prevent flash
+    (function() {
+      const htmlElement = document.documentElement;
+      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+      // Only add class if Keycloak hasn't already set it
+      if (!htmlElement.classList.contains('dark') && !htmlElement.classList.contains('light')) {
+        if (prefersDark) {
+          htmlElement.classList.add('dark');
+        } else {
+          htmlElement.classList.add('light');
+        }
+      }
+    })();
+  </script>
 
   <#if properties.meta?has_content>
     <#list properties.meta?split(" ") as meta>