Add custom color highlighting for nested Turbo Frames

[lirtistan]

Hi,

nested turbo frames should have a differnt color so we can distinguish there boundings.

<div class="w-75 mx-auto mt-9">
	<%= turbo_frame_tag "foo" do %>
		<p>stuff in "foo" frame</p>
		<%= turbo_frame_tag "bar" do %>
			<p>some stuff in inner "bar" frame</p>
		<% end %>
	<% end %>
</div>

looks actually like this...

Actually i don't know how hard it is to implement, but maybe in a future version, that whould be a nice feature.

[leonvogt]

@lirtistan, thanks for opening this issue.

Was thinking about different highlighting for nested frames too! I'm just not sure yet how to define the colors.

• Maybe alternate between darker and lighter versions of your chosen frame highlight color?
• Or perhaps use an analogous color palette based on your frame highlight color, like some color pickers offer.

[lirtistan]

Was thinking about different highlighting for nested frames too! I'm just not sure yet how to define the colors.

maybe the colors can be generated on the fly or just embedded as a predefined config.

• Maybe alternate between darker and lighter versions of your chosen frame highlight color?

i think of two columns column1 contains all colors for the prefered-color-scheme: light and column2 contains them respectively for the prefered-color-scheme: dark, but each row should be considered as color pair. those colors don't know where they come from yet, should then be injected into the actual tab content as css rules somehow.

• Or perhaps use an analogous color palette based on your frame highlight color, like some [color pickers offer]
  (https://color.adobe.com/de/create/color-wheel).

yes that can also be a method. Consider that users may want to change those colors.