How to use the editor.background function in editor

To help you get started, we’ve selected a few editor examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github James-Yu / LaTeX-Workshop / src / utils / theme.ts View on Github external
if (extension.packageJSON === undefined || extension.packageJSON.contributes === undefined || extension.packageJSON.contributes.themes === undefined) {
            continue
        }
        const candidateThemes = extension.packageJSON.contributes.themes.filter( (themePkg: any) => themePkg.label === colorTheme || themePkg.id === colorTheme)
        if (candidateThemes.length === 0) {
            continue
        }
        try {
            const themePath = path.resolve(extension.extensionPath, candidateThemes[0].path)
            let theme = JSON.parse(stripJsonComments(fs.readFileSync(themePath, 'utf8')))
            while (theme.include) {
                const includedTheme = JSON.parse(stripJsonComments(fs.readFileSync(path.resolve(path.dirname(themePath), theme.include), 'utf8')))
                theme.include = undefined
                theme = {... theme, ...includedTheme}
            }
            const bgColor = hexToRgb(theme.colors['editor.background'])
            if (bgColor) {
                // http://stackoverflow.com/a/3943023/112731
                const r = bgColor.r <= 0.03928 ? bgColor.r / 12.92 : Math.pow((bgColor.r + 0.055) / 1.055, 2.4)
                const g = bgColor.r <= 0.03928 ? bgColor.g / 12.92 : Math.pow((bgColor.g + 0.055) / 1.055, 2.4)
                const b = bgColor.r <= 0.03928 ? bgColor.b / 12.92 : Math.pow((bgColor.b + 0.055) / 1.055, 2.4)
                const L = 0.2126 * r + 0.7152 * g + 0.0722 * b
                if (L > 0.179) {
                    return 'light'
                } else {
                    return 'dark'
                }
            } else if (theme.type && theme.type === 'dark') {
                return 'dark'
            }
        } catch (e) {
github codesandbox / codesandbox-client / packages / app / src / embed / components / Content / elements.ts View on Github external
  background-color: ${props => props.theme['editor.background']};
  /* compatibility mode for the redesign, the header is smaller now*/
github Tyriar / vscode-theme-generator / src / vscodeThemeGenerator.ts View on Github external
// tab.inactiveBackground: Inactive tab background color. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.
    theme.colors['tab.activeBorder'] = colorSet.base.color1;
    theme.colors['tab.inactiveBackground'] = background4;
    // tab.inactiveForeground: Inactive tab foreground color in an active group. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.
    // tab.activeModifiedBorder: Border on top of the modified (dirty) active tabs in an active group.
    theme.colors['tab.activeModifiedBorder'] = colorSet.base.color1;
    // tab.inactiveModifiedBorder: Border on top of modified (dirty) inactive tabs in an active group.
    theme.colors['tab.inactiveModifiedBorder'] = color1Inactive;
    // tab.unfocusedActiveModifiedBorder: Border on the top of modified (dirty) active tabs in an unfocused group.
    theme.colors['tab.unfocusedActiveModifiedBorder'] = color1Unfocused;
    // tab.unfocusedInactiveModifiedBorder: Border on the top of modified (dirty) inactive tabs in an unfocused group.
    theme.colors['tab.unfocusedInactiveModifiedBorder'] = color1Inactive;

    // Editor Colors
    // editor.background: Editor background color.
    theme.colors['editor.background'] = background2;
    // editor.foreground: Editor default foreground color.
    theme.colors['editor.foreground'] = colorSet.base.foreground;
    // editorLineNumber.foreground: Color of editor line numbers.
    theme.colors['editorLineNumber.foreground'] = addAlpha('#FFFFFF', 0.3);
    theme.colors['editorLineNumber.activeForeground'] = colorSet.base.color1;
    // editorCursor.foreground: Color of the editor cursor.
    if (colorSet.ui.cursor) theme.colors['editorCursor.foreground'] = colorSet.ui.cursor;
    // editor.selectionBackground: Color of the editor selection.
    if (colorSet.ui.selection) theme.colors['editor.selectionBackground'] = colorSet.ui.selection;
    // editor.selectionHighlightBackground: Color for regions with the same content as the selection.
    if (colorSet.ui.selectionHighlight) theme.colors['editor.selectionHighlightBackground'] = colorSet.ui.selectionHighlight;
    // editor.inactiveSelectionBackground: Color of the selection in an inactive editor.
    // editor.wordHighlightBackground: Background color of a symbol during read-access, like reading a variable.
    if (colorSet.ui.wordHighlight) theme.colors['editor.wordHighlightBackground'] = colorSet.ui.wordHighlight;
    // editor.wordHighlightStrongBackground: Background color of a symbol during write-access, like writing to a variable.
    if (colorSet.ui.wordHighlightStrong) theme.colors['editor.wordHighlightStrongBackground'] = colorSet.ui.wordHighlightStrong;
github onivim / oni / browser / src / Services / Sidebar / SidebarView.tsx View on Github external
border-top: ${props =>
        props.isActive
            ? "2px solid " + props.theme["highlight.mode.normal.background"]
            : "2px solid " + props.theme["editor.background"]};
github onivim / oni / browser / src / Services / Preview / PreviewBufferLayer.tsx View on Github external
    background-color: ${p => p.theme["editor.background"]};
    color: ${p => p.theme["editor.foreground"]};
github codesandbox / codesandbox-client / packages / common / src / components / Preview / Navigator / elements.js View on Github external
background-color: ${props =>
    props.theme['editor.background'] || props.theme.background()};
  padding: 0.5rem;
github onivim / oni / browser / src / Services / Learning / Achievements / AchievementsBufferLayer.tsx View on Github external
    background-color: ${props => props.theme["editor.background"]};
    color: ${props => props.theme["editor.foreground"]};
github cdr / code-server / packages / web / src / index.html View on Github external
(() => {
			const rawColorTheme = localStorage.getItem("colorThemeData");
			if (!rawColorTheme) {
				return;
			}
			const colorTheme = JSON.parse(rawColorTheme);
			const colorMap = colorTheme.colorMap;
			if (!colorMap) {
				return;
			}
			const bg = colorMap["editor.background"];
			if (!bg) {
				return;
			}
			document.body.style.background = bg;
		})();
github brijeshb42 / monaco-themes / index.js View on Github external
let k, v;
    if (typeof key === 'string') {
      k = key;
      v = key;
    } else {
      k = key.tm;
      v = key.mn;
    }

    if (globalSettings[k]) {
      globalColors[`editor.${v}`] = globalSettings[k]
    }
  });

  return {
    base: (darkness(globalColors['editor.background']) < 0.5) ? 'vs-dark' : 'vs',
    inherit: true,
    rules: rules,
    colors: globalColors,
  };
}
github onivim / oni / browser / src / Editor / OniEditor / ColorHighlightLayer.tsx View on Github external
    background-color: ${p => p.theme["editor.background"]};
    position: absolute;