dkam/clinch
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

Add dark mode with toggle and localStorage persistence

Browse Source 
Uses Tailwind v4 class-based dark mode with a Stimulus controller for
toggling. Respects prefers-color-scheme as default, prevents FOUC with
an inline script, and persists the user's choice in localStorage. All
views updated with dark: variants for backgrounds, text, borders,
badges, buttons, and form inputs.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Dan Milne
2026-03-22 00:37:58 +11:00
parent 43958f50ce
commit 3d98261a51
38 changed files with 744 additions and 636 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
app/views/sessions/verify_totp.html.erb
View File

@@ -1,8 +1,8 @@
<div class="mx-auto max-w-md">
<div class="bg-white py-8 px-6 shadow rounded-lg sm:px-10">
<div class="bg-white py-8 px-6 shadow rounded-lg sm:px-10 dark:bg-gray-900">
<div class="mb-8">
<h2 class="text-2xl font-bold text-gray-900">Two-Factor Authentication</h2>
<p class="mt-2 text-sm text-gray-600">
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100">Two-Factor Authentication</h2>
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
Enter the 6-digit code from your authenticator app to complete sign in.
</p>
</div>
@@ -13,7 +13,7 @@
} do |form| %>
<%= hidden_field_tag :rd, params[:rd] if params[:rd].present? %>
<div>
<%= label_tag :code, "Verification Code", class: "block text-sm font-medium text-gray-700" %>
<%= label_tag :code, "Verification Code", class: "block text-sm font-medium text-gray-700 dark:text-gray-300" %>
<%= text_field_tag :code,
nil,
placeholder: "000000",
@@ -21,8 +21,8 @@
required: true,
autofocus: true,
autocomplete: "off",
class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-center text-2xl tracking-widest font-mono sm:text-sm" %>
<p class="mt-2 text-xs text-gray-500">
class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-center text-2xl tracking-widest font-mono sm:text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100" %>
<p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
Enter your 6-digit authenticator code or an 8-character backup code
</p>
</div>
@@ -30,7 +30,7 @@
<div>
<%= form.submit "Verify",
data: { form_submit_protection_target: "submit" },
class: "w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" %>
class: "w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900" %>
</div>
<% end %>
@@ -40,10 +40,10 @@
<div class="mt-4">
<div class="relative my-4">
<div class="absolute inset-0 flex items-center">
<div class="w-full border-t border-gray-300"></div>
<div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="px-2 bg-white text-gray-500">Or</span>
<span class="px-2 bg-white text-gray-500 dark:bg-gray-900 dark:text-gray-400">Or</span>
</div>
</div>
<button type="button"
@@ -62,18 +62,18 @@
<div class="mt-6">
<div class="relative">
<div class="absolute inset-0 flex items-center">
<div class="w-full border-t border-gray-300"></div>
<div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="px-2 bg-white text-gray-500">Need help?</span>
<span class="px-2 bg-white text-gray-500 dark:bg-gray-900 dark:text-gray-400">Need help?</span>
</div>
</div>
<div class="mt-4 text-center">
<p class="text-sm text-gray-600">
<p class="text-sm text-gray-600 dark:text-gray-400">
Lost access to your authenticator?
</p>
<p class="mt-1 text-xs text-gray-500">
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
Contact an administrator for assistance.
</p>
</div>