Suggestion: How about a Html_Dark output option?

[fgimian]

Hey there, really love this extension, thanks so much!

I was wondering if you would consider also adding a beautiful dark themed version of the standard Html output for those of us who are used to viewing code in darker environments 😄

Thanks heaps
Fotis

[danielpalme]

Have you tried -repottypes:HtmlInline_AzurePipelines_Dark as a command line argument?

[fgimian]

Have you tried -repottypes:HtmlInline_AzurePipelines_Dark as a command line argument?

Thanks heaps for the reply, yep I have. It did feel quite minimal and not quite as pretty as I had hoped to be completely honest.

I find the default Html report to be more nicely formatted for regular display and was just thinking that maybe we could have a nice dark version of that.

What do you think?

But happy to use the Azure template for now anyway 😄

Huge thanks!
Fotis

[fgimian]

Perhaps I can provide a little more info.

• Consider a less dramatic contrast for the table borders, something much more subtle
• Consider a dark grey instead of dark black for the background
• Consider putting priority on a nicer font for the code, like Consolas on Windows and Merlo on macOS (IIRC)

I'll try to do a mock up of some minor refinements for your consideration 😄

[fgimian]

This is just a little mock up of my ideas:

Before

After

Some points to think about:

• I find a completely black background colour to be harsh so I've gone for background-color: #333;
• The default monospace font on Windows is pretty ugly (Courier New) so I put a preference on Consolas which is available on all Windows systems, with a fallback to the usual monospace font code { font-family: Consolas, monospace; }
• I made the borders around the overview table much more gentle border: solid 1px #444;
• Changed the background colour of h1 to stand out with the new shades h1 { background-color: #555453; color: #fff; }

Of course, there would probably be a few more little tweaks like this.

The default Html layout also has nicer left and right margins I think for general reading, but this is a minor thing.

Kindest regards
Fotis

[danielpalme]

Thanks for your detailed suggestions. I will add this in the next release!

[danielpalme]

I added some new report types (HtmlDark, HtmlSummaryDark, HtmlInlineDark).
Perhaps you want to have a look at the new sample reports before I publish a new release.

I also made some changes to the existing HtmlInline_AzurePipelines_Dark report.
HtmlDark.zip
HtmlInline_AzurePipelines_Dark.zip

[fgimian]

I added some new report types (HtmlDark, HtmlSummaryDark, HtmlInlineDark).
Perhaps you want to have a look at the new sample reports before I publish a new release.

I also made some changes to the existing HtmlInline_AzurePipelines_Dark report.
HtmlDark.zip
HtmlInline_AzurePipelines_Dark.zip

Thank you so much, I'll check them out ASAP and get back to you.

[fgimian]

WOW! That looks absolutely incredible! Thank you so so much for your hard work on this 😄

Just a few additional very minor suggestions if I may:

Font Size in Filter

The font size inside the right text Filter text box really is a bit too small I think, I would suggest simply removing the font-size: 0.8em; in the .customizebox div.right input class to bring the text back to the regular size there.

Input / Select Box Border Colour

I think that both the text and select box have quite a bright border (seemingly white). Changing this for the text box is easy:

.customizebox div.right input { width: 150px; border-color: #888; }

However, I think styling the select will involve a div outside the box, similar to https://codepen.io/ericrasch/pen/zjDBx

Table Heading Row Background Colour

Also maybe consider using a different colour for the th in the table

.overview thead th { background-color: #444 }

Sort Arrow Colours

And just one more final thing, the arrows when sorting seem to be black on the dark theme. Can we make them a brighter colour like grey or similar?

Thanks again for everything!
Fotis

[danielpalme]

Thanks for your feedback. I don't understand the last point "Sort Arrow Colours".
For me they are grey and the active column is red. Your screenshot also shows a red arrow.

[danielpalme]

Here's my latest version of the report:
Html_LightAndDark.zip

I decided not to add a bunch of new report types. Instead all the different HTML reports now adapt the currently active Windows/macOS/Linux or Browser theme. So everyone get's his preferred version without having to generate a different report.
To test both versions, just toggle light/dark mode in your OS.

[fgimian]

Thanks for your feedback. I don't understand the last point "Sort Arrow Colours".
For me they are grey and the active column is red. Your screenshot also shows a red arrow.

I'm sincerely sorry, I'm colourblind and just assumed that was black. Red and black look virtually identical to me. 😄

Here's my latest version of the report:
Html_LightAndDark.zip

I decided not to add a bunch of new report types. Instead all the different HTML reports now adapt the currently active Windows/macOS/Linux or Browser theme. So everyone get's his preferred version without having to generate a different report.
To test both versions, just toggle light/dark mode in your OS.

Looks beautiful to me! Thank you so so much for being so receptive to ideas.

Cheers!
Fotis

[danielpalme]

Thanks for your detailed suggestions.
New release 4.8.11 contains the new dark mode!

[fgimian]

Thanks for your detailed suggestions.
New release 4.8.11 contains the new dark mode!

Thanks so much, I’ll try it out today! 😊

[silkfire]

@danielpalme Is there any way to force a light theme? I'm using a dark theme in the OS but would like my reports to be light.

[danielpalme]

@silkfire:
I'm currently working on a new release (v 5.1).
I will add the following report types in this release:

• Html: Will use the OS/browser theme
• Html_Light: Will use the light theme
• Html_Dark: Will use the dark theme

But you'll have to be a litte patient, since the new release is not finished yet.

[silkfire]

I'm okay with that, there's no rush, really. I appreciate having options. Thank you.

[danielpalme]

The new report types are now available with release 5.1.