[HTML-REPORT][BUG]Interactive report missing the Light and Dark mode switch

[authorjapps]

The earlier version of generate HTML report was having a "toggle" feature for Light/Dark mode towards the bottom left corner.
However, this feature is missing in the latest version.

This change could be due to a recent update in the Extent library, or possibly an unintentional code change that disabled it—though the library update seems more likely. It's also possible that the Extent library now requires a specific flag to enable this feature.

AC1:
Investigate the root cause of this bug and comment in this ticket

AC2;
Fix and raise a PR

---

Screenshots

• of report ran with an older version "1.3.20" :

Light mode:

---

Dark mode:

[maya5768]

I would like to join this issue

[authorjapps]

I would like to join this issue

Hello @maya5768 , just checking what you mean by "join the issue" ?
Do you mean, are you planning to fix the issue?

[maya5768]

I will try , but I need more information.

1. can we get the UI screenshot the the toggling feature are shown?
2. can we get a refrence to the code of this bug?
3. can we get the UI screenshot of the expacted valid result?

[authorjapps]

I will try , but I need more information.

1. can we get the UI screenshot the the toggling feature are shown?
2. can we get a refrence to the code of this bug?
3. can we get the UI screenshot of the expacted valid result?

Thanks for clarifying.

1. can we get the UI screenshot the the toggling feature are shown?

Just run a test with an earlier version, Example: 1.3.20(more or less), you should be able to figure out the Light/Dark mode on the HTML report.

2. can we get a refrence to the code of this bug?

Check the Report related code here. You should find in general how it is building up the reports.
More on how to build the project, refer to this BUILDING.md

3. can we get the UI screenshot of the expacted valid result?

Same as 1.

Example:

[authorjapps]

I will try , but I need more information.

1. can we get the UI screenshot the the toggling feature are shown?
2. can we get a refrence to the code of this bug?
3. can we get the UI screenshot of the expacted valid result?

@maya5768
Can you reply here as Yes , that you're not looking at this ticket and it's free for another collaborator to pick?

• Yes (tick this)

[bppdanto-t]

Hi @authorjapps,
I've looked into the issue and I want to share my findings:

1. The toggle icon has been removed completely in ExtentReport's new versions and it seems there's no way to add it with specific flags
2. From https://github.com/extent-framework/extentreports-java/wiki/ExtentSparkReporter#misc, It supports theme toggle using keyboard press, using "L" key
3. It's possible to add it manually by adding JS and CSS code to the ExtentSparkReporter's config

I've successfully added the toggle icon back and tested it locally. I can create the pull request for the fix if it's allowed

Kindly advice, thanks!

[authorjapps]

Hi @authorjapps, I've looked into the issue and I want to share my findings:

1. The toggle icon has been removed completely in ExtentReport's new versions and it seems there's no way to add it with specific flags
2. From https://github.com/extent-framework/extentreports-java/wiki/ExtentSparkReporter#misc, It supports theme toggle using keyboard press, using "L" key
3. It's possible to add it manually by adding JS and CSS code to the ExtentSparkReporter's config

I've successfully added the toggle icon back and tested it locally. I can create the pull request for the fix if it's allowed

Kindly advice, thanks!

@bppdanto-t , thanks for your investigation and more insight on this.

I've successfully added the toggle icon back and tested it locally. I can create the pull request for the fix if it's allowed !

That's amazing.
Then I think it's better to add this to top right side corner, for better visibility and lets keep the "L" also working.

Hope this is not a massive change for you to pull it from bottom left to top right?

Please go ahead with the PR.

[bppdanto-t]

@authorjapps Please help to review the PR. I moved the icon to the top right with the same style of the other element besides it. I attached the result in the PR as well.

Thank you for this.
CI run is in-progress now here.