TypeScript ICssStyleCollector.addRule方法代码示例

	public setTheme(themeName: string): string {
		let theme: StandaloneTheme;
		if (this._knownThemes.has(themeName)) {
			theme = this._knownThemes.get(themeName);
		} else {
			theme = this._knownThemes.get(VS_THEME_NAME);
		}
		this._theme = theme;

		let cssRules: string[] = [];
		let hasRule: { [rule: string]: boolean; } = {};
		let ruleCollector: ICssStyleCollector = {
			addRule: (rule: string) => {
				if (!hasRule[rule]) {
					cssRules.push(rule);
					hasRule[rule] = true;
				}
			}
		};
		themingRegistry.getThemingParticipants().forEach(p => p(theme, ruleCollector));

		let tokenTheme = theme.tokenTheme;
		let colorMap = tokenTheme.getColorMap();
		ruleCollector.addRule(generateTokensCSSForColorMap(colorMap));

		this._styleElement.innerHTML = cssRules.join('\n');

		TokenizationRegistry.setColorMap(colorMap);
		this._onThemeChange.fire(theme);

		return theme.id;
	}

registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {

	// Foreground
	const windowForeground = theme.getColor(foreground);
	if (windowForeground) {
		collector.addRule(`.monaco-workbench { color: ${windowForeground}; }`);
	}

	// Selection
	const windowSelectionBackground = theme.getColor(selectionBackground);
	if (windowSelectionBackground) {
		collector.addRule(`.monaco-workbench ::selection { background-color: ${windowSelectionBackground}; }`);
	}

	// Input placeholder
	const placeholderForeground = theme.getColor(inputPlaceholderForeground);
	if (placeholderForeground) {
		collector.addRule(`.monaco-workbench input::-webkit-input-placeholder { color: ${placeholderForeground}; }`);
		collector.addRule(`.monaco-workbench textarea::-webkit-input-placeholder { color: ${placeholderForeground}; }`);
	}

	// List highlight
	const listHighlightForegroundColor = theme.getColor(listHighlightForeground);
	if (listHighlightForegroundColor) {
		collector.addRule(`
			.monaco-workbench .monaco-tree .monaco-tree-row .monaco-highlighted-label .highlight,
			.monaco-workbench .monaco-list .monaco-list-row .monaco-highlighted-label .highlight {
				color: ${listHighlightForegroundColor};
			}
		`);
	}

	// We need to set the workbench background color so that on Windows we get subpixel-antialiasing.
	const workbenchBackground = WORKBENCH_BACKGROUND(theme);
	collector.addRule(`.monaco-workbench { background-color: ${workbenchBackground}; }`);

	// Scrollbars
	const scrollbarShadowColor = theme.getColor(scrollbarShadow);
	if (scrollbarShadowColor) {
		collector.addRule(`
			.monaco-workbench .monaco-scrollable-element > .shadow.top {
				box-shadow: ${scrollbarShadowColor} 0 6px 6px -6px inset;
			}

			.monaco-workbench .monaco-scrollable-element > .shadow.left {
				box-shadow: ${scrollbarShadowColor} 6px 0 6px -6px inset;
			}

			.monaco-workbench .monaco-scrollable-element > .shadow.top.left {
				box-shadow: ${scrollbarShadowColor} 6px 6px 6px -6px inset;
			}
		`);
	}

	const scrollbarSliderBackgroundColor = theme.getColor(scrollbarSliderBackground);
	if (scrollbarSliderBackgroundColor) {
		collector.addRule(`
			.monaco-workbench .monaco-scrollable-element > .scrollbar > .slider {
				background: ${scrollbarSliderBackgroundColor};
			}
		`);
	}

	const scrollbarSliderHoverBackgroundColor = theme.getColor(scrollbarSliderHoverBackground);
	if (scrollbarSliderHoverBackgroundColor) {
		collector.addRule(`
			.monaco-workbench .monaco-scrollable-element > .scrollbar > .slider:hover {
				background: ${scrollbarSliderHoverBackgroundColor};
			}
		`);
	}

	const scrollbarSliderActiveBackgroundColor = theme.getColor(scrollbarSliderActiveBackground);
	if (scrollbarSliderActiveBackgroundColor) {
		collector.addRule(`
			.monaco-workbench .monaco-scrollable-element > .scrollbar > .slider.active {
				background: ${scrollbarSliderActiveBackgroundColor};
			}
		`);
	}

	// Focus outline
	const focusOutline = theme.getColor(focusBorder);
	if (focusOutline) {
		collector.addRule(`
		.monaco-workbench [tabindex="0"]:focus,
		.monaco-workbench .synthetic-focus,
		.monaco-workbench select:focus,
		.monaco-workbench .monaco-tree.focused.no-focused-item:focus:before,
		.monaco-workbench .monaco-list:not(.element-focused):focus:before,
		.monaco-workbench input[type="button"]:focus,
		.monaco-workbench input[type="text"]:focus,
		.monaco-workbench button:focus,
		.monaco-workbench textarea:focus,
		.monaco-workbench input[type="search"]:focus,
		.monaco-workbench input[type="checkbox"]:focus {
			outline-color: ${focusOutline};
		}
		`);
	}
//.........这里部分代码省略.........

registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {

	// Title Active
	const titleActive = theme.getColor(PANEL_ACTIVE_TITLE_FOREGROUND);
	const titleActiveBorder = theme.getColor(PANEL_ACTIVE_TITLE_BORDER);
	if (titleActive || titleActiveBorder) {
		collector.addRule(`
			.tabbedPanel > .title > .tabList .tab:hover .tabLabel,
			.tabbedPanel > .title > .tabList .tab .tabLabel.active {
				color: ${titleActive};
				border-bottom-color: ${titleActiveBorder};
			}

			.tabbedPanel > .title > .tabList .tab-header.active {
				outline: none;
			}
		`);
	}

	// Title Inactive
	const titleInactive = theme.getColor(PANEL_INACTIVE_TITLE_FOREGROUND);
	if (titleInactive) {
		collector.addRule(`
			.tabbedPanel > .title > .tabList .tab .tabLabel {
				color: ${titleInactive};
			}
		`);
	}

	// Title focus
	const focusBorderColor = theme.getColor(focusBorder);
	if (focusBorderColor) {
		collector.addRule(`
			.tabbedPanel > .title > .tabList .tab .tabLabel:focus {
				color: ${titleActive};
				border-bottom-color: ${focusBorderColor} !important;
				border-bottom: 1px solid;
				outline: none;
			}
		`);
	}

	// Styling with Outline color (e.g. high contrast theme)
	const outline = theme.getColor(activeContrastBorder);
	if (outline) {
		collector.addRule(`
			.tabbedPanel > .title > .tabList .tab-header.active,
			.tabbedPanel > .title > .tabList .tab-header:hover {
				outline-color: ${outline};
				outline-width: 1px;
				outline-style: solid;
				padding-bottom: 0;
				outline-offset: -5px;
			}

			.tabbedPanel > .title > .tabList .tab-header:hover:not(.active) {
				outline-style: dashed;
			}
		`);
	}
});

registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {

	// Title Active
	const tabActiveBackground = theme.getColor(TAB_ACTIVE_BACKGROUND);
	const tabActiveForeground = theme.getColor(TAB_ACTIVE_FOREGROUND);
	if (tabActiveBackground || tabActiveForeground) {
		collector.addRule(`
			panel.dashboard-panel > .tabbedPanel > .title .tabList .tab:hover .tabLabel,
			panel.dashboard-panel > .tabbedPanel > .title .tabList .tab .tabLabel.active {
				color: ${tabActiveForeground};
				border-bottom: 0px solid;
			}

			panel.dashboard-panel > .tabbedPanel > .title .tabList .tab-header.active {
				background-color: ${tabActiveBackground};
				outline-color: ${tabActiveBackground};
			}

			panel.dashboard-panel > .tabbedPanel.horizontal > .title .tabList .tab-header.active {
				border-bottom-color: transparent;
			}

			panel.dashboard-panel > .tabbedPanel.vertical > .title .tabList .tab-header.active {
				border-right-color: transparent;
			}
		`);
	}

	const activeTabBorderColor = theme.getColor(TAB_ACTIVE_BORDER);
	if (activeTabBorderColor) {
		collector.addRule(`
			panel.dashboard-panel > .tabbedPanel > .title .tabList .tab-header.active {
				box-shadow: ${activeTabBorderColor} 0 -1px inset;
			}
		`);
	}

	// Title Inactive
	const tabInactiveBackground = theme.getColor(TAB_INACTIVE_BACKGROUND);
	const tabInactiveForeground = theme.getColor(TAB_INACTIVE_FOREGROUND);
	if (tabInactiveBackground || tabInactiveForeground) {
		collector.addRule(`
			panel.dashboard-panel > .tabbedPanel > .title .tabList .tab .tabLabel {
				color: ${tabInactiveForeground};
			}

			panel.dashboard-panel > .tabbedPanel > .title .tabList .tab-header {
				background-color: ${tabInactiveBackground};
			}
		`);
	}

	// Panel title background
	const panelTitleBackground = theme.getColor(EDITOR_GROUP_HEADER_TABS_BACKGROUND);
	if (panelTitleBackground) {
		collector.addRule(`
			panel.dashboard-panel > .tabbedPanel > .title {
				background-color: ${panelTitleBackground};
			}
		`);
	}

	// Panel title background
	const tabBorder = theme.getColor(TAB_BORDER);
	if (tabBorder) {
		collector.addRule(`
			panel.dashboard-panel > .tabbedPanel > .title .tabList .tab-header {
				border-right-color: ${tabBorder};
				border-bottom-color: ${tabBorder};
			}
		`);
	}

	// Styling with Outline color (e.g. high contrast theme)
	const outline = theme.getColor(activeContrastBorder);
	if (outline) {
		collector.addRule(`
			panel.dashboard-panel > .tabbedPanel > .title {
				border-bottom-color: ${tabBorder};
				border-bottom-width: 1px;
				border-bottom-style: solid;
			}

			panel.dashboard-panel > .tabbedPanel.vertical > .title {
				border-right-color: ${tabBorder};
				border-right-width: 1px;
				border-right-style: solid;
			}
		`);
	}

	const divider = theme.getColor(EDITOR_GROUP_BORDER);
	if (divider) {
		collector.addRule(`
			panel.dashboard-panel > .tabbedPanel > .title .tabList .tab-header {
				border-right-width: 1px;
				border-right-style: solid;
			}
		`);
	}
//.........这里部分代码省略.........