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#8a6d3e
  • activityBar.background#e0d4c4
  • activityBar.border#d0c4b4
  • activityBar.foreground#4a3828
  • activityBar.inactiveForeground#a09080
  • activityBarBadge.background#1a6ea8
  • activityBarBadge.foreground#ffffff
  • badge.background#1a6ea8
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#2c2018
  • breadcrumb.background#f5efe6
  • breadcrumb.foreground#9a8878
  • breadcrumbPicker.background#ede4d8
  • button.background#1a6ea8
  • button.foreground#ffffff
  • button.hoverBackground#1558a0
  • button.secondaryBackground#d8c8b0
  • button.secondaryForeground#2c2018
  • debugConsole.errorForeground#a02828
  • debugConsole.infoForeground#1a6ea8
  • debugConsole.sourceForeground#6040a0
  • debugConsole.warningForeground#8a6d3e
  • debugToolBar.background#ede4d8
  • dropdown.background#ede4d8
  • dropdown.border#c8b8a0
  • dropdown.foreground#2c2018
  • editor.background#f5efe6
  • editor.findMatchBackground#8a6d3e50
  • editor.findMatchHighlightBackground#8a6d3e28
  • editor.foreground#2c2018
  • editor.inactiveSelectionBackground#d0b89035
  • editor.lineHighlightBackground#ece4d8
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#d0b89060
  • editor.selectionHighlightBackground#d0b89045
  • editor.wordHighlightBackground#1a6ea820
  • editor.wordHighlightStrongBackground#1a6ea838
  • editorBracketHighlight.foreground1#1a6ea8
  • editorBracketHighlight.foreground2#7a4f0a
  • editorBracketHighlight.foreground3#1a7a50
  • editorBracketHighlight.foreground4#6040a0
  • editorBracketHighlight.foreground5#a02828
  • editorBracketHighlight.foreground6#a0520a
  • editorBracketHighlight.unexpectedBracket.foreground#a02828
  • editorBracketMatch.background#1a6ea820
  • editorBracketMatch.border#1a6ea8
  • editorCursor.background#f5efe6
  • editorCursor.foreground#8a6d3e
  • editorError.foreground#a02828
  • editorGhostText.foreground#b8a89880
  • editorGroupHeader.tabsBackground#e8ddd0
  • editorGroupHeader.tabsBorder#d8ccbc
  • editorGutter.addedBackground#1a7a50
  • editorGutter.background#f5efe6
  • editorGutter.deletedBackground#a02828
  • editorGutter.modifiedBackground#8a6d3e
  • editorHint.foreground#1a7a50
  • editorHoverWidget.background#ede4d8
  • editorHoverWidget.border#c8b8a0
  • editorIndentGuide.activeBackground1#b8a078
  • editorIndentGuide.background1#d8ccbc
  • editorInfo.foreground#1a6ea8
  • editorInlayHint.background#e4d8c880
  • editorInlayHint.foreground#9a8878
  • editorInlayHint.parameterBackground#e4d8c880
  • editorInlayHint.parameterForeground#a0520a
  • editorInlayHint.typeBackground#e4d8c880
  • editorInlayHint.typeForeground#1a7a50
  • editorLineNumber.activeForeground#7a6a58
  • editorLineNumber.foreground#b8a898
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.errorForeground#a02828
  • editorOverviewRuler.findMatchForeground#8a6d3e90
  • editorOverviewRuler.warningForeground#8a6d3e
  • editorSuggestWidget.background#ede4d8
  • editorSuggestWidget.border#c8b8a0
  • editorSuggestWidget.foreground#2c2018
  • editorSuggestWidget.highlightForeground#7a4f0a
  • editorSuggestWidget.selectedBackground#d8c8b0
  • editorWarning.foreground#8a6d3e
  • editorWidget.background#ede4d8
  • editorWidget.border#c8b8a0
  • focusBorder#1a6ea860
  • gitDecoration.addedResourceForeground#1a7a50
  • gitDecoration.conflictingResourceForeground#6040a0
  • gitDecoration.deletedResourceForeground#a02828
  • gitDecoration.ignoredResourceForeground#b8a898
  • gitDecoration.modifiedResourceForeground#8a6d3e
  • gitDecoration.untrackedResourceForeground#1a7a50
  • input.background#ede4d8
  • input.border#c8b8a0
  • input.foreground#2c2018
  • input.placeholderForeground#a09080
  • inputValidation.errorBackground#ede4d8
  • inputValidation.errorBorder#a02828
  • inputValidation.warningBackground#ede4d8
  • inputValidation.warningBorder#8a6d3e
  • list.activeSelectionBackground#d8c8b0
  • list.activeSelectionForeground#2c2018
  • list.errorForeground#a02828
  • list.focusForeground#2c2018
  • list.highlightForeground#7a4f0a
  • list.hoverBackground#e4d8c840
  • list.hoverForeground#2c2018
  • list.inactiveSelectionBackground#e4d8c8
  • list.inactiveSelectionForeground#4a3828
  • list.warningForeground#8a6d3e
  • menu.background#ede4d8
  • menu.border#c8b8a0
  • menu.foreground#2c2018
  • menu.selectionBackground#d8c8b0
  • menu.selectionForeground#2c2018
  • menu.separatorBackground#d0c4b4
  • menubar.selectionBackground#e4d8c8
  • menubar.selectionForeground#2c2018
  • minimap.background#f5efe6
  • minimap.findMatchHighlight#8a6d3e60
  • minimap.selectionHighlight#d0b89060
  • minimapSlider.activeBackground#c8b8a060
  • minimapSlider.background#c8b8a020
  • minimapSlider.hoverBackground#c8b8a040
  • notificationLink.foreground#1a6ea8
  • notifications.background#ede4d8
  • notifications.border#c8b8a0
  • notifications.foreground#2c2018
  • panel.background#ede4d8
  • panel.border#d8ccbc
  • panelTitle.activeBorder#8a6d3e
  • panelTitle.activeForeground#2c2018
  • panelTitle.inactiveForeground#9a8878
  • peekView.border#1a6ea8
  • peekViewEditor.background#f5efe6
  • peekViewEditor.matchHighlightBackground#8a6d3e40
  • peekViewResult.background#ede4d8
  • peekViewResult.fileForeground#2c2018
  • peekViewResult.lineForeground#4a3828
  • peekViewResult.matchHighlightBackground#8a6d3e40
  • peekViewTitle.background#e4d8c8
  • peekViewTitleDescription.foreground#7a6a58
  • peekViewTitleLabel.foreground#2c2018
  • progressBar.background#1a6ea8
  • scrollbar.shadow#00000018
  • scrollbarSlider.activeBackground#c8b8a0a0
  • scrollbarSlider.background#c8b8a040
  • scrollbarSlider.hoverBackground#c8b8a070
  • selection.background#d0b89060
  • sideBar.background#ede4d8
  • sideBar.border#d8ccbc
  • sideBar.foreground#4a3828
  • sideBarSectionHeader.background#e4d8c8
  • sideBarSectionHeader.border#d8ccbc
  • sideBarSectionHeader.foreground#7a6a58
  • sideBarTitle.foreground#7a6a58
  • statusBar.background#d8cbb8
  • statusBar.border#c8b8a0
  • statusBar.debuggingBackground#c0a070
  • statusBar.debuggingForeground#2c2018
  • statusBar.foreground#4a3828
  • statusBar.noFolderBackground#d8cbb8
  • statusBarItem.errorBackground#a02828
  • statusBarItem.errorForeground#ffffff
  • statusBarItem.hoverBackground#c8b8a840
  • statusBarItem.remoteBackground#1a6ea8
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#f5efe6
  • tab.activeBorder#8a6d3e
  • tab.activeBorderTop#00000000
  • tab.activeForeground#2c2018
  • tab.border#d8ccbc
  • tab.hoverBackground#e0d4c4
  • tab.inactiveBackground#e8ddd0
  • tab.inactiveForeground#7a6a58
  • terminal.ansiBlack#4a3828
  • terminal.ansiBlue#1a6ea8
  • terminal.ansiBrightBlack#7a6a58
  • terminal.ansiBrightBlue#2888c8
  • terminal.ansiBrightCyan#1a9090
  • terminal.ansiBrightGreen#1a9060
  • terminal.ansiBrightMagenta#7850b8
  • terminal.ansiBrightRed#c04040
  • terminal.ansiBrightWhite#2c2018
  • terminal.ansiBrightYellow#a08040
  • terminal.ansiCyan#1a7878
  • terminal.ansiGreen#1a7a50
  • terminal.ansiMagenta#6040a0
  • terminal.ansiRed#a02828
  • terminal.ansiWhite#d8ccbc
  • terminal.ansiYellow#8a6d3e
  • terminal.background#f5efe6
  • terminal.foreground#2c2018
  • terminal.selectionBackground#d0b89060
  • textBlockQuote.background#ede4d8
  • textBlockQuote.border#1a6ea8
  • textCodeBlock.background#ede4d8
  • textLink.activeForeground#1558a0
  • textLink.foreground#1a6ea8
  • titleBar.activeBackground#e0d4c4
  • titleBar.activeForeground#4a3828
  • titleBar.border#d0c4b4
  • titleBar.inactiveBackground#ede4d8
  • titleBar.inactiveForeground#9a8878
  • widget.shadow#00000018

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9a8878italic
string, punctuation.definition.string, string.template#a0520a
string.template punctuation.definition.template-expression#6040a0
keyword, keyword.control, keyword.operator.new, keyword.operator.delete, keyword.operator.typeof, keyword.operator.void, keyword.operator.instanceof, keyword.operator.in#1a6ea8
storage.type, storage.modifier, keyword.declaration, keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#1a6ea8italic
entity.name.function, support.function, meta.function-call entity.name.function, variable.function#7a4f0a
variable.parameter, meta.parameter#a0520aitalic
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class#1a7a50
meta.type.annotation, meta.type.parameters, support.type.primitive, storage.type.generic#1a7a50italic
entity.name.type.interface#1a7a50italic
constant.numeric, constant.numeric.integer, constant.numeric.float#6040a0
constant.language.boolean, constant.language.null, constant.language.undefined, constant.language.nan#6040a0italic
constant.language, variable.other.constant#6040a0
variable.other.property, support.type.property-name, meta.object-literal.key#7a4f0a
meta.object-literal.key string#7a4f0a
variable.other, variable.other.readwrite#2c2018
entity.name.tag, meta.tag.structure entity.name.tag#a02828
entity.other.attribute-name#7a4f0a
support.type.property-name.css, entity.name.tag.css#1a6ea8
support.constant.property-value.css, constant.other.color#a0520a
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#1a7a50
keyword.operator, keyword.operator.arithmetic#8a7a68
punctuation.separator, punctuation.terminator, punctuation.accessor, meta.brace#8a7a68
meta.decorator, punctuation.decorator, entity.name.function.decorator#6040a0italic
markup.heading, punctuation.definition.heading.markdown#7a4f0abold
markup.bold#2c2018bold
markup.italic#2c2018italic
markup.inline.raw, markup.raw.inline#1a7a50
markup.underline.link#1a6ea8
markup.quote#9a8878italic
punctuation.definition.list.begin.markdown#8a6d3e
string.regexp, constant.regexp#2c6880
constant.character.escape#6040a0
entity.name.namespace, entity.name.module, support.module#1a7a50italic
variable.other.enummember, constant.other.enum#6040a0
invalid, invalid.illegal#a02828underline
variable.language#6040a0italic
entity.name.function.method, meta.method entity.name.function#7a4f0a
storage.type.function.arrow, keyword.operator.arrow#1a6ea8
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#b8a898
support.constant, support.constant.math, support.constant.dom#6040a0
support.variable, support.variable.dom, support.class.dom#1a6ea8
markup.fenced_code.block, markup.raw.block#1a7a50
support.class.component, entity.name.tag.tsx, entity.name.tag.jsx#1a7a50
Ukiyo Themes by nzkdevsaider - VS Code Theme