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.activeBorder#007ACC
  • activityBar.activeFocusBorder#007ACC
  • activityBar.background#121315
  • activityBar.foreground#e7e7e7
  • activityBarBadge.background#007ACC
  • activityBarBadge.foreground#f0f0f0
  • breadcrumb.background#121315
  • breadcrumb.focusForeground#007ACC
  • breadcrumb.foreground#e0e0e0
  • breadcrumbPicker.background#1b1b1d
  • button.background#007ACC
  • button.foreground#f0f0f0
  • button.hoverBackground#1177BB
  • checkbox.border#007ACC
  • checkbox.foreground#007ACC
  • diffEditor.insertedTextBackground#66f0c213
  • dropdown.background#202124
  • dropdown.border#007ACC
  • dropdown.foreground#eeeeee
  • editor.background#17181a
  • editor.findMatchBorder#007ACC
  • editor.foldBackground#17181A
  • editor.foreground#e2e2e2ec
  • editor.lineHighlightBackground#2e2e2e52
  • editor.selectionBackground#a0a0a033
  • editor.selectionHighlightBackground#47474754
  • editor.wordHighlightBackground#343F56
  • editorCursor.foreground#007ACC
  • editorGroupHeader.tabsBackground#121315
  • editorGroupHeader.tabsBorder#dfdfdf44
  • editorGutter.addedBackground#007ACC
  • editorGutter.modifiedBackground#938464
  • editorHoverWidget.background#17181a
  • editorHoverWidget.foreground#cecece
  • editorIndentGuide.background1#97a7c826
  • editorLineNumber.activeForeground#fffffff8
  • editorLineNumber.foreground#94949460
  • editorSuggestWidget.background#212224
  • editorSuggestWidget.border#585858
  • editorSuggestWidget.foreground#cecece
  • editorSuggestWidget.highlightForeground#007ACC
  • editorSuggestWidget.selectedBackground#144868
  • editorWhitespace.foreground#3b3a32
  • editorWidget.background#17181a
  • focusBorder#535353
  • foreground#dadada
  • gitDecoration.ignoredResourceForeground#3D4D67
  • gitDecoration.modifiedResourceForeground#E3C18A
  • gitDecoration.untrackedResourceForeground#70CA8E
  • input.background#202124
  • input.border#dfdfdf23
  • input.foreground#f0f0f0
  • input.placeholderForeground#c0c0c06e
  • inputOption.activeBorder#007ACC
  • inputOption.activeForeground#f0f0f0
  • list.activeSelectionBackground#e6e6e609
  • list.activeSelectionForeground#ffffff
  • list.deemphasizedForeground#007ACC
  • list.focusBackground#1a1a17
  • list.focusForeground#fff
  • list.focusOutline#c0c0c06e
  • list.highlightForeground#007ACC
  • list.hoverBackground#1E1F21
  • list.inactiveSelectionBackground#e6e6e609
  • list.inactiveSelectionForeground#D5D9E2
  • menu.selectionForeground#007ACC
  • menubar.selectionForeground#007ACC
  • notificationLink.foreground#f8f8f8
  • panel.background#121315
  • panel.border#121315
  • panel.dropBorder#007ACC
  • panelInput.border#007ACC
  • panelTitle.activeBorder#007ACC
  • panelTitle.activeForeground#ffff
  • pickerGroup.foreground#007ACC
  • progressBar.background#007ACC
  • scrollbarSlider.activeBackground#ffffff50
  • scrollbarSlider.background#252526
  • scrollbarSlider.hoverBackground#2b2b2b
  • settings.dropdownBorder#007ACC
  • settings.headerForeground#007ACC
  • settings.modifiedItemIndicator#007ACC
  • sideBar.background#121315
  • sideBarSectionHeader.background#121315
  • sideBarSectionHeader.border#121315
  • sideBarSectionHeader.foreground#007ACC
  • sideBarTitle.foreground#007ACC
  • statusBar.background#121315
  • statusBar.border#121315
  • statusBar.foreground#e8e8e8
  • statusBar.noFolderBackground#121315
  • statusBar.noFolderBorder#121315
  • statusBarItem.activeBackground#007ACC
  • statusBarItem.hoverBackground#9797970a
  • tab.activeBackground#292828b4
  • tab.hoverBackground#292828b4
  • tab.inactiveBackground#17181ac9
  • tab.inactiveForeground#f0f0f0
  • tab.unfocusedInactiveForeground#007ACC
  • terminal.ansiBlack#090300
  • terminal.ansiBlue#01A0E4
  • terminal.ansiBrightBlack#f38028
  • terminal.ansiBrightBlue#01A0E4
  • terminal.ansiBrightCyan#ff0ff3
  • terminal.ansiBrightGreen#01A252
  • terminal.ansiBrightMagenta#eb64cb
  • terminal.ansiBrightRed#0a37ff
  • terminal.ansiBrightWhite#240ee2
  • terminal.ansiBrightYellow#FDED02
  • terminal.ansiCyan#0ba9dd
  • terminal.ansiGreen#01A252
  • terminal.ansiMagenta#A16A94
  • terminal.ansiRed#DB2D20
  • terminal.ansiWhite#f37676
  • terminal.ansiYellow#FDED02
  • terminal.background#17181a
  • terminal.border#474646
  • terminalCursor.background#f53131
  • textLink.foreground#007ACC
  • titleBar.activeBackground#121315

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#4D595Fbold
comment, punctuation.definition.comment#4D595Fbold
string, punctuation.definition.string#21fd6b
constant.numeric#F39C12
keyword, keyword.control, storage.type, storage.modifier#b267e6bold
entity.name.type, entity.name.class, support.type, support.class#f859b1bold
entity.name.function, support.function, meta.function-call#FED604bold
variable, meta.definition.variable#00ffd9bold
variable.parameter#00ffd9
variable.other.property, meta.object-literal.key, support.type.property-name#f15a4c
constant.language, constant.other#2493fabold
constant.language.boolean.true#46fc55
constant.language.boolean.false#ee1f18
keyword.operator#37E7AC
entity.name.tag, support.class.component#00B2FFbold
entity.other.attribute-name#fed404ea
punctuation.separator, punctuation.terminator, punctuation.accessor#aaa8a8ec
entity.name.tag#00B2FF
entity.other.attribute-name#fed404ea
entity.other.attribute-name.class.css#c34ef1c7bold
entity.other.keyframe-offset.percentage.css, entity.other.keyframe-offset.css#37E7AC
variable.parameter.keyframe-list.css#FED604
support.type.property-name.media.css#F39C12
support.function.misc.css#F39C12
support.function.calc.css#F39C12
support.function.gradient.css#F39C12
variable.css#f15a4c
variable.argument.css#f15a4c
meta.at-rule.media.header.css#f15a4c
entity.other.attribute-name.pseudo-class.css#d63384
meta.tag.other, entity.name.tag.style, entity.name.tag.script, meta.tag.block.script, source.js.embedded punctuation.definition.tag.html, source.css.embedded punctuation.definition.tag.html#1ab2f8
text.html.derivative#c5c5c5
meta.tag.metadata.meta.void.html,punctuation.separator.key-value.html#FED604
meta.attribute.border.html#FED604
entity.other.attribute-name.id.html#f64ab475
punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end#0587c4
meta.tag string -source -punctuation, text source text meta.tag string -punctuation#37E7AC
punctuation.section.embedded -(source string source punctuation.section.embedded), meta.brace.erb.html#D0B344
meta.toc-list.id#88F2AF
string.quoted.double.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html, string.quoted.double.handlebars#37E7AC
support.type.property-name.css#37E7AC
meta.property-list.css#FED604
entity.other.attribute-name.id.css#CC6699bold
punctuation.separator.list.comma.css#c5c5c5
keyword.other.unit#FED604
entity.name.tag.css, meta.selector.css#00B2FFbold
keyword.control.at-rule.media.css#ab54fd
constant.other.color.rgb-value.hex.css#FED604
meta.property-group support.constant.property-value.css, meta.property-value support.constant.property-value.css#FED604
support.constant.color.current.css#FED604
constant.numeric.css#FED604
punctuation.definition.string.begin.css,string.quoted.double.css,punctuation.definition.string.end.css,string.quoted.double.css#FED604
entity.other.attribute-name.css#37E7AC
keyword.operator.pattern.css#37E7AC
string.quoted.double.json#21fd6b
support.type.property-name.json#FED604
punctuation.definition.string.end.json,punctuation.definition.string.begin.json#21fd6b
constant.language.json#f533db
constant.numeric.json#f15a4c
source.shell#f15a4c
string.unquoted.plain.out.yaml#f15a4c
constant.language.boolean.yaml#FED604
constant.numeric.integer.yaml#F39C12
source.ignore#F39C12
string.quoted.single.js,punctuation.definition.string.end.js,punctuation.definition.string.begin.js#21fd6b
string.quoted.double.js#21fd6b
meta.object-literal.key.js#f15a4c
keyword.control.default.js#f15a4c
switch-block.expr.js#f15a4c
meta.object.member.js#E2E2E2EC
punctuation.separator.parameter.js#E2E2E2EC
punctuation.definition.section.case-statement.js#E2E2E2EC
storage.modifier.async.js,constant.language.null.js,constant.language.undefined.js#2493fabold
constant.language.boolean.true.js#46fc55
constant.language.boolean.false.js#ee1f18
support.type.object.module.js#F39C12
punctuation.terminator.statement.js,punctuation.separator.comma.js#aaa8a8ec
variable.other.readwrite.js,meta.definition.variable.js,meta.var-single-variable.expr.js#00ffd9bold
variable.language.this.js, variable.language.this.ts#f859b1bold
entity.other.inherited-class.js#f859b1underline bold
support.class.builtin.js#f859b1bold
variable.other.readwrite.alias.js,meta.var.expr.js#FED604bold
variable.parameter.js#00ffd9
string.template.js,punctuation.definition.string.template.begin.js,punctuation.definition.string.template.end.js#21fd6bbold
meta.template.expression.js,punctuation.definition.template-expression.begin.js#21fd6bbold
comment.block.js, comment.line.double-slash.jsbold
punctuation.definition.template-expression.begin.js#21fd6bbold
keyword.control.import.js,meta.import.js, keyword.control.from.jsbold
punctuation.definition.template-expression.end.js#4d595f
punctuation.definition.template-expression.begin.js#4d595f
meta.embedded.line.js#00ffd9
meta.function-call.js,variable.other.object.js#F39C12bold
entity.name.function.js,support.variable.property.js,variable.other.property.js#FED604bold
storage.type.js,storage.type.function.js,storage.type.class.js,storage.type.function.arrow.js,storage.modifier.js,meta.class.js#b267e6bold
entity.name.type.class.js#f859b1
constant.numeric.decimal.js#F39C12
punctuation.section.embedded.begin.php#aa95f7bold
punctuation.section.embedded.end.php#aa95f7bold
punctuation.definition.variable#E26674bold
variable.other.php,variable.other.global.php,variable.other.property.php#E26674bold
constant.numeric.decimal.php#F39C12
support.function.construct.output.php,meta.function-call.php,support.class.php#F39C12bold
string.quoted.single.php,string.quoted.double.php#21fd6b
support.attribute.builtin.php#00ffd9
constant.language.php#FED604bold
storage.type.function.php,storage.type.php,meta.function.parameter.typehinted.php,storage.type.class.php,storage.modifier.php,storage.modifier.extends.php,storage.type.trait.php,storage.modifier.final.php#b267e6bold
entity.name.function.php,support.function.constructor.php,support.function.magic.php,support.class.builtin.php#FED604bold
storage.modifier.implements.php#b267e6bold
entity.name.type.class.php,variable.language.this.php,entity.name.type.trait.php#f859b1bold
entity.other.inherited-class.php#f859b1bold underline
entity.other.alias.php#f859b1bold
support.class.php,meta.use.php#f859b1bold
variable.other.global.safer.php#E26674bold
variable.other.class.php#E26674bold
support.function.construct.php, meta.array.php#F39C12bold
constant.other.class.php#F39C12bold
constant.other.php#F39C12bold
support.other.namespace.php#fca420
entity.name.type.namespace.php#fca420
keyword.other.sql, keyword#b267e6
support.function.table.sql, source.sql#37E7AC
keyword.operator.comparison.sql, source.sql#0C88FF
keyword.other.DML.sql#f8ec40
source.sql#f44747
storage.modifier.sql#0C88FF
variable.scss#CC6699
meta.definition.variable.scss#E26662
source.css.scss#CC6699
punctuation.separator.key-value.scss,punctuation.terminator.rule.scss,punctuation.terminator.rule.css#c8c8c8
punctuation.definition.string.begin.scss,punctuation.definition.string.end.scss#37E7AC
keyword.control.at-rule.include.scss#B267E6
keyword.control.at-rule.mixin.scss#B267E6
keyword.control.at-rule.use.scss#B267E6
entity.name.function.scss#B267E6
punctuation.section.property-list.begin.bracket.curly.scss,punctuation.section.property-list.end.bracket.curly.scss#c8c8c8
punctuation.definition.heading.markdown, markup.heading.markdown#0C88FFbold
markup.italic.markdown#eb0cffitalic
punctuation.definition.bold.markdown,markup.bold.markdown#db1c75bold
markup.quote.markdown#41aeec
markup.underline.link.markdown,meta.link.inline.markdown#1f22fa
markup.underline.link.markdown,meta.link.inline.markdown#7538e6
markup.list.unnumbered.markdown#e6e336
markup.list.numbered.markdown#d3aa25
markup.inline.raw.string.markdown#eb6632
comment#4d595fbold
markup.fenced_code.block.markdown#b132eb
punctuation.separator.key-value.css#c2c2c2
markup.raw.block.markdown#2c7233
entity.name.function.mongodb#fca420
variable.other.object.property.mongodb#fca420
string.quoted.single.mongodb,string.quoted.double.mongodb#21fd6b
variable.other.object.mongodb,meta.function-call.mongodb,support.function.mongodb#FED604
variable.other.property.mongodb, constant.numeric.decimal.mongodb#fca420
variable.other.constant.object.property.mongodb#fca420
variable.other.readwrite.mongodb,meta.object-literal.key.mongodb#f44747
punctuation.accessor.mongodb#e6f0ee
string.quoted.single.ts,punctuation.definition.string.end.ts,punctuation.definition.string.begin.ts#21fd6b
string.quoted.double.ts#21fd6b
meta.object-literal.key.ts#f15a4c
keyword.control.default.ts#f15a4c
switch-block.expr.ts#f15a4c
meta.object.member.ts#E2E2E2EC
punctuation.separator.parameter.ts#E2E2E2EC
punctuation.definition.section.case-statement.ts#E2E2E2EC
constant.language.undefined.ts,storage.modifier.async.ts,constant.language.null.ts#2493fabold
constant.language.boolean.true.ts#46fc55
constant.language.boolean.false.ts#ee1f18
support.type.object.module.ts#F39C12
punctuation.separator.parameter.ts,punctuation.terminator.statement.ts,punctuation.separator.comma.ts#aaa8a8ec
variable.other.readwrite.ts,meta.definition.variable.ts,meta.var-single-variable.expr.ts#00ffd9bold
variable.language.this.ts, keyword.operator.new.tsx#f859b1bold
entity.other.inherited-class.ts#f859b1underline bold
support.class.builtin.ts#f859b1bold
variable.other.readwrite.alias.ts,meta.var.expr.ts#FED604bold
variable.parameter.ts#00ffd9
string.template.ts,punctuation.definition.string.template.begin.ts,punctuation.definition.string.template.end.ts#21fd6bbold
meta.template.expression.ts,punctuation.definition.template-expression.begin.ts#21fd6bbold
comment.block.ts, comment.line.double-slash.tsbold
punctuation.definition.template-expression.begin.ts#21fd6bbold
keyword.control.import.ts,meta.import.ts, keyword.control.from.tsbold
punctuation.definition.template-expression.end.ts#4d595f
punctuation.definition.template-expression.begin.ts#4d595f
meta.embedded.line.ts#00ffd9
meta.function-call.ts,variable.other.object.ts#F39C12bold
variable.other.enummember.ts,variable.object.property.ts,entity.name.function.ts,support.variable.property.ts,variable.other.property.ts#FED604bold
punctuation.definition.typeparameters.end.ts, punctuation.definition.typeparameters.begin.ts, storage.modifier.ts, storage.type.ts,storage.type.function.ts,storage.type.class.ts,storage.type.function.arrow.ts,storage.modifier.ts,meta.class.ts, storage.type.interface.ts#b267e6bold
entity.name.type.enum.ts,entity.name.type.class.ts, entity.name.type.interface.ts#f859b1
constant.numeric.decimal.ts#F39C12
storage.type.enum.ts, entity.name.type.ts,support.type.primitive.ts, support.type.builtin.ts#f15a4c
punctuation.definition.tag.directive.ts#0587c4
variable.other.env#FED604
constant.language.env,source.env#21fd6b
property.value.dotenv#FED604
keyword.operator.assignment.env#00ffd9
constant.numeric.env#F39C12
comment.line.number-sign.python#4D595F
source.python#00FFD9
constant.numeric.dec.python#F39C12
constant.numeric.float.python#e6e336
string.quoted.single.python#21FD6B
support.function.builtin.python, meta.function-call.python, entity.name.function.python, support.function.magic.python#FED604
punctuation.separator.dict.python, punctuation.separator.element.python#B267E6
keyword.control.flow.python, storage.type.function.python, storage.type.class.python#B267E6
entity.name.type.class.python#F859B1
keyword.operator.comparison.python, keyword.operator.bitwise.python#2493fa
meta.function-call.arguments.python#00FFD9
meta.attribute.python#f15a4c
constant.language.python#f15a4c
punctuation.separator.colon.python, punctuation.separator.arguments.python#B267E6
entity.name.tag.vue, support.class.component.vue, meta.tag.other.html.vue#f859b1bold
entity.other.attribute-name.directive.vue, meta.directive.vue, entity.other.attribute-name.vue#b267e6italic bold
punctuation.definition.expression.begin.vue, punctuation.definition.expression.end.vue#D0B344bold
entity.name.tag.script.vue, entity.name.tag.style.vue#00B2FFbold
support.class.component.tsx, entity.name.tag.tsx, meta.tag.tsx#00B2FFbold
support.class.component.tsx#00B2FFbold
entity.other.attribute-name.tsx#fed404ea
support.function.react.tsx, meta.function-call.tsx#FED604bold
punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, meta.jsx.children.tsx#D0B344bold
entity.name.type.interface.tsx, entity.name.type.alias.tsx, entity.name.type.tsx#f859b1bold
variable.other.readwrite.tsx, keyword.control.tsx, storage.type.tsx#B267E6bold
keyword.control.cs, storage.modifier.cs, storage.type.cs, keyword.other.cs#b267e6bold
variable.other.object.property.cs, variable.other.object.cs, keyword.operator.expression.query.where.cs, keyword.operator.expression.query.orderby.cs, keyword.operator.expression.query.select.cs#f15a4cbold
entity.name.type.class.cs, entity.name.type.interface.cs, entity.name.type.struct.cs, entity.name.type.delegate.cs, entity.name.type.enum.cs#f859b1bold
entity.name.function.cs, meta.method.cs, meta.method-call.cs#FED604bold
variable.other.readwrite.cs, variable.other.object.property.cs, variable.other.object.cs, entity.name.variable.property.cs#00ffd9bold
constant.language.null.cs, constant.language.boolean.true.cs, constant.language.boolean.false.cs#2493fabold
meta.attribute.cs, entity.name.type.attribute.cs#37E7AC
entity.name.type.namespace.cs, keyword.other.using.cs#fca420bold
punctuation.attribute-shorthand.event.html.vue, punctuation.decorator.ts#FED404EAbold
punctuation.section.block, punctuation.definition.block, punctuation.section.parameters, punctuation.definition.parameters, punctuation.section.arguments, punctuation.definition.arguments, punctuation.definition.list, punctuation.definition.array, meta.brace, punctuation.section.bracket#aaa8a8ecbold
storage.type.primitive.cpp, storage.type.primitive.cs, storage.type.built-in.cpp, storage.type.built-in.cs, entity.name.type.cpp, entity.name.type.cs#b267e6bold
storage.modifier.cpp, storage.modifier.cs, keyword.control.cpp, keyword.control.cs, keyword.other.directive.cpp, entity.name.scope-resolution.parameter.cpp#b267e6bold
entity.name.function.cpp, entity.name.function.cs, meta.function.cpp#FED604bold
variable.other.cpp, variable.other.cs, variable.parameter.cpp, variable.parameter.cs, meta.body.struct.cpp#00ffd9
meta.preprocessor.cpp, keyword.control.directive.cpp, entity.name.namespace.cpp, storage.modifier.virtual.cs#fca420bold
meta.body.class.cpp, meta.parens.cpp, meta.body.function.definition.cpp#00ffd9bold
entity.name.scope-resolution.cpp, source.cs, punctuation.separator.hash.cs#b267e6bold
entity.name.variable.field.cs, entity.name.variable.parameter.cs#00ffd9bold
constant.language.boolean.false.cs#ee1f18bold
constant.language.boolean.true.cs#46fc55bold
keyword.type.int.cs#fca420bold
keyword.type.string.cs#46fc55bold
keyword.type.bool.cs, entity.name.variable.preprocessor.symbol.cs#FED604bold
entity.name.namespace.rust#fca420bold
source.rust#b267e6bold
entity.name.type.rust#2493fabold
source.ruby#f859b1bold
source.dart#2493fabold
source.kotlin#f15a4cbold
meta.block.kotlin#2493fabold
source.java#00ffd9bold
variable.other.object.property.java, variable.other.object.java#2493fabold
meta.method.body.java#fca420bold
variable.language.this.java#f859b1bold
entity.other.inherited-class.java#f859b1bold
emeta.class.body.java#2493fabold
meta.paragraph.markdown#c5c5c5bold