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.substitution—italic
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.italic—italic
markup.bold, markup.bold string—bold
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—italic 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—
sjsepan.matrixish by sjsepan - VS Code Theme