Colour Preview in .razor/cshtml/html/css files

[lachlanwgordon]

I've got an inline colour in my .razor page. It would be nice to be able to see what color they look like in the editor, like you already do in XAML.

<h1 style="color: #FF00FF">Hello, world!</h1>
<h1 style="color: red">Hello, world!</h1>
<h1 style="color: rgba(255,153,128,1.0)">Hello, world!</h1>

This should work for Hex strings, named colours and rgba() functions.

There's a sample of all three in this page of my BasicBlazor repo https://github.com/lachlanwgordon/BasicBlazor/blob/master/WASM/BlazorWASM/Pages/Index.razor

[matthewrdev]

@lachlanwgordon Fantastic idea! A few questions to clarify:

• Where would we place the color adorntment? IE: Immediately before the #FF00FF/red/rgba() area?
• Would you expect that MFractor include the Click To Edit color behaviour on these tags?

[ravero]

In HTML an style tag may have several attributes set inline. I suppose it would be better to have it before the color declaration, seems more natural to me.

An color editor is surely helpful also.

[lachlanwgordon]

Yeah, edit color would be great.

I don't think it matters much if it's before or after, as long as it's the same in all files types.

[matthewrdev]

Ok, will follow our existing convention and place it before the color declaration.

[matthewrdev]

@lachlanwgordon I've been reviewing how other products implement color adornments and the convention seems to be at the end of the color declaration. A few examples include Rider, GitHub (see above adornment) and Slack.

I'll be swapping the adornments to be "trailing" in the next release so this feature will also follow the convention.

[matthewrdev]

Going forward, MFractor will be focusing exclusively on the MAUI feature set. Going to close this and all web related features.