From 0e78d5c09997b67b2385f3fbe04ef2ac1828e179 Mon Sep 17 00:00:00 2001
From: Alex Dima <alexdima@microsoft.com>
Date: Wed, 18 Jan 2017 12:07:50 +0100
Subject: [PATCH] Update custom languages sample to latest theme API

---
 ...ng-language-services-custom-languages.html | 31 ++++++++++---------
 .../custom-languages/sample.css               | 15 ---------
 .../custom-languages/sample.js                | 16 ++++++++++
 3 files changed, 32 insertions(+), 30 deletions(-)

diff --git a/test/playground.generated/extending-language-services-custom-languages.html b/test/playground.generated/extending-language-services-custom-languages.html
index 5a535ecf..849cbc0e 100644
--- a/test/playground.generated/extending-language-services-custom-languages.html
+++ b/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'
 });
diff --git a/website/playground/new-samples/extending-language-services/custom-languages/sample.css b/website/playground/new-samples/extending-language-services/custom-languages/sample.css
index dddc742b..e69de29b 100644
--- a/website/playground/new-samples/extending-language-services/custom-languages/sample.css
+++ b/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;
-}
diff --git a/website/playground/new-samples/extending-language-services/custom-languages/sample.js b/website/playground/new-samples/extending-language-services/custom-languages/sample.js
index 0842dd25..6be55add 100644
--- a/website/playground/new-samples/extending-language-services/custom-languages/sample.js
+++ b/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'
 });