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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#719872italic
variable, string constant.other.placeholder#d0d0d0
constant.other.color#ffd787
invalid, invalid.illegal#e12672
keyword, storage.type, storage.modifier#e19972
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#98bcbd
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#e17899
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#dfdebd
meta.block variable.other#e17899
support.other.variable, string.other.link#e17899
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#ffd787
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#98bcbd
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#ffd787
support.type#999abf
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#999abf
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#e12672
variable.language#e12672italic
entity.name.method.js#dfdebditalic
meta.class-method.js entity.name.function.js, variable.function.constructor#dfdebd
entity.other.attribute-name#e19972
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#ffd787italic
entity.other.attribute-name.class#ffd787
source.sass keyword.control#dfdebd
markup.inserted#719872
markup.deleted#e12672
markup.changed#e19972
string.regexp#98bcbd
constant.character.escape#98bcbd
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#dfdebditalic
source.js constant.other.object.key.js string.unquoted.label.js#e12672italic
source.json meta.structure.dictionary.json support.type.property-name.json#e19972
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ffd787
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#e19972
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#e12672
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#be9873
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#ffd787
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#e17899
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#e19972
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#98bcbd
text.html.markdown, punctuation.definition.list_item.markdown#d0d0d0
text.html.markdown markup.inline.raw.markdown#e19972
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#98bcbd
markup.italic#e17899italic
markup.bold, markup.bold string#e17899bold
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#e17899bold
markup.underline#ffd787underline
markup.quote punctuation.definition.blockquote.markdown#719872
markup.quoteitalic
string.other.link.title.markdown#dfdebd
string.other.link.description.title.markdown#e19972
constant.other.reference.link.markdown#ffd787
markup.raw.block#e19972
markup.raw.block.fenced.markdown#565656
punctuation.definition.fenced.markdown#565656
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#d0d0d0
variable.language.fenced.markdown#719872
meta.separator#719872bold
markup.table#d0d0d0

Shiki preview

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

Loading...

Neo Seoul Theme - Coding Theme