Skip to content

Feat: add tailwind dark mode #86

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
inonjs wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Feat: add tailwind dark mode #86

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
817ba75
feat(darkmode): add tailwind darkmode and change templates
inonjs Apr 10, 2024
9c804c9
feat(darkmode): add function to switch darkmode by user preference
inonjs Apr 10, 2024
0ffba0c
(fix): remove dark class from html files
inonjs Apr 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions html/login/error.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,21 +7,21 @@
<link href="http://localhost:5173/src/index.css" rel="stylesheet">
<script defer src="http://localhost:5173/src/index.ts" type="module"></script>
</head>
<body class="bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
<body class="dark:bg-zinc-950 dark:text-gray-300 bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
<div class="max-w-md space-y-6 w-full">
<div class="bg-white p-8 rounded-lg space-y-6">
<div class="dark:bg-zinc-900 bg-white p-8 rounded-lg space-y-6">
<div class="space-y-4">
<div class="font-bold text-center text-2xl">
Keywind
</div>
<h1 class="text-center text-xl">We are sorry...</h1>
</div>
<div class="space-y-4">
<div class="bg-red-100 text-red-600 p-4 rounded-lg text-sm" role="alert">
<div class="dark:bg-opacity-90 bg-red-100 text-red-600 p-4 rounded-lg text-sm" role="alert">
Example of an error message
</div>
<form action="loginAction" method="post">
<input name="tryAnotherWay" type="hidden" value="on"> <button class="bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" type="submit"> Try Another Way </button>
<input name="tryAnotherWay" type="hidden" value="on"> <button class="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 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" type="submit"> Try Another Way </button>
</form>
</div>
</div>
Expand Down
12 changes: 6 additions & 6 deletions html/login/login-config-totp.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,17 @@
<link href="http://localhost:5173/src/index.css" rel="stylesheet">
<script defer src="http://localhost:5173/src/index.ts" type="module"></script>
</head>
<body class="bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
<body class="dark:bg-zinc-950 dark:text-gray-300 bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
<div class="max-w-md space-y-6 w-full">
<div class="bg-white p-8 rounded-lg space-y-6">
<div class="dark:bg-zinc-900 bg-white p-8 rounded-lg space-y-6">
<div class="space-y-4">
<div class="font-bold text-center text-2xl">
Keywind
</div>
<h1 class="text-center text-xl">Mobile Authenticator Setup</h1>
</div>
<div class="space-y-4">
<div class="bg-red-100 text-red-600 p-4 rounded-lg text-sm" role="alert">
<div class="dark:bg-opacity-90 bg-red-100 text-red-600 p-4 rounded-lg text-sm" role="alert">
Example of an error message
</div>
<ol class="list-decimal pl-4 space-y-2">
Expand All @@ -34,12 +34,12 @@ <h1 class="text-center text-xl">Mobile Authenticator Setup</h1>
<form class="m-0 space-y-4" method="post" action="loginAction">
<input name="totpSecret" type="hidden" value="totpSecret">
<div>
<label class="sr-only" for="totp"> One-time code * </label> <input autofocus aria-invalid="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" id="totp" name="totp" placeholder="One-time code *" type="text" autocomplete="off">
<label class="sr-only" for="totp"> One-time code * </label> <input autofocus aria-invalid="false" class="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" id="totp" name="totp" placeholder="One-time code *" type="text" autocomplete="off">
<div class="mt-2 text-red-600 text-sm">
</div>
</div>
<div>
<label class="sr-only" for="userLabel"> Device Name * </label> <input aria-invalid="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" id="userLabel" name="userLabel" placeholder="Device Name *" type="text" autocomplete="off">
<label class="sr-only" for="userLabel"> Device Name * </label> <input aria-invalid="false" class="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" id="userLabel" name="userLabel" placeholder="Device Name *" type="text" autocomplete="off">
<div class="mt-2 text-red-600 text-sm">
</div>
</div>
Expand All @@ -48,7 +48,7 @@ <h1 class="text-center text-xl">Mobile Authenticator Setup</h1>
</div>
</form>
<form action="loginAction" method="post">
<input name="tryAnotherWay" type="hidden" value="on"> <button class="bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" type="submit"> Try Another Way </button>
<input name="tryAnotherWay" type="hidden" value="on"> <button class="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 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" type="submit"> Try Another Way </button>
</form>
</div>
</div>
Expand Down
8 changes: 4 additions & 4 deletions html/login/login-idp-link-confirm.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,24 +7,24 @@
<link href="http://localhost:5173/src/index.css" rel="stylesheet">
<script defer src="http://localhost:5173/src/index.ts" type="module"></script>
</head>
<body class="bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
<body class="dark:bg-zinc-950 dark:text-gray-300 bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
<div class="max-w-md space-y-6 w-full">
<div class="bg-white p-8 rounded-lg space-y-6">
<div class="dark:bg-zinc-900 bg-white p-8 rounded-lg space-y-6">
<div class="space-y-4">
<div class="font-bold text-center text-2xl">
Keywind
</div>
<h1 class="text-center text-xl">Account already exists</h1>
</div>
<div class="space-y-4">
<div class="bg-red-100 text-red-600 p-4 rounded-lg text-sm" role="alert">
<div class="dark:bg-opacity-90 bg-red-100 text-red-600 p-4 rounded-lg text-sm" role="alert">
Example of an error message
</div>
<form class="m-0 space-y-4" method="post" action="loginAction">
<button class="bg-primary-600 text-white focus:ring-primary-600 hover:bg-primary-700 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" name="submitAction" type="submit" value="updateProfile"> Review profile </button> <button class="bg-primary-600 text-white focus:ring-primary-600 hover:bg-primary-700 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" name="submitAction" type="submit" value="linkAccount"> Add to existing account </button>
</form>
<form action="loginAction" method="post">
<input name="tryAnotherWay" type="hidden" value="on"> <button class="bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" type="submit"> Try Another Way </button>
<input name="tryAnotherWay" type="hidden" value="on"> <button class="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 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" type="submit"> Try Another Way </button>
</form>
</div>
</div>
Expand Down
10 changes: 5 additions & 5 deletions html/login/login-oauth-grant.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@
<link href="http://localhost:5173/src/index.css" rel="stylesheet">
<script defer src="http://localhost:5173/src/index.ts" type="module"></script>
</head>
<body class="bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
<body class="dark:bg-zinc-950 dark:text-gray-300 bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
<div class="max-w-md space-y-6 w-full">
<div class="bg-white p-8 rounded-lg space-y-6">
<div class="dark:bg-zinc-900 bg-white p-8 rounded-lg space-y-6">
<div class="space-y-4">
<div class="font-bold text-center text-2xl">
Keywind
Expand All @@ -18,7 +18,7 @@ <h1 class="text-center text-xl">
<p>Grant Access to null</p></h1>
</div>
<div class="space-y-4">
<div class="bg-red-100 text-red-600 p-4 rounded-lg text-sm" role="alert">
<div class="dark:bg-opacity-90 bg-red-100 text-red-600 p-4 rounded-lg text-sm" role="alert">
Example of an error message
</div>
<h3>Do you grant these access privileges?</h3>
Expand All @@ -27,11 +27,11 @@ <h3>Do you grant these access privileges?</h3>
<form class="m-0 space-y-4" method="post" action="oauthAction">
<input name="code" type="hidden" value="code">
<div class="flex flex-col pt-4 space-y-2">
<button class="bg-primary-600 text-white focus:ring-primary-600 hover:bg-primary-700 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" name="accept" type="submit"> Yes </button> <button class="bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" name="cancel" type="submit"> No </button>
<button class="bg-primary-600 text-white focus:ring-primary-600 hover:bg-primary-700 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" name="accept" type="submit"> Yes </button> <button class="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 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" name="cancel" type="submit"> No </button>
</div>
</form>
<form action="loginAction" method="post">
<input name="tryAnotherWay" type="hidden" value="on"> <button class="bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" type="submit"> Try Another Way </button>
<input name="tryAnotherWay" type="hidden" value="on"> <button class="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 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" type="submit"> Try Another Way </button>
</form>
</div>
</div>
Expand Down
10 changes: 5 additions & 5 deletions html/login/login-otp.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,22 +7,22 @@
<link href="http://localhost:5173/src/index.css" rel="stylesheet">
<script defer src="http://localhost:5173/src/index.ts" type="module"></script>
</head>
<body class="bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
<body class="dark:bg-zinc-950 dark:text-gray-300 bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
<div class="max-w-md space-y-6 w-full">
<div class="bg-white p-8 rounded-lg space-y-6">
<div class="dark:bg-zinc-900 bg-white p-8 rounded-lg space-y-6">
<div class="space-y-4">
<div class="font-bold text-center text-2xl">
Keywind
</div>
<h1 class="text-center text-xl">Sign In</h1>
</div>
<div class="space-y-4">
<div class="bg-red-100 text-red-600 p-4 rounded-lg text-sm" role="alert">
<div class="dark:bg-opacity-90 bg-red-100 text-red-600 p-4 rounded-lg text-sm" role="alert">
Example of an error message
</div>
<form class="m-0 space-y-4" method="post" action="loginAction">
<div>
<label class="sr-only" for="otp"> One-time code * </label> <input autofocus required aria-invalid="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" id="otp" name="otp" placeholder="One-time code *" type="text" autocomplete="off">
<label class="sr-only" for="otp"> One-time code * </label> <input autofocus required aria-invalid="false" class="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" id="otp" name="otp" placeholder="One-time code *" type="text" autocomplete="off">
<div class="mt-2 text-red-600 text-sm">
</div>
</div>
Expand All @@ -31,7 +31,7 @@ <h1 class="text-center text-xl">Sign In</h1>
</div>
</form>
<form action="loginAction" method="post">
<input name="tryAnotherWay" type="hidden" value="on"> <button class="bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" type="submit"> Try Another Way </button>
<input name="tryAnotherWay" type="hidden" value="on"> <button class="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 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" type="submit"> Try Another Way </button>
</form>
</div>
</div>
Expand Down
10 changes: 5 additions & 5 deletions html/login/login-page-expired.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,24 +7,24 @@
<link href="http://localhost:5173/src/index.css" rel="stylesheet">
<script defer src="http://localhost:5173/src/index.ts" type="module"></script>
</head>
<body class="bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
<body class="dark:bg-zinc-950 dark:text-gray-300 bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
<div class="max-w-md space-y-6 w-full">
<div class="bg-white p-8 rounded-lg space-y-6">
<div class="dark:bg-zinc-900 bg-white p-8 rounded-lg space-y-6">
<div class="space-y-4">
<div class="font-bold text-center text-2xl">
Keywind
</div>
<h1 class="text-center text-xl">Page has expired</h1>
</div>
<div class="space-y-4">
<div class="bg-red-100 text-red-600 p-4 rounded-lg text-sm" role="alert">
<div class="dark:bg-opacity-90 bg-red-100 text-red-600 p-4 rounded-lg text-sm" role="alert">
Example of an error message
</div>
<div class="flex flex-col pt-4 space-y-2">
<a class="bg-primary-600 text-white focus:ring-primary-600 hover:bg-primary-700 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" href="loginRestartFlowUrl"> Try again </a> <a class="bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" href="loginAction"> Continue </a>
<a class="bg-primary-600 text-white focus:ring-primary-600 hover:bg-primary-700 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" href="loginRestartFlowUrl"> Try again </a> <a class="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 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" href="loginAction"> Continue </a>
</div>
<form action="loginAction" method="post">
<input name="tryAnotherWay" type="hidden" value="on"> <button class="bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" type="submit"> Try Another Way </button>
<input name="tryAnotherWay" type="hidden" value="on"> <button class="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 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" type="submit"> Try Another Way </button>
</form>
</div>
</div>
Expand Down
Loading