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#ffffff
  • activityBar.foreground#aaaaaa
  • activityBarBadge.background#007acc
  • activityBarBadge.foreground#ffffff
  • badge.background#e2eeff
  • badge.foreground#3778b7
  • breadcrumb.activeSelectionForeground#b357a0
  • breadcrumb.focusForeground#1c7ab8
  • breadcrumb.foreground#9b9b9b
  • breadcrumbPicker.background#eeeeee
  • button.background#3778b7
  • button.foreground#e2eeff
  • contrastBorder#e5e5e5
  • diffEditor.insertedTextBackground#d1eaff40
  • diffEditor.removedTextBackground#fdc0c040
  • dropdown.background#e2eeff
  • dropdown.border#c2d0e5
  • dropdown.foreground#3377b9
  • editor.background#ffffff
  • editor.findMatchBackground#007acc4d
  • editor.findMatchHighlightBackground#d8efff
  • editor.findRangeHighlightBackground#007acc00
  • editor.lineHighlightBackground#c6cbce1e
  • editor.lineHighlightBorder#efefef
  • editor.rangeHighlightBackground#c6cbce1e
  • editor.selectionBackground#e2e8fb
  • editor.selectionHighlightBackground#e2eefa
  • editor.wordHighlightBackground#e2eefa
  • editor.wordHighlightStrongBackground#6a6dff36
  • editorBracketMatch.background#e2eefa
  • editorBracketMatch.border#6ba9cb15
  • editorCursor.foreground#00bbec
  • editorError.foreground#A56416
  • editorGroup.border#ffffff
  • editorGroup.dropBackground#f1f1f1
  • editorGroupHeader.noTabsBackground#ffffff
  • editorGroupHeader.tabsBackground#ffffff
  • editorGroupHeader.tabsBorder#ffffff
  • editorGutter.addedBackground#428226
  • editorGutter.deletedBackground#A56416
  • editorGutter.modifiedBackground#3778b7
  • editorHoverWidget.background#f7f7f7
  • editorLineNumber.activeForeground#007acc
  • editorLineNumber.foreground#cccccc
  • editorOverviewRuler.addedForeground#428226
  • editorOverviewRuler.deletedForeground#A56416
  • editorOverviewRuler.modifiedForeground#3778b7
  • editorOverviewRuler.wordHighlightForeground#a56416
  • editorOverviewRuler.wordHighlightStrongForeground#b052a1
  • editorSuggestWidget.background#fafafa
  • editorSuggestWidget.border#e8e8e8
  • editorSuggestWidget.foreground#5b7685
  • editorSuggestWidget.selectedBackground#e8e8e8
  • editorSuggestWidget.selectedForeground#50626b
  • editorSuggestWidget.selectedIconForeground#50626b
  • editorWarning.foreground#428226
  • editorWidget.background#ffffff
  • editorWidget.border#cccccc
  • focusBorder#d8efff
  • gitDecoration.addedResourceForeground#5b7685
  • gitDecoration.modifiedResourceForeground#5b7685
  • gitDecoration.untrackedResourceForeground#5b7685
  • input.background#ffffff
  • input.border#007acc3a
  • input.foreground#3778b7
  • input.placeholderForeground#a0a0a0
  • inputOption.activeBorder#A56416
  • list.activeSelectionBackground#007acc
  • list.activeSelectionForeground#ffffff
  • list.errorForeground#A51616
  • list.focusBackground#e8e8e8
  • list.focusForeground#3778b9
  • list.focusHighlightForeground#d5adce
  • list.highlightForeground#b052a1
  • list.hoverBackground#f2f2f2
  • list.inactiveFocusBackground#e8e8e8
  • list.inactiveSelectionBackground#e8e8e8
  • list.inactiveSelectionForeground#3778b7
  • list.warningForeground#5b7685
  • panel.background#ffffff
  • panel.border#e5e5e5
  • panelTitle.activeBorder#007acc
  • panelTitle.activeForeground#007acc
  • panelTitle.inactiveForeground#aaaaaa
  • peekView.border#cccccc
  • peekViewEditor.background#eeeeee
  • peekViewEditor.matchHighlightBackground#e2eefb
  • peekViewEditorGutter.background#eeeeee
  • peekViewResult.background#eaeaea
  • peekViewResult.fileForeground#424242
  • peekViewResult.lineForeground#424242
  • peekViewResult.matchHighlightBackground#e9e2fb
  • peekViewResult.selectionBackground#e2eefb
  • peekViewResult.selectionForeground#3778b7
  • peekViewTitle.background#eeeeee
  • peekViewTitleDescription.foreground#3778b7
  • peekViewTitleLabel.foreground#b052a1
  • progressBar.background#A56416
  • quickInputList.focusIconForeground#ffffff
  • scrollbarSlider.activeBackground#b5b5b5
  • scrollbarSlider.background#e8e8e8
  • scrollbarSlider.hoverBackground#b5b5b5
  • selection.background#e2eefb
  • sideBar.background#ffffff
  • sideBar.foreground#5b7685
  • sideBarSectionHeader.background#e8e8e8
  • sideBarSectionHeader.foreground#5b7685
  • sideBarTitle.foreground#007acc
  • statusBar.background#007acc
  • statusBar.debuggingBackground#b052a1
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#e2eefa
  • statusBar.noFolderBackground#b052a1
  • statusBar.noFolderForeground#ffffff
  • tab.activeBackground#ffffff
  • tab.activeBorder#007acc
  • tab.activeForeground#007acc
  • tab.border#ffffff
  • tab.hoverBackground#e8e8e8
  • tab.hoverBorder#ffffff
  • tab.inactiveBackground#ffffff
  • tab.inactiveForeground#7d95a1
  • tab.unfocusedHoverBorder#007acc
  • terminal.ansiBlack#1a1a1a
  • terminal.ansiBlue#3778b7
  • terminal.ansiBrightBlack#9b9b9b
  • terminal.ansiBrightBlue#3778b7
  • terminal.ansiBrightCyan#3778b7
  • terminal.ansiBrightGreen#428226
  • terminal.ansiBrightMagenta#b052a1
  • terminal.ansiBrightRed#A56416
  • terminal.ansiBrightWhite#f7f7f7
  • terminal.ansiBrightYellow#a56416
  • terminal.ansiCyan#3778b7
  • terminal.ansiGreen#428226
  • terminal.ansiMagenta#b052a1
  • terminal.ansiRed#A56416
  • terminal.ansiWhite#f7f7f7
  • terminal.ansiYellow#a56416
  • terminal.background#ffffff
  • terminal.foreground#9b9b9b
  • terminalCursor.background#ffffff
  • terminalCursor.foreground#3cbaef
  • textLink.activeForeground#009fff
  • textLink.foreground#3778b7
  • titleBar.activeBackground#007acc
  • titleBar.activeForeground#ffffff
  • widget.shadow#eeeeee

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#C7C4C2
keyword.operator, operator.annotation.type.keyword, var.expr.primitive.annotation.type.keyword.meta#1A1A1A
logical.operator.meta#1A1A1A
string#428226
string#3778B7
begin.expression.string, end.expression.string#B052A1
expression.string#1A1A1A
constant.numeric#3778B7
constant.language#428226
constant.character, constant.other#428226
keyword#B052A1
storage#B052A1
storage.type#A56416
module.meta, function.object.block.variable.meta#A56416
entity.name.class#A56416
super.meta#B052A1
property.field.declaration.class.meta#A56416
entity.other.inherited-class#A56416
this.class.meta#428226
variable.parameter, function.parameters.entity.name.meta#3778B7
entity.name.function#A56416
variable#3778B7
var-single-variable.variable.readwrite.other.meta#3778B7
markup.heading#CB4718
regexp.operator.keyword.meta, regex.operator.keyboard.meta#3778B7
storage.modifier.named.karyscript#B052A1
meta.object-literal.key.karyscript#3778B7
constant.language.placeholder.karyscript#428226
meta.jsx.children#428226
punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end, entity.name.tag#3778B7
entity.other.attribute-name#B052A1
string.quoted.single.html, string.quoted.double.html, string.html#428226
doctype.html.tag.meta, meta.tag.sgml.doctype.html, punctuation.definition.tag.html#3778B7
character.constant.entity.html#A56416
markup.bold.markdown, markup.italic.markdown#A56416
markup.fenced_code.block.markdown#428226
meta.image.inline.markdown, string.other.link.description.markdown#B052A1
meta.link.inline.markdown, string.other.link.title.markdown#3778B7
punctuation.definition.heading.markdown, entity.name.section.markdown, markup.heading.markdown#A56416
constant.language.pageman-parts.pageman#428226
variable.other.markdown-header.pageman#A56416
storage.type.liquid-g1.pageman, storage.type.liquid-g2.pageman#B052A1
string.html-tag.pageman#3778B7
storage.type.legend.pageman#A56416
keyword.control.markdown-image-or-link.pageman#B052A1
variable.other.muliline-markdown-pre-box.pageman#A56416
variable.other.inline-code-block-markdown.pageman#A56416
storage.type.markdown-table.pageman#A56416
variable.other.html-special-chars.pageman#A56416
meta.selector.css#B052A1
id.selector.css#A56416
tag.selector.css, tag.name.entity.css#A56416
support.type.property-name.css#428226
constant.other.css, meta.property-value.css#3778B7
support.constant.property-value.css, support.constant.color.w3c-standard-color-name.css, support.type.property-name.media-feature.media.css#A56416
function.meta.css#3778B7
keyword.control.at-rule.media.css#A56416
support.type.property-name.media.css#A56416
punctuation.definition.entity.css#3778B7
variable.css, variable.argument.css#A56416
keyword.operator.logical.only.media.css, keyword.operator.logical.and.media.css#A56416
support.type.vendored.property-name.css#3778B7
keyword.operator.gradient.css#A56416
entity.other.keyframe-offset.percentage.css#A56416
variable.other.less#A56416
support.variable.object.process, support.variable.property.process, support.variable.property#A56416
support.variable.object.node#3778B7
variable.other.object, support.constant.math, support.module.node, support.variable.dom, support.class.console#A56416
support.constant.property.math#428226
variable.other.object.property#A56416
support.variable.property.dom, support.class.dom#A56416
keyword.control.export#A56416
entity.name.type.module#A56416
support.class.builtin#A56416
storage.type#B052A1
storage.type.property#A56416
keyword.operator.new, keyword.operator.expression.of, keyword.operator.expression.typeof, keyword.operator.expression.in#B052A1
support.function#A56416
support.constant#A56416
entity.name.type.class#A56416
storage.modifier#A56416
support.type.builtin#428226
meta.object-literal.key#A56416
support.type.object.module#A56416
storage.type.namespace, storage.type.function, storage.type.class, storage.type.interface, storage.type.type#A56416
meta.var.expr keyword.control.export#B052A1
support.class#428226
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#B052A1
punctuation.definition.block.tag.jsdoc, storage.type.class.jsdoc#B052A1
entity.name.type.instance.jsdoc, punctuation.definition.bracket.curly.begin.jsdoc, punctuation.definition.bracket.curly.end.jsdoc#428226
meta.namespace.declaration#A56416
meta.type.annotation, entity.name.type, meta.brace.angle.ts, meta.brace.angle.tsx#428226
support.type.primitive#428226
meta.indexer.mappedtype.declaration#B052A1
support.class.ruby#A56416
keyword.other.special-method.ruby#A56416
def.meta.ruby#A56416
separator.variable.punctuation.ruby#A56416
variable.ruby#428226
class.variable.ruby, instance.variable.ruby#3778B7
global.variable.ruby#A56416
embedded.begin.string.punctuation.ruby, embedded.end.string.punctuation.ruby#B052A1
embedded.string.punctuation.ruby#1A1A1A
meta.require.ruby#A56416
punctuation.separator.other.ruby#A56416
source.python#3778B7
function-call.python, meta.function-call.generic.python#A56416
meta.function-call.arguments.python#3778B7
keyword.operator.logical.python#B052A1
keyword.operator.arithmetic.python#A56416
keyword.operator.assignment.python#A56416
support.type.property-name.json#3778B7
constant.language.json#B052A1
source.go#3778B7
keyword.package.go#A56416
entity.name.package.go#A56416
keyword.type.go, keyword.struct.go#A56416
constant.numeric.integer.go, constant.numeric.floating-point.go#428226
keyword.operator.address.go#B052A1
keyword.function.go#A56416
source.cpp#3778B7
keyword.operator.bitwise.shift.c#1A1A1A
punctuation.separator.namespace.access.cpp#B052A1
storage.type.c#A56416
keyword.control.directive.conditional.c#A56416
keyword.operator.c#B052A1
variable.other.member.c#428226
keyword.operator.sizeof.c#B052A1
support.package.hx#3778B7
name.tag.out.plain.unquoted.string.entity.yaml#428226
source.fish#3778B7
variable.other.fixed.fish, variable.other.normal.fish#A56416
string.other.option.fish#A56416
operator.fish#A56416
variable.other.property.nearley#A56416
keyword.operator.nearley#3778B7
begin.brace.nearley, end.brace.nearley#A56416
keyword.control.nearley#A56416
entity.other.attribute-name.attribute.pegjs#3778B7
entity.name.function.pegjs#A56416
keyword.operator.pegjs#A56416
declaration.keyword.pegjs#428226
punctuation.section.embedded.begin.metatag.php, punctuation.section.embedded.end.metatag.php, punctuation.section.embedded.end.php, punctuation.section.embedded.begin.php#B052A1
meta.string-contents.quoted.single.php, meta.string-contents.quoted.double.php, constant.language.php#428226
string.unquoted.heredoc.nowdoc.php#B052A1
entity.name.type.class.php, support.class.php, meta.function-call.static.php, meta.function-call.object.php, meta.function-call.php, entity.name.type.trait.php, support.other.namespace.use.php, support.other.namespace.use-as.php, support.class.exception.php#A56416
entity.name.type.namespace.php, support.other.namespace.php#428226
source.php, punctuation.terminator.expression.php, punctuation.separator.inheritance.php#1A1A1A
punctuation.definition.variable.php, variable.other.php#3778B7
source.sql.embedded.php#A56416
keyword.operator.logical.php#B052A1
entity.name.goto-label.php#B052A1
keyword.operator.key.php#A56416
meta.function-call.php, punctuation.section.array.end.php, punctuation.section.array.begin.php, punctuation.definition.arguments.begin.bracket.round.php, punctuation.definition.arguments.end.bracket.round.php#1A1A1A
source.fsharp.fsl#3778B7
entity.name.section.fsharp#428226
variable.other.binding.fsharp#A56416
keyword.other.binding.fsharp#A56416
constant.numeric.fsharp, constant.numeric.integer.nativeint.fsharp#428226
keyword.other.fsharp, constant.language.unit.fsharp#B052A1
source.haskell#3778B7
keyword.operator.haskell#B052A1
constant.numeric.haskell#428226
punctuation.definition.entity.haskell, keyword.operator.function.infix.haskell, keyword.operator.function.infix.haskell#A56416
keyword.other.double-colon.haskell#A56416
storage.type.haskell#A56416
keyword.other.arrow.haskell#A56416
support.type.property-name.scss#A56416
meta.property-list.scss#3778B7
meta.property-list.scss#428226
support.class.applescript, support.class.itunes.applescript#A56416
string.quoted.double.application-name.applescript#A56416
keyword.operator.word.applescript#B052A1
keyword.operator.reference.applescript#A56416
meta.statement.set.applescript#3778B7
meta.block.repeat.with.applescript#3778B7
keyword.control.def.set.applescript#A56416
variable.other.readwrite.set.applescript#A56416
keyword.control.function.applescript#A56416
meta.block.tell.generic.applescript, meta.block.tell.application.generic.applescript#3778B7
meta.block.if.applescript#3778B7
meta.function.positional.applescript#3778B7
variable.language.declaration.jison#A56416
source.glsl#3778B7
source.racket#3778B7
meta.function-call.racket#A56416
bracket.php, meta.brace, punctuation.definition.binding-pattern.array.js, meta.embedded.expression.jsx, meta.embedded.expression.tsx, meta.namespace.declaration.ts, punctuation.definition.binding-pattern.array.ts, meta.property-list.scss, punctuation.definition.binding-pattern.array.tsx, punctuation.definition.typeparameters.begin.tsx, punctuation.definition.typeparameters.end.tsx, punctuation.definition.section.case-statement.tsx, punctuation.definition.binding-pattern.object.tsx, punctuation.separator.parameter.tsx, punctuation.definition.arguments.begin.python, punctuation.definition.arguments.end.python, punctuation.definition.block, punctuation.definition.dict.begin.python, punctuation.definition.dict.end.python, punctuation.definition.list.begin.python, punctuation.definition.list.end.python, punctuation.definition.parameters, punctuation.parenthesis.begin.python, punctuation.parenthesis.begin.python, punctuation.parenthesis.end.python, punctuation.section.function.begin.bracket.round.css, punctuation.section.function.begin.python, punctuation.section.function.end.bracket.round.css, punctuation.separator.arguments.python, punctuation.separator.colon.python, punctuation.separator.comma, punctuation.separator.dict.python, punctuation.separator.element.python, punctuation.separator.list.comma.css, punctuation.terminator.statement, meta.brace.angle.ts, punctuation.section.group.applescript, punctuation.definition.array.begin.applescript, punctuation.definition.array.end.applescript, punctuation.definition.begin.bracket.round.go, punctuation.definition.end.bracket.round.go, punctuation.definition.begin.bracket.curly.go, punctuation.definition.end.bracket.curly.go, punctuation.definition.bracket.square.go, punctuation.terminator.go, punctuation.other.period.go, punctuation.other.comma.go, punctuation.definition.imports.begin.bracket.round.go, punctuation.definition.imports.end.bracket.round.go, punctuation.other.colon.go, punctuation.go, punctuation.section.parameters.begin.bracket.round.c, punctuation.section.arguments.end.bracket.round.c, punctuation.section.arguments.begin.bracket.round.c, punctuation.section.parameters.end.bracket.round.c, punctuation.section.block.begin.bracket.curly.c, punctuation.section.block.end.bracket.curly.c, punctuation.section.block.begin.bracket.curly.cpp, punctuation.section.block.end.bracket.curly.cpp, punctuation.section.parens.begin.bracket.round.c, punctuation.section.parens.end.bracket.round.c, punctuation.definition.begin.bracket.square.c, punctuation.definition.end.bracket.square.c, punctuation.separator.dot-access.c, punctuation.terminator.statement.c, punctuation.separator.delimiter.c, punctuation.fish, punctuation.definition.entity.end.bracket.square.css, punctuation.definition.entity.begin.bracket.square.css#1A1A1A
punctuation.definition.tag.xml#3778B7
punctuation.definition.comment.ts#C7C4C2
punctuation.accessor#1A1A1A
string#428226
jsx.children.objectliteral.expression.embedded.tag.string.block#428226
token.info-token#316bcd
token.warn-token#cd9731
token.error-token#cd3131
token.debug-token#800080
entity.name.class, entity.name.type.class, entity.name.type.module, entity.name.function, entity.other.inherited-class, meta.namespace.declaration#b052a1
meta.object-literal.key#428226
entity.name.tag#a56416
xentity.other.attribute-name#8959A8
comment.line, comment.block#969696

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Blue Light Theme - Coding Theme