diff --git a/extensions/markdown/syntaxes/markdown.tmLanguage b/extensions/markdown/syntaxes/markdown.tmLanguage index b0982a11087833fd21d7f5a54084147c8fe796ef..bc8de1994d7bafbcdfcfe7550e455fc945ff1ec7 100644 --- a/extensions/markdown/syntaxes/markdown.tmLanguage +++ b/extensions/markdown/syntaxes/markdown.tmLanguage @@ -294,8 +294,8 @@ (^|\G)\s*(<!--) end (-->) - contentName - block.comment.html + name + comment.block.html captures 1 @@ -1902,7 +1902,7 @@ match (`+)([^`]|(?!(?<!`)\1(?!`))`)*+(\1) name - markup.raw.inline.markdown + markup.inline.raw.markdown diff --git a/extensions/theme-defaults/themes/dark_plus.json b/extensions/theme-defaults/themes/dark_plus.json index 6a4b60583f6b2b8daf32a87ad401ede62f17dbbb..e47f4c02e1411bb52e39aa0470f543900501cba1 100644 --- a/extensions/theme-defaults/themes/dark_plus.json +++ b/extensions/theme-defaults/themes/dark_plus.json @@ -19,9 +19,28 @@ "support.class", "support.type", "entity.name.type", + "entity.name.class", + "storage.type.cs", + "storage.type.generic.cs", + "storage.type.modifier.cs", + "storage.type.variable.cs", + + "storage.type.annotation.java", + "storage.type.generic.java", "storage.type.java", - "entity.other.inherited-class" + "storage.type.object.array.java", + "storage.type.primitive.array.java", + "storage.type.primitive.java", + "storage.type.token.java", + + "storage.type.groovy", + "storage.type.annotation.groovy", + "storage.type.parameters.groovy", + "storage.type.generic.groovy", + "storage.type.object.array.groovy", + "storage.type.primitive.array.groovy", + "storage.type.primitive.groovy" ], "settings": { "foreground": "#4EC9B0" @@ -51,9 +70,8 @@ { "name": "Variable and parameter name", "scope": [ - "variable.parameter", "variable", - "variable.name", + "meta.definition.variable.name", "support.variable" ], "settings": { @@ -61,8 +79,11 @@ } }, { - "name": "Object keys, TS gammar specific", - "scope": "object-literal.member.key", + "name": "Object keys, TS grammar specific", + "scope": [ + "meta.object-literal.key", + "meta.object-literal.key entity.name.function" + ], "settings": { "foreground": "#9CDCFE" } @@ -70,21 +91,19 @@ { "name": "CSS property value", "scope": [ - "support.property-value", - "constant.rgb-value", - "support.property-value.scss", - "constant.rgb-value.scss" + "constant.other.color.rgb-value.css", + "constant.other.rgb-value.css", + "meta.property-value.css support.function", + "meta.property-value.css support", + + "constant.numeric.color.rgb-value.scss", + "constant.rgb-value.scss", + "meta.property-value.scss support.function", + "meta.property-value.scss support" ], "settings": { "foreground": "#CE9178" } - }, - { - "name": "JSX Tag names, workaround for flattening match with function", - "scope": "entity.name.function.tag", - "settings": { - "foreground": "#569cd6" - } } ] } \ No newline at end of file diff --git a/extensions/theme-defaults/themes/dark_vs.json b/extensions/theme-defaults/themes/dark_vs.json index 3bc4a1d75d78db9e7617b5f3ba544ac0d8f58b62..b717ba64bef6194873a7b10e24864a98b0aebc3d 100644 --- a/extensions/theme-defaults/themes/dark_vs.json +++ b/extensions/theme-defaults/themes/dark_vs.json @@ -1,6 +1,12 @@ { "name": "Dark Visual Studio", "settings": [ + { + "settings": { + "foreground": "#D4D4D4", + "background": "#1E1E1E" + } + }, { "scope": "emphasis", "settings": { @@ -45,7 +51,11 @@ } }, { - "scope": "constant.rgb-value", + "scope": [ + "constant.other.color.rgb-value.css", + "constant.numeric.color.rgb-value.scss", + "constant.other.rgb-value.css" + ], "settings": { "foreground": "#d4d4d4" } @@ -57,7 +67,7 @@ } }, { - "scope": "entity.name.selector", + "scope": "entity.name.tag.css", "settings": { "foreground": "#d7ba7d" } @@ -69,7 +79,19 @@ } }, { - "scope": "entity.other.attribute-name.css", + "scope": [ + "entity.other.attribute-name.class.css", + "entity.other.attribute-name.class.mixin.css", + "entity.other.attribute-name.id.css", + "entity.other.attribute-name.parent-selector.css", + "entity.other.attribute-name.pseudo-class.css", + "entity.other.attribute-name.pseudo-element.css", + + "source.css.less entity.other.attribute-name.id", + + "entity.other.attribute-name.attribute.scss", + "entity.other.attribute-name.scss" + ], "settings": { "foreground": "#d7ba7d" } @@ -125,13 +147,13 @@ } }, { - "scope": "markup.punctuation.quote.beginning", + "scope": "beginning.punctuation.definition.quote.markdown", "settings": { "foreground": "#608b4e" } }, { - "scope": "markup.punctuation.list.beginning", + "scope": "beginning.punctuation.definition.list.markdown", "settings": { "foreground": "#6796e6" } @@ -180,7 +202,7 @@ } }, { - "scope": "meta.header.diff", + "scope": "meta.diff.header", "settings": { "foreground": "#569cd6" } @@ -229,7 +251,10 @@ }, { "name": "JavaScript string interpolation ${}", - "scope": "string.template-expression", + "scope": [ + "punctuation.definition.template-expression.begin.ts", + "punctuation.definition.template-expression.end.ts" + ], "settings": { "foreground": "#569cd6" } @@ -271,8 +296,10 @@ } }, { - "name": "coloring of the PHP start and end tag ()", - "scope": ["punctuation.section.embedded.begin.metatag.php", "punctuation.section.embedded.end.metatag.php"], + "scope": [ + "punctuation.section.embedded.metatag.begin.php", + "punctuation.section.embedded.metatag.end.php" + ], "settings": { "foreground": "#569cd6" } diff --git a/extensions/theme-defaults/themes/hc_black.json b/extensions/theme-defaults/themes/hc_black.json index 24c024d01ee14137114550d3668607b7afc132f0..f5aa258ffccbad7e87e762176032bd8c9a318f6d 100644 --- a/extensions/theme-defaults/themes/hc_black.json +++ b/extensions/theme-defaults/themes/hc_black.json @@ -1,6 +1,12 @@ { "name": "Dark Visual Studio", "settings": [ + { + "settings": { + "foreground": "#FFFFFF", + "background": "#000000" + } + }, { "scope": "emphasis", "settings": { @@ -14,7 +20,7 @@ } }, { - "scope": "header", + "scope": "meta.diff.header", "settings": { "foreground": "#000080" } @@ -45,7 +51,11 @@ } }, { - "scope": "constant.rgb-value", + "scope": [ + "constant.other.color.rgb-value.css", + "constant.numeric.color.rgb-value.scss", + "constant.other.rgb-value.css" + ], "settings": { "foreground": "#d4d4d4" } @@ -57,7 +67,7 @@ } }, { - "scope": "entity.name.selector", + "scope": "entity.name.tag.css", "settings": { "foreground": "#d7ba7d" } @@ -69,7 +79,19 @@ } }, { - "scope": "entity.other.attribute-name.css", + "scope": [ + "entity.other.attribute-name.class.css", + "entity.other.attribute-name.class.mixin.css", + "entity.other.attribute-name.id.css", + "entity.other.attribute-name.parent-selector.css", + "entity.other.attribute-name.pseudo-class.css", + "entity.other.attribute-name.pseudo-element.css", + + "source.css.less entity.other.attribute-name.id", + + "entity.other.attribute-name.attribute.scss", + "entity.other.attribute-name.scss" + ], "settings": { "foreground": "#d7ba7d" } @@ -130,7 +152,9 @@ }, { "name": "brackets of XML/HTML tags", - "scope": "punctuation.definition.tag", + "scope": [ + "punctuation.definition.tag" + ], "settings": { "foreground": "#808080" } @@ -203,7 +227,10 @@ }, { "name": "JavaScript string interpolation ${}", - "scope": "string.template-expression", + "scope": [ + "punctuation.definition.template-expression.begin.ts", + "punctuation.definition.template-expression.end.ts" + ], "settings": { "foreground": "#569cd6" } @@ -265,7 +292,7 @@ }, { "name": "coloring of the TS this", - "scope": "variable.this", + "scope": "variable.language.this", "settings": { "foreground": "#569cd6" } diff --git a/extensions/theme-defaults/themes/light_plus.json b/extensions/theme-defaults/themes/light_plus.json index 835d0a5e7a09e1b017ce7bf7f393d1e8b62e7cca..ba5ec65bdd138903b10b9d326b6a01855369a9dd 100644 --- a/extensions/theme-defaults/themes/light_plus.json +++ b/extensions/theme-defaults/themes/light_plus.json @@ -19,9 +19,28 @@ "support.class", "support.type", "entity.name.type", + "entity.name.class", + "storage.type.cs", + "storage.type.generic.cs", + "storage.type.modifier.cs", + "storage.type.variable.cs", + + "storage.type.annotation.java", + "storage.type.generic.java", "storage.type.java", - "entity.other.inherited-class" + "storage.type.object.array.java", + "storage.type.primitive.array.java", + "storage.type.primitive.java", + "storage.type.token.java", + + "storage.type.groovy", + "storage.type.annotation.groovy", + "storage.type.parameters.groovy", + "storage.type.generic.groovy", + "storage.type.object.array.groovy", + "storage.type.primitive.array.groovy", + "storage.type.primitive.groovy" ], "settings": { "foreground": "#267f99" @@ -51,9 +70,8 @@ { "name": "Variable and parameter name", "scope": [ - "variable.parameter", "variable", - "variable.name", + "meta.definition.variable.name", "support.variable" ], "settings": { @@ -61,8 +79,11 @@ } }, { - "name": "Object keys, TS gammar specific", - "scope": "object-literal.member.key", + "name": "Object keys, TS grammar specific", + "scope": [ + "meta.object-literal.key", + "meta.object-literal.key entity.name.function" + ], "settings": { "foreground": "#001080" } @@ -70,21 +91,19 @@ { "name": "CSS property value", "scope": [ - "support.property-value", - "constant.rgb-value", - "support.property-value.scss", - "constant.rgb-value.scss" + "constant.other.color.rgb-value.css", + "constant.other.rgb-value.css", + "meta.property-value.css support.function", + "meta.property-value.css support", + + "constant.numeric.color.rgb-value.scss", + "constant.rgb-value.scss", + "meta.property-value.scss support.function", + "meta.property-value.scss support" ], "settings": { "foreground": "#0451a5" } - }, - { - "name": "JSX Tag names, workaround for flattening match with function", - "scope": "entity.name.function.tag", - "settings": { - "foreground": "#800000" - } } ] } \ No newline at end of file diff --git a/extensions/theme-defaults/themes/light_vs.json b/extensions/theme-defaults/themes/light_vs.json index c1d1f256207025a389518ceaec4dbf66517565b3..ad89ecb1f3e4ac80c115f66893369fe30663af50 100644 --- a/extensions/theme-defaults/themes/light_vs.json +++ b/extensions/theme-defaults/themes/light_vs.json @@ -14,7 +14,7 @@ } }, { - "scope": "header", + "scope": "meta.diff.header", "settings": { "foreground": "#000080" } @@ -46,7 +46,11 @@ } }, { - "scope": "constant.rgb-value", + "scope": [ + "constant.other.color.rgb-value.css", + "constant.numeric.color.rgb-value.scss", + "constant.other.rgb-value.css" + ], "settings": { "foreground": "#0451a5" } @@ -71,7 +75,19 @@ } }, { - "scope": ["entity.other.attribute-name.css", "entity.other.attribute-name.scss"], + "scope": [ + "entity.other.attribute-name.class.css", + "entity.other.attribute-name.class.mixin.css", + "entity.other.attribute-name.id.css", + "entity.other.attribute-name.parent-selector.css", + "entity.other.attribute-name.pseudo-class.css", + "entity.other.attribute-name.pseudo-element.css", + + "source.css.less entity.other.attribute-name.id", + + "entity.other.attribute-name.attribute.scss", + "entity.other.attribute-name.scss" + ], "settings": { "foreground": "#800000" } @@ -128,7 +144,10 @@ } }, { - "scope": ["markup.punctuation.quote.beginning", "markup.punctuation.list.beginning"], + "scope": [ + "beginning.punctuation.definition.quote.markdown", + "beginning.punctuation.definition.list.markdown" + ], "settings": { "foreground": "#0451a5" } @@ -201,7 +220,28 @@ } }, { - "scope": ["string.xml", "string.jade", "string.yaml", "string.html"], + "scope": [ + + "string.comment.buffered.block.jade", + "string.quoted.jade", + "string.interpolated.jade", + + "string.unquoted.plain.in.yaml", + "string.unquoted.plain.out.yaml", + "string.unquoted.block.yaml", + "string.quoted.single.yaml", + + "string.quoted.double.xml", + "string.quoted.single.xml", + "string.unquoted.cdata.xml", + + "string.quoted.double.html", + "string.quoted.single.html", + "string.unquoted.html", + + "string.quoted.single.handlebars", + "string.quoted.double.handlebars" + ], "settings": { "foreground": "#0000ff" } @@ -214,19 +254,32 @@ }, { "name": "JavaScript string interpolation ${}", - "scope": "string.template-expression", + "scope": [ + "punctuation.definition.template-expression.begin.ts", + "punctuation.definition.template-expression.end.ts" + ], "settings": { "foreground": "#0000ff" } }, { - "scope": "support.property-value", + "scope": [ + "support.property-value", + "meta.property-value.css support", + "meta.property-value.scss support" + ], "settings": { "foreground": "#0451a5" } }, { - "scope": ["support.type.property-name.css", "support.type.property-name.less", "support.type.property-name.scss"], + "scope": [ + "support.type.property-name.css", + "support.type.property-name.variable.css", + "support.type.property-name.media.css", + "support.type.property-name.less", + "support.type.property-name.scss" + ], "settings": { "foreground": "#ff0000" } @@ -268,8 +321,10 @@ } }, { - "name": "coloring of the PHP start and end tag ()", - "scope": ["punctuation.section.embedded.begin.metatag.php", "punctuation.section.embedded.end.metatag.php"], + "scope": [ + "punctuation.section.embedded.metatag.begin.php", + "punctuation.section.embedded.metatag.end.php" + ], "settings": { "foreground": "#800000" } diff --git a/src/vs/editor/node/textMate/TMSyntax.ts b/src/vs/editor/node/textMate/TMSyntax.ts index d6957c02fda0712ed0659c5d8e10a0e6ba35ee70..d717fcb5272f1bed1ec924317ea9381c496b7ad2 100644 --- a/src/vs/editor/node/textMate/TMSyntax.ts +++ b/src/vs/editor/node/textMate/TMSyntax.ts @@ -15,10 +15,11 @@ import { ILineTokens, ITokenizationSupport, TokenizationRegistry } from 'vs/edit import { TMState } from 'vs/editor/node/textMate/TMState'; import { RawLineTokens } from 'vs/editor/common/modes/supports'; import { IModeService } from 'vs/editor/common/services/modeService'; -import { IGrammar, Registry, StackElement, IToken } from 'vscode-textmate'; +import { IGrammar, Registry, StackElement, IToken, IEmbeddedLanguagesMap as IEmbeddedLanguagesMap2 } from 'vscode-textmate'; import { ModeTransition } from 'vs/editor/common/core/modeTransition'; import { Token } from 'vs/editor/common/core/token'; import { languagesExtPoint } from 'vs/editor/common/services/modeServiceImpl'; +import { IThemeService } from 'vs/workbench/services/themes/common/themeService'; export interface IEmbeddedLanguagesMap { [scopeName: string]: string; @@ -110,9 +111,9 @@ export class TMLanguageRegistration { readonly scopeName: string; readonly grammarFilePath: string; + readonly embeddedLanguages: IEmbeddedLanguagesMap; private readonly _registry: TMScopeRegistry; - private readonly _embeddedLanguages: IEmbeddedLanguagesMap; private readonly _embeddedLanguagesRegex: RegExp; constructor(registry: TMScopeRegistry, scopeName: string, grammarFilePath: string, embeddedLanguages: IEmbeddedLanguagesMap) { @@ -121,7 +122,7 @@ export class TMLanguageRegistration { this.grammarFilePath = grammarFilePath; // embeddedLanguages handling - this._embeddedLanguages = Object.create(null); + this.embeddedLanguages = Object.create(null); if (embeddedLanguages) { // If embeddedLanguages are configured, fill in `this._embeddedLanguages` @@ -133,12 +134,12 @@ export class TMLanguageRegistration { // never hurts to be too careful continue; } - this._embeddedLanguages[scope] = language; + this.embeddedLanguages[scope] = language; } } // create the regex - let escapedScopes = Object.keys(this._embeddedLanguages).map((scopeName) => strings.escapeRegExpCharacters(scopeName)); + let escapedScopes = Object.keys(this.embeddedLanguages).map((scopeName) => strings.escapeRegExpCharacters(scopeName)); if (escapedScopes.length === 0) { // no scopes registered this._embeddedLanguagesRegex = null; @@ -167,7 +168,7 @@ export class TMLanguageRegistration { return null; } - let language = this._embeddedLanguages[m[1]] || null; + let language = this.embeddedLanguages[m[1]] || null; if (!language) { return null; } @@ -177,18 +178,31 @@ export class TMLanguageRegistration { } } +function createStyleSheet(): HTMLStyleElement { + let style = document.createElement('style'); + style.type = 'text/css'; + style.media = 'screen'; + document.getElementsByTagName('head')[0].appendChild(style); + return style; +} + export class MainProcessTextMateSyntax { private _grammarRegistry: Registry; private _modeService: IModeService; + private _themeService: IThemeService; private _scopeRegistry: TMScopeRegistry; private _injections: { [scopeName: string]: string[]; }; + private _styleElement: HTMLStyleElement; public onDidEncounterLanguage: Event; constructor( - @IModeService modeService: IModeService + @IModeService modeService: IModeService, + @IThemeService themeService: IThemeService ) { + this._styleElement = createStyleSheet(); this._modeService = modeService; + this._themeService = themeService; this._scopeRegistry = new TMScopeRegistry(); this.onDidEncounterLanguage = this._scopeRegistry.onDidEncounterLanguage; this._injections = {}; @@ -201,6 +215,8 @@ export class MainProcessTextMateSyntax { return this._injections[scopeName]; } }); + this._updateTheme(); + this._themeService.onDidColorThemeChange((e) => this._updateTheme()); grammarsExtPoint.setHandler((extensions) => { for (let i = 0; i < extensions.length; i++) { @@ -212,6 +228,26 @@ export class MainProcessTextMateSyntax { }); } + private static _generateCSS(colorMap: string[]): string { + let rules: string[] = []; + for (let i = 1, len = colorMap.length; i < len; i++) { + let color = colorMap[i]; + rules[i] = `.mtk${i} { color: ${color.substr(0, 7)}; }`; + } + rules.push('.mtki { font-style: italic; }'); + rules.push('.mtkb { font-weight: bold; }'); + rules.push('.mtku { text-decoration: underline; }'); + return rules.join('\n'); + } + + private _updateTheme(): void { + this._grammarRegistry.setTheme(this._themeService.getColorThemeDocument()); + let colorMap = this._grammarRegistry.getColorMap(); + let cssRules = MainProcessTextMateSyntax._generateCSS(colorMap); + this._styleElement.innerHTML = cssRules; + TokenizationRegistry.setColorMap(colorMap); + } + private _handleGrammarExtensionPointUser(extensionFolderPath: string, syntax: ITMSyntaxExtensionPoint, collector: ExtensionMessageCollector): void { if (syntax.language && ((typeof syntax.language !== 'string') || !this._modeService.isRegisteredMode(syntax.language))) { collector.error(nls.localize('invalid.language', "Unknown language in `contributes.{0}.language`. Provided value: {1}", grammarsExtPoint.name, String(syntax.language))); @@ -264,8 +300,26 @@ export class MainProcessTextMateSyntax { } } + private _resolveEmbeddedLanguages(embeddedLanguages: IEmbeddedLanguagesMap): IEmbeddedLanguagesMap2 { + let scopes = Object.keys(embeddedLanguages); + let result: IEmbeddedLanguagesMap2 = Object.create(null); + for (let i = 0, len = scopes.length; i < len; i++) { + let scope = scopes[i]; + let language = embeddedLanguages[scope]; + let languageIdentifier = this._modeService.getLanguageIdentifier(language); + if (languageIdentifier) { + result[scope] = languageIdentifier.iid; + } + } + return result; + } + private registerDefinition(modeId: string, scopeName: string): void { - this._grammarRegistry.loadGrammar(scopeName, (err, grammar) => { + let languageRegistration = this._scopeRegistry.getLanguageRegistration(scopeName); + let embeddedLanguages = this._resolveEmbeddedLanguages(languageRegistration.embeddedLanguages); + let languageId = this._modeService.getLanguageIdentifier(modeId).iid; + + this._grammarRegistry.loadGrammarWithEmbeddedLanguages(scopeName, languageId, embeddedLanguages, (err, grammar) => { if (err) { onUnexpectedError(err); return; @@ -282,9 +336,25 @@ function createTokenizationSupport(languageRegistration: TMLanguageRegistration, return { getInitialState: () => new TMState(null), tokenize: (line, state, offsetDelta) => tokenizer.tokenize(line, state, offsetDelta), - tokenize3: () => { - // TODO@tokenization - throw new Error('TODO@tokenization'); + tokenize3: (line: string, state: TMState, offsetDelta: number) => { + if (offsetDelta !== 0) { + throw new Error('Unexpected: offsetDelta should be 0.'); + } + + let textMateResult = grammar.tokenizeLine2(line, state.ruleStack); + + let endState: TMState; + // try to save an object if possible + if (state.ruleStack !== null && textMateResult.ruleStack.equals(state.ruleStack)) { + endState = state; + } else { + endState = new TMState(textMateResult.ruleStack); + } + + return { + tokens: textMateResult.tokens, + endState: endState + }; } }; } diff --git a/src/vs/workbench/services/themes/common/themeService.ts b/src/vs/workbench/services/themes/common/themeService.ts index 60adbc87b102bd947a3cf9f7503dc30f27b58f05..b57a66bae7338677135ddee826c36baf97318f90 100644 --- a/src/vs/workbench/services/themes/common/themeService.ts +++ b/src/vs/workbench/services/themes/common/themeService.ts @@ -18,6 +18,7 @@ export interface IThemeService { _serviceBrand: any; setColorTheme(themeId: string, broadcastToAllWindows: boolean): TPromise; getColorTheme(): string; + getColorThemeDocument(): IThemeDocument; getColorThemes(): TPromise; onDidColorThemeChange: Event; diff --git a/src/vs/workbench/services/themes/electron-browser/themeService.ts b/src/vs/workbench/services/themes/electron-browser/themeService.ts index 4f3123eb69084fb8bd2a1ebed2245ff390670dab..9d2adc2ec65dd9f8b28400cb48fab83d6bb714dd 100644 --- a/src/vs/workbench/services/themes/electron-browser/themeService.ts +++ b/src/vs/workbench/services/themes/electron-browser/themeService.ts @@ -103,6 +103,7 @@ let iconThemeExtPoint = ExtensionsRegistry.registerExtensionPoint; @@ -168,6 +170,7 @@ export class ThemeService implements IThemeService { @ITelemetryService private telemetryService: ITelemetryService) { this.knownColorThemes = []; + this.currentColorThemeDocument = null; this.onColorThemeChange = new Emitter(); this.knownIconThemes = []; this.currentIconTheme = ''; @@ -258,6 +261,7 @@ export class ThemeService implements IThemeService { } else { this.sendTelemetry(newTheme); } + this.currentColorThemeDocument = newTheme.document; this.onColorThemeChange.fire(newThemeId); }; @@ -268,6 +272,10 @@ export class ThemeService implements IThemeService { return this.currentColorTheme || this.storageService.get(COLOR_THEME_PREF, StorageScope.GLOBAL, DEFAULT_THEME_ID); } + public getColorThemeDocument(): IThemeDocument { + return this.currentColorThemeDocument; + } + private findThemeData(themeId: string, defaultId?: string): TPromise { return this.getColorThemes().then(allThemes => { let themes = allThemes.filter(t => t.id === themeId); @@ -641,6 +649,7 @@ function applyTheme(theme: IInternalThemeData, onApply: (theme: IInternalThemeDa return TPromise.as(true); } return _loadThemeDocument(theme.path).then(themeDocument => { + theme.document = themeDocument; let styleSheetContent = _processThemeObject(theme.id, themeDocument); theme.styleSheetContent = styleSheetContent; _applyRules(styleSheetContent, colorThemeRulesClassName);