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#20232A
  • activityBar.border#20232A
  • activityBar.foreground#38D9A9
  • activityBar.inactiveForeground#9AA5B973
  • diffEditor.diagonalFill#9AA5B940
  • diffEditor.insertedLineBackground#98C37910
  • diffEditor.insertedTextBackground#98C3791A
  • diffEditor.removedLineBackground#E06C7510
  • diffEditor.removedTextBackground#E06C751A
  • editor.background#2C313C
  • editor.findMatchBackground#E5C07B80
  • editor.findMatchHighlightBackground#E5C07B30
  • editor.findRangeHighlightBackground#E5C07B1A
  • editor.foreground#F8F9FA
  • editor.inactiveSelectionBackground#40485980
  • editor.lineHighlightBackground#363C49
  • editor.selectionBackground#404859
  • editor.selectionHighlightBackground#404859A0
  • editor.wordHighlightBackground#404859A0
  • editor.wordHighlightStrongBackground#38D9A930
  • editorBracketMatch.background#38D9A940
  • editorBracketMatch.border#38D9A9A0
  • editorCursor.foreground#38D9A9
  • editorGroupHeader.tabsBackground#252932
  • editorIndentGuide.activeBackground#9AA5B990
  • editorIndentGuide.background#9AA5B940
  • editorLineNumber.activeForeground#F8F9FA
  • editorLineNumber.foreground#9AA5B990
  • editorWhitespace.foreground#9AA5B960
  • focusBorder#38D9A940
  • foreground#F8F9FA
  • gitDecoration.addedResourceForeground#98C379
  • gitDecoration.conflictingResourceForeground#7088FF
  • gitDecoration.deletedResourceForeground#E06C75
  • gitDecoration.ignoredResourceForeground#9AA5B9B3
  • gitDecoration.modifiedResourceForeground#38D9A9
  • gitDecoration.untrackedResourceForeground#56B6C2
  • list.deemphasizedForeground#9AA5B9B3
  • panel.background#2C313C
  • sideBar.background#252932
  • sideBar.border#252932
  • sideBar.foreground#F8F9FA
  • sideBarSectionHeader.background#252932
  • statusBar.background#1B1E24
  • statusBar.border#1B1E24
  • statusBar.debuggingBackground#E5C07B40
  • statusBar.foreground#F8F9FA
  • statusBar.noFolderBackground#1B1E24
  • tab.activeBackground#2C313C
  • tab.inactiveBackground#252932
  • terminal.ansiBlack#20232A
  • terminal.ansiBlue#38D9A9
  • terminal.ansiBrightBlack#9AA5B9
  • terminal.ansiBrightBlue#38D9A9
  • terminal.ansiBrightCyan#56B6C2
  • terminal.ansiBrightGreen#98C379
  • terminal.ansiBrightMagenta#7088FF
  • terminal.ansiBrightRed#E06C75
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#E5C07B
  • terminal.ansiCyan#56B6C2
  • terminal.ansiGreen#98C379
  • terminal.ansiMagenta#7088FF
  • terminal.ansiRed#E06C75
  • terminal.ansiWhite#F8F9FA
  • terminal.ansiYellow#E5C07B
  • terminal.background#2C313C
  • terminal.foreground#F8F9FA
  • widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9AA5B9italic
comment.keyword.todo, comment.line.todo#D19A66bold
comment.keyword.fixme, comment.line.fixme#E06C75bold underline
comment.keyword.note, comment.line.note#61AFEFbold
comment.keyword.warning, comment.line.warning#E5C07Bbold
comment.keyword.hack, comment.line.hack#C678DDbold
punctuation, meta.brace, meta.delimiter#ABB2BFD9
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.comparison#ABB2BFD9
keyword, storage, storage.type#52B788
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.trycatch, keyword.control.return#52B788bold
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#52B788italic
entity.name.function, meta.function-call, support.function#38D9A9
variable.function, meta.function-call.generic#38D9A9
entity.name.type, entity.name.class, support.class, entity.name.type.class, entity.name.type.struct, entity.name.type.enum#7088FF
entity.name.type.interface, entity.name.type.trait#7088FFitalic
support.type.primitive, support.type.builtin, storage.type.numeric.go, storage.type.boolean.go, storage.type.string.go#56B6C2
variable, variable.other.readwrite, variable.other.object#F8F9FA
variable.parameter, meta.parameter#56B6C2italic
variable.language, variable.parameter.function.language.special.self, variable.parameter.function.language.special.cls#52B788italic
variable.other.property, meta.object-literal.key, support.type.property-name#F8F9FA
string, string.quoted, string.template#F48C06
constant.character.escape, constant.other.placeholder#52B788bold
constant.numeric, keyword.other.unit#D19A66
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#D19A66bold
variable.other.constant, entity.name.constant#E5C07Bbold
entity.name.tag, entity.name.tag.html, entity.name.tag.xml, entity.name.tag.js, entity.name.tag.jsx, entity.name.tag.tsx#52B788
support.class.component, entity.name.tag.custom#7088FFbold
entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.jsx, entity.other.attribute-name.tsx#56B6C2italic
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#ABB2BFD9
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less#56B6C2
support.constant.property-value.css, meta.property-value.css, support.constant.color#F48C06
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#7088FFbold
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#C678DDitalic
variable.argument.css, variable.css, variable.scss#F8F9FA
meta.function.decorator.python, entity.name.function.decorator.python#C678DDitalic
support.function.builtin.python#56B6C2
entity.name.type.lifetime.rust, storage.modifier.lifetime.rust#E5C07Bitalic
support.macro.rust, entity.name.function.macro.rust#38D9A9bold
keyword.other.unsafe.rust#E06C75bold
keyword.package.go, keyword.import.go, entity.name.package.go#52B788italic
support.type.property-name.json, entity.name.tag.yaml#56B6C2
keyword.other.DML.sql, keyword.other.DDL.sql, keyword.other.sql#52B788bold
entity.name.type.model.prisma#7088FFbold
keyword.other.dockerfile#52B788bold
variable.other.normal.shell, support.function.builtin.shell#56B6C2
markup.heading, entity.name.section.markdown#38D9A9bold
markup.quote#7088FFitalic
markup.inline.raw, markup.fenced_code.block#F48C06
markup.underline.link, string.other.link#56B6C2underline