Skip to content

Commit 2b24f15

Browse files
tim-laitim-lai
authored
feat(syntax-highlight): add dark/light theme support for newer semantic tokens (#3617)
* feat(syntax-highlight): add dark theme support for newer semantic tokens * feat(syntax-highlight): add light theme support for newer semantic tokens
1 parent a0cc425 commit 2b24f15

File tree

2 files changed

+124
-28
lines changed

2 files changed

+124
-28
lines changed

‎src/plugins/editor-monaco/utils/monaco-theme-dark.js‎

Lines changed: 60 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,13 @@ const darkThemeMap = {
2323
'components-parameters': 17,
2424
'components-schemas': 17,
2525
'components-messages': 17,
26+
'components-request-bodies': 17,
27+
'components-examples': 17,
28+
'components-headers': 17,
29+
'components-security-schemes': 17,
30+
'components-links': 17,
31+
'components-callbacks': 17,
32+
'components-path-items': 17,
2633
'openapi-reference': 9,
2734
'server-url': 0,
2835
'Asyncapi-reference': 9,
@@ -45,6 +52,17 @@ const darkThemeMap = {
4552
asyncApiVersion: 6,
4653
channelItem: 13,
4754
channels: 17,
55+
tags: 6,
56+
webhooks: 6,
57+
contact: 6,
58+
license: 6,
59+
externalDocumentation: 6,
60+
'server-description': 6,
61+
'server-variables': 6,
62+
'operation-callbacks': 6,
63+
callback: 6,
64+
messageTraits: 17,
65+
operationTraits: 17,
4866
};
4967

5068
export default function getStyleMetadataDark(type, modifiers) {
@@ -75,12 +93,19 @@ export const themes = {
7593
base: 'vs-dark',
7694
inherit: true,
7795
rules: [
78-
// top-level tokens: bold, with light purple-white
96+
// top-level tokens for OpenAPI Object: bold, with light purple-white
97+
{ token: 'openapi', foreground: '#d0d0e3', fontStyle: 'bold' },
7998
{ token: 'info', foreground: '#d0d0e3', fontStyle: 'bold' },
80-
{ token: 'spec-version', foreground: '#d0d0e3', fontStyle: 'bold' },
99+
{ token: 'jsonSchemaDialect', foreground: '#d0d0e3', fontStyle: 'bold' },
81100
{ token: 'servers', foreground: '#d0d0e3', fontStyle: 'bold' },
82101
{ token: 'paths', foreground: '#d0d0e3', fontStyle: 'bold' },
102+
{ token: 'webhooks', foreground: '#d0d0e3', fontStyle: 'bold' },
83103
{ token: 'components', foreground: '#d0d0e3', fontStyle: 'bold' },
104+
{ token: 'security', foreground: '#d0d0e3', fontStyle: 'bold' },
105+
{ token: 'tags', foreground: '#d0d0e3', fontStyle: 'bold' },
106+
{ token: 'externalDocumentation', foreground: '#d0d0e3', fontStyle: 'bold' },
107+
// additional top-level tokens for AsyncAPI Object: bold, with light purple-white
108+
{ token: 'spec-version', foreground: '#d0d0e3', fontStyle: 'bold' }, // e.g. asyncapi
84109
{ token: 'channels', foreground: '#d0d0e3', fontStyle: 'bold' },
85110
// operation tokens: swagger-ui-post=green, swagger-ui-get=blue
86111
{ token: 'operation', foreground: '#66afce', fontStyle: 'bold' }, // light blue
@@ -89,9 +114,11 @@ export const themes = {
89114
// parameters tokens: purple
90115
{ token: 'parameters', foreground: '#C678DD', fontStyle: 'italic' },
91116
{ token: 'parameter', foreground: '#C678DD', fontStyle: 'italic' },
92-
{ token: 'components-parameters', foreground: '#C678DD', fontStyle: 'bold' }, // bug, not rendering as bold
93-
// other tokens with purple
117+
{ token: 'components-parameters', foreground: '#C678DD', fontStyle: 'bold' },
118+
// messages tokens: purple
94119
{ token: 'components-messages', foreground: '#C678DD', fontStyle: 'bold' },
120+
{ token: 'messages', foreground: '#C678DD', fontStyle: 'italic' },
121+
{ token: 'message', foreground: '#C678DD' },
95122
// reference & $refs tokens: orange
96123
{ token: 'reference-element', foreground: '#ff5500', fontStyle: 'bold' },
97124
{ token: 'reference-value', foreground: '#ffddcc', fontStyle: 'italic' },
@@ -104,35 +131,56 @@ export const themes = {
104131
// request & response: olive green
105132
{ token: 'requestBody', foreground: '#ceca84', fontStyle: 'italic' },
106133
{ token: 'responses', foreground: '#ceca84', fontStyle: 'italic' },
134+
{ token: 'components-responses', foreground: '#ceca84', fontStyle: 'bold' },
135+
{ token: 'components-request-bodies', foreground: '#ceca84', fontStyle: 'bold' },
107136
{ token: 'content', foreground: '#ceca84' },
108137
{ token: 'mediaType', foreground: '#ceca84' },
109138
{ token: 'response', foreground: '#ceca84' },
110139
{ token: 'server', foreground: '#ceca84' },
140+
// additional components: bold olive green
141+
{ token: 'components-examples', foreground: '#ceca84', fontStyle: 'bold' },
142+
{ token: 'components-headers', foreground: '#ceca84', fontStyle: 'bold' },
143+
{ token: 'components-links', foreground: '#ceca84', fontStyle: 'bold' },
144+
{ token: 'components-security-schemes', foreground: '#ceca84', fontStyle: 'bold' },
145+
{ token: 'components-callbacks', foreground: '#ceca84', fontStyle: 'bold' },
146+
{ token: 'components-pathItems', foreground: '#ceca84', fontStyle: 'bold' },
147+
{ token: 'components-path-items', foreground: '#ceca84', fontStyle: 'bold' },
111148
// plain value: green
112149
{ token: 'value', foreground: '#98C379' },
113150
{ token: 'value.string', foreground: '#98C379' },
114151
{ token: 'value.number', foreground: '#98C379' },
115152
// plain key: pinkish-orange, which appears light orange
116153
{ token: 'key.string', foreground: '#e8b9bb' },
117154
{ token: 'key.number', foreground: '#e8b9bb' },
118-
// tbd misc tokens: sky blue
155+
// misc token key/value pair: sky blue
119156
{ token: 'api-version', foreground: '#1de2fa' }, // version inside of info object
120157
{ token: 'server-url', foreground: '#1de2fa' },
121-
// tbd unverified tokens, sky blue
158+
// misc token object: sky blue
159+
{ token: 'callback', foreground: '#1de2fa' },
160+
{ token: 'contact', foreground: '#1de2fa' },
161+
{ token: 'discriminator', foreground: '#1de2fa' },
162+
{ token: 'example', foreground: '#1de2fa' }, // only when examples.example
163+
{ token: 'examples', foreground: '#1de2fa' },
164+
{ token: 'header', foreground: '#1de2fa' },
165+
{ token: 'license', foreground: '#1de2fa' },
166+
{ token: 'oAuthFlow', foreground: '#1de2fa' },
167+
{ token: 'oAuthFlows', foreground: '#1de2fa' },
168+
{ token: 'operation-example', foreground: '#1de2fa' },
169+
{ token: 'operation-callbacks', foreground: '#1de2fa' },
170+
{ token: 'securityScheme', foreground: '#1de2fa' },
171+
{ token: 'server-variables', foreground: '#1de2fa' },
172+
{ token: 'messageTrait', foreground: '#1de2fa' },
173+
{ token: 'operationTrait', foreground: '#1de2fa' },
174+
// tokens exist in apidom-ls, but not working in editor, sky blue
122175
{ token: 'version', foreground: '#1de2fa' },
123176
{ token: 'title', foreground: '#1de2fa' },
124-
{ token: 'openapi', foreground: '#1de2fa', fontStyle: 'bold' },
125177
{ token: 'specVersion', foreground: '#1de2fa' },
126178
{ token: 'asyncApiVersion', foreground: '#1de2fa' },
127-
// tbd unverified tokens, may be orange-ish to match other reference(s)
179+
// tokens exist in apidom-ls, but not working in editor, may be orange-ish to match other reference(s)
128180
{ token: 'openapi-reference', foreground: '#ff9966' },
129181
{ token: 'reference', foreground: '#ff9966' },
130182
{ token: 'Asyncapi-reference', foreground: '#ff9966' },
131183
{ token: 'json-reference', foreground: '#ff9966' },
132-
// NYI, color tbd
133-
// { token: 'securitySchemes', foreground: '#ff9966' }, // also components/securitySchemes
134-
// { token: 'links', foreground: '#ff9966' }, // also components/links
135-
// { token: 'security', foreground: '#ff9966' },
136184
],
137185
colors: {
138186
'editor.background': '#282c34',

‎src/plugins/editor-monaco/utils/monaco-theme-light.js‎

Lines changed: 64 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,13 @@ const lightThemeMap = {
2323
'components-parameters': 17,
2424
'components-schemas': 17,
2525
'components-messages': 17,
26+
'components-request-bodies': 17,
27+
'components-examples': 17,
28+
'components-headers': 17,
29+
'components-security-schemes': 17,
30+
'components-links': 17,
31+
'components-callbacks': 17,
32+
'components-path-items': 17,
2633
'openapi-reference': 9,
2734
'server-url': 0,
2835
'Asyncapi-reference': 9,
@@ -45,6 +52,17 @@ const lightThemeMap = {
4552
asyncApiVersion: 6,
4653
channelItem: 13,
4754
channels: 17,
55+
tags: 6,
56+
webhooks: 6,
57+
contact: 6,
58+
license: 6,
59+
externalDocumentation: 6,
60+
'server-description': 6,
61+
'server-variables': 6,
62+
'operation-callbacks': 6,
63+
callback: 6,
64+
messageTraits: 17,
65+
operationTraits: 17,
4866
};
4967

5068
export default function getStyleMetadataLight(type, modifiers) {
@@ -75,12 +93,19 @@ export const themes = {
7593
base: 'vs', // can also be vs-dark or hc-black
7694
inherit: true, // can also be false to completely replace the builtin rules
7795
rules: [
78-
// top-level tokens: bold dark grey with purple tint
96+
// top-level tokens for OpenAPI Object: bold dark grey with purple tint
97+
{ token: 'openapi', foreground: '#000033', fontStyle: 'bold' },
7998
{ token: 'info', foreground: '#000033', fontStyle: 'bold' },
80-
{ token: 'spec-version', foreground: '#000033', fontStyle: 'bold' },
99+
{ token: 'jsonSchemaDialect', foreground: '#000033', fontStyle: 'bold' },
81100
{ token: 'servers', foreground: '#000033', fontStyle: 'bold' },
82101
{ token: 'paths', foreground: '#000033', fontStyle: 'bold' },
102+
{ token: 'webhooks', foreground: '#000033', fontStyle: 'bold' },
83103
{ token: 'components', foreground: '#000033', fontStyle: 'bold' },
104+
{ token: 'security', foreground: '#000033', fontStyle: 'bold' },
105+
{ token: 'tags', foreground: '#000033', fontStyle: 'bold' },
106+
{ token: 'externalDocumentation', foreground: '#000033', fontStyle: 'bold' },
107+
// additional top-level tokens for AsyncAPI Object: bold dark grey with purple tint
108+
{ token: 'spec-version', foreground: '#000033', fontStyle: 'bold' }, // e.g. asyncapi
84109
{ token: 'channels', foreground: '#000033', fontStyle: 'bold' },
85110
// operation tokens: swagger-ui-post=green, swagger-ui-get=blue
86111
{ token: 'operation', foreground: '#66afce', fontStyle: 'bold' }, // light blue
@@ -89,9 +114,11 @@ export const themes = {
89114
// parameters tokens: purple
90115
{ token: 'parameters', foreground: '#993399', fontStyle: 'italic' },
91116
{ token: 'parameter', foreground: '#993399', fontStyle: 'italic' },
92-
{ token: 'components-parameters', foreground: '#993399', fontStyle: 'bold' }, // bug, not rendering as bold
93-
// other tokens with purple
117+
{ token: 'components-parameters', foreground: '#993399', fontStyle: 'bold' },
118+
// messages tokens: purple
94119
{ token: 'components-messages', foreground: '#993399', fontStyle: 'bold' },
120+
{ token: 'messages', foreground: '#993399', fontStyle: 'italic' },
121+
{ token: 'message', foreground: '#993399' },
95122
// reference & $refs tokens: orange
96123
{ token: 'reference-element', foreground: '#cc3300', fontStyle: 'bold' },
97124
{ token: 'reference-value', foreground: '#ff5500', fontStyle: 'italic' },
@@ -104,35 +131,56 @@ export const themes = {
104131
// request & response: olive green
105132
{ token: 'requestBody', foreground: '#666633', fontStyle: 'italic' },
106133
{ token: 'responses', foreground: '#666633', fontStyle: 'italic' },
134+
{ token: 'components-responses', foreground: '#666633', fontStyle: 'bold' },
135+
{ token: 'components-request-bodies', foreground: '#666633', fontStyle: 'bold' },
107136
{ token: 'content', foreground: '#666633' },
108137
{ token: 'mediaType', foreground: '#666633' },
109138
{ token: 'response', foreground: '#666633' },
110139
{ token: 'server', foreground: '#666633' },
140+
// additional components: bold olive green
141+
{ token: 'components-examples', foreground: '#666633', fontStyle: 'bold' },
142+
{ token: 'components-headers', foreground: '#666633', fontStyle: 'bold' },
143+
{ token: 'components-links', foreground: '#666633', fontStyle: 'bold' },
144+
{ token: 'components-security-schemes', foreground: '#666633', fontStyle: 'bold' },
145+
{ token: 'components-callbacks', foreground: '#666633', fontStyle: 'bold' },
146+
{ token: 'components-pathItems', foreground: '#666633', fontStyle: 'bold' },
147+
{ token: 'components-path-items', foreground: '#666633', fontStyle: 'bold' },
111148
// plain value: green
112149
{ token: 'value', foreground: '#339933' },
113150
{ token: 'value.string', foreground: '#339933' },
114151
{ token: 'value.number', foreground: '#339933' },
115152
// plain key: pumpkin
116153
{ token: 'key.string', foreground: '#cc6600' },
117154
{ token: 'key.number', foreground: '#cc6600' },
118-
// tbd misc tokens: sky blue
155+
// misc token key/value pair: sky blue
119156
{ token: 'api-version', foreground: '#0099cc' }, // version inside of info object
120157
{ token: 'server-url', foreground: '#0099cc' },
121-
// tbd unverified tokens, sky blue
122-
{ token: 'version', foreground: '#000033' },
123-
{ token: 'title', foreground: '#000033' },
124-
{ token: 'openapi', foreground: '#000033', fontStyle: 'bold' },
125-
{ token: 'specVersion', foreground: '#000033' },
126-
{ token: 'asyncApiVersion', foreground: '#000033' },
127-
// tbd unverified tokens, may be orange-ish to match other reference(s)
158+
// misc token object: sky blue
159+
{ token: 'callback', foreground: '#0099cc' },
160+
{ token: 'contact', foreground: '#0099cc' },
161+
{ token: 'discriminator', foreground: '#0099cc' },
162+
{ token: 'example', foreground: '#0099cc' }, // only when examples.example
163+
{ token: 'examples', foreground: '#0099cc' },
164+
{ token: 'header', foreground: '#0099cc' },
165+
{ token: 'license', foreground: '#0099cc' },
166+
{ token: 'oAuthFlow', foreground: '#0099cc' },
167+
{ token: 'oAuthFlows', foreground: '#0099cc' },
168+
{ token: 'operation-example', foreground: '#0099cc' },
169+
{ token: 'operation-callbacks', foreground: '#0099cc' },
170+
{ token: 'securityScheme', foreground: '#0099cc' },
171+
{ token: 'server-variables', foreground: '#0099cc' },
172+
{ token: 'messageTrait', foreground: '#0099cc' },
173+
{ token: 'operationTrait', foreground: '#0099cc' },
174+
// tokens exist in apidom-ls, but not working in editor, sky blue
175+
{ token: 'version', foreground: '#0099cc' },
176+
{ token: 'title', foreground: '#0099cc' },
177+
{ token: 'specVersion', foreground: '#0099cc' },
178+
{ token: 'asyncApiVersion', foreground: '#0099cc' },
179+
// tokens exist in apidom-ls, but not working in editor, may be orange-ish to match other reference(s)
128180
{ token: 'openapi-reference', foreground: '#ff9966' },
129181
{ token: 'reference', foreground: '#ff9966' },
130182
{ token: 'Asyncapi-reference', foreground: '#ff9966' },
131183
{ token: 'json-reference', foreground: '#ff9966' },
132-
// NYI, color tbd
133-
// { token: 'securitySchemes', foreground: '#ff9966' }, // also components/securitySchemes
134-
// { token: 'links', foreground: '#ff9966' }, // also components/links
135-
// { token: 'security', foreground: '#ff9966' },
136184
],
137185
colors: {
138186
'editor.background': '#fdf6e3',

0 commit comments

Comments
 (0)