Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Custom Color Theme Setting Token Background Color does not work #90070

Closed
warrenbuckley opened this issue Feb 5, 2020 · 3 comments
Closed

Custom Color Theme Setting Token Background Color does not work #90070

warrenbuckley opened this issue Feb 5, 2020 · 3 comments
Assignees
@alexdima @aeschli
Labels
*duplicate Issue identified as a duplicate of another issue(s)

Comments

@warrenbuckley
Copy link

Hello 👋
I am using Monaco editor engine and I am trying to set/colorize the background of a token based on the example in the playground.

https://microsoft.github.io/monaco-editor/playground.html#customizing-the-appearence-tokens-and-colors

In my case for the Razor language to set the token background color to yellow to be similar to the big brother Visual Studio, by setting the background property for the matching token metatag.cs

The object has a property called 'background' but looking at the source code here it does not use that value and only CSS color property is set.

vscode/src/vs/editor/common/modes/supports/tokenization.ts

Line 402 in 0135019

rules[i] = `.mtk${i} { color: ${color}; }`;

Example

// !!! Tokens can be inspected using F1 > Developer: Inspect Tokens !!!

monaco.editor.defineTheme('myCustomTheme', {
	base: 'vs', // can also be vs-dark or hc-black
	inherit: true, // can also be false to completely replace the builtin rules
	rules: [
        { token: 'metatag.cs', foreground: '000000', background: 'FFFF33', fontStyle: 'bold' },
		{ token: 'comment', foreground: 'ffa500', fontStyle: 'italic underline' },
		{ token: 'comment.js', foreground: '008800', fontStyle: 'bold' },
		{ token: 'comment.css', foreground: '0000ff' } // will inherit fontStyle from `comment` above
	]
});

monaco.editor.create(document.getElementById("container"), {
	value: getCode(),
	language: "razor",
	theme: "myCustomTheme"
});

function getCode() {
	return "<html><!-- // !!! Tokens can be inspected using F1 > Developer: Inspect Tokens !!! -->\n<head>\n	<!-- HTML comment -->\n	<style type=\"text/css\">\n		/* CSS comment */\n	</style>\n	<script type=\"javascript\">\n		// JavaScript comment\n	</"+"script>\n</head>\n<body></body>\n</html>";
}
@usernamehw
Copy link
Contributor

microsoft/monaco-editor#586 or #3429 ?

@warrenbuckley
Copy link
Author

@usernamehw thanks for linking to microsoft/monaco-editor#586 its the same issue but its gone stale & has no response on what is or will be done.

If the plan is to not support changing the background color at all, then can I suggest that the background property on ITokenThemeRule is marked as obsolete/deprecated if it does not do anything

@warrenbuckley warrenbuckley mentioned this issue Feb 5, 2020
Closed
@alexdima
Copy link
Member

alexdima commented Feb 5, 2020

Let's track in #3429

@warrenbuckley Thank you for your input. Both issues are marked with the label feature-request. That means that the feature has not been implemented yet and might be implemented in the future.

@alexdima alexdima closed this as completed Feb 5, 2020
@alexdima alexdima added the *duplicate Issue identified as a duplicate of another issue(s) label Feb 5, 2020
@vscodebot vscodebot bot locked and limited conversation to collaborators Mar 21, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@alexdima alexdima

@aeschli aeschli

Labels
*duplicate Issue identified as a duplicate of another issue(s)
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@warrenbuckley @alexdima @aeschli @usernamehw