Skip to main content
Coding Theme

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#2a2a2c
  • breadcrumb.background#2a2a2c
  • checkbox.background#2a2a2c
  • checkbox.border#2a2a2c
  • debugIcon.breakpointForeground#82aaff
  • descriptionForeground#ff0000
  • dropdown.background#2a2a2c
  • dropdown.border#2a2a2c
  • editor.background#2a2a2c
  • editor.findMatchBackground#e8876d
  • editor.findMatchBorder#ffffff00
  • editor.findMatchHighlightBackground#555577
  • editor.findMatchHighlightBorder#ffffff00
  • editor.foreground#f7f7f7
  • editor.lineHighlightBackground#101010
  • editor.selectionBackground#515151
  • editor.selectionHighlightBackground#ff0000
  • editor.selectionHighlightBorder#ffffff
  • editor.wordHighlightBackground#771835
  • editor.wordHighlightStrongBackground#771835
  • editorBracketMatch.background#94b7ef
  • editorCursor.background#204040
  • editorCursor.foreground#94b7ef
  • editorError.background#00000000
  • editorError.foreground#e8876d
  • editorGroupHeader.noTabsBackground#2a2a2c
  • editorGroupHeader.tabsBackground#212123
  • editorGutter.addedBackground#00000000
  • editorGutter.background#2a2a2c
  • editorGutter.deletedBackground#00000000
  • editorGutter.modifiedBackground#00000000
  • editorInfo.background#00000000
  • editorInfo.foreground#eeeeee
  • editorMarkerNavigation.background#2a2a2c
  • editorOverviewRuler.addedForeground#00000000
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.bracketMatchForeground#00000000
  • editorOverviewRuler.commonContentForeground#00000000
  • editorOverviewRuler.currentContentForeground#00000000
  • editorOverviewRuler.deletedForeground#00000000
  • editorOverviewRuler.errorForeground#00000000
  • editorOverviewRuler.findMatchForeground#00000000
  • editorOverviewRuler.incomingContentForeground#00000000
  • editorOverviewRuler.infoForeground#00000000
  • editorOverviewRuler.modifiedForeground#00000000
  • editorOverviewRuler.rangeHighlightForeground#00000000
  • editorOverviewRuler.selectionHighlightForeground#00000000
  • editorOverviewRuler.warningForeground#00000000
  • editorOverviewRuler.wordHighlightForeground#00000000
  • editorOverviewRuler.wordHighlightStrongForeground#00000000
  • editorPane.background#2a2a2c
  • editorRuler.foreground#00000000
  • editorWarning.background#00000000
  • editorWarning.foreground#bc8cf2
  • editorWhitespace.foreground#747369
  • focusBorder#ffffff00
  • input.background#2a2a2c
  • list.activeSelectionBackground#444444
  • list.inactiveSelectionBackground#444444
  • menu.background#2a2a2c
  • panel.background#2a2a2c
  • scrollbar.shadow#2a2a2c
  • scrollbarSlider.activeBackground#333333
  • scrollbarSlider.background#00000000
  • scrollbarSlider.hoverBackground#333333
  • settings.textInputBackground#2a2a2c
  • sideBar.background#2a2a2c
  • sideBar.foreground#ececec
  • sideBarSectionHeader.background#2a2a2c
  • statusBar.background#2a2a2c
  • statusBarItem.remoteBackground#2a2a2c
  • tab.activeBackground#2a2a2c
  • tab.inactiveBackground#212123
  • tab.unfocusedActiveBackground#2a2a2c
  • terminal.ansiBlack#111111
  • terminal.ansiBlue#82aaff
  • terminal.ansiBrightBlack#4a4a4a
  • terminal.ansiBrightBlue#82aaff
  • terminal.ansiBrightCyan#89ddff
  • terminal.ansiBrightGreen#c3e88d
  • terminal.ansiBrightMagenta#c792ea
  • terminal.ansiBrightRed#f07178
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffffb6
  • terminal.ansiCyan#89ddff
  • terminal.ansiGreen#c3e88d
  • terminal.ansiMagenta#c792ea
  • terminal.ansiRed#f07178
  • terminal.ansiWhite#eeffff
  • terminal.ansiYellow#ffffb6
  • terminal.background#2a2a2c
  • terminal.foreground#eeffff
  • terminalCursor.background#eeffff
  • terminalCursor.foreground#eeffff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable.parameter.function#D3D0C8—
comment, punctuation.definition.comment#9F9F9F—
punctuation.definition.string, punctuation.definition.variable, punctuation.definition.string, punctuation.definition.parameters, punctuation.definition.string, punctuation.definition.array#D3D0C8—
none#D3D0C8—
keyword.operator#FFFFFFbold
keyword#94B3D1—
entity.name.function, meta.require, support.function.any-method, variable.function#FFFFFFbold
support.class, entity.name.class, entity.name.type.class#FFCC66—
meta.class#F2F0EC—
keyword.other.special-method#6699CC—
storage#FFFFFFbold
support.function#BBF5D7—
string, constant.other.symbol, entity.other.inherited-class#BBF5D7—
constant.numeric#F99157—
none#F99157—
entity.name.tag#FF878A—
entity.other.attribute-name#F99157—
entity.other.attribute-name.id, punctuation.definition.entity#6699CC—
meta.selector#CC99CC—
none#F99157—
markup.heading punctuation.definition.heading, entity.name.section#6699CC
keyword.other.unit#F99157—
markup.bold, punctuation.definition.bold#FFCC66bold
markup.italic, punctuation.definition.italic#CC99CCitalic
markup.raw.inline#99CC99—
string.other.link#F2777A—
meta.link#F99157—
meta.image#F99157—
markup.list#F2777A—
markup.quote#F99157—
meta.separator#D3D0C8—
markup.inserted, markup.inserted.git_gutter#99CC99—
markup.deleted, markup.deleted.git_gutter#F2777A—
markup.changed, markup.changed.git_gutter#CC99CC—
markup.ignored, markup.ignored.git_gutter#515151—
markup.untracked, markup.untracked.git_gutter#515151—
constant.other.color#66CCCC—
string.regexp#66CCCC—
constant.character.escape#66CCCC—
punctuation.section.embedded, variable.interpolation#D27B53—
markup.deleted.git_gutter#F92672—
markup.inserted.git_gutter#A6E22E—
markup.changed.git_gutter#967EFB—
markup.ignored.git_gutter#565656—
markup.untracked.git_gutter#565656—
constant.numeric#FFFFFF—
token.info-token#6796E6—
token.warn-token#CD9731—
token.error-token#F44747—
token.debug-token#B267E6—
keyword.operator#FCFCFCbold
storage#FCFCFCbold
entity.name.function, meta.require, support.function.any-method, variable.function#FCFCFCbold
support.class, entity.name.class, entity.name.type.class#94B3D1bold
markup.heading punctuation.definition.heading, entity.name.section#6699CCbold
markup.bold, punctuation.definition.bold#FFFFFFbold
markup.italic, punctuation.definition.italic—italic
markup.raw.inline#BBF5D7—
markup.fenced_code, markup.inline.raw#BBF5D7—
string.other.link#FAFAFAbold
meta.link#FAFAFAunderline
markup.list#FAFAFA—
markup.quote#FAFAFAitalic
meta.separator#D3D0C8—
keyword#8CB3D9—
storage#FFFFFFbold
keyword.operator#FBFFCCbold
entity.name.function, meta.require, support.function.any-method, variable.function#FFFFFFbold
support.class, entity.name.class, entity.name.type.class#94B3D1bold
markup.heading punctuation.definition.heading, entity.name.section#FFFFFFbold
markup.bold, punctuation.definition.bold#FAFAFAbold
markup.italic, punctuation.definition.italic#FFFFFFitalic
markup.raw.inline#BBF5D7—
markup.fenced_code, markup.inline.raw#BBF5D7—
string.other.link#94B3D1bold
meta.link#94B3D1—
markup.list#FAFAFA—
markup.quote#FAFAFAitalic
meta.separator#D3D0C8—
meta.image#FFF9E0—
entity.name.type.rust#FBFFCC—
entity.name.type.struct.rust#8CB3D9bold
entity.name.type.enum.rust#8CB3D9bold
entity.name.type.result.rust#FBFFCCbold
entity.name.tag#8CB3D9bold
entity.name.type, meta.type.declaration, entity.name.type, entity.name.type.typedef#CFFCE6—
comment#BFBFBF—
support.type, meta.type.annotation, entity.name.type, source.go, entity.other.inherited-class——
keyword, storage, storage.type.keyword, keyword.operator.new, keyword.operator.delete#C4E7FF
entity.name.function#FFFFFF
keyword.operator#FFFFFF
support.class, entity.name.class, entity.name.type.class#C4E7FF
string, constant, constant.numeric#CFFCE6—
string constant#CFFCE6—
string variable#FFFFFF—
entity.name.type.rust#CFFCE6
entity.name.type.struct.rust#FFFFFF
entity.name.type.enum.rust#C4E7FF
entity.name.type.result.rust#CFFCE6
entity.name.tag#C4E7FF
msun-dark by Mike Sun - VS Code Theme