Skip to main content
Coding Theme

Color themes

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#194d0b
  • activityBar.border#194d0b
  • activityBar.foreground#ecf8fd
  • activityBar.inactiveForeground#ecf8fd80
  • activityBarBadge.background#ecf8fd
  • activityBarBadge.foreground#0a0907
  • badge.background#ecf8fd
  • badge.foreground#0a0907
  • button.background#019715
  • button.foreground#0a0907
  • button.hoverBackground#194d0b
  • disabledForeground#6c7b87
  • dropdown.background#194d0b
  • dropdown.border#6c7b87
  • dropdown.foreground#ecf8fd
  • editor.background#0a0907
  • editor.findMatchBackground#ecf8fd40
  • editor.findMatchHighlightBackground#ecf8fd20
  • editor.foreground#ecf8fd
  • editor.hoverHighlightBackground#6c7b8740
  • editor.inactiveSelectionBackground#6c7b8740
  • editor.selectionBackground#6c7b8780
  • editor.selectionHighlightBackground#01971540
  • editor.wordHighlightBackground#194d0b40
  • editor.wordHighlightStrongBackground#194d0b80
  • editorBracketMatch.background#0a0907
  • editorBracketMatch.border#019715
  • editorCursor.foreground#019715
  • editorGroupHeader.tabsBackground#194d0b
  • editorGroupHeader.tabsBorder#6c7b87
  • editorGutter.addedBackground#019715
  • editorGutter.background#0a0907
  • editorGutter.deletedBackground#194d0b
  • editorGutter.modifiedBackground#6c7b87
  • editorIndentGuide.activeBackground#ecf8fd80
  • editorIndentGuide.background#6c7b8740
  • editorLineNumber.activeForeground#ecf8fd
  • editorLineNumber.foreground#6c7b87
  • editorOverviewRuler.border#ffffff00
  • editorOverviewRuler.errorForeground#019715
  • editorOverviewRuler.findMatchForeground#ecf8fd40
  • editorOverviewRuler.infoForeground#6c7b87
  • editorOverviewRuler.warningForeground#ecf8fd
  • editorRuler.foreground#194d0b
  • editorWhitespace.foreground#6c7b8740
  • focusBorder#019715
  • foreground#ecf8fd
  • input.background#194d0b
  • input.border#6c7b87
  • input.foreground#ecf8fd
  • input.placeholderForeground#6c7b87
  • list.activeSelectionBackground#ecf8fd40
  • list.activeSelectionForeground#0a0907
  • list.errorForeground#019715
  • list.focusBackground#ecf8fd40
  • list.focusForeground#0a0907
  • list.highlightForeground#019715
  • list.hoverBackground#194d0b
  • list.hoverForeground#ecf8fd
  • list.inactiveSelectionBackground#194d0b80
  • list.inactiveSelectionForeground#ecf8fd
  • list.warningForeground#ecf8fd
  • panel.background#194d0b
  • panel.border#6c7b87
  • panelTitle.activeBorder#019715
  • panelTitle.activeForeground#ecf8fd
  • panelTitle.inactiveForeground#6c7b87
  • peekView.border#019715
  • peekViewEditor.background#0a0907
  • peekViewEditor.matchHighlightBackground#ecf8fd40
  • peekViewResult.background#194d0b
  • peekViewResult.selectionBackground#6c7b8780
  • peekViewTitle.background#6c7b87
  • progressBar.background#019715
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#6c7b87
  • scrollbarSlider.background#6c7b8740
  • scrollbarSlider.hoverBackground#6c7b8780
  • sideBar.background#019715
  • sideBar.border#194d0b
  • sideBar.foreground#0a0907
  • sideBarSectionHeader.background#194d0b
  • sideBarSectionHeader.border#194d0b
  • sideBarSectionHeader.foreground#ecf8fd
  • sideBarTitle.foreground#0a0907
  • statusBar.background#ecf8fd
  • statusBar.border#ecf8fd
  • statusBar.debuggingBackground#019715
  • statusBar.debuggingForeground#0a0907
  • statusBar.foreground#0a0907
  • statusBar.noFolderBackground#194d0b
  • statusBar.noFolderForeground#ecf8fd
  • statusBarItem.remoteBackground#019715
  • statusBarItem.remoteForeground#0a0907
  • tab.activeBackground#0a0907
  • tab.activeBorderTop#019715
  • tab.activeForeground#ecf8fd
  • tab.border#6c7b87
  • tab.inactiveBackground#194d0b
  • tab.inactiveForeground#6c7b87
  • tab.unfocusedActiveBorderTop#01971580
  • terminal.ansiBlack#194d0b
  • terminal.ansiBlue#6c7b87
  • terminal.ansiBrightBlack#6c7b87
  • terminal.ansiBrightBlue#6c7b87
  • terminal.ansiBrightCyan#ecf8fd
  • terminal.ansiBrightGreen#019715
  • terminal.ansiBrightMagenta#6c7b87
  • terminal.ansiBrightRed#019715
  • terminal.ansiBrightWhite#ecf8fd
  • terminal.ansiBrightYellow#ecf8fd
  • terminal.ansiCyan#ecf8fd
  • terminal.ansiGreen#019715
  • terminal.ansiMagenta#6c7b87
  • terminal.ansiRed#019715
  • terminal.ansiWhite#ecf8fd
  • terminal.ansiYellow#ecf8fd
  • terminal.background#0a0907
  • terminal.foreground#ecf8fd
  • terminalCursor.foreground#019715
  • titleBar.activeBackground#ecf8fd
  • titleBar.activeForeground#0a0907
  • titleBar.border#ecf8fd
  • titleBar.inactiveBackground#6c7b87
  • titleBar.inactiveForeground#0a0907

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6C7B87italic
string, punctuation.definition.string, constant.numeric, constant.character, constant.other#019715—
constant.language#6C7B87bold
variable#ECF8FD—
variable.language#6C7B87italic
keyword, storage#6C7B87bold
storage.type#ECF8FDitalic
entity.name.type, entity.name.class, support.class, entity.name.function, support.function#ECF8FDbold
entity.other.inherited-class#ECF8FDitalic
variable.parameter#ECF8FDitalic
entity.name.tag#6C7B87bold
entity.other.attribute-name#019715italic
support.function, support.constant, support.type, support.class, support.variable#019715
invalid#0A0907—
invalid.deprecated#ECF8FD—
support.type.property-name.json#6C7B87—
string.quoted.double.json#019715—
constant.language.json#ECF8FD—
markup.heading#6C7B87bold
markup.underline.link#019715underline
markup.bold#ECF8FDbold
markup.italic#ECF8FDitalic
markup.inline.raw#019715—
token.info-token#6796E6—
token.warn-token#CD9731—
token.error-token#F44747—
token.debug-token#B267E6—