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#F9386A
  • activityBarBadge.foreground#ECECEC
  • badge.background#F9386A
  • badge.foreground#ECECEC
  • breadcrumb.activeSelectionForeground#ECECEC
  • breadcrumb.focusForeground#D4D4D4
  • breadcrumb.foreground#858585
  • breadcrumbPicker.background#1F1F1F
  • button.background#F9386A
  • button.foreground#ECECEC
  • button.hoverBackground#FF5C8A
  • 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#F9386A
  • 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#F9386A
  • extensionButton.prominentForeground#ECECEC
  • extensionButton.prominentHoverBackground#FF5C8A
  • focusBorder#F9386A
  • 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#F9386A
  • inputValidation.errorBackground#1A1A1A
  • inputValidation.errorBorder#E06C75
  • inputValidation.warningBackground#1A1A1A
  • inputValidation.warningBorder#E5C07B
  • list.activeSelectionBackground#3A3A3A
  • list.activeSelectionForeground#ECECEC
  • list.focusBackground#3A3A3A
  • list.highlightForeground#F9386A
  • 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#FF8FA8
  • notifications.background#252525
  • notifications.border#2E2E2E
  • notifications.foreground#D4D4D4
  • panel.background#1F1F1F
  • panel.border#2E2E2E
  • panelTitle.activeBorder#F9386A
  • 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#F9386A
  • 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#FF8FA8
  • symbolIcon.colorForeground#F99F1C
  • symbolIcon.constantForeground#F99F1C
  • symbolIcon.constructorForeground#FF8FA8
  • symbolIcon.enumeratorForeground#F99F1C
  • symbolIcon.enumeratorMemberForeground#F99F1C
  • symbolIcon.eventForeground#F9386A
  • symbolIcon.fieldForeground#FF8FA8
  • symbolIcon.fileForeground#D4D4D4
  • symbolIcon.folderForeground#D4D4D4
  • symbolIcon.functionForeground#FF8FA8
  • symbolIcon.interfaceForeground#FF8FA8
  • symbolIcon.keyForeground#F9386A
  • symbolIcon.keywordForeground#F9386A
  • symbolIcon.methodForeground#FF8FA8
  • symbolIcon.moduleForeground#FF8FA8
  • symbolIcon.namespaceForeground#FF8FA8
  • symbolIcon.nullForeground#F99F1C
  • symbolIcon.numberForeground#F99F1C
  • symbolIcon.objectForeground#FF8FA8
  • symbolIcon.operatorForeground#A0A0A0
  • symbolIcon.packageForeground#FF8FA8
  • symbolIcon.propertyForeground#FF8FA8
  • symbolIcon.referenceForeground#FF8FA8
  • symbolIcon.snippetForeground#F99F1C
  • symbolIcon.stringForeground#C8E6A0
  • symbolIcon.structForeground#FF8FA8
  • symbolIcon.textForeground#D4D4D4
  • symbolIcon.typeParameterForeground#FF8FA8
  • symbolIcon.unitForeground#F99F1C
  • symbolIcon.variableForeground#F99F1C
  • tab.activeBackground#1A1A1A
  • tab.activeBorder#1A1A1A
  • tab.activeBorderTop#F9386A
  • 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#FF8FA8
  • terminal.ansiBrightGreen#98C379
  • terminal.ansiBrightMagenta#F9386A
  • terminal.ansiBrightRed#E06C75
  • terminal.ansiBrightWhite#ECECEC
  • terminal.ansiBrightYellow#E5C07B
  • terminal.ansiCyan#FF8FA8
  • terminal.ansiGreen#98C379
  • terminal.ansiMagenta#F9386A
  • terminal.ansiRed#E06C75
  • terminal.ansiWhite#D4D4D4
  • terminal.ansiYellow#E5C07B
  • terminal.background#1A1A1A
  • terminal.foreground#D4D4D4
  • terminal.selectionBackground#3A3A3A
  • terminalCursor.foreground#F9386A
  • 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#F9386A
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#F9386A
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#F9386A
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#FF8FA8
meta.function-call entity.name.function, meta.function-call.generic entity.name.function, support.function#FF8FA8
entity.name.function.member, meta.method-call entity.name.function, support.function.method#FF8FA8
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#FF8FA8
entity.other.inherited-class, meta.class entity.other.inherited-class#FF8FA8
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#FFCDD2italic
variable.other.property, variable.other.object.property, support.variable.property, entity.name.variable.field, meta.object-literal.key#FF8FA8
variable.language.this, variable.language.self, variable.language.super, variable.language.special.self, variable.language.special.cls#F9386Aitalic
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#F9386A
entity.other.attribute-name, meta.tag entity.other.attribute-name#FF8FA8
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#FF8FA8
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#F9386A
variable.scss, variable.other.scss, variable.other.less#FFCDD2italic
markup.heading, entity.name.section.markdown, punctuation.definition.heading.markdown, markup.heading punctuation.definition.heading#F9386Abold
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#FF8FA8underline
markup.inline.raw, markup.fenced_code.block, punctuation.definition.raw.markdown#C8E6A0
punctuation.definition.list.begin.markdown, beginning.punctuation.definition.list.markdown#F9386A
markup.quote, punctuation.definition.blockquote.markdown#858585italic
support.type.property-name.json, meta.object-literal.key.json, string.json meta.structure.dictionary.key.json#FF8FA8
string.quoted.double.json, meta.structure.dictionary.value.json string#C8E6A0
entity.name.tag.yaml, string.unquoted.plain.out.yaml, meta.mapping.key.yaml#FF8FA8
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#F9386A
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#F9386A
support.function.aggregate.sql, entity.name.function.sql, support.function.string.sql#FF8FA8
keyword.other.special-method.dockerfile, keyword.control.dockerfile, entity.name.function.target.makefile, storage.type.instruction.dockerfile#F9386A
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#F9386A
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#F9386A
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#F9386Aitalic
support.function.builtin.python, meta.function-call.python support.function.builtin.python#FF8FA8
support.function.magic.python, entity.name.function.magic.python#FF8FA8
entity.name.import.go, keyword.import.go, keyword.package.go#F9386A
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#F9386A
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#F9386A
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#FF8FA8
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#F9386A
meta.preprocessor, keyword.control.directive, punctuation.definition.directive, keyword.control.directive.include, keyword.control.directive.define, keyword.control.directive.ifdef#F9386A
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#FF8FA8
variable.other.php, variable.language.php#F99F1C
support.function.builtin.php, support.function.string.php, support.function.math.php#FF8FA8
keyword.other.php, storage.type.php#F9386A
invalid, invalid.illegal, invalid.deprecated#E06C75strikethrough
Fiesta Dark by Jose Aneudy Rosario - VS Code Theme