fix: Faster theme loading to avoid flickering (#3062)

arkirchner · web-flow · commit caccb8aa2a86 · 2025-08-07T10:34:27.000+02:00
The `tubo:load` event is faster than the migration event. The color changing requires no sprocket code and can be controlled without the migration event. This removes the flickering in dark mode when navigating the page. This change is possible because the theme-changing logic was moved to Webpacker and loads before Sprockets. Please see #3025 Related to #3040
diff --git a/app/javascript/sprocket-asset-import/color-mode-picker.js b/app/javascript/sprocket-asset-import/color-mode-picker.js
@@ -77,7 +77,7 @@ function showActiveTheme(theme, focus = false) {
     }
 }
 
-$(document).on('turbo-migration:load', function() {
+$(document).on('turbo:load', function() {
     setTheme(getPreferredTheme())
 
     showActiveTheme(getPreferredTheme())

Original file line number	Diff line number	Diff line change
`@@ -77,7 +77,7 @@ function showActiveTheme(theme, focus = false) {`
`77`	`77`	`}`
`78`	`78`	`}`
`79`	`79`
`80`		`-$(document).on('turbo-migration:load', function() {`
	`80`	`+$(document).on('turbo:load', function() {`
`81`	`81`	`setTheme(getPreferredTheme())`
`82`	`82`
`83`	`83`	`showActiveTheme(getPreferredTheme())`