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#1F1F1F
  • activityBar.border#2E2E2E
  • activityBar.foreground#D4D4D4
  • activityBar.inactiveForeground#858585
  • activityBarBadge.background#00B3B8
  • activityBarBadge.foreground#ECECEC
  • badge.background#00B3B8
  • badge.foreground#ECECEC
  • breadcrumb.activeSelectionForeground#ECECEC
  • breadcrumb.focusForeground#D4D4D4
  • breadcrumb.foreground#858585
  • breadcrumbPicker.background#1F1F1F
  • button.background#00B3B8
  • button.foreground#ECECEC
  • button.hoverBackground#00E5EA
  • button.secondaryBackground#3A3A3A
  • button.secondaryForeground#D4D4D4
  • diffEditor.insertedLineBackground#98C37910
  • diffEditor.insertedTextBackground#98C37920
  • diffEditor.removedLineBackground#E06C7510
  • diffEditor.removedTextBackground#E06C7520
  • dropdown.background#1F1F1F
  • dropdown.border#3A3A3A
  • dropdown.foreground#D4D4D4
  • editor.background#1A1A1A
  • editor.findMatchBackground#F99F1C40
  • editor.findMatchHighlightBackground#F99F1C20
  • editor.foreground#D4D4D4
  • editor.inactiveSelectionBackground#2A2A2A
  • editor.lineHighlightBackground#2A2A2A
  • editor.lineHighlightBorder#2A2A2A
  • editor.selectionBackground#3A3A3A
  • editor.selectionHighlightBackground#2E2E2E
  • editor.wordHighlightBackground#2E2E2E
  • editor.wordHighlightStrongBackground#3A3A3A
  • editorBracketMatch.background#2E2E2E
  • editorBracketMatch.border#3A3A3A
  • editorCursor.background#1A1A1A
  • editorCursor.foreground#00B3B8
  • editorError.foreground#E06C75
  • editorGroupHeader.noTabsBackground#1F1F1F
  • editorGroupHeader.tabsBackground#1F1F1F
  • editorGroupHeader.tabsBorder#2E2E2E
  • editorGutter.addedBackground#98C379
  • editorGutter.background#141414
  • editorGutter.deletedBackground#E06C75
  • editorGutter.modifiedBackground#E5C07B
  • editorHint.foreground#98C379
  • editorIndentGuide.activeBackground1#3A3A3A
  • editorIndentGuide.background1#2E2E2E
  • editorInfo.foreground#61AFEF
  • editorLineNumber.activeForeground#A0A0A0
  • editorLineNumber.foreground#858585
  • editorOverviewRuler.border#2E2E2E
  • editorOverviewRuler.errorForeground#E06C75
  • editorOverviewRuler.infoForeground#61AFEF
  • editorOverviewRuler.warningForeground#E5C07B
  • editorRuler.foreground#2E2E2E
  • editorWarning.foreground#E5C07B
  • editorWhitespace.foreground#3A3A3A
  • extensionButton.prominentBackground#00B3B8
  • extensionButton.prominentForeground#ECECEC
  • extensionButton.prominentHoverBackground#00E5EA
  • focusBorder#00B3B8
  • gitDecoration.addedResourceForeground#98C379
  • gitDecoration.conflictingResourceForeground#E5C07B
  • gitDecoration.deletedResourceForeground#E06C75
  • gitDecoration.ignoredResourceForeground#858585
  • gitDecoration.modifiedResourceForeground#E5C07B
  • gitDecoration.untrackedResourceForeground#98C379
  • input.background#1F1F1F
  • input.border#3A3A3A
  • input.foreground#D4D4D4
  • input.placeholderForeground#858585
  • inputOption.activeBackground#3A3A3A
  • inputOption.activeBorder#00B3B8
  • inputValidation.errorBackground#1A1A1A
  • inputValidation.errorBorder#E06C75
  • inputValidation.warningBackground#1A1A1A
  • inputValidation.warningBorder#E5C07B
  • list.activeSelectionBackground#3A3A3A
  • list.activeSelectionForeground#ECECEC
  • list.focusBackground#3A3A3A
  • list.highlightForeground#00B3B8
  • list.hoverBackground#2A2A2A
  • list.hoverForeground#D4D4D4
  • list.inactiveSelectionBackground#2A2A2A
  • list.inactiveSelectionForeground#D4D4D4
  • merge.border#3A3A3A
  • merge.currentContentBackground#98C37910
  • merge.currentHeaderBackground#98C37930
  • merge.incomingContentBackground#61AFEF10
  • merge.incomingHeaderBackground#61AFEF30
  • notificationLink.foreground#5EEAD4
  • notifications.background#252525
  • notifications.border#2E2E2E
  • notifications.foreground#D4D4D4
  • panel.background#1F1F1F
  • panel.border#2E2E2E
  • panelTitle.activeBorder#00B3B8
  • panelTitle.activeForeground#D4D4D4
  • panelTitle.inactiveForeground#858585
  • peekView.border#3A3A3A
  • peekViewEditor.background#141414
  • peekViewEditor.matchHighlightBackground#F99F1C30
  • peekViewResult.background#1F1F1F
  • peekViewResult.fileForeground#D4D4D4
  • peekViewResult.lineForeground#A0A0A0
  • peekViewResult.matchHighlightBackground#F99F1C30
  • peekViewResult.selectionBackground#3A3A3A
  • peekViewResult.selectionForeground#ECECEC
  • peekViewTitle.background#252525
  • peekViewTitleDescription.foreground#A0A0A0
  • peekViewTitleLabel.foreground#ECECEC
  • progressBar.background#00B3B8
  • scrollbar.shadow#00000040
  • scrollbarSlider.activeBackground#A0A0A080
  • scrollbarSlider.background#3A3A3A80
  • scrollbarSlider.hoverBackground#3A3A3A
  • selection.background#3A3A3A
  • sideBar.background#1F1F1F
  • sideBar.border#2E2E2E
  • sideBar.foreground#D4D4D4
  • sideBarSectionHeader.background#1F1F1F
  • sideBarSectionHeader.border#2E2E2E
  • sideBarSectionHeader.foreground#A0A0A0
  • sideBarTitle.foreground#A0A0A0
  • statusBar.background#252525
  • statusBar.border#2E2E2E
  • statusBar.debuggingBackground#252525
  • statusBar.foreground#A0A0A0
  • statusBar.noFolderBackground#252525
  • statusBarItem.hoverBackground#3A3A3A
  • symbolIcon.classForeground#5EEAD4
  • symbolIcon.colorForeground#F99F1C
  • symbolIcon.constantForeground#F99F1C
  • symbolIcon.constructorForeground#5EEAD4
  • symbolIcon.enumeratorForeground#F99F1C
  • symbolIcon.enumeratorMemberForeground#F99F1C
  • symbolIcon.eventForeground#00B3B8
  • symbolIcon.fieldForeground#5EEAD4
  • symbolIcon.fileForeground#D4D4D4
  • symbolIcon.folderForeground#D4D4D4
  • symbolIcon.functionForeground#5EEAD4
  • symbolIcon.interfaceForeground#5EEAD4
  • symbolIcon.keyForeground#00B3B8
  • symbolIcon.keywordForeground#00B3B8
  • symbolIcon.methodForeground#5EEAD4
  • symbolIcon.moduleForeground#5EEAD4
  • symbolIcon.namespaceForeground#5EEAD4
  • symbolIcon.nullForeground#F99F1C
  • symbolIcon.numberForeground#F99F1C
  • symbolIcon.objectForeground#5EEAD4
  • symbolIcon.operatorForeground#A0A0A0
  • symbolIcon.packageForeground#5EEAD4
  • symbolIcon.propertyForeground#5EEAD4
  • symbolIcon.referenceForeground#5EEAD4
  • symbolIcon.snippetForeground#F99F1C
  • symbolIcon.stringForeground#C8E6A0
  • symbolIcon.structForeground#5EEAD4
  • symbolIcon.textForeground#D4D4D4
  • symbolIcon.typeParameterForeground#5EEAD4
  • symbolIcon.unitForeground#F99F1C
  • symbolIcon.variableForeground#F99F1C
  • tab.activeBackground#1A1A1A
  • tab.activeBorder#1A1A1A
  • tab.activeBorderTop#00B3B8
  • tab.activeForeground#ECECEC
  • tab.border#2E2E2E
  • tab.hoverBackground#2A2A2A
  • tab.inactiveBackground#252525
  • tab.inactiveForeground#858585
  • tab.unfocusedActiveBackground#1A1A1A
  • tab.unfocusedActiveBorderTop#2E2E2E
  • terminal.ansiBlack#1A1A1A
  • terminal.ansiBlue#61AFEF
  • terminal.ansiBrightBlack#858585
  • terminal.ansiBrightBlue#61AFEF
  • terminal.ansiBrightCyan#5EEAD4
  • terminal.ansiBrightGreen#98C379
  • terminal.ansiBrightMagenta#00B3B8
  • terminal.ansiBrightRed#E06C75
  • terminal.ansiBrightWhite#ECECEC
  • terminal.ansiBrightYellow#E5C07B
  • terminal.ansiCyan#5EEAD4
  • terminal.ansiGreen#98C379
  • terminal.ansiMagenta#00B3B8
  • terminal.ansiRed#E06C75
  • terminal.ansiWhite#D4D4D4
  • terminal.ansiYellow#E5C07B
  • terminal.background#1A1A1A
  • terminal.foreground#D4D4D4
  • terminal.selectionBackground#3A3A3A
  • terminalCursor.foreground#00B3B8
  • titleBar.activeBackground#252525
  • titleBar.activeForeground#D4D4D4
  • titleBar.border#2E2E2E
  • titleBar.inactiveBackground#1F1F1F
  • titleBar.inactiveForeground#858585
  • widget.shadow#00000060

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, punctuation.definition.comment#858585italic
comment.block.documentation, comment.line.double-slash.documentation, source.go comment.block.documentation, source.rust comment.block.documentation, string.quoted.docstring#9AA88Aitalic
storage.type.class.jsdoc, punctuation.definition.block.tag.jsdoc, entity.name.type.instance.jsdoc#9AA88Aitalic
string, string.quoted.single, string.quoted.double, string.quoted.triple, string.quoted.backtick, string.template, string.unquoted#C8E6A0
constant.character.escape, constant.character.entity, string.regexp, constant.other.character-class.regexp, punctuation.definition.string.regexp, keyword.operator.quantifier.regexp, meta.assertion.regexp, keyword.other.back-reference.regexp#F99F1C
punctuation.definition.template-expression, punctuation.section.embedded#00B3B8
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.numeric.binary, constant.numeric.decimal#F99F1C
constant.language.boolean, constant.language.null, constant.language.undefined, constant.language.nil, constant.language.none, constant.language.true, constant.language.false#F99F1C
constant.language, support.constant, variable.language.null, variable.language.undefined, variable.language.nan#F99F1C
keyword, keyword.control, keyword.control.flow, keyword.control.import, keyword.control.from, keyword.control.as, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.break, keyword.control.continue, keyword.control.exception, keyword.control.try, keyword.control.catch, keyword.control.finally, keyword.control.throw, keyword.control.raise, keyword.control.yield, keyword.control.async, keyword.control.await, keyword.control.match, keyword.control.case, keyword.control.switch, keyword.control.new, keyword.control.delete, keyword.control.typeof, keyword.control.instanceof, keyword.control.in, keyword.control.of, keyword.other, keyword.other.unit, keyword.other.important#00B3B8
storage.type, storage.modifier, keyword.declaration, keyword.declaration.function, keyword.declaration.class, keyword.declaration.interface, keyword.declaration.enum, keyword.declaration.struct, keyword.declaration.var, keyword.declaration.let, keyword.declaration.const, keyword.declaration.type, keyword.declaration.import, keyword.declaration.export, keyword.declaration.default, keyword.declaration.extends, keyword.declaration.implements#00B3B8
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical, keyword.operator.bitwise, keyword.operator.ternary, keyword.operator.spread, keyword.operator.rest, keyword.operator.optional, keyword.operator.type, punctuation.separator.key-value#A0A0A0
punctuation, punctuation.terminator, punctuation.separator, punctuation.accessor, meta.brace.round, meta.brace.square, meta.brace.curly, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.definition.binding-pattern#A0A0A0
entity.name.function, meta.function entity.name.function, meta.definition.method entity.name.function#5EEAD4
meta.function-call entity.name.function, meta.function-call.generic entity.name.function, support.function#5EEAD4
entity.name.function.member, meta.method-call entity.name.function, support.function.method#5EEAD4
entity.name.class, entity.name.type, entity.name.type.class, entity.name.type.interface, entity.name.type.struct, entity.name.type.enum, entity.name.type.alias, entity.name.type.primitive, entity.name.type.namespace, support.class, support.type#5EEAD4
entity.other.inherited-class, meta.class entity.other.inherited-class#5EEAD4
variable, variable.other, variable.other.readwrite, variable.other.object, variable.other.assignment#F99F1C
variable.parameter, meta.function.parameters variable.other, meta.function.parameter variable, meta.parameter variable#5EEAD4italic
variable.other.property, variable.other.object.property, support.variable.property, entity.name.variable.field, meta.object-literal.key#5EEAD4
variable.language.this, variable.language.self, variable.language.super, variable.language.special.self, variable.language.special.cls#00B3B8italic
variable.other.constant, entity.name.constant, variable.other.enummember, support.constant.math, support.constant.property-value#F99F1C
entity.name.function.decorator, meta.decorator, punctuation.decorator, entity.name.type.annotation, meta.annotation, storage.type.annotation#F99F1C
entity.name.tag, meta.tag entity.name.tag, support.class.component#00B3B8
entity.other.attribute-name, meta.tag entity.other.attribute-name#5EEAD4
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end, meta.tag punctuation#A0A0A0
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, entity.name.tag.css, meta.property-name#5EEAD4
support.constant.property-value.css, constant.numeric.css, keyword.other.unit.css, meta.property-value#F99F1C
entity.other.attribute-name.css, entity.other.attribute-name.id.css, entity.other.attribute-name.class.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#F99F1C
keyword.control.at-rule.css, keyword.control.at-rule.scss, keyword.control.at-rule.media.css, keyword.control.at-rule.keyframes.css#00B3B8
variable.scss, variable.other.scss, variable.other.less#5EEAD4italic
markup.heading, entity.name.section.markdown, punctuation.definition.heading.markdown, markup.heading punctuation.definition.heading#00B3B8bold
markup.bold, punctuation.definition.bold#ECECECbold
markup.italic, punctuation.definition.italic#D4D4D4italic
markup.underline.link, string.other.link.title.markdown, meta.link.inline.markdown, punctuation.definition.link.markdown, constant.other.reference.link.markdown#5EEAD4underline
markup.inline.raw, markup.fenced_code.block, punctuation.definition.raw.markdown#C8E6A0
punctuation.definition.list.begin.markdown, beginning.punctuation.definition.list.markdown#00B3B8
markup.quote, punctuation.definition.blockquote.markdown#858585italic
support.type.property-name.json, meta.object-literal.key.json, string.json meta.structure.dictionary.key.json#5EEAD4
string.quoted.double.json, meta.structure.dictionary.value.json string#C8E6A0
entity.name.tag.yaml, string.unquoted.plain.out.yaml, meta.mapping.key.yaml#5EEAD4
entity.name.type.anchor.yaml, variable.other.alias.yaml, punctuation.definition.anchor.yaml, punctuation.definition.alias.yaml#F99F1C
support.function.builtin.shell, keyword.control.shell, storage.modifier.shell#00B3B8
variable.other.normal.shell, variable.other.bracket.shell, variable.other.special.shell#F99F1C
keyword.other.DML.sql, keyword.other.DDL.sql, keyword.other.create.sql, keyword.other.drop.sql, keyword.other.sql, storage.modifier.sql#00B3B8
support.function.aggregate.sql, entity.name.function.sql, support.function.string.sql#5EEAD4
keyword.other.special-method.dockerfile, keyword.control.dockerfile, entity.name.function.target.makefile, storage.type.instruction.dockerfile#00B3B8
keyword.control.import.ts, keyword.control.from.ts, keyword.control.as.ts, keyword.control.export.ts, keyword.control.import.js, keyword.control.from.js, keyword.control.export.js#00B3B8
keyword.operator.type.annotation.ts, punctuation.separator.key-value.ts#A0A0A0
punctuation.definition.typeparameters.begin.ts, punctuation.definition.typeparameters.end.ts, punctuation.definition.typeparameters.begin.tsx, punctuation.definition.typeparameters.end.tsx#A0A0A0
storage.modifier.ts, storage.modifier.js, storage.modifier.tsx#00B3B8
entity.name.function.decorator.python, meta.function.decorator.python, punctuation.definition.decorator.python#F99F1C
variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python#00B3B8italic
support.function.builtin.python, meta.function-call.python support.function.builtin.python#5EEAD4
support.function.magic.python, entity.name.function.magic.python#5EEAD4
entity.name.import.go, keyword.import.go, keyword.package.go#00B3B8
keyword.channel.go, keyword.const.go, keyword.function.go, keyword.go, keyword.interface.go, keyword.map.go, keyword.struct.go, keyword.type.go, keyword.var.go#00B3B8
storage.modifier.lifetime.rust, entity.name.lifetime.rust, punctuation.definition.lifetime.rust#F99F1C
entity.name.function.macro.rust, support.function.std.rust, meta.macro.rust entity.name.function.rust#00B3B8
meta.attribute.rust, entity.name.function.attribute.rust, punctuation.definition.attribute.rust#F99F1C
meta.declaration.annotation.java, punctuation.definition.annotation.java, storage.type.annotation.java#F99F1C
storage.type.primitive.java, storage.type.java, storage.type.object.array.java#5EEAD4
entity.name.function.attribute.cs, meta.attribute.cs, punctuation.section.attribute.begin.cs, punctuation.section.attribute.end.cs#F99F1C
keyword.other.cs, storage.type.cs, storage.modifier.cs#00B3B8
meta.preprocessor, keyword.control.directive, punctuation.definition.directive, keyword.control.directive.include, keyword.control.directive.define, keyword.control.directive.ifdef#00B3B8
entity.name.function.preprocessor.c, entity.name.function.preprocessor.cpp, meta.preprocessor.macro.c entity.name.function#F99F1C
constant.other.symbol.ruby, constant.other.symbol.hashkey.ruby#F99F1C
support.function.kernel.ruby, support.class.ruby, support.type.ruby#5EEAD4
variable.other.php, variable.language.php#F99F1C
support.function.builtin.php, support.function.string.php, support.function.math.php#5EEAD4
keyword.other.php, storage.type.php#00B3B8
invalid, invalid.illegal, invalid.deprecated#E06C75strikethrough
Fiesta Dark by Jose Aneudy Rosario - VS Code Theme