@patternfly/react-code-editor
Version:
This package provides a PatternFly wrapper for the Monaco code editor
68 lines • 3.82 kB
JavaScript
import { colors } from './themeTokenMapping';
const createTheme = (mode) => ({
base: mode === 'light' ? 'vs' : 'vs-dark',
inherit: true,
colors: {
'editor.background': colors.background[mode],
'editor.foreground': colors.foreground[mode],
'editorLineNumber.activeForeground': colors.foreground[mode],
'editorLineNumber.foreground': colors.secondaryForeground[mode]
},
rules: [
{ token: '', foreground: colors.foreground[mode], background: colors.background[mode] },
{ token: 'invalid', foreground: colors.red[mode] },
{ token: 'emphasis', fontStyle: 'italic' },
{ token: 'strong', fontStyle: 'bold' },
{ token: 'variable', foreground: colors.blue[mode] },
{ token: 'variable.predefined', foreground: colors.teal[mode] },
{ token: 'constant', foreground: colors.orange[mode] },
{ token: 'comment', foreground: colors.gray[mode] },
{ token: 'number', foreground: colors.orange[mode] },
{ token: 'number.hex', foreground: colors.blue[mode] },
{ token: 'regexp', foreground: colors.red[mode] },
{ token: 'annotation', foreground: colors.purple[mode] },
{ token: 'type', foreground: colors.yellow[mode] },
{ token: 'delimiter', foreground: colors.foreground[mode] },
{ token: 'delimiter.html', foreground: colors.gray[mode] },
{ token: 'delimiter.xml', foreground: colors.blue[mode] },
{ token: 'tag', foreground: colors.red[mode] },
{ token: 'tag.id.jade', foreground: colors.teal[mode] },
{ token: 'tag.class.jade', foreground: colors.teal[mode] },
{ token: 'meta.scss', foreground: colors.red[mode] },
{ token: 'metatag', foreground: colors.orange[mode] },
{ token: 'metatag.content.html', foreground: colors.red[mode] },
{ token: 'metatag.html', foreground: colors.gray[mode] },
{ token: 'metatag.xml', foreground: colors.gray[mode] },
{ token: 'metatag.php', fontStyle: 'bold' },
{ token: 'key', foreground: colors.orange[mode] },
{ token: 'string.key.json', foreground: colors.red[mode] },
{ token: 'string.value.json', foreground: colors.blue[mode] },
{ token: 'attribute.name', foreground: colors.red[mode] },
{ token: 'attribute.value', foreground: colors.blue[mode] },
{ token: 'attribute.value.number', foreground: colors.orange[mode] },
{ token: 'attribute.value.unit', foreground: colors.orange[mode] },
{ token: 'attribute.value.html', foreground: colors.blue[mode] },
{ token: 'attribute.value.xml', foreground: colors.blue[mode] },
{ token: 'string', foreground: colors.green[mode] },
{ token: 'string.html', foreground: colors.green[mode] },
{ token: 'string.sql', foreground: colors.green[mode] },
{ token: 'string.yaml', foreground: colors.green[mode] },
{ token: 'keyword', foreground: colors.purple[mode] },
{ token: 'keyword.json', foreground: colors.purple[mode] },
{ token: 'keyword.flow', foreground: colors.purple[mode] },
{ token: 'keyword.flow.scss', foreground: colors.purple[mode] },
{ token: 'operator.scss', foreground: colors.foreground[mode] },
{ token: 'operator.sql', foreground: colors.foreground[mode] },
{ token: 'operator.swift', foreground: colors.foreground[mode] },
{ token: 'predefined.sql', foreground: colors.purple[mode] }
]
});
/**
* Define the themes `pf-v6-theme-light` and
* `pf-v6-theme-dark` for an instance of Monaco editor.
*/
export const defineThemes = (editor) => {
editor.defineTheme('pf-v6-theme-light', createTheme('light'));
editor.defineTheme('pf-v6-theme-dark', createTheme('dark'));
};
//# sourceMappingURL=CodeEditorTheme.js.map