microsoft / microsoft/monaco-editor

Not honoring 8-bit hex colors

Open
#1,880 0 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

feature-request
Dominant language
JavaScript
Stars
46.8k
Forks
4.1k
Avg merge
17h 58m
Merged PRs (30d)
1

Description

monaco-editor version: 0.20.0
Browser: Any
OS: Any
Playground code that reproduces the issue:

This is taken from the 'Tokens and Colors' example on the playground. All I added was 2 more characters to a hex value to give it an alpha channel. Monaco strips away those characters to make it a 6 digit hex even though 8 digit hex are valid.

// Theme matching (i.e. applying a style to a token) happens in JavaScript.
// We must therefore register the theme rules in JavaScript.

// A custom theme must name its base theme (i.e. 'vs', 'vs-dark' or 'hc-black')
// It can then choose to inherit the rules from the base theme or not
// A rule token matching is prefix based: e.g.
//  - string will match a token with type: string, string.double.js or string.html
//  - string.double will match a token with type string.double but will not match string or string.html

// !!! 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: 'comment', foreground: 'ffa500', fontStyle: 'italic underline' },
		{ token: 'comment.js', foreground: '00880033', fontStyle: 'bold' },
		{ token: 'comment.css', foreground: '0000ff' } // will inherit fontStyle from `comment` above
	]
});

monaco.editor.create(document.getElementById("container"), {
	value: getCode(),
	language: "text/html",
	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>";
}

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the provided Tokens and Colors playground snippet and trace how the theme rule foreground value is normalized. Confirm the 8-digit 00880033 value is retained and rendered with its alpha channel in the playground, including the supplied comment token example.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.