feat(syntax-highlighter): add light variant

[xseman]

This pull request adds a new light theme idea for syntax highlighting.

Description

Provide users with an alternative theme option, specifically a light background for syntax highlighting. This offer more customization options to users.

Motivation and Context

Currently, there is only a dark themes available. Personally, I find the light theme easier on the eyes.

How Has This Been Tested?

I have manually tested the changes by applying the new light theme to the syntax highlighting feature.

Screenshots (if appropriate):

Checklist

My PR contains...

• No code changes (src/ is unmodified: changes to documentation, CI, metadata, etc.)
• Dependency changes (any modification to dependencies in package.json)
• Bug fixes (non-breaking change which fixes an issue)
• Improvements (misc. changes to existing features)
• Features (non-breaking change which adds functionality)

My changes...

• are breaking changes to a public API (config options, System API, major UI change, etc).
• are breaking changes to a private API (Redux, component props, utility functions, etc.).
• are breaking changes to a developer API (npm script behavior changes, new dev system dependencies, etc).
• are not breaking changes.

Documentation

• My changes do not require a change to the project documentation.
• My changes require a change to the project documentation.
• If yes to above: I have updated the documentation accordingly.

Automated tests

• My changes can not or do not need to be tested.
• My changes can and should be tested by unit and/or integration tests.
• If yes to above: I have added tests to cover my changes.
• If yes to above: I have taken care to cover edge cases in my tests.
• All new and existing tests passed.

[char0n]

Hi @xseman thanks for the PR! What would be the implication on the resulting bundle size? I assume minimal as the new file only contains following source code:

export default {
  "hljs": {
    "display": "block",
    "overflowX": "auto",
    "padding": "0.5em",
    "color": "#000",
    "background": "#fff"
  },
  "hljs-subst": {
    "fontWeight": "normal",
    "color": "#000"
  },
  "hljs-title": {
    "fontWeight": "normal",
    "color": "#000"
  },
  "hljs-comment": {
    "color": "#808080",
    "fontStyle": "italic"
  },
  "hljs-quote": {
    "color": "#808080",
    "fontStyle": "italic"
  },
  "hljs-meta": {
    "color": "#808000"
  },
  "hljs-tag": {
    "background": "#efefef"
  },
  "hljs-section": {
    "fontWeight": "bold",
    "color": "#000080"
  },
  "hljs-name": {
    "fontWeight": "bold",
    "color": "#000080"
  },
  "hljs-literal": {
    "fontWeight": "bold",
    "color": "#000080"
  },
  "hljs-keyword": {
    "fontWeight": "bold",
    "color": "#000080"
  },
  "hljs-selector-tag": {
    "fontWeight": "bold",
    "color": "#000080"
  },
  "hljs-type": {
    "fontWeight": "bold",
    "color": "#000080"
  },
  "hljs-selector-id": {
    "fontWeight": "bold",
    "color": "#000080"
  },
  "hljs-selector-class": {
    "fontWeight": "bold",
    "color": "#000080"
  },
  "hljs-attribute": {
    "fontWeight": "bold",
    "color": "#0000ff"
  },
  "hljs-number": {
    "fontWeight": "normal",
    "color": "#0000ff"
  },
  "hljs-regexp": {
    "fontWeight": "normal",
    "color": "#0000ff"
  },
  "hljs-link": {
    "fontWeight": "normal",
    "color": "#0000ff"
  },
  "hljs-string": {
    "color": "#008000",
    "fontWeight": "bold"
  },
  "hljs-symbol": {
    "color": "#000",
    "background": "#d0eded",
    "fontStyle": "italic"
  },
  "hljs-bullet": {
    "color": "#000",
    "background": "#d0eded",
    "fontStyle": "italic"
  },
  "hljs-formula": {
    "color": "#000",
    "background": "#d0eded",
    "fontStyle": "italic"
  },
  "hljs-doctag": {
    "textDecoration": "underline"
  },
  "hljs-variable": {
    "color": "#660e7a"
  },
  "hljs-template-variable": {
    "color": "#660e7a"
  },
  "hljs-addition": {
    "background": "#baeeba"
  },
  "hljs-deletion": {
    "background": "#ffc8bd"
  },
  "hljs-emphasis": {
    "fontStyle": "italic"
  },
  "hljs-strong": {
    "fontWeight": "bold"
  }
};

[xseman]

@char0n indeed, you are correct, in bytes minified version difference is (1508 bytes).

• 1442648b swagger-ui-bundle.js
• 1444156b swagger-ui-bundle.js (after)

Do you want me to do any improvements? But I guess I can't do much unless I can remove some of the different dark variations.

[char0n]

@char0n indeed, you are correct, in bytes minified version difference is (1508 bytes).

Thanks for confirming

Do you want me to do any improvements? But I guess I can't do much unless I can remove some of the different dark variations.

Not really, it's fine as it is.

[char0n]

LGTM. Thanks a lot for contributing!

[char0n]

A pozdravujem do Bratislavy ;]