Instrument

Color themes

• 

  Instrument Dark

• 

  Instrument Light

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Loading...

colors

Workbench UI color keys from the theme JSON colors map.

• activityBar.background#E2DFD4
• activityBar.border#D5D1C4
• activityBar.foreground#24231F
• activityBar.inactiveForeground#A6A192
• activityBarBadge.background#C6491C
• activityBarBadge.foreground#F5F3ED
• badge.background#4C6B75
• badge.foreground#F5F3ED
• button.background#C6491C
• button.foreground#F5F3ED
• button.hoverBackground#AD3E17
• button.secondaryBackground#D5D1C4
• button.secondaryForeground#24231F
• button.secondaryHoverBackground#C8C4B6
• checkbox.background#F5F3ED
• checkbox.border#D5D1C4
• descriptionForeground#6B6759
• diffEditor.insertedLineBackground#5F6F3F14
• diffEditor.insertedTextBackground#5F6F3F22
• diffEditor.removedLineBackground#B5391A14
• diffEditor.removedTextBackground#B5391A1F
• disabledForeground#A6A192
• dropdown.background#F5F3ED
• dropdown.border#D5D1C4
• dropdown.foreground#24231F
• editor.background#EDEBE3
• editor.findMatchBackground#C6491C55
• editor.findMatchHighlightBackground#C6491C22
• editor.foreground#24231F
• editor.inactiveSelectionBackground#D5C7B460
• editor.lineHighlightBackground#E2DFD2
• editor.lineHighlightBorder#00000000
• editor.rangeHighlightBackground#4C6B7514
• editor.selectionBackground#D5C7B4
• editor.selectionHighlightBackground#D5C7B480
• editor.wordHighlightBackground#4C6B7522
• editor.wordHighlightStrongBackground#4C6B7533
• editorBracketHighlight.foreground1#C6491C
• editorBracketHighlight.foreground2#4C6B75
• editorBracketHighlight.foreground3#5F6F3F
• editorBracketHighlight.foreground4#8C6D2E
• editorBracketMatch.background#4C6B7522
• editorBracketMatch.border#4C6B7566
• editorCodeLens.foreground#8C8779
• editorCursor.foreground#C6491C
• editorError.foreground#B5391A
• editorGroup.border#D5D1C4
• editorGroupHeader.tabsBackground#E2DFD4
• editorGroupHeader.tabsBorder#D5D1C4
• editorGutter.addedBackground#5F6F3F
• editorGutter.background#EDEBE3
• editorGutter.deletedBackground#B5391A
• editorGutter.modifiedBackground#4C6B75
• editorHint.foreground#8C8779
• editorHoverWidget.background#E5E2D8
• editorHoverWidget.border#D5D1C4
• editorIndentGuide.activeBackground1#B7B2A2
• editorIndentGuide.background1#DCD8CA
• editorInfo.foreground#4C6B75
• editorLineNumber.activeForeground#4C6B75
• editorLineNumber.foreground#B7B2A2
• editorOverviewRuler.border#D5D1C4
• editorRuler.foreground#D5D1C4
• editorSuggestWidget.background#E5E2D8
• editorSuggestWidget.border#D5D1C4
• editorSuggestWidget.highlightForeground#C6491C
• editorSuggestWidget.selectedBackground#C6491C22
• editorWarning.foreground#8C6D2E
• editorWhitespace.foreground#D5D1C4
• editorWidget.background#E5E2D8
• editorWidget.border#D5D1C4
• errorForeground#B5391A
• focusBorder#C6491C
• foreground#24231F
• gitDecoration.addedResourceForeground#5F6F3F
• gitDecoration.conflictingResourceForeground#8C6D2E
• gitDecoration.deletedResourceForeground#B5391A
• gitDecoration.ignoredResourceForeground#B7B2A2
• gitDecoration.modifiedResourceForeground#4C6B75
• gitDecoration.untrackedResourceForeground#77895A
• input.background#F5F3ED
• input.border#D5D1C4
• input.foreground#24231F
• input.placeholderForeground#A6A192
• inputOption.activeBorder#C6491C
• list.activeSelectionBackground#C6491C1F
• list.activeSelectionForeground#24231F
• list.dropBackground#4C6B7522
• list.focusBackground#C6491C22
• list.focusForeground#24231F
• list.hoverBackground#E2DFD4
• list.inactiveSelectionBackground#E2DFD4
• menu.background#E5E2D8
• menu.border#D5D1C4
• menu.foreground#24231F
• menu.selectionBackground#C6491C22
• menubar.selectionBackground#D5D1C4
• notifications.background#E5E2D8
• notifications.border#D5D1C4
• notifications.foreground#24231F
• notificationsErrorIcon.foreground#B5391A
• notificationsInfoIcon.foreground#4C6B75
• notificationsWarningIcon.foreground#8C6D2E
• panel.background#E5E2D8
• panel.border#D5D1C4
• panelInput.border#D5D1C4
• panelTitle.activeBorder#C6491C
• panelTitle.activeForeground#24231F
• panelTitle.inactiveForeground#8C8779
• peekView.border#C6491C
• peekViewEditor.background#E5E2D8
• peekViewResult.background#E2DFD4
• peekViewTitle.background#D5D1C4
• peekViewTitleLabel.foreground#24231F
• progressBar.background#C6491C
• scrollbar.shadow#00000012
• scrollbarSlider.activeBackground#C6491C88
• scrollbarSlider.background#B7B2A266
• scrollbarSlider.hoverBackground#B7B2A299
• selection.background#C6491C33
• sideBar.background#E5E2D8
• sideBar.border#D5D1C4
• sideBar.foreground#3B3A34
• sideBarSectionHeader.background#E5E2D8
• sideBarSectionHeader.border#D5D1C4
• sideBarSectionHeader.foreground#6B6759
• sideBarTitle.foreground#24231F
• statusBar.background#E2DFD4
• statusBar.border#D5D1C4
• statusBar.debuggingBackground#C6491C
• statusBar.debuggingForeground#F5F3ED
• statusBar.foreground#3B3A34
• statusBar.noFolderBackground#E2DFD4
• statusBarItem.hoverBackground#D5D1C4
• statusBarItem.remoteBackground#4C6B75
• statusBarItem.remoteForeground#F5F3ED
• tab.activeBackground#EDEBE3
• tab.activeBorderTop#C6491C
• tab.activeForeground#24231F
• tab.border#D5D1C4
• tab.hoverBackground#EDEBE3
• tab.inactiveBackground#E2DFD4
• tab.inactiveForeground#8C8779
• terminal.ansiBlack#3B3A34
• terminal.ansiBlue#4C6B75
• terminal.ansiBrightBlack#8C8779
• terminal.ansiBrightBlue#5F8791
• terminal.ansiBrightCyan#4E969E
• terminal.ansiBrightGreen#77895A
• terminal.ansiBrightMagenta#937393
• terminal.ansiBrightRed#C6491C
• terminal.ansiBrightWhite#24231F
• terminal.ansiBrightYellow#A6853F
• terminal.ansiCyan#3E7A82
• terminal.ansiGreen#5F6F3F
• terminal.ansiMagenta#7A5C7A
• terminal.ansiRed#B5391A
• terminal.ansiWhite#E5E2D8
• terminal.ansiYellow#8C6D2E
• terminal.background#EDEBE3
• terminal.foreground#24231F
• titleBar.activeBackground#E2DFD4
• titleBar.activeForeground#24231F
• titleBar.border#D5D1C4
• titleBar.inactiveBackground#E2DFD4
• titleBar.inactiveForeground#A6A192
• widget.shadow#00000018

tokenColors

TextMate scopes and font styles (syntax highlighting rules).