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

Use Tailwind dark: toggles for dark-mode icons

Browse Source 
The previous <picture media="(prefers-color-scheme: dark)"> only fires
when the OS is in dark mode. Clinch toggles dark mode with a class on
<html> via dark_mode_controller and Tailwind's @custom-variant dark
(&:where(.dark, .dark *)), so the picture source never swapped when
users clicked the in-app theme toggle. Render both <img> tags and
use Tailwind's dark:hidden / hidden dark:block so the swap follows
whatever strategy Tailwind is configured for.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Dan Milne
2026-06-07 17:19:36 +10:00
parent c5ab7dc2a5
commit fe68f6e81e
3 changed files with 34 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
test/helpers/application_helper_test.rb
View File

@@ -31,4 +31,23 @@ class ApplicationHelperTest < ActionView::TestCase
# not a guarantee for all pairs, but should hold for at least one pair
assert_not_equal monogram_color("Kavita"), monogram_color("Navidrome")
end
test "app_icon_picture renders both icons with Tailwind dark: toggles when icon_dark is attached" do
app = applications(:kavita_app)
app.icon.attach(io: StringIO.new("light"), filename: "light.png", content_type: "image/png")
app.icon_dark.attach(io: StringIO.new("dark"), filename: "dark.png", content_type: "image/png")
html = app_icon_picture(app, class: "h-10 w-10 rounded-lg")
assert_match(/dark:hidden/, html)
assert_match(/hidden dark:block/, html)
end
test "app_icon_picture renders one img when no icon_dark is attached" do
app = applications(:kavita_app)
app.icon.attach(io: StringIO.new("light"), filename: "light.png", content_type: "image/png")
html = app_icon_picture(app, class: "h-10 w-10")
refute_match(/dark:hidden/, html)
refute_match(/hidden dark:block/, html)
end
end