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#b8d8f9
  • editorBracketMatch.border#b8d8f9
  • editorError.foreground#EC0303
  • 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#a09f9f99
  • scrollbarSlider.background#c7c6c699
  • scrollbarSlider.hoverBackground#a09f9f99
  • 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#012339
  • 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, meta.tag.attributes.tsx keyword.operator.assignment.tsx#012339
logical.operator.meta#012339
begin.expression.string, end.expression.string#B052A1
expression.string#012339
constant.numeric#3778B7
constant.language#428226
constant.character, constant.other#428226
storage#B052A1
storage.type#A56416
module.meta, function.object.block.variable.meta#A56416
entity.name.class#A44185
super.meta#A44185
property.field.declaration.class.meta#A56416
entity.other.inherited-class#A56416
this.class.meta#428226
entity.name.function#A44185
variable#367B42
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#012339
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.italic.markdownitalic
markup.bold.markdownbold
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
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
support.variable.property.dom, support.class.dom#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, keyword.other.unit.vmin.css#B052A1
support.function#A56416
support.constant#A56416
entity.name.type.class#A56416
variable.parameter, meta.function.tsx variable.other.object.tsx,storage.modifier, variable.other.object.ts, variable.other.readwrite.ts, entity.other.attribute-name.tsx, entity.name.tag.css, punctuation.definition.heading.markdown, entity.name.section.markdown#2770C0
punctuation.definition.annotation.java, storage.type.annotation.java, variable.graphql#1E4C84
support.type.builtin#428226
keyword, storage.modifier.java, variable.language.this.java, keyword.operator.instanceof.java, keyword.control.export, storage.type.function.ts, keyword.operator.new.ts, support.type.primitive.tsx, storage.type.tsx, constant.language.boolean.true.tsx, storage.type.type.tsx, entity.other.keyframe-offset.css, storage.type.function.tsx, storage.type.ts#2770C0italic
entity.name.function.java, entity.name.type.alias.ts, entity.name.type.interface.ts, entity.name.type.ts, entity.name.fragment.graphql, entity.name.type.alias.tsx, entity.name.type.tsx, variable.other.object.tsx, variable.other.object.property.tsx#367B42
xxxx#A56416italic
support.type.primitive.ts, storage.type.interface.ts, storage.type.type.ts, keyword.operator.expression.keyof.ts, keyword.operator.expression.in.ts, keyword.operator.expression.typeof.ts, keyword.operator.expression.infer.ts, storage.modifier.ts#2770C0italic
meta.type.parameters.ts entity.name.type.ts, meta.type.tuple.ts entity.name.type.ts, meta.type.declaration.ts entity.name.type.ts#3d9189
variable.other.readwrite.alias.ts, variable.other.readwrite.alias.tsx, support.type.graphql, entity.name.function.tsx, markup.inline.raw.string.markdown, storage.modifier.package.java, storage.modifier.import.java, meta.import.tsx string.quoted.double.tsx, meta.import.tsx string.quoted.single.tsx #A44185
keyword.other.documentation.javadoc.java#969696bold
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.class.body.java, meta.definition.variable.java, variable.other.object.property.java, variable.parameter.java, variable.other.object.java, variable.other.definition.java, punctuation.definition.block.ts, punctuation.definition.block.tsx, source.ignore, text.html.markdown#012339
string, string.quoted.double.java, string.quoted.double.json#3d9189
meta.var.expr keyword.control.export#B052A1
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#012339
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#012339
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#012339
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#012339
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#012339
punctuation.definition.tag.xml#3778B7
punctuation.definition.comment.ts#C7C4C2
punctuation.accessor#012339
jsx.children.objectliteral.expression.embedded.tag.string.block#428226
token.info-token#316bcd
token.warn-token#cd9731
token.error-token#EC0303
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, support.class.component.tsx#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