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#ffffff
  • activityBar.border#d0d7de
  • activityBar.foreground#1f2328
  • activityBar.inactiveForeground#656d76
  • activityBarBadge.foreground#ffffff
  • badge.background#0969da
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#656d76
  • breadcrumb.focusForeground#1f2328
  • breadcrumb.foreground#656d76
  • breadcrumbPicker.background#ffffff
  • button.secondaryBackground#ebecf0
  • button.secondaryForeground#24292f
  • button.secondaryHoverBackground#f3f4f6
  • checkbox.background#f6f8fa
  • checkbox.border#d0d7de
  • debugConsole.errorForeground#cf222e
  • debugConsole.infoForeground#57606a
  • debugConsole.sourceForeground#9a6700
  • debugConsole.warningForeground#7d4e00
  • debugConsoleInputIcon.foreground#6639ba
  • debugIcon.breakpointForeground#cf222e
  • debugTokenExpression.boolean#116329
  • debugTokenExpression.error#a40e26
  • debugTokenExpression.name#0550ae
  • debugTokenExpression.number#116329
  • debugTokenExpression.string#0a3069
  • debugTokenExpression.value#0a3069
  • debugToolBar.background#ffffff
  • descriptionForeground#656d76
  • diffEditor.insertedLineBackground#aceebb4d
  • diffEditor.insertedTextBackground#6fdd8b80
  • diffEditor.removedLineBackground#ffcecb4d
  • diffEditor.removedTextBackground#ff818266
  • dropdown.background#ffffff
  • dropdown.border#d0d7de
  • dropdown.foreground#1f2328
  • dropdown.listBackground#ffffff
  • editor.background#ffffff
  • editor.findMatchBackground#bf8700
  • editor.findMatchHighlightBackground#fae17d80
  • editor.focusedStackFrameHighlightBackground#4ac26b66
  • editor.foldBackground#6e77811a
  • editor.foreground#1f2328
  • editor.lineHighlightBackground#eaeef280
  • editor.linkedEditingBackground#0969da12
  • editor.selectionHighlightBackground#4ac26b40
  • editor.stackFrameHighlightBackground#d4a72c66
  • editor.wordHighlightBackground#eaeef280
  • editor.wordHighlightBorder#afb8c199
  • editor.wordHighlightStrongBackground#afb8c14d
  • editor.wordHighlightStrongBorder#afb8c199
  • editorBracketHighlight.foreground1#0969da
  • editorBracketHighlight.foreground2#1a7f37
  • editorBracketHighlight.foreground3#9a6700
  • editorBracketHighlight.foreground4#cf222e
  • editorBracketHighlight.foreground5#bf3989
  • editorBracketHighlight.foreground6#8250df
  • editorBracketHighlight.unexpectedBracket.foreground#656d76
  • editorBracketMatch.background#4ac26b40
  • editorBracketMatch.border#4ac26b99
  • editorCursor.foreground#0969da
  • editorGroup.border#d0d7de
  • editorGroupHeader.tabsBackground#f6f8fa
  • editorGroupHeader.tabsBorder#d0d7de
  • editorGutter.addedBackground#4ac26b66
  • editorGutter.deletedBackground#ff818266
  • editorGutter.modifiedBackground#d4a72c66
  • editorIndentGuide.activeBackground#1f23283d
  • editorIndentGuide.background#1f23281f
  • editorInlayHint.background#afb8c133
  • editorInlayHint.foreground#656d76
  • editorInlayHint.paramBackground#afb8c133
  • editorInlayHint.paramForeground#656d76
  • editorInlayHint.typeBackground#afb8c133
  • editorInlayHint.typeForeground#656d76
  • editorLineNumber.activeForeground#1f2328
  • editorLineNumber.foreground#8c959f
  • editorOverviewRuler.border#ffffff
  • editorWhitespace.foreground#afb8c1
  • editorWidget.background#ffffff
  • errorForeground#cf222e
  • focusBorder#0969da
  • foreground#1f2328
  • gitDecoration.addedResourceForeground#1a7f37
  • gitDecoration.conflictingResourceForeground#bc4c00
  • gitDecoration.deletedResourceForeground#cf222e
  • gitDecoration.ignoredResourceForeground#6e7781
  • gitDecoration.modifiedResourceForeground#9a6700
  • gitDecoration.submoduleResourceForeground#656d76
  • gitDecoration.untrackedResourceForeground#1a7f37
  • icon.foreground#656d76
  • input.background#ffffff
  • input.border#d0d7de
  • input.foreground#1f2328
  • input.placeholderForeground#6e7781
  • keybindingLabel.foreground#1f2328
  • list.activeSelectionBackground#afb8c133
  • list.activeSelectionForeground#1f2328
  • list.focusBackground#ddf4ff
  • list.focusForeground#1f2328
  • list.highlightForeground#0969da
  • list.hoverBackground#eaeef280
  • list.hoverForeground#1f2328
  • list.inactiveFocusBackground#ddf4ff
  • list.inactiveSelectionBackground#afb8c133
  • list.inactiveSelectionForeground#1f2328
  • minimapSlider.activeBackground#8c959f47
  • minimapSlider.background#8c959f33
  • minimapSlider.hoverBackground#8c959f3d
  • notificationCenterHeader.background#f6f8fa
  • notificationCenterHeader.foreground#656d76
  • notifications.background#ffffff
  • notifications.border#d0d7de
  • notifications.foreground#1f2328
  • notificationsErrorIcon.foreground#cf222e
  • notificationsInfoIcon.foreground#0969da
  • notificationsWarningIcon.foreground#9a6700
  • panel.background#f6f8fa
  • panel.border#d0d7de
  • panelInput.border#d0d7de
  • panelTitle.activeBorder#fd8c73
  • panelTitle.activeForeground#1f2328
  • panelTitle.inactiveForeground#656d76
  • pickerGroup.border#d0d7de
  • pickerGroup.foreground#656d76
  • progressBar.background#0969da
  • quickInput.background#ffffff
  • quickInput.foreground#1f2328
  • scrollbar.shadow#6e778133
  • scrollbarSlider.activeBackground#8c959f47
  • scrollbarSlider.background#8c959f33
  • scrollbarSlider.hoverBackground#8c959f3d
  • settings.headerForeground#1f2328
  • settings.modifiedItemIndicator#d4a72c66
  • sideBar.background#f6f8fa
  • sideBar.border#d0d7de
  • sideBar.foreground#1f2328
  • sideBarSectionHeader.background#f6f8fa
  • sideBarSectionHeader.border#d0d7de
  • sideBarSectionHeader.foreground#1f2328
  • sideBarTitle.foreground#1f2328
  • statusBar.background#ffffff
  • statusBar.border#d0d7de
  • statusBar.debuggingBackground#cf222e
  • statusBar.debuggingForeground#ffffff
  • statusBar.focusBorder#0969da80
  • statusBar.foreground#656d76
  • statusBar.noFolderBackground#ffffff
  • statusBarItem.activeBackground#1f23281f
  • statusBarItem.focusBorder#0969da
  • statusBarItem.hoverBackground#1f232814
  • statusBarItem.prominentBackground#afb8c133
  • statusBarItem.remoteBackground#60003d
  • statusBarItem.remoteForeground#ffffffde
  • symbolIcon.arrayForeground#953800
  • symbolIcon.booleanForeground#0550ae
  • symbolIcon.classForeground#953800
  • symbolIcon.colorForeground#0a3069
  • symbolIcon.constantForeground#116329
  • symbolIcon.constructorForeground#3e1f79
  • symbolIcon.enumeratorForeground#953800
  • symbolIcon.enumeratorMemberForeground#0550ae
  • symbolIcon.eventForeground#57606a
  • symbolIcon.fieldForeground#953800
  • symbolIcon.fileForeground#7d4e00
  • symbolIcon.folderForeground#7d4e00
  • symbolIcon.functionForeground#6639ba
  • symbolIcon.interfaceForeground#953800
  • symbolIcon.keyForeground#0550ae
  • symbolIcon.keywordForeground#a40e26
  • symbolIcon.methodForeground#6639ba
  • symbolIcon.moduleForeground#a40e26
  • symbolIcon.namespaceForeground#a40e26
  • symbolIcon.nullForeground#0550ae
  • symbolIcon.numberForeground#116329
  • symbolIcon.objectForeground#953800
  • symbolIcon.operatorForeground#0a3069
  • symbolIcon.packageForeground#953800
  • symbolIcon.propertyForeground#953800
  • symbolIcon.referenceForeground#0550ae
  • symbolIcon.snippetForeground#0550ae
  • symbolIcon.stringForeground#0a3069
  • symbolIcon.structForeground#953800
  • symbolIcon.textForeground#0a3069
  • symbolIcon.typeParameterForeground#0a3069
  • symbolIcon.unitForeground#0550ae
  • symbolIcon.variableForeground#953800
  • tab.activeBackground#ffffff
  • tab.activeBorder#ffffff
  • tab.activeForeground#1f2328
  • tab.border#d0d7de
  • tab.hoverBackground#ffffff
  • tab.inactiveBackground#f6f8fa
  • tab.inactiveForeground#656d76
  • tab.unfocusedActiveBorder#ffffff
  • tab.unfocusedActiveBorderTop#d0d7de
  • tab.unfocusedHoverBackground#eaeef280
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#0e5ed8
  • terminal.ansiBrightBlack#212121
  • terminal.ansiBrightBlue#4c8fff
  • terminal.ansiBrightCyan#00a1a7
  • terminal.ansiBrightGreen#37a610
  • terminal.ansiBrightMagenta#cd67e4
  • terminal.ansiBrightRed#fa5662
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#be8808
  • terminal.ansiCyan#067277
  • terminal.ansiGreen#227601
  • terminal.ansiMagenta#9d37b3
  • terminal.ansiRed#c31636
  • terminal.ansiWhite#bababa
  • terminal.ansiYellow#875f02
  • terminal.background#fafafa
  • terminal.foreground#212121
  • terminal.selectionBackground#add6ff
  • terminalCursor.background#fafafa
  • terminalCursor.foreground#212121
  • textBlockQuote.background#f6f8fa
  • textBlockQuote.border#d0d7de
  • textCodeBlock.background#afb8c133
  • textLink.activeForeground#0969da
  • textLink.foreground#0969da
  • textPreformat.background#afb8c133
  • textPreformat.foreground#656d76
  • textSeparator.foreground#d8dee4
  • titleBar.activeBackground#ffffff
  • titleBar.activeForeground#656d76
  • titleBar.border#d0d7de
  • titleBar.inactiveBackground#f6f8fa
  • titleBar.inactiveForeground#656d76
  • tree.indentGuidesStroke#d8dee4
  • welcomePage.buttonBackground#f6f8fa
  • welcomePage.buttonHoverBackground#f3f4f6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, string.quoted.docstring#646464italic
constant#9d37b3
entity#227601
keyword#c31636
storage#0e5ed8
string#875f02
support#067277
variable#212121
invalidstrikethrough
entity.other.inherited-class#227601italic
string.quoted source#875f02
string constant#9d37b3
string.regexp#0e5ed8
string variable#212121
support.function#0e5ed8
support.constant#227601
other.preprocessor.c#0e5ed8
other.preprocessor.c entity#227601
punctuation.separator.key-value.js#9d37b3
meta.object-literal.key.js#875f02
entity.name.tag#c31636
entity.other.attribute-name#227601
declaration.tag, declaration.tag entity, meta.tag, meta.tag entity#212121
meta.selector.css entity.name.tag#227601
meta.selector.css entity.other.attribute-name.id#227601
meta.selector.css entity.other.attribute-name.class#227601
support.type.property-name.css#0e5ed8
meta.property-group support.constant.property-value.css, meta.property-value support.constant.property-value.css#227601 italic
meta.preprocessor.at-rule keyword.control.at-rule#875f02
meta.property-value support.constant.named-color.css, meta.property-value constant#c31636
meta.constructor.argument.css#c31636
meta.diff, meta.diff.header#212121italic
markup.deleted#c31636
markup.changed#875f02
markup.inserted#227601
entity.other.attribute-name.id.html#227601
entity.other.attribute-name.html#227601
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#212121
keyword.control.at-rule.import.css#875f02
variable.other.less#212121
entity.other.less.mixin#9d37b3
source.css.less keyword.unit.css#0e5ed8
entity.other.attribute-name.angular.html, source.angular.embedded.html#c31636
constant.character.entity.html#0e5ed8
variable.other.readwrite.instance.coffee#875f02
meta.brace.round.coffee, meta.brace.square.coffee#875f02
punctuation.section.embedded.coffee#067277
variable.assignment.coffee variable.assignment.coffee#212121
meta.delimiter.method.period.coffee#0e5ed8
meta.brace.curly.coffee#227601
meta.tag.sgml.doctype.xml, declaration.sgml.html declaration.doctype, declaration.sgml.html declaration.doctype entity, declaration.sgml.html declaration.doctype string, declaration.xml-processing, declaration.xml-processing entity, declaration.xml-processing string, doctype#0e5ed8
punctuation.definition.heading.markdown, punctuation.definition.quote.begin.markdown, punctuation.definition.list.begin.markdown#875f02
markup.heading.markdown entity.name.section.markdown#9d37b3
markup.bold.markdownbold
markup.italic.markdownitalic
markup.strikethrough.markdownstrikethrough
string.other.link.title.markdown#0e5ed8
markup.underline.link.markdown#646464underline
comment, string.quoted.docstring#646464italic
constant#9d37b3
entity#227601
keyword#c31636
storage#0e5ed8
string#875f02
support#067277
variable#212121
invalidstrikethrough
entity.other.inherited-class#227601italic
string.quoted source#875f02
string constant#9d37b3
string.regexp#0e5ed8
string variable#212121
support.function#0e5ed8
support.constant#227601
other.preprocessor.c#0e5ed8
other.preprocessor.c entity#227601
punctuation.separator.key-value.js#9d37b3
meta.object-literal.key.js#875f02
entity.name.tag#c31636
entity.other.attribute-name#227601
declaration.tag, declaration.tag entity, meta.tag, meta.tag entity#212121
meta.selector.css entity.name.tag#227601
meta.selector.css entity.other.attribute-name.id#227601
meta.selector.css entity.other.attribute-name.class#227601
support.type.property-name.css#0e5ed8
meta.property-group support.constant.property-value.css, meta.property-value support.constant.property-value.css#227601 italic
meta.preprocessor.at-rule keyword.control.at-rule#875f02
meta.property-value support.constant.named-color.css, meta.property-value constant#c31636
meta.constructor.argument.css#c31636
meta.diff, meta.diff.header#212121italic
markup.deleted#c31636
markup.changed#875f02
markup.inserted#227601
entity.other.attribute-name.id.html#227601
entity.other.attribute-name.html#227601
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#212121
keyword.control.at-rule.import.css#875f02
variable.other.less#212121
entity.other.less.mixin#9d37b3
source.css.less keyword.unit.css#0e5ed8
entity.other.attribute-name.angular.html, source.angular.embedded.html#c31636
constant.character.entity.html#0e5ed8
variable.other.readwrite.instance.coffee#875f02
meta.brace.round.coffee, meta.brace.square.coffee#875f02
punctuation.section.embedded.coffee#067277
variable.assignment.coffee variable.assignment.coffee#212121
meta.delimiter.method.period.coffee#0e5ed8
meta.brace.curly.coffee#227601
meta.tag.sgml.doctype.xml, declaration.sgml.html declaration.doctype, declaration.sgml.html declaration.doctype entity, declaration.sgml.html declaration.doctype string, declaration.xml-processing, declaration.xml-processing entity, declaration.xml-processing string, doctype#0e5ed8
punctuation.definition.heading.markdown, punctuation.definition.quote.begin.markdown, punctuation.definition.list.begin.markdown#875f02
markup.heading.markdown entity.name.section.markdown#9d37b3
markup.bold.markdownbold
markup.italic.markdownitalic
markup.strikethrough.markdownstrikethrough
string.other.link.title.markdown#0e5ed8
markup.underline.link.markdown#646464underline
Tropical Time by Jack Jiang - VS Code Theme