Skip to main content
CodingTheme

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#282828
  • activityBar.foreground#fff7c7
  • activityBar.inactiveForeground#fffff9
  • activityBarBadge.background#b0af81
  • activityBarBadge.foreground#0c0c0c
  • button.background#ece2ae
  • button.foreground#795353
  • editor.background#181818
  • editor.findMatchBackground#d38f8f32
  • editor.findMatchHighlightBackground#181818
  • editor.hoverHighlightBackground#181818
  • 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#181818
  • editorInfo.background#00000000
  • editorLink.activeForeground#d6b69a
  • editorWarning.background#00000000
  • editorWarning.foreground#c2aa21
  • editorWidget.background#2d2d2d
  • sideBar.background#181818
  • statusBar.background#282828
  • statusBar.noFolderBackground#4c4c4c
  • statusBar.noFolderForeground#ffffff
  • textLink.activeForeground#95c9b6
  • textLink.foreground#7ba092
  • titleBar.activeBackground#212121
  • titleBar.border#212121

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#e8e8e8
punctuation, meta.brace, keyword.operator.type.annotation#FFB459
string, punctuation.definition.string, constant, variable.language#69b037
comment, comment punctuation, comment storage#555555
keyword, storage, keyword.other, storage.modifier, support.type.primitive, support.type.builtin#ffdd33
comment#ff9b21
punctuation.definition.comment#ff9b21
string#79bf46
meta.embedded.assembly#BD9393
keyword - keyword.operator#ffdd33
keyword.control#ffdd33
storage#ff0000
storage.type#ffdd33
keyword.operator#BFC5BF
punctuation, meta.brace, keyword.operator.type.annotation#BFC5BF
keyword, storage, support.type.primitive, support.type.builtin#EAE2B9
constant, variable.language#BFC5BF
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Tsoding Theme by JoaoAJMAtos - VS Code Theme