本文整理汇总了TypeScript中vs/platform/theme/common/themeService.ITheme类的典型用法代码示例。如果您正苦于以下问题:TypeScript ITheme类的具体用法?TypeScript ITheme怎么用?TypeScript ITheme使用的例子?那么, 这里精选的类代码示例或许可以为您提供帮助。
在下文中一共展示了ITheme类的10个代码示例,这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞,您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1: constructor
constructor(config: editorCommon.IConfiguration, theme: ITheme) {
this.lineHeight = config.editor.lineHeight;
this.pixelRatio = config.editor.pixelRatio;
this.overviewRulerLanes = config.editor.viewInfo.overviewRulerLanes;
this.renderBorder = config.editor.viewInfo.overviewRulerBorder;
const borderColor = theme.getColor(editorOverviewRulerBorder);
this.borderColor = borderColor ? borderColor.toString() : null;
this.hideCursor = config.editor.viewInfo.hideCursorInOverviewRuler;
const cursorColor = theme.getColor(editorCursorForeground);
this.cursorColor = cursorColor ? cursorColor.transparent(0.7).toString() : null;
this.themeType = theme.type;
const minimapEnabled = config.editor.viewInfo.minimap.enabled;
const backgroundColor = (minimapEnabled ? TokenizationRegistry.getDefaultBackground() : null);
this.backgroundColor = (backgroundColor ? Color.Format.CSS.formatHex(backgroundColor) : null);
const position = config.editor.layoutInfo.overviewRuler;
this.top = position.top;
this.right = position.right;
this.domWidth = position.width;
this.domHeight = position.height;
this.canvasWidth = (this.domWidth * this.pixelRatio) | 0;
this.canvasHeight = (this.domHeight * this.pixelRatio) | 0;
const [x, w] = this._initLanes(1, this.canvasWidth, this.overviewRulerLanes);
this.x = x;
this.w = w;
}
示例2: getExtraColor
export function getExtraColor(theme: ITheme, colorId: string, defaults: ColorDefaults & { extra_dark: string }): ColorValue {
const color = theme.getColor(colorId);
if (color) {
return color;
}
if (theme.type === 'dark') {
const background = theme.getColor(editorBackground);
if (background && background.getRelativeLuminance() < 0.004) {
return defaults.extra_dark;
}
}
return defaults[theme.type];
}
示例3: applyStyles
function applyStyles(theme: ITheme): void {
const styles = Object.create(null);
for (let key in optionsMapping) {
styles[key] = theme.getColor(optionsMapping[key]);
}
widget.style(styles);
}
示例4: getColor
protected getColor(id: string, modify?: (color: Color, theme: ITheme) => Color): string {
let color = this.theme.getColor(id);
if (color && modify) {
color = modify(color, this.theme);
}
return color ? color.toString() : null;
}
示例5: applyStyles
function applyStyles(theme: ITheme): void {
const styles = Object.create(null);
for (let key in optionsMapping) {
const value = optionsMapping[key];
if (typeof value === 'string') {
styles[key] = theme.getColor(value);
} else if (typeof value === 'function') {
styles[key] = value(theme);
}
}
widget.style(styles);
}
示例6: computeStyles
export function computeStyles(theme: ITheme, styleMap: IColorMapping): IComputedStyles {
const styles = Object.create(null) as IComputedStyles;
for (let key in styleMap) {
const value = styleMap[key as string];
if (typeof value === 'string') {
styles[key] = theme.getColor(value);
} else if (typeof value === 'function') {
styles[key] = value(theme);
}
}
return styles;
}
示例7: registerThemingParticipant
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};
}
`);
}
//.........这里部分代码省略.........
示例8: registerThemingParticipant
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;
}
`);
}
});
示例9: registerThemingParticipant
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;
}
`);
}
//.........这里部分代码省略.........
示例10: getColor
protected getColor(id: string): string {
const color = this.theme.getColor(id);
return color ? color.toString() : null;
}