Add support for dark mode

[mystiquewolf]

Step -1: Before filling an issue check out troubleshooting section

• Go to README.md#Troubleshooting

Step 0: Describe your environment

• OS: Kubuntu 21.04
• diff2html version: 3.4.11
• Using diff2html directly or using diff2html-ui helper: Through VS Code Diff Viewer extension
• Extra flags: _

Step 1: Describe the problem:

Feature request: Add support for dark mode via parameter and via prefers-color-scheme. Not sure if the latter can be done at this project or projects that use this project should detect the environment in some way and pass parameters.

Observed Results:

Dark mode not available in VS Code Diff viewer extension. https://github.com/caponetto/vscode-diff-viewer/issues/36

Expected Results:

• What did you expect to happen? -- Dark mode happens.

[rtfpessoa]

This should not be hard to implement, is mostly a matter of doing some CSS work and making it work with the dark highlight.js themes. Feel free to send a PR.

[Angelk90]

@mystiquewolf , @rtfpessoa : Are there any news?

If I put a background for example dark to the body this happens.

[mystiquewolf]

No news from me for now, i'm busy with other things, don't use this very frequently yet and lately I'm using light themes.

[Angelk90]

We hope @rtfpessoa can solve the problem.

[rtfpessoa]

No news on my side. It will probably need some more tweaks to work. Feel free to send a PR

[ananyf]

Hello @rtfpessoa Can you use this lib https://darkmodejs.learn.uno/

[rtfpessoa]

That does not seem like a great solution. The solution should be done at the css level of this project.

[ngjuping]

these are some colors i have used: (scss + vue, v-deep here means affect nested HTML elements)

.dark.code-diff::v-deep {
  .d2h-code-side-linenumber,
  .d2h-info,
  .d2h-emptyplaceholder,
  .d2h-code-side-emptyplaceholder {
    background-color: #272822;
    color: #d0d0d0;
  }
  span {
    color: #d0d0d0;
  }

  .d2h-del {
    background-color: #7d4e50;
  }

  del {
    background-color: #a07c7e;
  }
  .d2h-ins {
    background-color: #748a74;
  }

  ins {
    background-color: #177016;
  }
}

[rtfpessoa]

I have no time to put on this, but if you are interested in working on a PR, feel free to ask for any guidance and I will help.

[JHWelch]

I've been working on this with a straight CSS solution, other than passing a config value to indicate light/dark/auto switch. I'm making progress, hopefully I should have a PR up relatively soon.

[bombillazo]

Thanks for this feature!