Update custom languages sample to latest theme API

test/playground.generated/extending-language-services-custom-languages.html

@@ -10,21 +10,6 @@
 <style>
 /*----------------------------------------SAMPLE CSS START*/
 
-.monaco-editor .token.custom-info {
-	color: grey;
-}
-.monaco-editor .token.custom-error {
-	color: red;
-	font-weight: bold;
-	font-size: 1.2em;
-}
-.monaco-editor .token.custom-notice {
-	color: orange;
-}
-
-.monaco-editor .token.custom-date {
-	color: green;
-}
 
 
 /*----------------------------------------SAMPLE CSS END*/
@@ -51,8 +36,10 @@ THIS IS A GENERATED FILE VIA gulp generate-test-samples
 loadEditor(function() {
 /*----------------------------------------SAMPLE JS START*/
 
+// Register a new language
 monaco.languages.register({ id: 'mySpecialLanguage' });
 
+// Register a tokens provider for the language
 monaco.languages.setMonarchTokensProvider('mySpecialLanguage', {
 	tokenizer: {
 		root: [
@@ -64,6 +51,19 @@ monaco.languages.setMonarchTokensProvider('mySpecialLanguage', {
 	}
 });
 
+// Define a new theme that constains only rules that match this language
+monaco.editor.defineTheme('myCoolTheme', {
+	base: 'vs',
+	inherit: false,
+	rules: [
+		{ token: 'custom-info', foreground: '808080' },
+		{ token: 'custom-error', foreground: 'ff0000', fontStyle: 'bold' },
+		{ token: 'custom-notice', foreground: 'FFA500' },
+		{ token: 'custom-date', foreground: '008800' },
+	]
+});
+
+// Register a completion item provider for the new language
 monaco.languages.registerCompletionItemProvider('mySpecialLanguage', {
 	provideCompletionItems: () => {
 		return [
@@ -92,6 +92,7 @@ monaco.languages.registerCompletionItemProvider('mySpecialLanguage', {
 });
 
 monaco.editor.create(document.getElementById("container"), {
+	theme: 'myCoolTheme',
 	value: getCode(),
 	language: 'mySpecialLanguage'
 });

website/playground/new-samples/extending-language-services/custom-languages/sample.css

@@ -1,15 +0,0 @@
-.monaco-editor .token.custom-info {
-	color: grey;
-}
-.monaco-editor .token.custom-error {
-	color: red;
-	font-weight: bold;
-	font-size: 1.2em;
-}
-.monaco-editor .token.custom-notice {
-	color: orange;
-}
-
-.monaco-editor .token.custom-date {
-	color: green;
-}

website/playground/new-samples/extending-language-services/custom-languages/sample.js

@@ -1,5 +1,7 @@
+// Register a new language
 monaco.languages.register({ id: 'mySpecialLanguage' });
 
+// Register a tokens provider for the language
 monaco.languages.setMonarchTokensProvider('mySpecialLanguage', {
 	tokenizer: {
 		root: [
@@ -11,6 +13,19 @@ monaco.languages.setMonarchTokensProvider('mySpecialLanguage', {
 	}
 });
 
+// Define a new theme that constains only rules that match this language
+monaco.editor.defineTheme('myCoolTheme', {
+	base: 'vs',
+	inherit: false,
+	rules: [
+		{ token: 'custom-info', foreground: '808080' },
+		{ token: 'custom-error', foreground: 'ff0000', fontStyle: 'bold' },
+		{ token: 'custom-notice', foreground: 'FFA500' },
+		{ token: 'custom-date', foreground: '008800' },
+	]
+});
+
+// Register a completion item provider for the new language
 monaco.languages.registerCompletionItemProvider('mySpecialLanguage', {
 	provideCompletionItems: () => {
 		return [
@@ -39,6 +54,7 @@ monaco.languages.registerCompletionItemProvider('mySpecialLanguage', {
 });
 
 monaco.editor.create(document.getElementById("container"), {
+	theme: 'myCoolTheme',
 	value: getCode(),
 	language: 'mySpecialLanguage'
 });