diff --git a/package.json b/package.json
index 284ee601c..182a7b562 100644
--- a/package.json
+++ b/package.json
@@ -23,5 +23,6 @@
"typescript": "^5.2.2",
"vite": "^4.4.9",
"vite-node": "^0.34.5"
- }
+ },
+ "packageManager": "pnpm@8.15.6+sha256.01c01eeb990e379b31ef19c03e9d06a14afa5250b82e81303f88721c99ff2e6f"
}
diff --git a/src/index.ts b/src/index.ts
index 213348173..6e87c376e 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -2,6 +2,37 @@ import './index.css';
import Alpine from 'alpinejs';
+function setColorScheme(scheme: string) {
+ const htmlElement = document.querySelector(':root') as HTMLHtmlElement
+ if (scheme == 'dark') {
+ htmlElement.classList.add('dark');
+ } else {
+ htmlElement.classList.remove('dark')
+ }
+}
+
+function getPreferredColorScheme() {
+ if (window.matchMedia) {
+ if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+ return 'dark';
+ } else {
+ return 'light';
+ }
+ }
+ return 'light';
+}
+
+function updateColorScheme() {
+ setColorScheme(getPreferredColorScheme());
+}
+
+if (window.matchMedia) {
+ var colorSchemeQuery = window.matchMedia('(prefers-color-scheme: dark)');
+ colorSchemeQuery.addEventListener('change', updateColorScheme);
+}
+
+updateColorScheme();
+
window.Alpine = Alpine;
-Alpine.start();
+Alpine.start();
\ No newline at end of file
diff --git a/tailwind.config.ts b/tailwind.config.ts
index cb7d1a0d6..bf235ff6f 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -6,6 +6,7 @@ export default {
experimental: {
optimizeUniversalDefaults: true,
},
+ darkMode: "class",
plugins: [require('@tailwindcss/forms')],
theme: {
extend: {
diff --git a/theme/keywind/login/components/atoms/alert.ftl b/theme/keywind/login/components/atoms/alert.ftl
index 58e8309f0..0244bd752 100644
--- a/theme/keywind/login/components/atoms/alert.ftl
+++ b/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="dark:bg-opacity-90 bg-red-100 text-red-600">
<#break>
<#case "info">
- <#assign colorClass="bg-blue-100 text-blue-600">
+ <#assign colorClass="dark:bg-opacity-90 bg-blue-100 text-blue-600">
<#break>
<#case "success">
- <#assign colorClass="bg-green-100 text-green-600">
+ <#assign colorClass="dark:bg-opacity-90 bg-green-100 text-green-600">
<#break>
<#case "warning">
- <#assign colorClass="bg-orange-100 text-orange-600">
+ <#assign colorClass="dark:bg-opacity-90 bg-orange-100 text-orange-600">
<#break>
<#default>
- <#assign colorClass="bg-blue-100 text-blue-600">
+ <#assign colorClass="dark:bg-opacity-90 bg-blue-100 text-blue-600">
diff --git a/theme/keywind/login/components/atoms/body.ftl b/theme/keywind/login/components/atoms/body.ftl
index dcc94a06e..b166632a5 100644
--- a/theme/keywind/login/components/atoms/body.ftl
+++ b/theme/keywind/login/components/atoms/body.ftl
@@ -1,5 +1,7 @@
<#macro kw>
-
+
+
+
<#nested>
diff --git a/theme/keywind/login/components/atoms/button.ftl b/theme/keywind/login/components/atoms/button.ftl
index eeb0af7b7..a65e0a889 100644
--- a/theme/keywind/login/components/atoms/button.ftl
+++ b/theme/keywind/login/components/atoms/button.ftl
@@ -4,7 +4,7 @@
<#assign colorClass="bg-primary-600 text-white focus:ring-primary-600 hover:bg-primary-700">
<#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="dark:bg-zinc-700 dark:text-secondary-200 bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900">
<#break>
<#default>
<#assign colorClass="bg-primary-600 text-white focus:ring-primary-600 hover:bg-primary-700">
diff --git a/theme/keywind/login/components/atoms/card.ftl b/theme/keywind/login/components/atoms/card.ftl
index c1e808df1..720964db3 100644
--- a/theme/keywind/login/components/atoms/card.ftl
+++ b/theme/keywind/login/components/atoms/card.ftl
@@ -1,5 +1,5 @@
<#macro kw content="" footer="" header="">
-
+
<#if header?has_content>
${header}
diff --git a/theme/keywind/login/components/atoms/checkbox.ftl b/theme/keywind/login/components/atoms/checkbox.ftl
index e47fd619a..508b5ba87 100644
--- a/theme/keywind/login/components/atoms/checkbox.ftl
+++ b/theme/keywind/login/components/atoms/checkbox.ftl
@@ -3,7 +3,7 @@
checked
- class="border-secondary-200 h-4 rounded text-primary-600 w-4 focus:ring-primary-200 focus:ring-opacity-50"
+ class="dark:bg-zinc-700 border-secondary-200 h-4 rounded text-primary-600 w-4 focus:ring-primary-200 focus:ring-opacity-50"
id="${name}"
name="${name}"
type="checkbox"
diff --git a/theme/keywind/login/components/atoms/input.ftl b/theme/keywind/login/components/atoms/input.ftl
index 714f832c9..2976208bb 100644
--- a/theme/keywind/login/components/atoms/input.ftl
+++ b/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="dark:bg-zinc-800 dark:border-zinc-700 dark:bg-zinc-800 dark:border-zinc-700 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"
disabled=false
invalid=false
label=""
diff --git a/theme/keywind/login/components/molecules/identity-provider.ftl b/theme/keywind/login/components/molecules/identity-provider.ftl
index b59962eff..aa26b27ee 100644
--- a/theme/keywind/login/components/molecules/identity-provider.ftl
+++ b/theme/keywind/login/components/molecules/identity-provider.ftl
@@ -1,8 +1,10 @@
<#import "/assets/providers/providers.ftl" as providerIcons>
<#macro kw providers=[]>
-
- ${msg("identity-provider-login-label")}
+
+
+
${msg("identity-provider-login-label")}
+
diff --git a/theme/keywind/login/resources/dist/assets/index-a7b84447.js b/theme/keywind/login/resources/dist/assets/index-a7b84447.js
deleted file mode 100644
index c1b2f3c66..000000000
--- a/theme/keywind/login/resources/dist/assets/index-a7b84447.js
+++ /dev/null
@@ -1 +0,0 @@
-var s={};Object.defineProperty(s,"__esModule",{value:!0});function v(e,r,a){var l;if(a===void 0&&(a={}),!r.codes){r.codes={};for(var n=0;n
=8&&(t-=8,c[u++]=255&i>>t)}if(t>=r.bits||255&i<<8-t)throw new SyntaxError("Unexpected end of data");return c}function o(e,r,a){a===void 0&&(a={});for(var l=a,n=l.pad,b=n===void 0?!0:n,c=(1<r.bits;)i-=r.bits,t+=r.chars[c&u>>i];if(i&&(t+=r.chars[c&u<Ce&&N.splice(t,1)}function Bn(){!Oe&&!Ae&&(Ae=!0,queueMicrotask(Kn))}function Kn(){Ae=!1,Oe=!0;for(let e=0;ee.effect(t,{scheduler:n=>{Me?Ln(n):n()}}),At=e.raw}function ft(e){H=e}function zn(e){let t=()=>{};return[r=>{let i=H(r);return e._x_effects||(e._x_effects=new Set,e._x_runEffects=()=>{e._x_effects.forEach(o=>o())}),e._x_effects.add(i),t=()=>{i!==void 0&&(e._x_effects.delete(i),Z(i))},i},()=>{t()}]}function Y(e,t,n={}){e.dispatchEvent(new CustomEvent(t,{detail:n,bubbles:!0,composed:!0,cancelable:!0}))}function T(e,t){if(typeof ShadowRoot=="function"&&e instanceof ShadowRoot){Array.from(e.children).forEach(i=>T(i,t));return}let n=!1;if(t(e,()=>n=!0),n)return;let r=e.firstElementChild;for(;r;)T(r,t),r=r.nextElementSibling}function I(e,...t){console.warn(`Alpine Warning: ${e}`,...t)}var dt=!1;function Hn(){dt&&I("Alpine has already been initialized on this page. Calling Alpine.start() more than once can cause problems."),dt=!0,document.body||I("Unable to initialize. Trying to load Alpine before `` is available. Did you forget to add `defer` in Alpine's `