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#8A4530
  • activityBar.background#D9D1C6
  • activityBar.border#CABEAE
  • activityBar.foreground#1A1816
  • activityBar.inactiveForeground#222D38
  • activityBarBadge.background#8A4530
  • activityBarBadge.foreground#E4DED6
  • badge.background#8A4530
  • badge.foreground#E4DED6
  • breadcrumb.activeSelectionForeground#1A1816
  • breadcrumb.background#E4DED6
  • breadcrumb.focusForeground#1A1816
  • breadcrumb.foreground#222D38
  • breadcrumbPicker.background#D9D1C6
  • button.background#8A4530
  • button.foreground#E4DED6
  • button.hoverBackground#78522C
  • button.secondaryBackground#CABEAE
  • button.secondaryForeground#1A1816
  • button.secondaryHoverBackground#222D38
  • charts.blue#304050
  • charts.foreground#1A1816
  • charts.green#3A5830
  • charts.lines#CABEAE
  • charts.orange#8A4530
  • charts.purple#806080
  • charts.red#6A2828
  • charts.yellow#B07840
  • debugIcon.breakpointDisabledForeground#222D38
  • debugIcon.breakpointForeground#6A2828
  • debugIcon.pauseForeground#8A4530
  • debugIcon.restartForeground#3A5830
  • debugIcon.startForeground#3A5830
  • debugIcon.stepIntoForeground#304050
  • debugIcon.stepOutForeground#304050
  • debugIcon.stepOverForeground#304050
  • debugIcon.stopForeground#6A2828
  • debugToolBar.background#D9D1C6
  • descriptionForeground#222D38
  • diffEditor.diagonalFill#CABEAE
  • diffEditor.insertedLineBackground#3A583015
  • diffEditor.insertedTextBackground#3A583020
  • diffEditor.removedLineBackground#6A282815
  • diffEditor.removedTextBackground#6A282820
  • diffEditor.unchangedCodeBackground#CFC4B666
  • diffEditorGutter.insertedLineBackground#3A583025
  • diffEditorGutter.removedLineBackground#6A282825
  • diffEditorOverview.insertedForeground#3A583040
  • diffEditorOverview.removedForeground#6A282840
  • disabledForeground#222D38
  • dropdown.background#D9D1C6
  • dropdown.border#CABEAE
  • dropdown.foreground#1A1816
  • dropdown.listBackground#D9D1C6
  • editor.background#E4DED6
  • editor.findMatchBackground#8A453040
  • editor.findMatchHighlightBackground#8A453020
  • editor.foreground#1A1816
  • editor.inactiveSelectionBackground#CABEAE80
  • editor.lineHighlightBackground#DDD2C9
  • editor.lineHighlightBorder#DDD2C900
  • editor.selectionBackground#D7C5B1
  • editor.selectionForeground#1A1816
  • editor.selectionHighlightBackground#CABEAE80
  • editor.wordHighlightBackground#CABEAE80
  • editor.wordHighlightStrongBackground#CABEAE80
  • editorBracketHighlight.foreground1#8A4530
  • editorBracketHighlight.foreground2#304050
  • editorBracketHighlight.foreground3#806080
  • editorBracketHighlight.foreground4#447C7C
  • editorBracketHighlight.foreground5#3A5830
  • editorBracketHighlight.foreground6#B07840
  • editorBracketHighlight.unexpectedBracket.foreground#6A2828
  • editorBracketMatch.background#CABEAE
  • editorBracketMatch.border#8A4530
  • editorBracketPairGuide.activeBackground1#8A4530
  • editorBracketPairGuide.activeBackground2#304050
  • editorBracketPairGuide.activeBackground3#806080
  • editorBracketPairGuide.activeBackground4#447C7C
  • editorBracketPairGuide.activeBackground5#3A5830
  • editorBracketPairGuide.activeBackground6#B07840
  • editorCursor.foreground#8A4530
  • editorError.foreground#6A2828
  • editorGroupHeader.tabsBackground#D9D1C6
  • editorGroupHeader.tabsBorder#CABEAE
  • editorGutter.addedBackground#3A5830
  • editorGutter.background#E4DED6
  • editorGutter.deletedBackground#6A2828
  • editorGutter.modifiedBackground#8A4530
  • editorHint.foreground#222D38
  • editorHoverWidget.background#D9D1C6
  • editorHoverWidget.border#CABEAE
  • editorHoverWidget.foreground#1A1816
  • editorIndentGuide.activeBackground1#222D38
  • editorIndentGuide.background1#CABEAE
  • editorInfo.foreground#304050
  • editorLineNumber.activeForeground#8A4530
  • editorLineNumber.foreground#CABEAE
  • editorLink.activeForeground#131A20
  • editorOverviewRuler.border#CABEAE
  • editorOverviewRuler.errorForeground#6A2828
  • editorOverviewRuler.infoForeground#304050
  • editorOverviewRuler.warningForeground#8A4530
  • editorRuler.foreground#CABEAE
  • editorSemanticHighlighting.enabled
  • editorSuggestWidget.background#D9D1C6
  • editorSuggestWidget.border#CABEAE
  • editorSuggestWidget.foreground#1A1816
  • editorSuggestWidget.highlightForeground#8A4530
  • editorSuggestWidget.selectedBackground#CABEAE
  • editorWarning.foreground#8A4530
  • editorWhitespace.foreground#CABEAE
  • editorWidget.background#D9D1C6
  • editorWidget.border#CABEAE
  • editorWidget.foreground#1A1816
  • errorForeground#6A2828
  • extensionButton.prominentBackground#8A4530
  • extensionButton.prominentForeground#E4DED6
  • extensionButton.prominentHoverBackground#78522C
  • focusBorder#8A4530
  • foreground#1A1816
  • gitDecoration.addedResourceForeground#3A5830
  • gitDecoration.conflictingResourceForeground#6A2828
  • gitDecoration.deletedResourceForeground#6A2828
  • gitDecoration.ignoredResourceForeground#222D38
  • gitDecoration.modifiedResourceForeground#8A4530
  • gitDecoration.renamedResourceForeground#152727
  • gitDecoration.stageDeletedResourceForeground#6A2828
  • gitDecoration.stageModifiedResourceForeground#8A4530
  • gitDecoration.untrackedResourceForeground#20301A
  • icon.foreground#1A1816
  • inlineChat.foreground#1A1816
  • inlineChatDiff.inserted#3A583040
  • inlineChatDiff.removed#6A282840
  • inlineChatInput.background#D9D1C6
  • input.background#D9D1C6
  • input.border#CABEAE
  • input.foreground#1A1816
  • input.placeholderForeground#222D38
  • inputOption.activeBackground#CABEAE
  • inputOption.activeBorder#8A4530
  • inputOption.activeForeground#1A1816
  • inputValidation.errorBackground#6A282880
  • inputValidation.errorBorder#6A2828
  • inputValidation.errorForeground#1A1816
  • inputValidation.infoBackground#30405040
  • inputValidation.infoBorder#304050
  • inputValidation.infoForeground#1A1816
  • inputValidation.warningBackground#B07840
  • inputValidation.warningBorder#B07840
  • inputValidation.warningForeground#E4DED6
  • list.activeSelectionBackground#CABEAE
  • list.activeSelectionForeground#1A1816
  • list.errorForeground#6A2828
  • list.focusBackground#CABEAE
  • list.focusForeground#1A1816
  • list.highlightForeground#8A4530
  • list.hoverBackground#CABEAE50
  • list.hoverForeground#1A1816
  • list.inactiveSelectionBackground#CABEAE80
  • list.inactiveSelectionForeground#1A1816
  • list.warningForeground#8A4530
  • merge.currentHeaderBackground#3A583040
  • merge.incomingHeaderBackground#30405040
  • minimap.background#E4DED6
  • minimap.errorHighlight#6A2828
  • minimap.findMatchHighlight#8A4530
  • minimap.selectionHighlight#CABEAE
  • minimap.warningHighlight#8A4530
  • minimapGutter.addedBackground#3A5830
  • minimapGutter.deletedBackground#6A2828
  • minimapGutter.modifiedBackground#8A4530
  • notebook.cellBorderColor#CABEAE
  • notebook.cellEditorBackground#D9D1C6
  • notebook.cellStatusBarItemHoverBackground#CABEAE
  • notebook.editorBackground#E4DED6
  • notebook.focusedCellBorder#8A4530
  • notificationCenterHeader.background#D9D1C6
  • notificationCenterHeader.foreground#1A1816
  • notifications.background#D9D1C6
  • notifications.border#CABEAE
  • notifications.foreground#1A1816
  • panel.background#E4DED6
  • panel.border#CABEAE
  • panelTitle.activeBorder#8A4530
  • panelTitle.activeForeground#1A1816
  • panelTitle.inactiveForeground#222D38
  • peekView.border#8A4530
  • peekViewEditor.background#D9D1C6
  • peekViewEditor.matchHighlightBackground#8A453040
  • peekViewResult.background#D9D1C6
  • peekViewResult.fileForeground#1A1816
  • peekViewResult.lineForeground#222D38
  • peekViewResult.matchHighlightBackground#8A453040
  • peekViewResult.selectionBackground#CABEAE
  • peekViewTitle.background#D9D1C6
  • peekViewTitleDescription.foreground#222D38
  • peekViewTitleLabel.foreground#1A1816
  • progressBar.background#8A4530
  • quickInput.background#D9D1C6
  • quickInput.foreground#1A1816
  • quickInputList.focusBackground#CABEAE
  • quickInputTitle.background#D9D1C6
  • scrollbar.shadow#00000050
  • scrollbarSlider.activeBackground#222D38
  • scrollbarSlider.background#CABEAE80
  • scrollbarSlider.hoverBackground#CABEAE
  • settings.checkboxBackground#D9D1C6
  • settings.checkboxBorder#CABEAE
  • settings.checkboxForeground#1A1816
  • settings.dropdownBackground#D9D1C6
  • settings.dropdownBorder#CABEAE
  • settings.dropdownForeground#1A1816
  • settings.headerForeground#1A1816
  • settings.modifiedItemIndicator#8A4530
  • settings.numberInputBackground#D9D1C6
  • settings.numberInputBorder#CABEAE
  • settings.numberInputForeground#1A1816
  • settings.textInputBackground#D9D1C6
  • settings.textInputBorder#CABEAE
  • settings.textInputForeground#1A1816
  • sideBar.background#D9D1C6
  • sideBar.border#CABEAE
  • sideBar.foreground#1A1816
  • sideBarSectionHeader.background#D9D1C6
  • sideBarSectionHeader.border#CABEAE
  • sideBarSectionHeader.foreground#1A1816
  • sideBarTitle.foreground#1A1816
  • statusBar.background#D9D1C6
  • statusBar.border#CABEAE
  • statusBar.debuggingBackground#8A4530
  • statusBar.debuggingForeground#E4DED6
  • statusBar.foreground#1A1816
  • statusBar.noFolderBackground#D9D1C6
  • statusBar.noFolderForeground#1A1816
  • statusBarItem.activeBackground#CABEAE
  • statusBarItem.errorBackground#6A2828
  • statusBarItem.errorForeground#1A1816
  • statusBarItem.hoverBackground#CABEAE
  • statusBarItem.prominentBackground#8A4530
  • statusBarItem.prominentForeground#E4DED6
  • statusBarItem.prominentHoverBackground#78522C
  • statusBarItem.remoteBackground#304050
  • statusBarItem.remoteForeground#1A1816
  • tab.activeBackground#E4DED6
  • tab.activeBorder#8A4530
  • tab.activeForeground#1A1816
  • tab.border#D9D1C6
  • tab.hoverBackground#CABEAE
  • tab.inactiveBackground#D9D1C6
  • tab.inactiveForeground#222D38
  • terminal.ansiBlack#1A1816
  • terminal.ansiBlue#304050
  • terminal.ansiBrightBlack#514B45
  • terminal.ansiBrightBlue#131A20
  • terminal.ansiBrightCyan#152727
  • terminal.ansiBrightGreen#20301A
  • terminal.ansiBrightMagenta#543F54
  • terminal.ansiBrightRed#3E1717
  • terminal.ansiBrightWhite#D0C5B7
  • terminal.ansiBrightYellow#78522C
  • terminal.ansiCyan#305858
  • terminal.ansiGreen#3A5830
  • terminal.ansiMagenta#806080
  • terminal.ansiRed#6A2828
  • terminal.ansiWhite#E4DED6
  • terminal.ansiYellow#B07840
  • terminal.background#E4DED6
  • terminal.foreground#1A1816
  • terminalCursor.foreground#8A4530
  • titleBar.activeBackground#D9D1C6
  • titleBar.activeForeground#1A1816
  • titleBar.border#CABEAE
  • titleBar.inactiveBackground#D9D1C6
  • titleBar.inactiveForeground#222D38
  • welcomePage.background#E4DED6
  • welcomePage.tileBackground#D9D1C6
  • welcomePage.tileHoverBackground#CABEAE

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#222D38italic
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template#3A5830
constant.character.escape, string.escape#543F54
string.regexp#20301A
punctuation.definition.group.regexp#7A3828
constant.other.character-class.regexp#806080
constant.other.character-class.set.regexp, punctuation.definition.character-class.regexp#B07840
keyword.operator.quantifier.regexp#447C7C
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.numeric.binary#447C7C
constant, constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#447C7C
constant.character#8A4530
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#8A4530
keyword.operator, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.comparison#8A4530
storage, storage.type, storage.modifier#8A4530
entity.name.function, meta.function-call, support.function, meta.method-call#806080
support.function.builtin#78522C
entity.name.function.macro, support.function.macro#543F54
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#B07840
support.type.builtin, support.type.primitive#B07840
entity.name.type.parameter#B07840italic
variable, variable.other, variable.other.readwrite#1A1816
variable.language, variable.language.this, variable.language.self, variable.language.super#7A3828italic
variable.parameter, meta.function.parameters variable#1A1816italic
variable.other.property, variable.other.member, variable.other.object.property, meta.object-literal.key#304050
entity.name.namespace, entity.name.module, entity.name.package#B07840
entity.name.function.constructor, meta.function-call.constructor#B07840
entity.name.label#B07840
entity.other.attribute-name, meta.attribute#B07840
meta.decorator#78522C
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.string#1A1816
punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.arguments, punctuation.definition.array, punctuation.brackets, punctuation.section#1A1816
punctuation.definition.interpolation, punctuation.section.embedded#B07840
keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.bitwise, keyword.operator.relational, keyword.operator.ternary#1A1816
entity.name.tag, punctuation.definition.tag#8A4530
support.tag#304050
entity.other.attribute-name.html, entity.other.attribute-name.xml#B07840
markup.heading, markup.heading.setext, entity.name.section#8A4530bold
markup.heading.1#8A4530bold
markup.heading.2#78522Cbold
markup.heading.3#7A3828bold
markup.heading.4#B07840bold
markup.heading.5#222D38bold
markup.heading.6#304050bold
markup.bold, punctuation.definition.boldbold
markup.italic, punctuation.definition.italicitalic
markup.strikethroughstrikethrough
markup.underline.link, string.other.link#131A20underline
string.other.link.title, string.other.link.description#305858
markup.list, punctuation.definition.list#305858
markup.quote#222D38italic
markup.raw, markup.inline.raw, markup.fenced_code, fenced_code.block.language#20301A
markup.inserted, meta.diff.header.to-file#3A5830
markup.deleted, meta.diff.header.from-file#6A2828
markup.changed#8A4530
invalid#6A2828
invalid.deprecatedstrikethrough
source.json meta.structure.dictionary.json support.type.property-name.json#8A4530
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#B07840
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#B07840
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#3A5830
entity.name.tag.yaml#8A4530
keyword.key.toml, support.type.property-name.toml#8A4530
entity.name.section.toml, entity.other.attribute-name.table.toml#B07840
support.type.property-name.css#305858
support.constant.property-value.css, support.constant.font-name#1A1816
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#8A4530
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element#806080
keyword.control.at-rule.mixin, keyword.control.at-rule.include, keyword.control.at-rule.extend#543F54
support.constant.property-value.css#7A3828
keyword.other.unit.css#7A3828
variable.other.normal.shell, variable.other.special.shell, variable.other.positional.shell#1A1816
support.function.builtin.shell#78522C
punctuation.definition.template-expression, punctuation.section.embedded#B07840
keyword.blade, keyword.control.twig, entity.name.function.blade#305858
Akari by Shu Kutsuzawa - VS Code Theme