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