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#FEF7E0
  • activityBar.foreground#333333
  • activityBarBadge.background#9ACD32
  • button.background#9ACD32
  • button.foreground#FFFFFF
  • button.secondaryHoverBackground#FFD700
  • editor.background#FEF7E0
  • editor.foreground#333333
  • editor.hoverHighlightBackground#FFFAD9
  • editor.lineHighlightBackground#FFFAD9
  • editor.selectionBackground#FFEE9C
  • editorBracketMatch.background#FFD700
  • editorBracketMatch.border#FFD700
  • editorCursor.foreground#7D78A1
  • editorError.foreground#FF0000
  • editorGroup.border#FFFAD9
  • editorGroup.dropBackground#FFD700
  • editorGroupHeader.tabsBackground#FEF7E0
  • editorGutter.addedBackground#9ACD32
  • editorGutter.background#FEF7E0
  • editorGutter.deletedBackground#FF6347
  • editorGutter.modifiedBackground#FFD700
  • editorHoverWidget.background#FEF7E0
  • editorHoverWidget.border#FFFAD9
  • editorHoverWidget.statusBarBackground#FFFAD9
  • editorLineNumber.activeForeground#666666
  • editorLineNumber.foreground#999999
  • editorMarkerNavigation.background#FFFAD9
  • editorMarkerNavigationError.background#FF0000
  • editorMarkerNavigationWarning.background#FFA500
  • editorOverviewRuler.border#FFFAD9
  • editorOverviewRuler.findMatchForeground#333333
  • editorOverviewRuler.rangeHighlightForeground#333333
  • editorOverviewRuler.selectionHighlightForeground#333333
  • editorOverviewRuler.wordHighlightForeground#333333
  • editorOverviewRuler.wordHighlightStrongForeground#333333
  • editorRuler.foreground#333333
  • editorSuggestWidget.background#FEF7E0
  • editorSuggestWidget.border#FFFAD9
  • editorSuggestWidget.foreground#333333
  • editorSuggestWidget.highlightForeground#666666
  • editorSuggestWidget.selectedBackground#FFD700
  • editorWarning.foreground#FFA500
  • editorWhitespace.foreground#CCCCCC
  • editorWidget.background#FEF7E0
  • editorWidget.border#FFFAD9
  • extensionBadge.remoteBackground#9ACD32
  • list.activeSelectionBackground#FFD70059
  • list.activeSelectionForeground#666666
  • list.focusOutline#9ACD3214
  • list.hoverBackground#FFD700
  • list.inactiveSelectionBackground#FEF7E01d
  • list.inactiveSelectionForeground#333333E6
  • notificationCenterHeader.background#FEF7E0
  • sideBar.background#FEF7E0
  • sideBar.foreground#333333
  • sideBarTitle.foreground#333333
  • statusBar.background#FEF7E0
  • statusBar.border#FFFAD9
  • statusBar.debuggingBackground#FF6347
  • statusBar.debuggingForeground#FEF7E0
  • statusBar.foreground#333333
  • statusBarItem.activeBackground#FFD700
  • statusBarItem.hoverBackground#9ACD32
  • statusBarItem.prominentBackground#9ACD32
  • tab.inactiveBackground#FEF7E0
  • titleBar.activeBackground#FEF7E0
  • titleBar.activeForeground#333333
  • titleBar.inactiveBackground#FEF7E0
  • titleBar.inactiveForeground#7D78A1

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#808080italic
string#008000—
keyword#0000FFbold
entity.name.function#FF6347—
variable#000000—
constant.numeric#A52A2A—
constant.language.boolean#0000FF—
storage#000000—
punctuation#000000—
keyword.operator#000000—
punctuation.definition.string#FFD700—
constant#A52A2Abold
punctuation.definition.arguments.begin#FFD700—
punctuation.definition.arguments.end#FFD700—
support#000000—
entity.name.type#2E8B57—
markup#800000—
meta#800000—
entity.name.tag#800000—
entity.other.attribute-name#800000—
invalid#FF0000—
diff.added#008000—
diff.removed#FF0000—
diff.changed#0000FF—