Improve theme pull request filtering ability

[rickstaa]

Is your feature request related to a problem? Please describe.

While working through the pull request I noticed that 75 of the 146 pull requests are related to new themes (see https://github.com/anuraghazra/github-readme-stats/pulls?q=is%3Apr+is%3Aopen+theme). Most of these pull requests should be closed since they do not include vscode themes.

Describe the solution you'd like

Maybe we can improve the preview-theme.yml GitHub action to automatically close the theme-related pull request for which no vscode theme is found? I think this will make it easier for us to maintain the repository. We can do this by using the visualstudio marketplace API. This API is not well documented but I managed to find out the right syntax (see my StackOverflow answer:

{
    "filters": [
        {
            "criteria": [
                {
                	"filterType": 8,
                	"value": "Microsoft.VisualStudio.Code"
                },
                {
                	"filterType": 5,
                	"value": "Themes"
                },
                {
                  "filterType": 10,
                  "value": "<THEME_NAME>"
                }
            ]
        }
    ]
}

Here <THEME_NAME> will be read from the pull request that triggered the action (see https://github.com/anuraghazra/github-readme-stats/pull/1429/files). You can test this syntax out on reqbin.com

Additionally, we might need to update the contribution guidelines to specify that we only accept pull requests to themes related to released vscode themes. Maybe we can add something similar to the text that is added in the preview-theme script.

github-readme-stats/scripts/preview-theme.js

Lines 15 to 20 in bc6c22e

	const themeContribGuidelines = `
	\rHi, thanks for the theme contribution, please read our theme [contribution guidelines](https://github.com/anuraghazra/github-readme-stats/blob/master/CONTRIBUTING.md#themes-contribution).
	\rWe are currently only accepting color combinations from any VSCode theme or themes which have good color combination to minimize bloating the themes collection.
	\r> Also note that if this theme is exclusively for your personal use, then instead of adding it to our theme collection you can use card [customization options](https://github.com/anuraghazra/github-readme-stats#customization)
	`;

We can add the following to give users the ability to let us know that our action wrongly classified their theme as invalid:

Please comment below if your theme is a valid vscode theme and you think your pull request should not have been closed.

We can then re-open the pull request on which the author replies.

Invalid pull request example

Let's use our newest theme pull request as an example (i.e #1429):

No vscode theme is found so this pull request would be closed.

Valid pull request example

Let's use an accepted theme (i.e. #1343):

A vscode theme was found so this pull request will stay open for us to review.

Problematic case

However, there is one problem with this approach when people add a _light or _dark suffix to the theme name (i.e. #1379). In this case, the theme is a valid vscode theme, but the API finds no themes. This can, however, be solved by parsing the text to remove any light and dark prefixes.

Alternative solution

We can also add a new vscode_theme_url or vscode_theme_name the theme description. We can close a pull request for which the link/name is not valid if we do this.

[anuraghazra]

Hi @rickstaa

Thanks for the detailed thoughts and high quality issue description on this.

Yeah I think we can improve the script with vscode API.
It won't be a full proof system but will definitely improve the detection.

Also note that, the rule of "only vscode themes are accepted" is not truly strict, If i find a combination which passes a11y checks and has a very unique color combination I accept those too. (I know i know, thats very subjective)

[rickstaa]

Do you mean a11y. Mm, do you know if there are any automated tests we can do for checking the a11y criteria? I saw multiple ones online but I do not directly see how they relate to theme colours (i.e. https://www.adrianbolonio.com/en/accessibility-github-actions/ and https://github.com/microsoft/accessibility-insights-action).

[anuraghazra]

Do you mean a11y. Mm, do you know if there are any automated tests we can do for checking the a11y criteria? I saw multiple ones online but I do not directly see how they relate to theme colours (i.e. https://www.adrianbolonio.com/en/accessibility-github-actions/ and https://github.com/microsoft/accessibility-insights-action).

a11y in this case means correct color contrast which passes WCAG AAA standard, yes there are ways to automate this.

[rickstaa]

Amazing then I think automation just checking the WCAG AAA standards is the best way to go?

[anuraghazra]

I've implemented the color contrast check on this PR #1439

See how it looks here. #1438 (comment)

[rickstaa]

@anuraghazra Looks great thanks for implementing this!