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.string.begin#00ff6abold
variable, string constant.other.placeholder#029516
constant.other.color#00ff00
invalid, invalid.illegal#00ff8c
keyword, storage.type, storage.modifier#18ab1d
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#066d0a
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#06be00b5
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#36e774ef
meta.block variable.other#00ff1e95
support.other.variable, string.other.link#088835
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#00ff0080
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#c2e88d
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#8eff6b
support.type#00ff1e
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#1c6509
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#026813
variable.language#FF5370italic
entity.name.method.js#03be00italic
meta.class-method.js entity.name.function.js, variable.function.constructor#91ff82
entity.other.attribute-name#018331
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#0b9f06italic
entity.other.attribute-name.class#00ff08bb
source.sass keyword.control#0b7705
markup.inserted#4a7c00
markup.deleted#00ff15c9
markup.changed#70e332
string.regexp#036d15
constant.character.escape#46a21c
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#2eba12italic
source.js constant.other.object.key.js string.unquoted.label.js#2acf0ditalic
source.json meta.structure.dictionary.json support.type.property-name.json#15ff00
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#04ff00
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#04ff00bc
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#04ff009e
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#04ff0087
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#037e15e2
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#037e15d0
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#037e159a
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#026211c1
text.html.markdown, punctuation.definition.list_item.markdown#14c308
text.html.markdown markup.inline.raw.markdown#1dad07
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#01b92f
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#40ff00
markup.italic#00f721italic
markup.bold, markup.bold string#00ff11bold
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#03d218bold
markup.underline#06d422underline
markup.quote punctuation.definition.blockquote.markdown#03722a
markup.quoteitalic
string.other.link.title.markdown#127227
string.other.link.description.title.markdown#06ca10
constant.other.reference.link.markdown#34b305
markup.raw.block#26c60d
markup.raw.block.fenced.markdown#67ff08ac
punctuation.definition.fenced.markdown#07bd16
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#5bc703
variable.language.fenced.markdown#3ce000
meta.separator#0db10da0bold
markup.table#07a92a