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.activeBorder#F4F9F9
  • activityBar.background#191919
  • activityBar.border#525252
  • activityBar.foreground#F4F9F9
  • breadcrumb.activeSelectionForeground#14C38E
  • button.background#14C38E
  • button.hoverBackground#14C38E
  • debugToolBar.background#191919
  • editor.background#191919
  • editorBracketHighlight.foreground1#FFE15D
  • editorBracketHighlight.foreground2#8FBDD3
  • editorBracketHighlight.foreground3#EA5C2B
  • editorBracketHighlight.foreground4#FF8DC7
  • editorBracketHighlight.foreground5#B2A4FF
  • editorBracketHighlight.foreground6#ea4aaa
  • editorError.foreground#ee2746
  • editorGroupHeader.tabsBackground#191919
  • editorGutter.addedBackground#123C19
  • editorGutter.commentRangeForeground#dedcd530
  • editorGutter.deletedBackground#6C090B
  • editorGutter.foldingControlForeground#dedcd590
  • editorGutter.modifiedBackground#053170
  • editorHint.foreground#123C19
  • editorInfo.foreground#053170
  • editorInlayHint.background#191919
  • editorInlayHint.foreground#666666
  • editorLineNumber.activeForeground#bfbaaa
  • editorWarning.foreground#551F03
  • foreground.undefined#F4F9F9
  • gitDecoration.addedResourceForeground#123C19
  • gitDecoration.conflictingResourceForeground#551F03
  • gitDecoration.deletedResourceForeground#6C090B
  • gitDecoration.ignoredResourceForeground#dedcd530
  • gitDecoration.modifiedResourceForeground#053170
  • gitDecoration.submoduleResourceForeground#dedcd590
  • gitDecoration.untrackedResourceForeground#005F64
  • input.background#000000
  • menu.background#191919
  • panel.background#191919
  • peekViewEditor.background#191919
  • peekViewResult.background#191919
  • problemsErrorIcon.foreground#ee2746
  • problemsInfoIcon.foreground#053170
  • problemsWarningIcon.foreground#551F03
  • settings.checkboxBorder#14C38E
  • settings.checkboxForeground#14C38E
  • settings.headerForeground#F4F9F9
  • settings.modifiedItemIndicator#14C38E
  • sideBar.background#191919
  • sideBar.border#525252
  • sideBar.foreground#F4F9F9
  • sideBarSectionHeader.background#191919
  • sideBarSectionHeader.border#323232
  • sideBarSectionHeader.foreground#F4F9F9
  • sideBarTitle.foreground#F4F9F9
  • statusBar.background#191919
  • tab.activeBackground#363636
  • tab.inactiveBackground#191919
  • terminal.ansiBlack#202020
  • terminal.ansiBlue#0A4694
  • terminal.ansiBrightBlack#606060
  • terminal.ansiBrightBlue#1D75DB
  • terminal.ansiBrightCyan#01ACC1
  • terminal.ansiBrightGreen#32953D
  • terminal.ansiBrightMagenta#FF4DB2
  • terminal.ansiBrightRed#D73324
  • terminal.ansiBrightWhite#606060
  • terminal.ansiBrightYellow#D2AF0F
  • terminal.ansiCyan#00838F
  • terminal.ansiGreen#1C5A25
  • terminal.ansiMagenta#FF1A9C
  • terminal.ansiRed#901110
  • terminal.ansiWhite#202020
  • terminal.ansiYellow#7E6C06
  • terminal.foreground#F4F9F9
  • terminal.selectionBackground#0366d6
  • titleBar.activeBackground#191919
  • titleBar.inactiveBackground#191919

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#525252
delimiter.bracket, delimiter, invalid.illegal.character-not-allowed-here.html, keyword.operator.rest, keyword.operator.spread, keyword.operator.type.annotation, keyword.operator.relational.ts, meta.brace, meta.tag.block.any.html, meta.tag.inline.any.html, meta.tag.structure.input.void.html, meta.type.annotation, storage.type.function.arrow, keyword.operator.type, meta.objectliteral.ts, punctuation#666666
constant, entity.name.constant, variable.language, meta.definition.variable#c99076
entity, entity.name#A3C7D6
variable.parameter.function#F4F9F9
entity.name.tag, tag.html#F56EB3
entity.name.function#A3C7D6
keyword, storage.type.class.jsdoc#F56EB3
storage, storage.type, support.type.builtin, constant.language.undefined, constant.language.null#cb7676
storage.modifier.package, storage.modifier.import, storage.type.java#F4F9F9
string, string punctuation.section.embedded source, attribute.value#BA94D1
punctuation.definition.string, punctuation.support.type.property-name#BA94D199
support#579BB1
property, meta.property-name, meta.object-literal.key, entity.name.tag.yaml, attribute.name#579BB1
async#5AA897
entity.other.attribute-name, invalid.deprecated.entity.other.attribute-name.html#14C38E
variable, identifier#14C38E
support.type.primitive, entity.name.type#5da9a7
namespace#db889a
keyword.operator, meta.var.expr.ts#cb7676
string variable#BA94D1
source.regexp, string.regexp#54BAB9
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#BA94D1
string.regexp constant.character.escape#544903
support.constant#c99076
constant.numeric, number#0CECDD
keyword.other.unit#cb7676
constant.language.boolean, constant.language#1EAE98
meta.module-reference#14C38E
punctuation.definition.list.begin.markdown#551F03
markup.heading, markup.heading entity.name#14C38Ebold
markup.quote#5DA994
markup.italic#F4F9F9italic
markup.bold#F4F9F9bold
markup.raw#14C38E
constant.other.reference.link, string.other.link, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#BA94D1
markup.underline.link.markdown#dedcd590underline
type.identifier#6893BF
entity.other.attribute-name.html.vue#A3C7D6
invalid.illegal.unrecognized-tag.htmlnormal
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#FD9983
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#7FD184
markup.changed, punctuation.definition.changed#FFC772
markup.ignored, markup.untracked#424242
meta.diff.range#CA78D1bold
meta.diff.header#7FC1FF
meta.separator#7FC1FFbold
meta.output#7FC1FF
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#E0E0E0
brackethighlighter.unmatched#FD9983
zzhtheme by langlang - VS Code Theme