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#F9386A
  • 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#F9386A
  • symbolIcon.colorForeground#F99F1C
  • symbolIcon.constantForeground#F99F1C
  • symbolIcon.constructorForeground#F9386A
  • symbolIcon.enumeratorForeground#F99F1C
  • symbolIcon.enumeratorMemberForeground#F99F1C
  • symbolIcon.eventForeground#00B3B8
  • symbolIcon.fieldForeground#F9386A
  • symbolIcon.fileForeground#D4D4D4
  • symbolIcon.folderForeground#D4D4D4
  • symbolIcon.functionForeground#F9386A
  • symbolIcon.interfaceForeground#F9386A
  • symbolIcon.keyForeground#00B3B8
  • symbolIcon.keywordForeground#00B3B8
  • symbolIcon.methodForeground#F9386A
  • symbolIcon.moduleForeground#F9386A
  • symbolIcon.namespaceForeground#F9386A
  • symbolIcon.nullForeground#F99F1C
  • symbolIcon.numberForeground#F99F1C
  • symbolIcon.objectForeground#F9386A
  • symbolIcon.operatorForeground#A0A0A0
  • symbolIcon.packageForeground#F9386A
  • symbolIcon.propertyForeground#F9386A
  • symbolIcon.referenceForeground#F9386A
  • symbolIcon.snippetForeground#F99F1C
  • symbolIcon.stringForeground#C8E6A0
  • symbolIcon.structForeground#F9386A
  • symbolIcon.textForeground#D4D4D4
  • symbolIcon.typeParameterForeground#F9386A
  • 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#F9386A
  • terminal.ansiBrightGreen#98C379
  • terminal.ansiBrightMagenta#00B3B8
  • terminal.ansiBrightRed#E06C75
  • terminal.ansiBrightWhite#ECECEC
  • terminal.ansiBrightYellow#E5C07B
  • terminal.ansiCyan#F9386A
  • 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#F9386A
meta.function-call entity.name.function, meta.function-call.generic entity.name.function, support.function#F9386A
entity.name.function.member, meta.method-call entity.name.function, support.function.method#F9386A
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#F9386A
entity.other.inherited-class, meta.class entity.other.inherited-class#F9386A
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#FFB347italic
variable.other.property, variable.other.object.property, support.variable.property, entity.name.variable.field, meta.object-literal.key#F9386A
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#F9386A
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#F9386A
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#FFB347italic
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#F9386Aunderline
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#F9386A
string.quoted.double.json, meta.structure.dictionary.value.json string#C8E6A0
entity.name.tag.yaml, string.unquoted.plain.out.yaml, meta.mapping.key.yaml#F9386A
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#F9386A
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#F9386A
support.function.magic.python, entity.name.function.magic.python#F9386A
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#F9386A
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#F9386A
variable.other.php, variable.language.php#F99F1C
support.function.builtin.php, support.function.string.php, support.function.math.php#F9386A
keyword.other.php, storage.type.php#00B3B8
invalid, invalid.illegal, invalid.deprecated#E06C75strikethrough
Fiesta Dark by Jose Aneudy Rosario - VS Code Theme