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#080808
  • activityBar.border#080808
  • activityBar.foreground#4CC9F0
  • activityBar.inactiveForeground#9EA7B073
  • diffEditor.diagonalFill#9EA7B040
  • diffEditor.insertedLineBackground#98C37910
  • diffEditor.insertedTextBackground#98C3791A
  • diffEditor.removedLineBackground#E06C7510
  • diffEditor.removedTextBackground#E06C751A
  • editor.background#000000
  • editor.findMatchBackground#E5C07B80
  • editor.findMatchHighlightBackground#E5C07B30
  • editor.findRangeHighlightBackground#E5C07B1A
  • editor.foreground#FFFFFF
  • editor.inactiveSelectionBackground#1A1A1A80
  • editor.lineHighlightBackground#0F0F0F
  • editor.selectionBackground#1A1A1A
  • editor.selectionHighlightBackground#1A1A1AA0
  • editor.wordHighlightBackground#1A1A1AA0
  • editor.wordHighlightStrongBackground#4CC9F030
  • editorBracketMatch.background#4CC9F040
  • editorBracketMatch.border#4CC9F0A0
  • editorCursor.foreground#4CC9F0
  • editorGroupHeader.tabsBackground#050505
  • editorIndentGuide.activeBackground#9EA7B090
  • editorIndentGuide.background#9EA7B040
  • editorLineNumber.activeForeground#FFFFFF
  • editorLineNumber.foreground#9EA7B090
  • editorWhitespace.foreground#9EA7B060
  • focusBorder#4CC9F040
  • foreground#FFFFFF
  • gitDecoration.addedResourceForeground#98C379
  • gitDecoration.conflictingResourceForeground#E056FD
  • gitDecoration.deletedResourceForeground#E06C75
  • gitDecoration.ignoredResourceForeground#9EA7B0B3
  • gitDecoration.modifiedResourceForeground#4CC9F0
  • gitDecoration.untrackedResourceForeground#56B6C2
  • list.deemphasizedForeground#9EA7B0B3
  • panel.background#000000
  • sideBar.background#050505
  • sideBar.border#050505
  • sideBar.foreground#FFFFFF
  • sideBarSectionHeader.background#050505
  • statusBar.background#0A0A0A
  • statusBar.border#0A0A0A
  • statusBar.debuggingBackground#E5C07B40
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#0A0A0A
  • tab.activeBackground#000000
  • tab.inactiveBackground#050505
  • terminal.ansiBlack#080808
  • terminal.ansiBlue#4CC9F0
  • terminal.ansiBrightBlack#9EA7B0
  • terminal.ansiBrightBlue#4CC9F0
  • terminal.ansiBrightCyan#56B6C2
  • terminal.ansiBrightGreen#98C379
  • terminal.ansiBrightMagenta#E056FD
  • terminal.ansiBrightRed#E06C75
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#E5C07B
  • terminal.ansiCyan#56B6C2
  • terminal.ansiGreen#98C379
  • terminal.ansiMagenta#E056FD
  • terminal.ansiRed#E06C75
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#E5C07B
  • terminal.background#000000
  • terminal.foreground#FFFFFF
  • widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9EA7B0italic
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#F72585
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.trycatch, keyword.control.return#F72585bold
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#F72585italic
entity.name.function, meta.function-call, support.function#4CC9F0
variable.function, meta.function-call.generic#4CC9F0
entity.name.type, entity.name.class, support.class, entity.name.type.class, entity.name.type.struct, entity.name.type.enum#E056FD
entity.name.type.interface, entity.name.type.trait#E056FDitalic
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#FFFFFF
variable.parameter, meta.parameter#56B6C2italic
variable.language, variable.parameter.function.language.special.self, variable.parameter.function.language.special.cls#F72585italic
variable.other.property, meta.object-literal.key, support.type.property-name#FFFFFF
string, string.quoted, string.template#FEE440
constant.character.escape, constant.other.placeholder#F72585bold
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#F72585
support.class.component, entity.name.tag.custom#E056FDbold
entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.jsx, entity.other.attribute-name.tsx#3A86FFitalic
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#3A86FF
support.constant.property-value.css, meta.property-value.css, support.constant.color#FEE440
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#E056FDbold
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#C678DDitalic
variable.argument.css, variable.css, variable.scss#FFFFFF
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#4CC9F0bold
keyword.other.unsafe.rust#E06C75bold
keyword.package.go, keyword.import.go, entity.name.package.go#F72585italic
support.type.property-name.json, entity.name.tag.yaml#3A86FF
keyword.other.DML.sql, keyword.other.DDL.sql, keyword.other.sql#F72585bold
entity.name.type.model.prisma#E056FDbold
keyword.other.dockerfile#F72585bold
variable.other.normal.shell, support.function.builtin.shell#56B6C2
markup.heading, entity.name.section.markdown#4CC9F0bold
markup.quote#E056FDitalic
markup.inline.raw, markup.fenced_code.block#FEE440
markup.underline.link, string.other.link#56B6C2underline
Spider Theme Suite by Akila Wasalathilaka - VS Code Theme