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#0D0A0A
  • activityBar.border#0D0A0A
  • activityBar.foreground#00B4D8
  • activityBar.inactiveForeground#8E98AD73
  • diffEditor.diagonalFill#8E98AD40
  • diffEditor.insertedLineBackground#98C37910
  • diffEditor.insertedTextBackground#98C3791A
  • diffEditor.removedLineBackground#E06C7510
  • diffEditor.removedTextBackground#E06C751A
  • editor.background#1A1515
  • editor.findMatchBackground#E5C07B80
  • editor.findMatchHighlightBackground#E5C07B30
  • editor.findRangeHighlightBackground#E5C07B1A
  • editor.foreground#F8F9FA
  • editor.inactiveSelectionBackground#3D272780
  • editor.lineHighlightBackground#241818
  • editor.selectionBackground#3D2727
  • editor.selectionHighlightBackground#3D2727A0
  • editor.wordHighlightBackground#3D2727A0
  • editor.wordHighlightStrongBackground#00B4D830
  • editorBracketMatch.background#00B4D840
  • editorBracketMatch.border#00B4D8A0
  • editorCursor.foreground#00B4D8
  • editorGroupHeader.tabsBackground#120E0E
  • editorIndentGuide.activeBackground#8E98AD90
  • editorIndentGuide.background#8E98AD40
  • editorLineNumber.activeForeground#F8F9FA
  • editorLineNumber.foreground#8E98AD90
  • editorWhitespace.foreground#8E98AD60
  • focusBorder#00B4D840
  • foreground#F8F9FA
  • gitDecoration.addedResourceForeground#98C379
  • gitDecoration.conflictingResourceForeground#C678DD
  • gitDecoration.deletedResourceForeground#E06C75
  • gitDecoration.ignoredResourceForeground#8E98ADB3
  • gitDecoration.modifiedResourceForeground#00B4D8
  • gitDecoration.untrackedResourceForeground#56B6C2
  • list.deemphasizedForeground#8E98ADB3
  • panel.background#1A1515
  • sideBar.background#120E0E
  • sideBar.border#120E0E
  • sideBar.foreground#F8F9FA
  • sideBarSectionHeader.background#120E0E
  • statusBar.background#080606
  • statusBar.border#080606
  • statusBar.debuggingBackground#E5C07B40
  • statusBar.foreground#F8F9FA
  • statusBar.noFolderBackground#080606
  • tab.activeBackground#1A1515
  • tab.inactiveBackground#120E0E
  • terminal.ansiBlack#0D0A0A
  • terminal.ansiBlue#00B4D8
  • terminal.ansiBrightBlack#8E98AD
  • terminal.ansiBrightBlue#00B4D8
  • terminal.ansiBrightCyan#56B6C2
  • terminal.ansiBrightGreen#98C379
  • terminal.ansiBrightMagenta#C678DD
  • terminal.ansiBrightRed#E06C75
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#E5C07B
  • terminal.ansiCyan#56B6C2
  • terminal.ansiGreen#98C379
  • terminal.ansiMagenta#C678DD
  • terminal.ansiRed#E06C75
  • terminal.ansiWhite#F8F9FA
  • terminal.ansiYellow#E5C07B
  • terminal.background#1A1515
  • terminal.foreground#F8F9FA
  • widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8E98ADitalic
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#E63946
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.trycatch, keyword.control.return#E63946bold
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#E63946italic
entity.name.function, meta.function-call, support.function#00B4D8
variable.function, meta.function-call.generic#00B4D8
entity.name.type, entity.name.class, support.class, entity.name.type.class, entity.name.type.struct, entity.name.type.enum#C678DD
entity.name.type.interface, entity.name.type.trait#C678DDitalic
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#E63946italic
variable.other.property, meta.object-literal.key, support.type.property-name#F8F9FA
string, string.quoted, string.template#E9C46A
constant.character.escape, constant.other.placeholder#E63946bold
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#E63946
support.class.component, entity.name.tag.custom#C678DDbold
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#E9C46A
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#C678DDbold
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#00B4D8bold
keyword.other.unsafe.rust#E06C75bold
keyword.package.go, keyword.import.go, entity.name.package.go#E63946italic
support.type.property-name.json, entity.name.tag.yaml#56B6C2
keyword.other.DML.sql, keyword.other.DDL.sql, keyword.other.sql#E63946bold
entity.name.type.model.prisma#C678DDbold
keyword.other.dockerfile#E63946bold
variable.other.normal.shell, support.function.builtin.shell#56B6C2
markup.heading, entity.name.section.markdown#00B4D8bold
markup.quote#C678DDitalic
markup.inline.raw, markup.fenced_code.block#E9C46A
markup.underline.link, string.other.link#56B6C2underline
Spider Theme Suite by Akila Wasalathilaka - VS Code Theme