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#FF6F8F
  • activityBarBadge.foreground#ECECEC
  • badge.background#FF6F8F
  • badge.foreground#ECECEC
  • breadcrumb.activeSelectionForeground#ECECEC
  • breadcrumb.focusForeground#D4D4D4
  • breadcrumb.foreground#858585
  • breadcrumbPicker.background#1F1F1F
  • button.background#FF6F8F
  • button.foreground#ECECEC
  • button.hoverBackground#FF8FA8
  • 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#FCD34D40
  • editor.findMatchHighlightBackground#FCD34D20
  • 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#FF6F8F
  • 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#FF6F8F
  • extensionButton.prominentForeground#ECECEC
  • extensionButton.prominentHoverBackground#FF8FA8
  • focusBorder#FF6F8F
  • 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#FF6F8F
  • inputValidation.errorBackground#1A1A1A
  • inputValidation.errorBorder#E06C75
  • inputValidation.warningBackground#1A1A1A
  • inputValidation.warningBorder#E5C07B
  • list.activeSelectionBackground#3A3A3A
  • list.activeSelectionForeground#ECECEC
  • list.focusBackground#3A3A3A
  • list.highlightForeground#FF6F8F
  • 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#FFB347
  • notifications.background#252525
  • notifications.border#2E2E2E
  • notifications.foreground#D4D4D4
  • panel.background#1F1F1F
  • panel.border#2E2E2E
  • panelTitle.activeBorder#FF6F8F
  • panelTitle.activeForeground#D4D4D4
  • panelTitle.inactiveForeground#858585
  • peekView.border#3A3A3A
  • peekViewEditor.background#141414
  • peekViewEditor.matchHighlightBackground#FCD34D30
  • peekViewResult.background#1F1F1F
  • peekViewResult.fileForeground#D4D4D4
  • peekViewResult.lineForeground#A0A0A0
  • peekViewResult.matchHighlightBackground#FCD34D30
  • peekViewResult.selectionBackground#3A3A3A
  • peekViewResult.selectionForeground#ECECEC
  • peekViewTitle.background#252525
  • peekViewTitleDescription.foreground#A0A0A0
  • peekViewTitleLabel.foreground#ECECEC
  • progressBar.background#FF6F8F
  • 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#FFB347
  • symbolIcon.colorForeground#FCD34D
  • symbolIcon.constantForeground#FCD34D
  • symbolIcon.constructorForeground#FFB347
  • symbolIcon.enumeratorForeground#FCD34D
  • symbolIcon.enumeratorMemberForeground#FCD34D
  • symbolIcon.eventForeground#FF6F8F
  • symbolIcon.fieldForeground#FFB347
  • symbolIcon.fileForeground#D4D4D4
  • symbolIcon.folderForeground#D4D4D4
  • symbolIcon.functionForeground#FFB347
  • symbolIcon.interfaceForeground#FFB347
  • symbolIcon.keyForeground#FF6F8F
  • symbolIcon.keywordForeground#FF6F8F
  • symbolIcon.methodForeground#FFB347
  • symbolIcon.moduleForeground#FFB347
  • symbolIcon.namespaceForeground#FFB347
  • symbolIcon.nullForeground#FCD34D
  • symbolIcon.numberForeground#FCD34D
  • symbolIcon.objectForeground#FFB347
  • symbolIcon.operatorForeground#A0A0A0
  • symbolIcon.packageForeground#FFB347
  • symbolIcon.propertyForeground#FFB347
  • symbolIcon.referenceForeground#FFB347
  • symbolIcon.snippetForeground#FCD34D
  • symbolIcon.stringForeground#FED7AA
  • symbolIcon.structForeground#FFB347
  • symbolIcon.textForeground#D4D4D4
  • symbolIcon.typeParameterForeground#FFB347
  • symbolIcon.unitForeground#FCD34D
  • symbolIcon.variableForeground#FCD34D
  • tab.activeBackground#1A1A1A
  • tab.activeBorder#1A1A1A
  • tab.activeBorderTop#FF6F8F
  • 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#FFB347
  • terminal.ansiBrightGreen#98C379
  • terminal.ansiBrightMagenta#FF6F8F
  • terminal.ansiBrightRed#E06C75
  • terminal.ansiBrightWhite#ECECEC
  • terminal.ansiBrightYellow#E5C07B
  • terminal.ansiCyan#FFB347
  • terminal.ansiGreen#98C379
  • terminal.ansiMagenta#FF6F8F
  • terminal.ansiRed#E06C75
  • terminal.ansiWhite#D4D4D4
  • terminal.ansiYellow#E5C07B
  • terminal.background#1A1A1A
  • terminal.foreground#D4D4D4
  • terminal.selectionBackground#3A3A3A
  • terminalCursor.foreground#FF6F8F
  • 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#FED7AA
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#FCD34D
punctuation.definition.template-expression, punctuation.section.embedded#FF6F8F
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.numeric.binary, constant.numeric.decimal#FCD34D
constant.language.boolean, constant.language.null, constant.language.undefined, constant.language.nil, constant.language.none, constant.language.true, constant.language.false#FCD34D
constant.language, support.constant, variable.language.null, variable.language.undefined, variable.language.nan#FCD34D
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#FF6F8F
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#FF6F8F
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#FFB347
meta.function-call entity.name.function, meta.function-call.generic entity.name.function, support.function#FFB347
entity.name.function.member, meta.method-call entity.name.function, support.function.method#FFB347
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#FFB347
entity.other.inherited-class, meta.class entity.other.inherited-class#FFB347
variable, variable.other, variable.other.readwrite, variable.other.object, variable.other.assignment#FCD34D
variable.parameter, meta.function.parameters variable.other, meta.function.parameter variable, meta.parameter variable#FCD34Ditalic
variable.other.property, variable.other.object.property, support.variable.property, entity.name.variable.field, meta.object-literal.key#FFB347
variable.language.this, variable.language.self, variable.language.super, variable.language.special.self, variable.language.special.cls#FF6F8Fitalic
variable.other.constant, entity.name.constant, variable.other.enummember, support.constant.math, support.constant.property-value#FCD34D
entity.name.function.decorator, meta.decorator, punctuation.decorator, entity.name.type.annotation, meta.annotation, storage.type.annotation#FCD34D
entity.name.tag, meta.tag entity.name.tag, support.class.component#FF6F8F
entity.other.attribute-name, meta.tag entity.other.attribute-name#FFB347
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#FFB347
support.constant.property-value.css, constant.numeric.css, keyword.other.unit.css, meta.property-value#FCD34D
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#FCD34D
keyword.control.at-rule.css, keyword.control.at-rule.scss, keyword.control.at-rule.media.css, keyword.control.at-rule.keyframes.css#FF6F8F
variable.scss, variable.other.scss, variable.other.less#FCD34Ditalic
markup.heading, entity.name.section.markdown, punctuation.definition.heading.markdown, markup.heading punctuation.definition.heading#FF6F8Fbold
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#FFB347underline
markup.inline.raw, markup.fenced_code.block, punctuation.definition.raw.markdown#FED7AA
punctuation.definition.list.begin.markdown, beginning.punctuation.definition.list.markdown#FF6F8F
markup.quote, punctuation.definition.blockquote.markdown#858585italic
support.type.property-name.json, meta.object-literal.key.json, string.json meta.structure.dictionary.key.json#FFB347
string.quoted.double.json, meta.structure.dictionary.value.json string#FED7AA
entity.name.tag.yaml, string.unquoted.plain.out.yaml, meta.mapping.key.yaml#FFB347
entity.name.type.anchor.yaml, variable.other.alias.yaml, punctuation.definition.anchor.yaml, punctuation.definition.alias.yaml#FCD34D
support.function.builtin.shell, keyword.control.shell, storage.modifier.shell#FF6F8F
variable.other.normal.shell, variable.other.bracket.shell, variable.other.special.shell#FCD34D
keyword.other.DML.sql, keyword.other.DDL.sql, keyword.other.create.sql, keyword.other.drop.sql, keyword.other.sql, storage.modifier.sql#FF6F8F
support.function.aggregate.sql, entity.name.function.sql, support.function.string.sql#FFB347
keyword.other.special-method.dockerfile, keyword.control.dockerfile, entity.name.function.target.makefile, storage.type.instruction.dockerfile#FF6F8F
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#FF6F8F
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#FF6F8F
entity.name.function.decorator.python, meta.function.decorator.python, punctuation.definition.decorator.python#FCD34D
variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python#FF6F8Fitalic
support.function.builtin.python, meta.function-call.python support.function.builtin.python#FFB347
support.function.magic.python, entity.name.function.magic.python#FFB347
entity.name.import.go, keyword.import.go, keyword.package.go#FF6F8F
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#FF6F8F
storage.modifier.lifetime.rust, entity.name.lifetime.rust, punctuation.definition.lifetime.rust#FCD34D
entity.name.function.macro.rust, support.function.std.rust, meta.macro.rust entity.name.function.rust#FF6F8F
meta.attribute.rust, entity.name.function.attribute.rust, punctuation.definition.attribute.rust#FCD34D
meta.declaration.annotation.java, punctuation.definition.annotation.java, storage.type.annotation.java#FCD34D
storage.type.primitive.java, storage.type.java, storage.type.object.array.java#FFB347
entity.name.function.attribute.cs, meta.attribute.cs, punctuation.section.attribute.begin.cs, punctuation.section.attribute.end.cs#FCD34D
keyword.other.cs, storage.type.cs, storage.modifier.cs#FF6F8F
meta.preprocessor, keyword.control.directive, punctuation.definition.directive, keyword.control.directive.include, keyword.control.directive.define, keyword.control.directive.ifdef#FF6F8F
entity.name.function.preprocessor.c, entity.name.function.preprocessor.cpp, meta.preprocessor.macro.c entity.name.function#FCD34D
constant.other.symbol.ruby, constant.other.symbol.hashkey.ruby#FCD34D
support.function.kernel.ruby, support.class.ruby, support.type.ruby#FFB347
variable.other.php, variable.language.php#FCD34D
support.function.builtin.php, support.function.string.php, support.function.math.php#FFB347
keyword.other.php, storage.type.php#FF6F8F
invalid, invalid.illegal, invalid.deprecated#E06C75strikethrough
Fiesta Dark by Jose Aneudy Rosario - VS Code Theme