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.italicitalic
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