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#E26A3B
  • activityBar.background#181714
  • activityBar.border#3F4346
  • activityBar.foreground#E6DED3
  • activityBar.inactiveForeground#9BABB9
  • activityBarBadge.background#E26A3B
  • activityBarBadge.foreground#25231F
  • badge.background#E26A3B
  • badge.foreground#25231F
  • breadcrumb.activeSelectionForeground#E6DED3
  • breadcrumb.background#25231F
  • breadcrumb.focusForeground#E6DED3
  • breadcrumb.foreground#9BABB9
  • breadcrumbPicker.background#181714
  • button.background#E26A3B
  • button.foreground#25231F
  • button.hoverBackground#E4C397
  • button.secondaryBackground#3F4346
  • button.secondaryForeground#E6DED3
  • button.secondaryHoverBackground#9BABB9
  • charts.blue#7A8FA2
  • charts.foreground#E6DED3
  • charts.green#7FAF6A
  • charts.lines#3F4346
  • charts.orange#E26A3B
  • charts.purple#8E7BA0
  • charts.red#D25046
  • charts.yellow#D4A05A
  • debugIcon.breakpointDisabledForeground#9BABB9
  • debugIcon.breakpointForeground#D25046
  • debugIcon.pauseForeground#E26A3B
  • debugIcon.restartForeground#7FAF6A
  • debugIcon.startForeground#7FAF6A
  • debugIcon.stepIntoForeground#7A8FA2
  • debugIcon.stepOutForeground#7A8FA2
  • debugIcon.stepOverForeground#7A8FA2
  • debugIcon.stopForeground#D25046
  • debugToolBar.background#181714
  • descriptionForeground#9BABB9
  • diffEditor.diagonalFill#3F4346
  • diffEditor.insertedLineBackground#7FAF6A15
  • diffEditor.insertedTextBackground#7FAF6A20
  • diffEditor.removedLineBackground#D2504615
  • diffEditor.removedTextBackground#D2504620
  • diffEditor.unchangedCodeBackground#32333366
  • diffEditorGutter.insertedLineBackground#7FAF6A25
  • diffEditorGutter.removedLineBackground#D2504625
  • diffEditorOverview.insertedForeground#7FAF6A40
  • diffEditorOverview.removedForeground#D2504640
  • disabledForeground#9BABB9
  • dropdown.background#181714
  • dropdown.border#3F4346
  • dropdown.foreground#E6DED3
  • dropdown.listBackground#181714
  • editor.background#25231F
  • editor.findMatchBackground#E26A3B40
  • editor.findMatchHighlightBackground#E26A3B20
  • editor.foreground#E6DED3
  • editor.inactiveSelectionBackground#3F434680
  • editor.lineHighlightBackground#412E23
  • editor.lineHighlightBorder#412E2300
  • editor.selectionBackground#51422E
  • editor.selectionForeground#E6DED3
  • editor.selectionHighlightBackground#3F434680
  • editor.wordHighlightBackground#3F434680
  • editor.wordHighlightStrongBackground#3F434680
  • editorBracketHighlight.foreground1#E26A3B
  • editorBracketHighlight.foreground2#7A8FA2
  • editorBracketHighlight.foreground3#8E7BA0
  • editorBracketHighlight.foreground4#8CA6A1
  • editorBracketHighlight.foreground5#7FAF6A
  • editorBracketHighlight.foreground6#D4A05A
  • editorBracketHighlight.unexpectedBracket.foreground#D25046
  • editorBracketMatch.background#3F4346
  • editorBracketMatch.border#E26A3B
  • editorBracketPairGuide.activeBackground1#E26A3B
  • editorBracketPairGuide.activeBackground2#7A8FA2
  • editorBracketPairGuide.activeBackground3#8E7BA0
  • editorBracketPairGuide.activeBackground4#8CA6A1
  • editorBracketPairGuide.activeBackground5#7FAF6A
  • editorBracketPairGuide.activeBackground6#D4A05A
  • editorCursor.foreground#E26A3B
  • editorError.foreground#D25046
  • editorGroupHeader.tabsBackground#181714
  • editorGroupHeader.tabsBorder#3F4346
  • editorGutter.addedBackground#7FAF6A
  • editorGutter.background#25231F
  • editorGutter.deletedBackground#D25046
  • editorGutter.modifiedBackground#E26A3B
  • editorHint.foreground#9BABB9
  • editorHoverWidget.background#181714
  • editorHoverWidget.border#3F4346
  • editorHoverWidget.foreground#E6DED3
  • editorIndentGuide.activeBackground1#9BABB9
  • editorIndentGuide.background1#3F4346
  • editorInfo.foreground#7A8FA2
  • editorLineNumber.activeForeground#E26A3B
  • editorLineNumber.foreground#3F4346
  • editorLink.activeForeground#A7B5C1
  • editorOverviewRuler.border#3F4346
  • editorOverviewRuler.errorForeground#D25046
  • editorOverviewRuler.infoForeground#7A8FA2
  • editorOverviewRuler.warningForeground#E26A3B
  • editorRuler.foreground#3F4346
  • editorSemanticHighlighting.enabled
  • editorSuggestWidget.background#181714
  • editorSuggestWidget.border#3F4346
  • editorSuggestWidget.foreground#E6DED3
  • editorSuggestWidget.highlightForeground#E26A3B
  • editorSuggestWidget.selectedBackground#3F4346
  • editorWarning.foreground#E26A3B
  • editorWhitespace.foreground#3F4346
  • editorWidget.background#181714
  • editorWidget.border#3F4346
  • editorWidget.foreground#E6DED3
  • errorForeground#D25046
  • extensionButton.prominentBackground#E26A3B
  • extensionButton.prominentForeground#25231F
  • extensionButton.prominentHoverBackground#E4C397
  • focusBorder#E26A3B
  • foreground#E6DED3
  • gitDecoration.addedResourceForeground#7FAF6A
  • gitDecoration.conflictingResourceForeground#D25046
  • gitDecoration.deletedResourceForeground#D25046
  • gitDecoration.ignoredResourceForeground#9BABB9
  • gitDecoration.modifiedResourceForeground#E26A3B
  • gitDecoration.renamedResourceForeground#9AB1AD
  • gitDecoration.stageDeletedResourceForeground#D25046
  • gitDecoration.stageModifiedResourceForeground#E26A3B
  • gitDecoration.untrackedResourceForeground#A1C492
  • icon.foreground#E6DED3
  • inlineChat.foreground#E6DED3
  • inlineChatDiff.inserted#7FAF6A40
  • inlineChatDiff.removed#D2504640
  • inlineChatInput.background#181714
  • input.background#181714
  • input.border#3F4346
  • input.foreground#E6DED3
  • input.placeholderForeground#9BABB9
  • inputOption.activeBackground#3F4346
  • inputOption.activeBorder#E26A3B
  • inputOption.activeForeground#E6DED3
  • inputValidation.errorBackground#D2504680
  • inputValidation.errorBorder#D25046
  • inputValidation.errorForeground#E6DED3
  • inputValidation.infoBackground#7A8FA240
  • inputValidation.infoBorder#7A8FA2
  • inputValidation.infoForeground#E6DED3
  • inputValidation.warningBackground#D4A05A
  • inputValidation.warningBorder#D4A05A
  • inputValidation.warningForeground#25231F
  • list.activeSelectionBackground#3F4346
  • list.activeSelectionForeground#E6DED3
  • list.errorForeground#D25046
  • list.focusBackground#3F4346
  • list.focusForeground#E6DED3
  • list.highlightForeground#E26A3B
  • list.hoverBackground#3F434650
  • list.hoverForeground#E6DED3
  • list.inactiveSelectionBackground#3F434680
  • list.inactiveSelectionForeground#E6DED3
  • list.warningForeground#E26A3B
  • merge.currentHeaderBackground#7FAF6A40
  • merge.incomingHeaderBackground#7A8FA240
  • minimap.background#25231F
  • minimap.errorHighlight#D25046
  • minimap.findMatchHighlight#E26A3B
  • minimap.selectionHighlight#3F4346
  • minimap.warningHighlight#E26A3B
  • minimapGutter.addedBackground#7FAF6A
  • minimapGutter.deletedBackground#D25046
  • minimapGutter.modifiedBackground#E26A3B
  • notebook.cellBorderColor#3F4346
  • notebook.cellEditorBackground#181714
  • notebook.cellStatusBarItemHoverBackground#3F4346
  • notebook.editorBackground#25231F
  • notebook.focusedCellBorder#E26A3B
  • notificationCenterHeader.background#181714
  • notificationCenterHeader.foreground#E6DED3
  • notifications.background#181714
  • notifications.border#3F4346
  • notifications.foreground#E6DED3
  • panel.background#25231F
  • panel.border#3F4346
  • panelTitle.activeBorder#E26A3B
  • panelTitle.activeForeground#E6DED3
  • panelTitle.inactiveForeground#9BABB9
  • peekView.border#E26A3B
  • peekViewEditor.background#181714
  • peekViewEditor.matchHighlightBackground#E26A3B40
  • peekViewResult.background#181714
  • peekViewResult.fileForeground#E6DED3
  • peekViewResult.lineForeground#9BABB9
  • peekViewResult.matchHighlightBackground#E26A3B40
  • peekViewResult.selectionBackground#3F4346
  • peekViewTitle.background#181714
  • peekViewTitleDescription.foreground#9BABB9
  • peekViewTitleLabel.foreground#E6DED3
  • progressBar.background#E26A3B
  • quickInput.background#181714
  • quickInput.foreground#E6DED3
  • quickInputList.focusBackground#3F4346
  • quickInputTitle.background#181714
  • scrollbar.shadow#00000050
  • scrollbarSlider.activeBackground#9BABB9
  • scrollbarSlider.background#3F434680
  • scrollbarSlider.hoverBackground#3F4346
  • settings.checkboxBackground#181714
  • settings.checkboxBorder#3F4346
  • settings.checkboxForeground#E6DED3
  • settings.dropdownBackground#181714
  • settings.dropdownBorder#3F4346
  • settings.dropdownForeground#E6DED3
  • settings.headerForeground#E6DED3
  • settings.modifiedItemIndicator#E26A3B
  • settings.numberInputBackground#181714
  • settings.numberInputBorder#3F4346
  • settings.numberInputForeground#E6DED3
  • settings.textInputBackground#181714
  • settings.textInputBorder#3F4346
  • settings.textInputForeground#E6DED3
  • sideBar.background#181714
  • sideBar.border#3F4346
  • sideBar.foreground#E6DED3
  • sideBarSectionHeader.background#181714
  • sideBarSectionHeader.border#3F4346
  • sideBarSectionHeader.foreground#E6DED3
  • sideBarTitle.foreground#E6DED3
  • statusBar.background#181714
  • statusBar.border#3F4346
  • statusBar.debuggingBackground#E26A3B
  • statusBar.debuggingForeground#25231F
  • statusBar.foreground#E6DED3
  • statusBar.noFolderBackground#181714
  • statusBar.noFolderForeground#E6DED3
  • statusBarItem.activeBackground#3F4346
  • statusBarItem.errorBackground#D25046
  • statusBarItem.errorForeground#E6DED3
  • statusBarItem.hoverBackground#3F4346
  • statusBarItem.prominentBackground#E26A3B
  • statusBarItem.prominentForeground#25231F
  • statusBarItem.prominentHoverBackground#E4C397
  • statusBarItem.remoteBackground#7A8FA2
  • statusBarItem.remoteForeground#E6DED3
  • tab.activeBackground#25231F
  • tab.activeBorder#E26A3B
  • tab.activeForeground#E6DED3
  • tab.border#181714
  • tab.hoverBackground#3F4346
  • tab.inactiveBackground#181714
  • tab.inactiveForeground#9BABB9
  • terminal.ansiBlack#1E1C19
  • terminal.ansiBlue#7A8FA2
  • terminal.ansiBrightBlack#716A5F
  • terminal.ansiBrightBlue#A7B5C1
  • terminal.ansiBrightCyan#9AB1AD
  • terminal.ansiBrightGreen#A1C492
  • terminal.ansiBrightMagenta#B4A7C0
  • terminal.ansiBrightRed#DE7F77
  • terminal.ansiBrightWhite#EFEAE3
  • terminal.ansiBrightYellow#E4C397
  • terminal.ansiCyan#6F8F8A
  • terminal.ansiGreen#7FAF6A
  • terminal.ansiMagenta#8E7BA0
  • terminal.ansiRed#D25046
  • terminal.ansiWhite#E6DED3
  • terminal.ansiYellow#D4A05A
  • terminal.background#25231F
  • terminal.foreground#E6DED3
  • terminalCursor.foreground#E26A3B
  • titleBar.activeBackground#181714
  • titleBar.activeForeground#E6DED3
  • titleBar.border#3F4346
  • titleBar.inactiveBackground#181714
  • titleBar.inactiveForeground#9BABB9
  • welcomePage.background#25231F
  • welcomePage.tileBackground#181714
  • welcomePage.tileHoverBackground#3F4346

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#9BABB9italic
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template#7FAF6A—
constant.character.escape, string.escape#B4A7C0—
string.regexp#A1C492—
punctuation.definition.group.regexp#D65A3A—
constant.other.character-class.regexp#8E7BA0—
constant.other.character-class.set.regexp, punctuation.definition.character-class.regexp#D4A05A—
keyword.operator.quantifier.regexp#8CA6A1—
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.numeric.binary#8CA6A1—
constant, constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#8CA6A1—
constant.character#E26A3B—
keyword, keyword.control, keyword.control.conditional, keyword.control.repeat, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.return, keyword.control.exception, keyword.control.try, keyword.control.catch, keyword.control.throw, keyword.other#E26A3B—
keyword.operator, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.comparison#E26A3B—
storage, storage.type, storage.modifier#E26A3B—
entity.name.function, meta.function-call, support.function, meta.method-call#8E7BA0—
support.function.builtin#E4C397—
entity.name.function.macro, support.function.macro#B4A7C0—
entity.name.type, entity.name.class, entity.name.struct, entity.name.enum, entity.name.union, entity.name.trait, entity.name.interface, support.type, support.class#D4A05A—
support.type.builtin, support.type.primitive#D4A05A—
entity.name.type.parameter#D4A05Aitalic
variable, variable.other, variable.other.readwrite#E6DED3—
variable.language, variable.language.this, variable.language.self, variable.language.super#D65A3Aitalic
variable.parameter, meta.function.parameters variable#E6DED3italic
variable.other.property, variable.other.member, variable.other.object.property, meta.object-literal.key#7A8FA2—
entity.name.namespace, entity.name.module, entity.name.package#D4A05A—
entity.name.function.constructor, meta.function-call.constructor#D4A05A—
entity.name.label#D4A05A—
entity.other.attribute-name, meta.attribute#D4A05A—
meta.decorator#E4C397—
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.string#E6DED3—
punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.arguments, punctuation.definition.array, punctuation.brackets, punctuation.section#E6DED3—
punctuation.definition.interpolation, punctuation.section.embedded#D4A05A—
keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.bitwise, keyword.operator.relational, keyword.operator.ternary#E6DED3—
entity.name.tag, punctuation.definition.tag#E26A3B—
support.tag#7A8FA2—
entity.other.attribute-name.html, entity.other.attribute-name.xml#D4A05A—
markup.heading, markup.heading.setext, entity.name.section#E26A3Bbold
markup.heading.1#E26A3Bbold
markup.heading.2#E4C397bold
markup.heading.3#D65A3Abold
markup.heading.4#D4A05Abold
markup.heading.5#9BABB9bold
markup.heading.6#7A8FA2bold
markup.bold, punctuation.definition.bold—bold
markup.italic, punctuation.definition.italic—italic
markup.strikethrough—strikethrough
markup.underline.link, string.other.link#A7B5C1underline
string.other.link.title, string.other.link.description#6F8F8A—
markup.list, punctuation.definition.list#6F8F8A—
markup.quote#9BABB9italic
markup.raw, markup.inline.raw, markup.fenced_code, fenced_code.block.language#A1C492—
markup.inserted, meta.diff.header.to-file#7FAF6A—
markup.deleted, meta.diff.header.from-file#D25046—
markup.changed#E26A3B—
invalid#D25046—
invalid.deprecated—strikethrough
source.json meta.structure.dictionary.json support.type.property-name.json#E26A3B—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#D4A05A—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#D4A05A—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#7FAF6A—
entity.name.tag.yaml#E26A3B—
keyword.key.toml, support.type.property-name.toml#E26A3B—
entity.name.section.toml, entity.other.attribute-name.table.toml#D4A05A—
support.type.property-name.css#6F8F8A—
support.constant.property-value.css, support.constant.font-name#E6DED3—
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#E26A3B—
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element#8E7BA0—
keyword.control.at-rule.mixin, keyword.control.at-rule.include, keyword.control.at-rule.extend#B4A7C0—
support.constant.property-value.css#D65A3A—
keyword.other.unit.css#D65A3A—
variable.other.normal.shell, variable.other.special.shell, variable.other.positional.shell#E6DED3—
support.function.builtin.shell#E4C397—
punctuation.definition.template-expression, punctuation.section.embedded#D4A05A—
keyword.blade, keyword.control.twig, entity.name.function.blade#6F8F8A—
Akari by Shu Kutsuzawa - VS Code Theme