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#dadada
  • activityBar.border#e4e4e4
  • activityBar.foreground#4e4e4e
  • activityBar.inactiveForeground#999872
  • activityBarBadge.background#875f5f
  • activityBarBadge.foreground#dadada
  • badge.background#875f5f
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#875f5f
  • breadcrumb.focusForeground#4e4e4e
  • breadcrumb.foreground#999872
  • breadcrumbPicker.background#e4e4e4
  • button.background#875f5f
  • button.foreground#ffffff
  • button.hoverBackground#be9873
  • button.secondaryBackground#c8c8c8
  • button.secondaryForeground#4e4e4e
  • button.secondaryHoverBackground#bcbcbc
  • charts.blue#25709a
  • charts.foreground#4e4e4e
  • charts.green#719872
  • charts.lines#999872
  • charts.orange#875f5f
  • charts.purple#e12672
  • charts.red#bf2172
  • charts.yellow#875f5f
  • checkbox.background#e4e4e4
  • checkbox.border#c8c8c8
  • checkbox.foreground#4e4e4e
  • debugConsole.errorForeground#bf2172
  • debugConsole.infoForeground#009799
  • debugConsole.sourceForeground#4e4e4e
  • debugConsole.warningForeground#875f5f
  • debugConsoleInputIcon.foreground#4e4e4e
  • debugIcon.breakpointDisabledForeground#999872
  • debugIcon.breakpointForeground#bf2172
  • debugIcon.breakpointUnverifiedForeground#875f5f
  • debugIcon.continueForeground#719872
  • debugIcon.pauseForeground#875f5f
  • debugIcon.restartForeground#009799
  • debugIcon.startForeground#719872
  • debugIcon.stepBackForeground#009799
  • debugIcon.stepIntoForeground#009799
  • debugIcon.stepOutForeground#009799
  • debugIcon.stepOverForeground#009799
  • debugIcon.stopForeground#bf2172
  • debugToolBar.background#e4e4e4
  • debugToolBar.border#c8c8c8
  • dropdown.background#e4e4e4
  • dropdown.border#c8c8c8
  • dropdown.foreground#4e4e4e
  • dropdown.listBackground#e4e4e4
  • editor.background#dadada
  • editor.findMatchBackground#98bede
  • editor.findMatchHighlightBackground#98bede
  • editor.findRangeHighlightBackground#98bede
  • editor.foreground#4e4e4e
  • editor.hoverHighlightBackground#98bede
  • editor.indentGuideActiveBackground#bcbcbc
  • editor.indentGuideBackground#c8c8c8
  • editor.lineHighlightBackground#e4e4e4
  • editor.rangeHighlightBackground#98bede
  • editor.selectionBackground#98bede
  • editor.selectionHighlightBackground#98bede
  • editor.wordHighlightBackground#98bede
  • editor.wordHighlightStrongBackground#98bede
  • editorBracketMatch.background#bcbcbc
  • editorBracketMatch.border#999872
  • editorCodeLens.foreground#999872
  • editorCursor.foreground#4e4e4e
  • editorError.foreground#bf2172
  • editorGroup.border#c8c8c8
  • editorGroup.dropBackground#98bede
  • editorGroupHeader.noTabsBackground#e4e4e4
  • editorGroupHeader.tabsBackground#e4e4e4
  • editorGroupHeader.tabsBorder#c8c8c8
  • editorGutter.addedBackground#719872
  • editorGutter.background#dadada
  • editorGutter.commentRangeForeground#999872
  • editorGutter.deletedBackground#bf2172
  • editorGutter.foldingControlForeground#999872
  • editorGutter.modifiedBackground#875f5f
  • editorHint.foreground#009799
  • editorHoverWidget.background#e4e4e4
  • editorHoverWidget.border#c8c8c8
  • editorHoverWidget.foreground#4e4e4e
  • editorHoverWidget.statusBarBackground#dadada
  • editorInfo.foreground#25709a
  • editorLineNumber.activeForeground#875f5f
  • editorLineNumber.foreground#999872
  • editorOverviewRuler.addedForeground#719872
  • editorOverviewRuler.border#dadada
  • editorOverviewRuler.bracketMatchForeground#999872
  • editorOverviewRuler.commonContentForeground#999872
  • editorOverviewRuler.currentContentForeground#719872
  • editorOverviewRuler.deletedForeground#bf2172
  • editorOverviewRuler.errorForeground#bf2172
  • editorOverviewRuler.findMatchForeground#875f5f
  • editorOverviewRuler.incomingContentForeground#25709a
  • editorOverviewRuler.infoForeground#25709a
  • editorOverviewRuler.modifiedForeground#875f5f
  • editorOverviewRuler.rangeHighlightForeground#875f5f
  • editorOverviewRuler.selectionHighlightForeground#875f5f
  • editorOverviewRuler.warningForeground#875f5f
  • editorOverviewRuler.wordHighlightForeground#875f5f
  • editorOverviewRuler.wordHighlightStrongForeground#875f5f
  • editorSuggestWidget.background#e4e4e4
  • editorSuggestWidget.border#c8c8c8
  • editorSuggestWidget.foreground#4e4e4e
  • editorSuggestWidget.highlightForeground#875f5f
  • editorSuggestWidget.selectedBackground#875f5f
  • editorWarning.foreground#875f5f
  • editorWhitespace.foreground#c8c8c8
  • editorWidget.background#e4e4e4
  • editorWidget.border#c8c8c8
  • editorWidget.foreground#4e4e4e
  • editorWidget.resizeBorder#c8c8c8
  • extensionButton.prominentBackground#875f5f
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#be9873
  • gitDecoration.addedResourceForeground#719872
  • gitDecoration.conflictingResourceForeground#e12672
  • gitDecoration.deletedResourceForeground#bf2172
  • gitDecoration.ignoredResourceForeground#999872
  • gitDecoration.modifiedResourceForeground#875f5f
  • gitDecoration.renamedResourceForeground#009799
  • gitDecoration.stageDeletedResourceForeground#bf2172
  • gitDecoration.stageModifiedResourceForeground#875f5f
  • gitDecoration.submoduleResourceForeground#009799
  • gitDecoration.untrackedResourceForeground#719872
  • input.background#e4e4e4
  • input.border#c8c8c8
  • input.foreground#4e4e4e
  • input.placeholderForeground#999872
  • inputOption.activeBackground#875f5f
  • inputOption.activeBorder#875f5f
  • inputOption.activeForeground#ffffff
  • inputValidation.errorBackground#bf2172
  • inputValidation.errorBorder#e12672
  • inputValidation.errorForeground#ffffff
  • inputValidation.infoBackground#25709a
  • inputValidation.infoBorder#007299
  • inputValidation.infoForeground#ffffff
  • inputValidation.warningBackground#875f5f
  • inputValidation.warningBorder#dfbc72
  • inputValidation.warningForeground#ffffff
  • list.activeSelectionBackground#875f5f
  • list.activeSelectionForeground#ffffff
  • list.errorForeground#bf2172
  • list.focusBackground#c8c8c8
  • list.highlightForeground#875f5f
  • list.hoverBackground#c8c8c8
  • list.inactiveSelectionBackground#c8c8c8
  • list.inactiveSelectionForeground#4e4e4e
  • list.invalidItemForeground#bf2172
  • list.warningForeground#875f5f
  • menu.background#e4e4e4
  • menu.border#c8c8c8
  • menu.foreground#4e4e4e
  • menu.selectionBackground#c8c8c8
  • menu.selectionBorder#875f5f
  • menu.selectionForeground#4e4e4e
  • menu.separatorBackground#c8c8c8
  • menubar.selectionBackground#c8c8c8
  • menubar.selectionBorder#875f5f
  • menubar.selectionForeground#4e4e4e
  • merge.border#c8c8c8
  • merge.commonContentBackground#999872
  • merge.commonHeaderBackground#999872
  • merge.currentContentBackground#719872
  • merge.currentHeaderBackground#719872
  • merge.incomingContentBackground#25709a
  • merge.incomingHeaderBackground#25709a
  • minimap.background#dadada
  • minimap.errorHighlight#bf2172
  • minimap.findMatchHighlight#875f5f
  • minimap.selectionHighlight#98bede
  • minimap.warningHighlight#875f5f
  • minimapGutter.addedBackground#719872
  • minimapGutter.deletedBackground#bf2172
  • minimapGutter.modifiedBackground#875f5f
  • notificationCenter.border#c8c8c8
  • notificationCenterHeader.background#dadada
  • notificationCenterHeader.foreground#4e4e4e
  • notificationLink.foreground#009799
  • notifications.background#e4e4e4
  • notifications.border#c8c8c8
  • notifications.foreground#4e4e4e
  • notificationsErrorIcon.foreground#bf2172
  • notificationsInfoIcon.foreground#25709a
  • notificationsWarningIcon.foreground#875f5f
  • notificationToast.border#c8c8c8
  • panel.background#dadada
  • panel.border#c8c8c8
  • panelTitle.activeBorder#875f5f
  • panelTitle.activeForeground#4e4e4e
  • panelTitle.inactiveForeground#999872
  • peekView.background#e4e4e4
  • peekViewEditor.background#dadada
  • peekViewEditor.matchHighlightBackground#98bede
  • peekViewResult.background#e4e4e4
  • peekViewResult.fileForeground#4e4e4e
  • peekViewResult.lineForeground#999872
  • peekViewResult.matchHighlightBackground#98bede
  • peekViewResult.selectionBackground#875f5f
  • peekViewResult.selectionForeground#4e4e4e
  • peekViewTitle.background#dadada
  • peekViewTitleDescription.foreground#999872
  • peekViewTitleLabel.foreground#4e4e4e
  • pickerGroup.border#c8c8c8
  • pickerGroup.foreground#4e4e4e
  • progressBar.background#875f5f
  • quickInput.background#e4e4e4
  • quickInput.foreground#4e4e4e
  • quickInputList.focusBackground#c8c8c8
  • quickInputTitle.background#dadada
  • scrollbar.shadow#eeeeee
  • scrollbarSlider.activeBackground#a8a8a8
  • scrollbarSlider.background#c8c8c8
  • scrollbarSlider.hoverBackground#bcbcbc
  • settings.checkboxBackground#e4e4e4
  • settings.checkboxBorder#c8c8c8
  • settings.checkboxForeground#4e4e4e
  • settings.dropdownBackground#e4e4e4
  • settings.dropdownBorder#c8c8c8
  • settings.dropdownForeground#4e4e4e
  • settings.dropdownListBorder#c8c8c8
  • settings.headerForeground#4e4e4e
  • settings.modifiedItemIndicator#875f5f
  • settings.numberInputBackground#e4e4e4
  • settings.numberInputBorder#c8c8c8
  • settings.numberInputForeground#4e4e4e
  • settings.textInputBackground#e4e4e4
  • settings.textInputBorder#c8c8c8
  • settings.textInputForeground#4e4e4e
  • sideBar.background#dadada
  • sideBar.border#e4e4e4
  • sideBar.foreground#4e4e4e
  • sideBarSectionHeader.background#e4e4e4
  • sideBarSectionHeader.border#c8c8c8
  • sideBarSectionHeader.foreground#4e4e4e
  • sideBarTitle.foreground#4e4e4e
  • statusBar.background#e9e9e9
  • statusBar.border#c8c8c8
  • statusBar.debuggingBackground#875f5f
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#4e4e4e
  • statusBar.noFolderBackground#e9e9e9
  • statusBar.noFolderForeground#4e4e4e
  • statusBarItem.activeBackground#c8c8c8
  • statusBarItem.hoverBackground#bcbcbc
  • statusBarItem.remoteBackground#009799
  • statusBarItem.remoteForeground#ffffff
  • symbolIcon.arrayForeground#009799
  • symbolIcon.booleanForeground#719872
  • symbolIcon.classForeground#875f5f
  • symbolIcon.colorForeground#875f5f
  • symbolIcon.constantForeground#009799
  • symbolIcon.constructorForeground#875f5f
  • symbolIcon.enumeratorForeground#875f5f
  • symbolIcon.enumeratorMemberForeground#719872
  • symbolIcon.eventForeground#875f5f
  • symbolIcon.fieldForeground#009799
  • symbolIcon.fileForeground#4e4e4e
  • symbolIcon.folderForeground#9a7372
  • symbolIcon.functionForeground#9a7372
  • symbolIcon.interfaceForeground#875f5f
  • symbolIcon.keyForeground#009799
  • symbolIcon.keywordForeground#875f5f
  • symbolIcon.methodForeground#9a7372
  • symbolIcon.moduleForeground#875f5f
  • symbolIcon.namespaceForeground#875f5f
  • symbolIcon.nullForeground#719872
  • symbolIcon.numberForeground#875f5f
  • symbolIcon.objectForeground#009799
  • symbolIcon.operatorForeground#875f5f
  • symbolIcon.packageForeground#875f5f
  • symbolIcon.propertyForeground#009799
  • symbolIcon.referenceForeground#875f5f
  • symbolIcon.snippetForeground#009799
  • symbolIcon.stringForeground#009799
  • symbolIcon.structForeground#875f5f
  • symbolIcon.textForeground#4e4e4e
  • symbolIcon.typeParameterForeground#875f5f
  • symbolIcon.unitForeground#719872
  • symbolIcon.variableForeground#4e4e4e
  • tab.activeBackground#dadada
  • tab.activeBorder#875f5f
  • tab.activeForeground#4e4e4e
  • tab.border#c8c8c8
  • tab.hoverBackground#c8c8c8
  • tab.inactiveBackground#e4e4e4
  • tab.inactiveForeground#999872
  • tab.unfocusedActiveBorder#999872
  • terminal.ansiBlack#dadada
  • terminal.ansiBlue#25709a
  • terminal.ansiBrightBlack#c8c8c8
  • terminal.ansiBrightBlue#98bede
  • terminal.ansiBrightCyan#bcdede
  • terminal.ansiBrightGreen#98bc99
  • terminal.ansiBrightMagenta#ffbd98
  • terminal.ansiBrightRed#e12672
  • terminal.ansiBrightWhite#262626
  • terminal.ansiBrightYellow#ffde99
  • terminal.ansiCyan#009799
  • terminal.ansiGreen#719872
  • terminal.ansiMagenta#875f5f
  • terminal.ansiRed#bf2172
  • terminal.ansiWhite#4e4e4e
  • terminal.ansiYellow#875f5f
  • terminal.background#dadada
  • terminal.foreground#4e4e4e
  • titleBar.activeBackground#dadada
  • titleBar.activeForeground#4e4e4e
  • titleBar.border#e4e4e4
  • titleBar.inactiveBackground#dadada
  • titleBar.inactiveForeground#999872
  • widget.shadow#eeeeee

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#719872italic
variable, string constant.other.placeholder#4e4e4e
constant.other.color#875f5f
invalid, invalid.illegal#bf2172
keyword, storage.type, storage.modifier#875f5f
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#875f5f
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#875f5f
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#9a7372
meta.block variable.other#875f5f
support.other.variable, string.other.link#875f5f
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#875f5f
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#009799
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#9a7200
support.type#999872
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#999872
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#bf2172
variable.language#bf2172italic
entity.name.method.js#9a7372italic
meta.class-method.js entity.name.function.js, variable.function.constructor#9a7372
entity.other.attribute-name#875f5f
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#9a7200italic
entity.other.attribute-name.class#9a7200
source.sass keyword.control#9a7372
markup.inserted#719872
markup.deleted#bf2172
markup.changed#875f5f
string.regexp#009799
constant.character.escape#009799
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#9a7372italic
source.js constant.other.object.key.js string.unquoted.label.js#bf2172italic
source.json meta.structure.dictionary.json support.type.property-name.json#875f5f
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#9a7200
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#875f5f
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#bf2172
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 meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#9a7372
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 meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#9a7372
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 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#875f5f
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 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 meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#875f5f
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 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 meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#009799
text.html.markdown, punctuation.definition.list_item.markdown#4e4e4e
text.html.markdown markup.inline.raw.markdown#875f5f
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#719872
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#009799
markup.italic#875f5fitalic
markup.bold, markup.bold string#875f5fbold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#875f5fbold
markup.underline#875f5funderline
markup.quote punctuation.definition.blockquote.markdown#719872
markup.quoteitalic
string.other.link.title.markdown#9a7372
string.other.link.description.title.markdown#875f5f
constant.other.reference.link.markdown#9a7200
markup.raw.block#875f5f
markup.raw.block.fenced.markdown#c8c8c8
punctuation.definition.fenced.markdown#c8c8c8
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#4e4e4e
variable.language.fenced.markdown#719872
meta.separator#719872bold
markup.table#4e4e4e

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Neo Seoul Theme - Coding Theme