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#3f3f3f
  • activityBar.foreground#95c9b6
  • activityBar.inactiveForeground#7ba092
  • activityBarBadge.background#7ba092
  • activityBarBadge.foreground#0c0c0c
  • button.background#a6b69b
  • button.foreground#000000
  • button.hoverBackground#93a189
  • button.secondaryBackground#a6b69b
  • button.secondaryForeground#000000
  • button.secondaryHoverBackground#93a189
  • editor.background#3f3f3f
  • editor.findMatchBackground#7575753a
  • editor.findMatchHighlightBackground#7575753a
  • editor.hoverHighlightBackground#7575753a
  • editor.selectionBackground#d38f8f32
  • editor.selectionHighlightBackground#a582822a
  • editor.wordHighlightBackground#7575753a
  • editor.wordHighlightStrongBackground#7575753a
  • editorBracketHighlight.foreground1#bfc5bf
  • editorBracketHighlight.foreground2#bfc5bf
  • editorBracketHighlight.foreground3#bfc5bf
  • editorBracketHighlight.foreground4#bfc5bf
  • editorBracketHighlight.foreground5#bfc5bf
  • editorBracketHighlight.foreground6#bfc5bf
  • editorBracketHighlight.unexpectedBracket.foreground#ff0000
  • editorBracketMatch.background#7575753a
  • editorBracketMatch.border#00000000
  • editorBracketPairGuide.activeBackground1#383838
  • editorBracketPairGuide.activeBackground2#383838
  • editorBracketPairGuide.activeBackground3#383838
  • editorBracketPairGuide.activeBackground4#383838
  • editorBracketPairGuide.activeBackground5#383838
  • editorBracketPairGuide.activeBackground6#383838
  • editorBracketPairGuide.background1#aaaaaa
  • editorBracketPairGuide.background2#aaaaaa
  • editorBracketPairGuide.background3#aaaaaa
  • editorBracketPairGuide.background4#aaaaaa
  • editorBracketPairGuide.background5#aaaaaa
  • editorBracketPairGuide.background6#aaaaaa
  • editorCursor.foreground#afadad
  • editorError.background#00000000
  • editorError.foreground#c22121
  • editorGroupHeader.tabsBackground#2e2e2e
  • editorGutter.background#3f3f3f
  • editorInfo.background#00000000
  • editorLink.activeForeground#d6b69a
  • editorWarning.background#00000000
  • editorWarning.foreground#c2aa21
  • editorWidget.background#3f3f3f
  • list.activeSelectionBackground#25252473
  • list.activeSelectionForeground#dddeee
  • list.focusAndSelectionOutline#252524a9
  • list.focusOutline#99bde8
  • sideBar.background#3f3f3f
  • sideBar.border#5e5959
  • statusBar.background#444444
  • statusBar.noFolderBackground#4c4c4c
  • statusBar.noFolderForeground#ffffff
  • textLink.activeForeground#95c9b6
  • textLink.foreground#7ba092
  • titleBar.border#252526

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
, string.json, string.json punctuation, meta.template.expression, source.coffee.embedded, keyword.key.toml, entity.name.tag.yaml#BBBBBB—
comment, comment punctuation, comment storage#555555—
keyword, keyword.operator, keyword.control, storage, storage.type, support.type.primitive, support.type.builtin, constant.language.false.cpp, constant.language.true.cpp, constant.language.nullptr.cpp#EAE2B9—
comment#7D9C89—
keyword.control.directive, entity.other.attribute-name.pragma.preprocessor.cpp, punctuation.definition.directive#99bde8—
punctuation.definition.comment#7D9C89—
string, punctuation.definition.string.begin, punctuation.separator.continuation, punctuation.definition.string.end, constant.other.placeholder, constant.character.escape.cpp#BD9393—
meta.embedded.assembly#BD9393—
keyword.operator#bbbbbb—
meta.brace, keyword.operator.type.annotation#BFC5BF—
punctuation.separator.namespace#919191—
storage.type.built-in.cpp#bbbbbb—
constant, constant.numeric, constant.other, keyword.other.unit, keyword.other.unit.px, keyword.other.unit.percentage#bbbbbb—
token.info-token#6796E6—
token.warn-token#CD9731—
token.error-token#F44747—
token.debug-token#B267E6—
Tsoding Theme (2021) by Colin Minniefield - VS Code Theme