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#2f2f56
  • activityBar.foreground#8e8ea9
  • activityBarBadge.background#b58900
  • activityBarBadge.foreground#2f2f56
  • activityBarTop.activeBorder#276cd3
  • activityBarTop.foreground#adadc1
  • activityBarTop.inactiveForeground#646487
  • badge.background#276cd3
  • badge.foreground#2f2f56
  • breadcrumb.activeSelectionForeground#276cd3
  • breadcrumb.background#2f2f56
  • breadcrumb.focusForeground#adadc1
  • breadcrumb.foreground#646487
  • button.background#276cd3
  • button.foreground#2f2f56
  • button.hoverBackground#2d9f96
  • button.secondaryBackground#333366
  • button.secondaryForeground#adadc1
  • button.secondaryHoverBackground#646487
  • contrastBorder#333366
  • debugExceptionWidget.background#333366
  • debugExceptionWidget.border#AB395B
  • debugToolBar.background#333366
  • descriptionForeground#adadc1
  • diffEditor.diagonalFill#333366
  • diffEditor.insertedTextBackground#899e0015
  • diffEditor.removedTextBackground#f35e5e15
  • dropdown.background#333366
  • dropdown.border#2d9f9699
  • editor.background#2f2f56
  • editor.foreground#8e8ea9
  • editor.inactiveSelectionBackground#3333662f
  • editor.lineHighlightBackground#333366
  • editor.selectionBackground#333366
  • editor.selectionHighlightBackground#005A6FAA
  • editor.wordHighlightBackground#004454AA
  • editor.wordHighlightStrongBackground#005A6FAA
  • editorBracketHighlight.foreground1#cdcdcdff
  • editorBracketHighlight.foreground2#b58900ff
  • editorBracketHighlight.foreground3#ce78a2ff
  • editorCursor.foreground#adadc1
  • editorError.foreground#f35e5e
  • editorGroup.border#333366
  • editorGroup.dropBackground#2d9f9644
  • editorGroupHeader.noTabsBackground#2f2f56
  • editorGroupHeader.tabsBackground#2f2f56
  • editorHint.foreground#2d9f96
  • editorHoverWidget.background#004052
  • editorIndentGuide.activeBackground#C3E1E180
  • editorIndentGuide.background#adadc180
  • editorInfo.foreground#276cd3
  • editorLineNumber.activeForeground#8e8ea9
  • editorLineNumber.foreground#646487
  • editorMarkerNavigationError.background#AB395B
  • editorMarkerNavigationWarning.background#5B7E7A
  • editorWarning.foreground#b58900
  • editorWhitespace.foreground#adadc180
  • editorWidget.background#333366
  • errorForeground#ffeaea
  • focusBorder#276cd3
  • foreground#8e8ea9
  • gitDecoration.addedResourceForeground#2d9f96
  • gitDecoration.conflictingResourceForeground#d37312
  • gitDecoration.deletedResourceForeground#f35e5e
  • gitDecoration.ignoredResourceForeground#646487
  • gitDecoration.modifiedResourceForeground#b58900
  • gitDecoration.untrackedResourceForeground#899e00
  • icon.foreground#8e8ea9
  • input.background#333366
  • input.foreground#adadc1
  • input.placeholderForeground#adadc1AA
  • inputOption.activeBorder#2d9f9699
  • inputValidation.errorBackground#571b26
  • inputValidation.errorBorder#a92049
  • inputValidation.infoBackground#052730
  • inputValidation.infoBorder#363b5f
  • inputValidation.warningBackground#5d5938
  • inputValidation.warningBorder#9d8a5e
  • list.activeSelectionBackground#333366
  • list.activeSelectionForeground#adadc1
  • list.dropBackground#00445488
  • list.errorForeground#f35e5e
  • list.focusBackground#333366
  • list.highlightForeground#1ebcc5
  • list.hoverBackground#333366
  • list.inactiveSelectionBackground#333366
  • list.infoForeground#276cd3
  • list.warningForeground#b58900
  • menu.background#2f2f56
  • menu.foreground#8e8ea9
  • menu.selectionBackground#333366
  • menu.selectionForeground#adadc1
  • menu.separatorBackground#333366
  • minimap.selectionHighlight#27464299
  • panel.background#2f2f56
  • panel.border#333366
  • panelTitle.activeBorder#276cd3
  • panelTitle.activeForeground#adadc1
  • panelTitle.inactiveForeground#646487
  • peekView.border#2b2b4a
  • peekViewEditor.background#10192c
  • peekViewEditor.matchHighlightBackground#7744AA40
  • peekViewResult.background#333366
  • peekViewTitle.background#333366
  • pickerGroup.border#2d9f9699
  • pickerGroup.foreground#2d9f9699
  • ports.iconRunningProcessForeground#369432
  • problemsErrorIcon.foreground#f35e5e
  • problemsInfoIcon.foreground#276cd3
  • problemsWarningIcon.foreground#b58900
  • progressBar.background#047aa6
  • quickInputList.focusBackground#005A6F
  • scm.providerBorder#333366
  • scm.providerForeground#8e8ea9
  • scrollbarSlider.activeBackground#646487AA
  • scrollbarSlider.background#64648777
  • scrollbarSlider.hoverBackground#64648799
  • selection.background#2d9f9699
  • sideBar.background#2f2f56
  • sideBar.border#333366
  • sideBar.foreground#8e8ea9
  • sideBarSectionHeader.background#333366
  • sideBarSectionHeader.border#333366
  • sideBarSectionHeader.foreground#adadc1
  • statusBar.background#333366
  • statusBar.debuggingBackground#2f2f56
  • statusBar.foreground#8e8ea9
  • statusBar.noFolderBackground#2f2f56
  • statusBarItem.errorBackground#f35e5e
  • statusBarItem.errorForeground#2f2f56
  • statusBarItem.prominentBackground#276cd3
  • statusBarItem.prominentForeground#2f2f56
  • statusBarItem.remoteBackground#2d9f9699
  • statusBarItem.warningBackground#b58900
  • statusBarItem.warningForeground#2f2f56
  • tab.activeBackground#2f2f56
  • tab.activeBorder#276cd3
  • tab.activeForeground#adadc1
  • tab.border#333366
  • tab.hoverBackground#333366
  • tab.hoverForeground#adadc1
  • tab.inactiveBackground#333366
  • tab.inactiveForeground#646487
  • tab.lastPinnedBorder#2d9f9644
  • terminal.ansiBlack#2f2f56
  • terminal.ansiBlue#276cd3
  • terminal.ansiBrightBlack#7e7ea0
  • terminal.ansiBrightBlue#276cd3
  • terminal.ansiBrightCyan#2d9f96
  • terminal.ansiBrightGreen#899e00
  • terminal.ansiBrightMagenta#5b78d7
  • terminal.ansiBrightRed#f35e5e
  • terminal.ansiBrightWhite#f0e3cb
  • terminal.ansiBrightYellow#b58900
  • terminal.ansiCyan#2d9f96
  • terminal.ansiGreen#899e00
  • terminal.ansiMagenta#5b78d7
  • terminal.ansiRed#f35e5e
  • terminal.ansiWhite#adadc1
  • terminal.ansiYellow#b58900
  • terminal.background#2f2f56
  • terminal.foreground#adadc1
  • terminalCursor.background#adadc1
  • terminalCursor.foreground#adadc1
  • titleBar.activeBackground#2f2f56
  • titleBar.activeForeground#8e8ea9
  • toolbar.activeForeground#adadc1
  • toolbar.hoverBackground#333366
  • toolbar.inactiveForeground#646487
  • widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#8e8ea9
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#8e8ea9
comment#646487italic
string#2d9f96
string.regexp#f35e5e
constant.numeric#ce78a2
variable.language, variable.other#276cd3
keyword#899e00
storage#adadc1bold
entity.name.class, entity.name.type, entity.name.namespace, entity.name.scope-resolution#d37312
entity.name.function#276cd3
punctuation.definition.variable#899e00
punctuation.section.embedded.begin, punctuation.section.embedded.end#f35e5e
constant.language, meta.preprocessor#b58900
support.function.construct, keyword.other.new#d37312
constant.character, constant.other#d37312
entity.other.inherited-class, punctuation.separator.namespace.ruby#5b78d7
variable.parameter
entity.name.tag#276cd3
punctuation.definition.tag#646487
entity.other.attribute-name#adadc1
support.function#276cd3
punctuation.separator.continuation#f35e5e
support.constant, support.variable
support.type, support.class#899e00
support.type.exception#d37312
support.other.variable
invalid#f35e5e
meta.diff, meta.diff.header#276cd3italic
markup.deleted#f35e5e
markup.changed#d37312
markup.inserted#899e00
markup.quote#899e00
markup.list#b58900
markup.bold, markup.italic#ce78a2
markup.boldbold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inline.raw#2d9f96
markup.heading#276cd3bold
markup.heading.setext#276cd3
soft2000 by AH-oss - VS Code Theme