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.activeBorder#61afef
  • activityBar.activeFocusBorder#61afef
  • activityBar.background#141925
  • activityBar.border#141925
  • activityBar.foreground#b3b1ad
  • activityBarBadge.background#e06c75
  • activityBarBadge.foreground#1f2430
  • badge.background#61afef
  • badge.foreground#1f2430
  • button.background#98c379
  • button.foreground#1f2430
  • button.hoverBackground#a6cc70
  • debugExceptionWidget.background#282c34
  • debugExceptionWidget.border#191e2a
  • debugToolBar.background#282c34
  • diffEditor.insertedTextBackground#bae67e26
  • diffEditor.removedTextBackground#f29e7426
  • dropdown.background#282c34
  • dropdown.border#373e4c
  • dropdown.foreground#abb2bf
  • editor.background#1f2430
  • editor.findMatchBackground#61afef0d
  • editor.findMatchBorder#61afef
  • editor.findMatchHighlightBackground#61afef0d
  • editor.findMatchHighlightBorder#61afef59
  • editor.findRangeHighlightBackground#262f3e
  • editor.findRangeHighlightBorder#1f243000
  • editor.foreground#dadbc0
  • editor.inactiveSelectionBackground#262f3e
  • editor.lineHighlightBackground#191e2a
  • editor.rangeHighlightBackground#191e2a
  • editor.selectionBackground#3d424d
  • editor.selectionHighlightBackground#262f3e
  • editor.selectionHighlightBorder#313e52
  • editor.wordHighlightBackground#262f3e
  • editor.wordHighlightStrongBackground#61afef33
  • editorBracketMatch.background#707a8c4d
  • editorBracketMatch.border#707a8c99
  • editorCodeLens.foreground#5c6773
  • editorCursor.foreground#e06c75
  • editorError.foreground#ff3333
  • editorGroup.border#191e2a
  • editorGroup.emptyBackground#282c34
  • editorGroupHeader.noTabsBackground#1f2430
  • editorGroupHeader.tabsBackground#1f2430
  • editorGroupHeader.tabsBorder#282c34
  • editorGutter.addedBackground#a6cc7099
  • editorGutter.deletedBackground#f2798399
  • editorGutter.modifiedBackground#77a8d999
  • editorHoverWidget.background#282c34
  • editorHoverWidget.border#101521
  • editorHoverWidget.foreground#dadbc0
  • editorIndentGuide.activeBackground1#707a8cb3
  • editorIndentGuide.background1#707a8c4d
  • editorLineNumber.activeForeground#707a8ccc
  • editorLineNumber.foreground#707a8c66
  • editorLink.activeForeground#61afef
  • editorMarkerNavigation.background#282c34
  • editorOverviewRuler.addedForeground#a6cc7099
  • editorOverviewRuler.border#282c34
  • editorOverviewRuler.deletedForeground#f2798399
  • editorOverviewRuler.errorForeground#ff3333
  • editorOverviewRuler.modifiedForeground#77a8d999
  • editorOverviewRuler.warningForeground#e5c07b
  • editorRuler.foreground#707a8c4d
  • editorSuggestWidget.background#282c34
  • editorSuggestWidget.border#101521
  • editorSuggestWidget.foreground#dadbc0
  • editorSuggestWidget.highlightForeground#61afef
  • editorSuggestWidget.selectedBackground#191e2a
  • editorWarning.foreground#e5c07b
  • editorWhitespace.foreground#707a8c66
  • editorWidget.background#282c34
  • editorWidget.foreground#dadbc0
  • extensionButton.prominentBackground#61afef
  • extensionButton.prominentForeground#1f2430
  • extensionButton.prominentHoverBackground#61afef
  • focusBorder#505867
  • foreground#abb2bf
  • gitDecoration.conflictingResourceForeground#ed8274
  • gitDecoration.deletedResourceForeground#f27983b3
  • gitDecoration.ignoredResourceForeground#484f5e
  • gitDecoration.modifiedResourceForeground#a6cc70
  • gitDecoration.submoduleResourceForeground#d4bfffb3
  • gitDecoration.untrackedResourceForeground#d96c75
  • input.background#282c34
  • input.border#373e4c
  • input.foreground#dadbc0
  • input.placeholderForeground#586070
  • inputOption.activeBorder#61afef
  • inputValidation.errorBackground#1f2430
  • inputValidation.errorBorder#e06c75
  • inputValidation.infoBackground#1f2430
  • inputValidation.infoBorder#98c379
  • inputValidation.warningBackground#1f2430
  • inputValidation.warningBorder#e5c07b
  • list.activeSelectionBackground#191e2a
  • list.activeSelectionForeground#61afef
  • list.focusBackground#191e2a
  • list.focusForeground#61afef
  • list.highlightForeground#61afef
  • list.hoverBackground#3d424d66
  • list.hoverForeground#61afef
  • list.inactiveSelectionBackground#3d424d66
  • list.inactiveSelectionForeground#61afef
  • list.invalidItemForeground#586070
  • panel.background#1b1c24
  • panel.border#101521
  • panelTitle.activeBorder#61afef
  • panelTitle.activeForeground#dadbc0
  • panelTitle.inactiveForeground#707a8c
  • peekView.border#191e2a
  • peekViewEditor.background#282c34
  • peekViewEditor.matchHighlightBackground#61afef33
  • peekViewResult.background#282c34
  • peekViewResult.fileForeground#707a8c
  • peekViewResult.matchHighlightBackground#61afef33
  • peekViewTitle.background#282c34
  • peekViewTitleDescription.foreground#707a8c
  • peekViewTitleLabel.foreground#707a8c
  • pickerGroup.border#191e2a
  • pickerGroup.foreground#484f5e
  • progressBar.background#61afef
  • quickInput.list.focusBackground#191e2a
  • scrollbar.shadow#191e2a
  • scrollbarSlider.activeBackground#707a8cb3
  • scrollbarSlider.background#707a8c66
  • scrollbarSlider.hoverBackground#707a8c99
  • selection.background#4e545f
  • settings.headerForeground#dadbc0
  • settings.modifiedItemIndicator#77a8d9
  • sideBar.background#191e2a
  • sideBar.border#191e2a
  • sideBar.foreground#b8b0b0
  • sideBarSectionHeader.background#191e2a
  • sideBarSectionHeader.foreground#707a8c
  • sideBarTitle.foreground#707a8c
  • statusBar.background#1f2430
  • statusBar.border#191e2a
  • statusBar.debuggingBackground#e06c75
  • statusBar.debuggingForeground#1f2430
  • statusBar.foreground#707a8c
  • statusBar.noFolderBackground#282c34
  • statusBarItem.activeBackground#00000050
  • statusBarItem.hoverBackground#00000030
  • statusBarItem.prominentBackground#191e2a
  • statusBarItem.prominentHoverBackground#00000030
  • statusBarItem.remoteBackground#61afef
  • tab.activeBackground#282c34
  • tab.activeBorderTop#61afef
  • tab.activeForeground#dadbc0
  • tab.border#282c3400
  • tab.hoverBackground#3d424d66
  • tab.inactiveBackground#1f2430
  • tab.inactiveForeground#707a8c
  • tab.unfocusedActiveBorderTop#707a8c
  • tab.unfocusedActiveForeground#707a8c
  • tab.unfocusedInactiveForeground#707a8c
  • terminal.ansiBlack#191e2a
  • terminal.ansiBlue#61afef
  • terminal.ansiBrightBlack#686868
  • terminal.ansiBrightBlue#61afef
  • terminal.ansiBrightCyan#bae67e
  • terminal.ansiBrightGreen#bae67e
  • terminal.ansiBrightMagenta#d4bfff
  • terminal.ansiBrightRed#f28779
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffd580
  • terminal.ansiCyan#98c379
  • terminal.ansiGreen#98c379
  • terminal.ansiMagenta#cfbafa
  • terminal.ansiRed#e06c75
  • terminal.ansiWhite#c7c7c7
  • terminal.ansiYellow#e5c07b
  • terminal.background#1b1c24
  • terminal.foreground#dadbc0
  • terminalCursor.foreground#e06c75
  • textBlockQuote.background#282c34
  • textLink.activeForeground#61afef
  • textLink.foreground#61afef
  • textPreformat.foreground#cbccc6
  • titleBar.activeBackground#1f2430
  • titleBar.activeForeground#dadbc0
  • titleBar.border#191e2a
  • titleBar.inactiveBackground#1f2430
  • titleBar.inactiveForeground#707a8c
  • walkThrough.embeddedEditorBackground#282c34
  • widget.shadow#141925

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#5c6773italic
string, constant.other.symbol#98c379
string.regexp, constant.character, constant.other#98c379
constant.numeric#d19a66
constant.numeric.css#e06c75
constant.language#e5c07b
constant.language.boolean#cfbafa
variable#dadbc0
variable.other.constant#cfbafa
variable.member#f28779
variable.language#61afefitalic
variable.language.this#f28779italic
support.variable#61afef
storage#61afef
storage.type#61afefitalic
storage.modifier.async#e06c75italic
storage.type.class#e06c75italic
keyword#61afef
keyword.control.flow#e06c75
keyword.control.loop#e06c75
keyword.control.conditional#e06c75
keyword.control.trycatch#e06c75
keyword.operator#e06c75
keyword.operator.new#e06c75
punctuation.separator, punctuation.terminator#cbccc6b3
punctuation.section#dadbc0
punctuation.accessor#e5c07b
source.java storage.type, source.haskell storage.type, source.c storage.type#98c379
entity.other.inherited-class#e5c07b
storage.type.function#61afef
storage.type.function.arrow#e06c75
source.java storage.type.primitive#98c379
variable.parameter, meta.parameter#cfbafaitalic
variable.function, variable.annotation, meta.function-call.generic, support.function.go#61afef
support.function, support.macro#e5c07b
support.function.console#e5c07b
entity.name.import, entity.name.package#98c379
entity.name#f28779
entity.name.function#61afef
entity.name.class#e5c07b
entity.name.tag, meta.tag.sgml#e06c75
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#b3b1ad
text.html.derivative#dadbc0
entity.other.attribute-name#61afefitalic
support.constant#f28779italic
support.type, support.class, source.go storage.type#f28779
support.class.promise#61afef
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation#dadbc0
invalid#ff3333
meta.diff, meta.diff.header#cfbafa
source.ruby variable.other.readwrite#e5c07b
source.css entity.name.tag, source.sass entity.name.tag, source.scss entity.name.tag, source.less entity.name.tag, source.stylus entity.name.tag#98c379
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type#5c6773
support.type.property-name#98c379
entity.other.attribute-name.class.css#98c379
entity.other.attribute-name.id.css#61afef
support.type.property-name.css#dadbc0
constant.numeric.line-number.find-in-files - match#5c6773
constant.numeric.line-number.match#61afef
entity.name.filename.find-in-files#98c379
message.error#ff3333
markup.heading, markup.heading entity.name#98c379bold
markup.underline.link, string.other.link#98c379
markup.italic#f28779italic
markup.bold#f28779bold
markup.italic markup.bold, markup.bold markup.italicbold italic
markup.raw
markup.raw.inline
meta.separator#5c6773bold
markup.quote#98c379italic
markup.list punctuation.definition.list.begin#e5c07b
markup.inserted#a6cc70
markup.changed#77a8d9
markup.deleted#f27983
markup.strike#ffe6b3
markup.table#5ccfe6
text.html.markdown markup.inline.raw#e5c07b
text.html.markdown meta.dummy.line-break#5c6773
punctuation.definition.markdown#5c6773
string.json support.type.property-name.json#e5c07b
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#e5c07b
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#e5c07b
constant.language.json#cfbafa
constant.numeric.json#f27983
string.unquoted, constant.other.object.key#e5c07b
meta.brace.curly, meta.brace.round, meta.brace.square#b3b1ad
punctuation.quasi.element.begin, punctuation.quasi.element.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#61afef
meta.object-literal.key#61afef
entity.name.type#e5c07b
entity.name.type.class#e06c75
support.type.primitive#e5c07b
text.gitignore#e5c07bitalic