How to use the panel.background function in panel

To help you get started, we’ve selected a few panel 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 Tyriar / vscode-theme-generator / src / vscodeThemeGenerator.ts View on Github external
// peekViewEditor.matchHighlightBackground: Match highlight color in the peek view editor.
    // peekViewResult.background: Background color of the peek view result list.
    theme.colors['peekViewResult.background'] = background3;
    // peekViewResult.fileForeground: Foreground color for file nodes in the peek view result list.
    // peekViewResult.lineForeground: Foreground color for line nodes in the peek view result list.
    // peekViewResult.matchHighlightBackground: Match highlight color in the peek view result list.
    // peekViewResult.selectionBackground: Background color of the selected entry in the peek view result list.
    // peekViewResult.selectionForeground: Foreground color of the selected entry in the peek view result list.
    // peekViewTitle.background: Background color of the peek view title area.
    theme.colors['peekViewTitle.background'] = background2;
    // peekViewTitleDescription.foreground: Color of the peek view title info.
    // peekViewTitleLabel.foreground: Color of the peek view title.

    // Panel Colors
    // panel.background: Panel background color. Panels are shown below the editor area and contain views like output and integrated terminal.
    theme.colors['panel.background'] = background3;
    // panel.border: Panel border color on the top separating to the editor. Panels are shown below the editor area and contain views like output and integrated terminal.
    theme.colors['panel.border'] = addAlpha('#FFFFFF', 0.1);
    // panelTitle.activeBorder: Border color for the active panel title. Panels are shown below the editor area and contain views like output and integrated terminal.
    theme.colors['panelTitle.activeBorder'] = addAlpha(colorSet.base.foreground, 0.5);
    // panelTitle.activeForeground: Title color for the active panel. Panels are shown below the editor area and contain views like output and integrated terminal.
    // panelTitle.inactiveForeground: Title color for the inactive panel. Panels are shown below the editor area and contain views like output and integrated terminal.
    theme.colors['panelTitle.inactiveForeground'] = addAlpha(colorSet.base.foreground, 0.5);

    // Status Bar Colors
    // statusBar.background: Standard status bar background color. The status bar is shown in the bottom of the window.
    theme.colors['statusBar.background'] = background1;
    // statusBar.debuggingBackground: Status bar background color when a program is being debugged. The status bar is shown in the bottom of the window
    theme.colors['statusBar.debuggingBackground'] = colorSet.base.color1;
    theme.colors['statusBar.debuggingForeground'] = contrast(theme.colors['statusBar.debuggingBackground']);
    // statusBar.foreground: Status bar foreground color. The status bar is shown in the bottom of the window.
    // statusBar.noFolderBackground: Status bar background color when no folder is opened. The status bar is shown in the bottom of the window.
github codesandbox / codesandbox-client / packages / app / src / app / components / Preview / DevTools / Problems / elements.ts View on Github external
background-color: ${props =>
    props.theme['panel.background'] || props.theme.background2};
  width: 100%;
github codesandbox / codesandbox-client / packages / app / src / app / components / Preview / DevTools / React-Devtools / elements.ts View on Github external
background-color: ${props =>
    props.theme['panel.background'] || props.theme.background2};
  width: 100%;
github codesandbox / codesandbox-client / packages / app / src / app / components / Preview / DevTools / Console / elements.ts View on Github external
background-color: ${props =>
    props.theme['panel.background'] || props.theme.background};
  font-family: Menlo, monospace;
github codesandbox / codesandbox-client / packages / app / src / app / components / Preview / DevTools / elements.ts View on Github external
background-color: ${props =>
    props.theme['panel.background'] ||
    props.theme['editor.background'] ||
    props.theme.background4};
  flex: auto;