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#031f05
  • activityBar.border#07641b
  • activityBar.foreground#0fcf24
  • activityBar.inactiveForeground#0fcf2490
  • activityBarBadge.background#0fcf249b
  • activityBarBadge.foreground#000000
  • badge.background#0fcf249b
  • badge.foreground#000000
  • breadcrumb.activeSelectionForeground#0fcf24
  • breadcrumb.background#031f05
  • breadcrumb.focusForeground#10e729
  • breadcrumb.foreground#0fcf24
  • button.background#053009
  • button.border#07641b
  • button.foreground#0fcf24
  • button.hoverBackground#043a0a
  • button.secondaryBackground#000000
  • button.secondaryForeground#0fcf24
  • button.secondaryHoverBackground#006600
  • checkbox.background#000000
  • checkbox.border#000000
  • checkbox.foreground#0fcf24
  • debugExceptionWidget.background#031f05
  • debugExceptionWidget.border#0fcf24
  • debugIcon.breakpointCurrentStackframeForeground#bbffbb
  • debugIcon.breakpointDisabledForeground#008800
  • debugIcon.breakpointForeground#00cc00
  • debugIcon.breakpointStackframeForeground#88ff88
  • debugIcon.breakpointUnverifiedForeground#008800
  • debugIcon.continueForeground#88ff88
  • debugIcon.disconnectForeground#b40000
  • debugIcon.pauseForeground#00cc00
  • debugIcon.restartForeground#88ff88
  • debugIcon.startForeground#88ff88
  • debugIcon.stepBackForeground#00cc00
  • debugIcon.stepIntoForeground#00cc00
  • debugIcon.stepOutForeground#00cc00
  • debugIcon.stepOverForeground#00cc00
  • debugIcon.stopForeground#b40000
  • debugTokenExpression.boolean#88ff88
  • debugTokenExpression.error#b40000
  • debugTokenExpression.name#00cc00
  • debugTokenExpression.number#88ff88
  • debugTokenExpression.string#88ff88
  • debugTokenExpression.value#88ff88
  • debugToolBar.background#000000
  • debugToolBar.border#0fcf24
  • diffEditor.border#000000
  • diffEditor.insertedTextBackground#011b03ee
  • diffEditor.insertedTextBorder#000000
  • diffEditor.removedTextBackground#011b03ee
  • diffEditor.removedTextBorder#000000
  • dropdown.background#000000
  • dropdown.border#000000
  • dropdown.foreground#0fcf24
  • editor.background#000000
  • editor.findMatchBackground#000000
  • editor.findMatchBorder#0fcf24
  • editor.findMatchHighlightBackground#006600ee
  • editor.findMatchHighlightBorder#006600
  • editor.findRangeHighlightBackground#011b03ee
  • editor.findRangeHighlightBorder#00000000
  • editor.foldBackground#011b03ee
  • editor.foreground#0fcf24
  • editor.hoverHighlightBackground#092e0dee
  • editor.inactiveSelectionBackground#022405ee
  • editor.lineHighlightBackground#011b03
  • editor.lineHighlightBorder#0fcf2460
  • editor.rangeHighlightBackground#0000000b
  • editor.rangeHighlightBorder#00000000
  • editor.selectionBackground#0fcf2440
  • editor.selectionHighlightBackground#0fcf2460
  • editor.selectionHighlightBorder#0fcf24
  • editor.wordHighlightBackground#000000b8
  • editor.wordHighlightBorder#0fcf24
  • editor.wordHighlightStrongBackground#000000ee
  • editor.wordHighlightStrongBorder#0fcf24
  • editorBracketMatch.background#000000
  • editorBracketMatch.border#0fcf24
  • editorCodeLens.foreground#006600
  • editorCursor.background#0fcf24
  • editorCursor.foreground#0fcf24
  • editorError.background#011b03ee
  • editorError.border#00000000
  • editorError.foreground#0fcf24
  • editorGroup.border#07641b
  • editorGroup.emptyBackground#000000
  • editorGroupHeader.border#07641b
  • editorGroupHeader.tabsBackground#000000
  • editorGroupHeader.tabsBorder#000000
  • editorGutter.addedBackground#0fcf24
  • editorGutter.background#031F05
  • editorGutter.commentRangeForeground#0fcf24
  • editorGutter.deletedBackground#0fcf24
  • editorGutter.foldingControlForeground#0fcf24
  • editorGutter.modifiedBackground#0fcf24
  • editorHoverWidget.background#031f05
  • editorHoverWidget.border#0fcf24
  • editorHoverWidget.foreground#0fcf24
  • editorIndentGuide.activeBackground1#0fcf24
  • editorIndentGuide.background1#0fcf24
  • editorInfo.background#011b03ee
  • editorInfo.border#00000000
  • editorInfo.foreground#0fcf24
  • editorLineNumber.activeForeground#0fcf24
  • editorLineNumber.foreground#0fcf2490
  • editorLink.activeForeground#0fcf24
  • editorMarkerNavigation.background#000000
  • editorMarkerNavigationError.background#0fcf24
  • editorMarkerNavigationInfo.background#0fcf24
  • editorMarkerNavigationWarning.background#0fcf24
  • editorOverviewRuler.background#000000
  • editorOverviewRuler.border#000000
  • editorRuler.foreground#000000
  • editorSuggestWidget.background#031f05
  • editorSuggestWidget.border#0fcf24
  • editorSuggestWidget.foreground#006600
  • editorSuggestWidget.highlightForeground#0fcf24
  • editorSuggestWidget.selectedBackground#011b03
  • editorWarning.background#00000000
  • editorWarning.border#000000
  • editorWarning.foreground#006600
  • editorWhitespace.foreground#0fcf24
  • editorWidget.background#031f05
  • editorWidget.foreground#0fcf24
  • editorWidget.resizeBorder#022004
  • focusBorder#0fcf24
  • foreground#0fcf24
  • gitDecoration.addedResourceForeground#bbffbb
  • gitDecoration.conflictingResourceForeground#b40000
  • gitDecoration.deletedResourceForeground#420000
  • gitDecoration.ignoredResourceForeground#006600
  • gitDecoration.modifiedResourceForeground#88ff88
  • gitDecoration.stageDeletedResourceForeground#0fcf24
  • gitDecoration.stageModifiedResourceForeground#0fcf24
  • gitDecoration.submoduleResourceForeground#008800
  • gitDecoration.untrackedResourceForeground#008800
  • icon.foreground#0fcf24
  • input.background#031f05
  • input.border#0fcf2490
  • input.foreground#0fcf24
  • input.placeholderForeground#0fcf2490
  • inputOption.activeBackground#06730d
  • inputOption.activeBorder#0fcf24
  • inputOption.activeForeground#0fcf24
  • keybindingLabel.background#000000
  • keybindingLabel.foreground#0fcf24
  • list.activeSelectionBackground#045209
  • list.activeSelectionForeground#0fcf24
  • list.dropBackground#011b03
  • list.focusBackground#011b03
  • list.focusForeground#006600
  • list.highlightForeground#0fcf24
  • list.hoverBackground#033006
  • list.hoverForeground#0fcf24
  • list.inactiveSelectionBackground#022405
  • list.inactiveSelectionForeground#0fcf24
  • listFilterWidget.background#031f05
  • listFilterWidget.noMatchesOutline#0fcf24
  • listFilterWidget.outline#0fcf24
  • menu.background#000000
  • menu.border#0fcf24
  • menu.foreground#0fcf24
  • menu.selectionBackground#094771
  • menu.selectionBorder#00000000
  • menu.selectionForeground#000000
  • menu.separatorBackground#0fcf24
  • menubar.selectionBackground#000000
  • menubar.selectionBorder#0fcf24
  • menubar.selectionForeground#0fcf24
  • merge.commonContentBackground#011b03ee
  • merge.commonHeaderBackground#011b03ee
  • merge.currentContentBackground#011b03ee
  • merge.currentHeaderBackground#011b03ee
  • merge.incomingContentBackground#011b03ee
  • merge.incomingHeaderBackground#011b03ee
  • minimap.background#031F05
  • minimap.errorHighlight#0fcf24
  • minimap.findMatchHighlight#000000ee
  • minimap.selectionHighlight#06600e90
  • minimap.warningHighlight#006600
  • minimapGutter.addedBackground#0fcf24
  • minimapGutter.deletedBackground#0fcf24
  • minimapGutter.modifiedBackground#0fcf24
  • minimapSlider.activeBackground#ffffff40
  • minimapSlider.background#ffffff20
  • minimapSlider.hoverBackground#ffffff60
  • notebook.cellHoverBackground#003300
  • notebook.cellInsertionIndicator#88ff88
  • notebook.cellStatusBarItemHoverBackground#006600
  • notebook.cellToolbarSeparator#008800
  • notebook.focusedCellBackground#000000
  • notebook.focusedCellBorder#00cc00
  • notebook.focusedEditorBorder#00cc00
  • notebook.outputContainerBackgroundColor#000000
  • notebook.symbolHighlightBackground#003300
  • notebookScrollbarSlider.activeBackground#008800
  • notebookScrollbarSlider.background#00660080
  • notebookScrollbarSlider.hoverBackground#008800
  • notebookStatusErrorIcon.foreground#b40000
  • notebookStatusRunningIcon.foreground#88ff88
  • notebookStatusSuccessIcon.foreground#ddffdd
  • notificationCenter.border#0fcf24
  • notificationCenterHeader.background#031f05
  • notificationCenterHeader.foreground#0fcf24
  • notifications.background#031f05
  • notifications.border#0fcf24
  • notifications.foreground#0fcf24
  • notificationsErrorIcon.foreground#0fcf24
  • notificationsInfoIcon.foreground#0fcf24
  • notificationsWarningIcon.foreground#0fcf24
  • notificationToast.border#0fcf24
  • panel.background#031f05
  • panel.border#07641b
  • panelSection.border#0fcf24
  • panelTitle.activeBorder#0fcf24
  • panelTitle.activeForeground#0fcf24
  • panelTitle.inactiveForeground#006600
  • peekView.border#0fcf24
  • peekViewEditor.background#011b03
  • peekViewEditor.matchHighlightBackground#00000099
  • peekViewEditor.matchHighlightBorder#0fcf24
  • peekViewEditorGutter.background#011b03
  • peekViewResult.background#000000
  • peekViewResult.fileForeground#0fcf24
  • peekViewResult.lineForeground#0fcf24
  • peekViewResult.matchHighlightBackground#011b03
  • peekViewResult.selectionBackground#011b03
  • peekViewResult.selectionForeground#0fcf24
  • peekViewTitle.background#000000
  • peekViewTitleDescription.foreground#0fcf24
  • peekViewTitleLabel.foreground#0fcf24
  • pickerGroup.border#0fcf24
  • pickerGroup.foreground#0fcf24
  • problemsErrorIcon.foreground#b40000
  • problemsInfoIcon.foreground#88ff88
  • problemsWarningIcon.foreground#cccc00
  • profileBadge.background#0fcf249b
  • profileBadge.foreground#000000
  • progressBar.background#0fcf24
  • scmGraph.foreground1default
  • scmGraph.foreground2default
  • scmGraph.foreground3default
  • scmGraph.foreground4default
  • scmGraph.foreground5default
  • scmGraph.historyItemBaseRefColordefault
  • scmGraph.historyItemHoverAdditionsForegrounddefault
  • scmGraph.historyItemHoverDefaultLabelBackgrounddefault
  • scmGraph.historyItemHoverDefaultLabelForegrounddefault
  • scmGraph.historyItemHoverDeletionsForegrounddefault
  • scmGraph.historyItemHoverLabelForegrounddefault
  • scmGraph.historyItemRefColor#128d20
  • scmGraph.historyItemRemoteRefColordefault
  • scrollbar.shadow#0fcf24dd
  • scrollbarSlider.activeBackground#ffffff40
  • scrollbarSlider.background#ffffff20
  • scrollbarSlider.hoverBackground#ffffff60
  • selection.background#034407
  • settings.checkboxBackground#000000
  • settings.checkboxBorder#00cc00
  • settings.checkboxForeground#00cc00
  • settings.dropdownBackground#000000
  • settings.dropdownBorder#00cc00
  • settings.dropdownForeground#00cc00
  • settings.dropdownListBorder#00cc00
  • settings.focusedRowBackground#ffffff07
  • settings.headerForeground#88ff88
  • settings.modifiedItemIndicator#88ff88
  • settings.numberInputBackground#000000
  • settings.numberInputBorder#00cc00
  • settings.numberInputForeground#00cc00
  • settings.textInputBackground#000000
  • settings.textInputBorder#00cc00
  • settings.textInputForeground#00cc00
  • sideBar.background#000000
  • sideBar.border#07641b
  • sideBar.dropBackground#011b03
  • sideBar.foreground#0fcf24
  • sideBarSectionHeader.background#031f05
  • sideBarSectionHeader.border#07641b80
  • sideBarSectionHeader.foreground#0bec24
  • sideBarTitle.foreground#0fcf24
  • statusBar.background#031f05
  • statusBar.border#07641b
  • statusBar.debuggingBackground#031f05
  • statusBar.debuggingBorder#07641b
  • statusBar.debuggingForeground#0fcf24
  • statusBar.foreground#0fcf24
  • statusBar.noFolderBackground#031f05
  • statusBar.noFolderBorder#07641b
  • statusBar.noFolderForeground#0fcf24
  • statusBarItem.activeBackground#FFFFFF25
  • statusBarItem.hoverBackground#0fcf241f
  • statusBarItem.prominentBackground#00cc00
  • statusBarItem.prominentForeground#000000
  • statusBarItem.prominentHoverBackground#88ff88
  • statusBarItem.remoteBackground#000000
  • statusBarItem.remoteForeground#0fcf24
  • symbolIcon.arrayForeground#88ff88
  • symbolIcon.booleanForeground#88ff88
  • symbolIcon.classForeground#88ff88
  • symbolIcon.colorForeground#88ff88
  • symbolIcon.constantForeground#88ff88
  • symbolIcon.constructorForeground#88ff88
  • symbolIcon.enumeratorForeground#88ff88
  • symbolIcon.enumeratorMemberForeground#88ff88
  • symbolIcon.eventForeground#88ff88
  • symbolIcon.fieldForeground#88ff88
  • symbolIcon.fileForeground#ddffdd
  • symbolIcon.folderForeground#ddffdd
  • symbolIcon.functionForeground#88ff88
  • symbolIcon.interfaceForeground#88ff88
  • symbolIcon.keyForeground#88ff88
  • symbolIcon.keywordForeground#88ff88
  • symbolIcon.methodForeground#88ff88
  • symbolIcon.moduleForeground#bbffbb
  • symbolIcon.namespaceForeground#88ff88
  • symbolIcon.nullForeground#88ff88
  • symbolIcon.numberForeground#88ff88
  • symbolIcon.objectForeground#88ff88
  • symbolIcon.operatorForeground#88ff88
  • symbolIcon.packageForeground#bbffbb
  • symbolIcon.propertyForeground#88ff88
  • symbolIcon.referenceForeground#88ff88
  • symbolIcon.snippetForeground#bbffbb
  • symbolIcon.stringForeground#88ff88
  • symbolIcon.structForeground#88ff88
  • symbolIcon.textForeground#88ff88
  • symbolIcon.typeParameterForeground#88ff88
  • symbolIcon.unitForeground#88ff88
  • symbolIcon.variableForeground#88ff88
  • tab.activeBackground#031f05
  • tab.activeBorder#0fcf24
  • tab.activeBorderTop#07641b
  • tab.activeForeground#07641b
  • tab.border#07641b
  • tab.hoverBackground#0fcf2490
  • tab.hoverBorder#000000
  • tab.hoverForeground#000000
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#0fcf2490
  • terminal.ansiBlack#003300
  • terminal.ansiBlue#003fff
  • terminal.ansiBrightBlack#006600
  • terminal.ansiBrightBlue#003fff
  • terminal.ansiBrightCyan#008888
  • terminal.ansiBrightGreen#88ff88
  • terminal.ansiBrightMagenta#880088
  • terminal.ansiBrightRed#b40000
  • terminal.ansiBrightWhite#ddffdd
  • terminal.ansiBrightYellow#888800
  • terminal.ansiCyan#008888
  • terminal.ansiGreen#00cc00
  • terminal.ansiMagenta#880088
  • terminal.ansiRed#b40000
  • terminal.ansiWhite#bbffbb
  • terminal.ansiYellow#cccc00
  • terminal.background#080808
  • terminal.border#008800
  • terminal.foreground#00cc00
  • terminal.selectionBackground#003300
  • terminalCursor.background#000000
  • terminalCursor.foreground#0fcf24
  • textLink.foreground#006600
  • titleBar.activeBackground#031f05
  • titleBar.activeForeground#0fcf24
  • titleBar.border#07641b
  • titleBar.inactiveBackground#031f05
  • titleBar.inactiveForeground#0fcf2490
  • tree.indentGuidesStroke#0fcf24
  • walkThrough.embeddedEditorBackground#00000050
  • widget.shadow#0fcf24c0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#006600italic
variable, string constant.other.placeholder#00cc00
constant.other.color#bbffbb
invalid, invalid.illegal#b40000
keyword, storage.type, storage.modifier#88ff88italic
keyword#bbffbb
punctuation, punctuation.terminator#88ff88
keyword.control, constant.other.color, 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#88ff88
keyword.control, constant.other.color, keyword.other.template, keyword.other.substitutionitalic
punctuation.definition.string#88ff88
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#bbffbb
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#00cc00
meta.function-call, variable.function, support.function, keyword.other.special-method#88ff88
meta.block variable.other#00cc00
support.other.variable, string.other.link#88ff88
variable.parameter#00cc00
constant.language, constant.numeric, constant.character, constant.escape, support.constant#88ff88
keyword.other.unit#88ff88
keyword.other#ddffdditalic bold
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#88ff88
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#88ff88bold
support.type#008800italic
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#00cc00
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#00cc00
variable.language#00cc00
entity.name.method.js#00cc00italic
meta.class-method.js entity.name.function.js, variable.function.constructor#88ff88italic
entity.other.attribute-name#00cc00
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#00cc00
entity.other.attribute-name.class#88ff88italic
source.sass keyword.control#88ff88italic bold
markup.inserted#88ff88
markup.deleted#b40000
markup.changed#00cc00
string.regexp#88ff88italic
constant.character.escape#008800
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#88ff88italic
source.js constant.other.object.key.js string.unquoted.label.js#88ff88italic
source.json meta.structure.dictionary.json support.type.property-name.json#00cc00
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#00cc00
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#00cc00
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#00cc00
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#00cc00
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#00cc00
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#00cc00
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#00cc00
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#00cc00
text.html.markdown, punctuation.definition.list_item.markdown#00cc00
text.html.markdown markup.inline.raw.markdown#006600
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#008800
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#bbffbbbold
markup.italicitalic
markup.bold, markup.bold stringbold
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 stringitalic bold
markup.underline#88ff88underline
markup.quote punctuation.definition.blockquote.markdown#008800
markup.quote#008800italic
string.other.link.title.markdown#bbffbbitalic
string.other.link.description.title.markdown#88ff88
constant.other.reference.link.markdown#88ff88
markup.raw.block#006600
markup.raw.block.fenced.markdown#003300
punctuation.definition.fenced.markdown#00cc00
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#88ff88
variable.language.fenced.markdown#bbffbb
meta.separator#00cc00bold
markup.table#008800