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#1D2025
  • activityBar.activeFocusBorder#1D2025
  • activityBar.background#1D2025
  • activityBar.border#1D2025
  • activityBar.foreground#dbdbdb
  • activityBar.inactiveForeground#53535c
  • activityBarBadge.background#dbdbdb
  • activityBarBadge.foreground#1D2025
  • badge.background#dbdbdb
  • badge.foreground#1D2025
  • button.background#d693f8
  • button.foreground#1f2430
  • button.hoverBackground#d693f8
  • debugExceptionWidget.background#232834
  • debugExceptionWidget.border#191e2a
  • debugToolBar.background#232834
  • diffEditor.insertedTextBackground#bae67e26
  • diffEditor.removedTextBackground#f29e7426
  • dropdown.background#232834
  • dropdown.border#373e4c
  • dropdown.foreground#707a8c
  • editor.background#1D2025
  • editor.findMatchBackground#ffcc660d
  • editor.findMatchBorder#ffcc66
  • editor.findMatchHighlightBackground#ffcc660d
  • editor.findMatchHighlightBorder#ffcc6659
  • editor.findRangeHighlightBackground#262f3e
  • editor.findRangeHighlightBorder#1f243000
  • editor.foreground#CBCEBC
  • editor.inactiveSelectionBackground#262f3e
  • editor.lineHighlightBackground#1a1d22
  • editor.rangeHighlightBackground#191e2a
  • editor.selectionBackground#3d424d
  • editor.selectionHighlightBackground#262f3e
  • editor.selectionHighlightBorder#313e52
  • editor.wordHighlightBackground#262f3e
  • editor.wordHighlightStrongBackground#ffcc6633
  • editorBracketMatch.background#707a8c4d
  • editorBracketMatch.border#707a8c99
  • editorCodeLens.foreground#5c6773
  • editorCursor.foreground#b0aeb9
  • editorError.foreground#ff3333
  • editorGroup.border#1D2025
  • editorGroup.emptyBackground#1D2025
  • editorGroupHeader.noTabsBackground#1D2025
  • editorGroupHeader.tabsBackground#1D2025
  • editorGroupHeader.tabsBorder#1D2025
  • editorGutter.addedBackground#a6cc7099
  • editorGutter.deletedBackground#f2798399
  • editorGutter.modifiedBackground#77a8d999
  • editorHoverWidget.background#232834
  • editorHoverWidget.border#101521
  • editorHoverWidget.foreground#cbccc6
  • editorIndentGuide.activeBackground#707a8cb3
  • editorIndentGuide.background#707a8c4d
  • editorLineNumber.activeForeground#707a8ccc
  • editorLineNumber.foreground#707a8c66
  • editorLink.activeForeground#ffcc66
  • editorMarkerNavigation.background#232834
  • editorOverviewRuler.addedForeground#a6cc7099
  • editorOverviewRuler.border#1D2025
  • editorOverviewRuler.deletedForeground#f2798399
  • editorOverviewRuler.errorForeground#ff3333
  • editorOverviewRuler.modifiedForeground#77a8d999
  • editorOverviewRuler.warningForeground#ffcc66
  • editorRuler.foreground#707a8c4d
  • editorSuggestWidget.background#232834
  • editorSuggestWidget.border#101521
  • editorSuggestWidget.foreground#cbccc6
  • editorSuggestWidget.highlightForeground#ffcc66
  • editorSuggestWidget.selectedBackground#191e2a
  • editorWarning.foreground#ffcc66
  • editorWhitespace.foreground#707a8c66
  • editorWidget.background#232834
  • editorWidget.foreground#cbccc6
  • extensionButton.prominentBackground#ffcc66
  • extensionButton.prominentForeground#1f2430
  • extensionButton.prominentHoverBackground#fac761
  • focusBorder#50586721
  • foreground#707a8c
  • gitDecoration.conflictingResourceForeground#ed8274
  • gitDecoration.deletedResourceForeground#f27983b3
  • gitDecoration.ignoredResourceForeground#484f5e
  • gitDecoration.modifiedResourceForeground#a6cc70
  • gitDecoration.submoduleResourceForeground#d4bfffb3
  • gitDecoration.untrackedResourceForeground#d96c75
  • input.background#232834
  • input.border#373e4c
  • input.foreground#cbccc6
  • input.placeholderForeground#586070
  • inputOption.activeBorder#d693f8
  • inputValidation.errorBackground#1f2430
  • inputValidation.errorBorder#ff3333
  • inputValidation.infoBackground#1f2430
  • inputValidation.infoBorder#95e6cb
  • inputValidation.warningBackground#1f2430
  • inputValidation.warningBorder#ffd580
  • list.activeSelectionBackground#32343666
  • list.activeSelectionForeground#dbdbdb
  • list.focusBackground#1D2025
  • list.focusForeground#9b8f78
  • list.highlightForeground#dbdbdb
  • list.hoverBackground#3d424d66
  • list.hoverForeground#dbdbdb
  • list.inactiveSelectionBackground#3f414466
  • list.inactiveSelectionForeground#dbdbdb
  • list.invalidItemForeground#586070
  • panel.background#1D2025
  • panel.border#1D2025
  • panelTitle.activeBorder#dbdbdb
  • panelTitle.activeForeground#cbccc6
  • panelTitle.inactiveForeground#707a8c
  • peekView.border#191e2a
  • peekViewEditor.background#232834
  • peekViewEditor.matchHighlightBackground#ffcc6633
  • peekViewResult.background#232834
  • peekViewResult.fileForeground#707a8c
  • peekViewResult.matchHighlightBackground#ffcc6633
  • peekViewTitle.background#232834
  • peekViewTitleDescription.foreground#707a8c
  • peekViewTitleLabel.foreground#707a8c
  • pickerGroup.border#191e2a
  • pickerGroup.foreground#484f5e
  • progressBar.background#d693f8
  • quickInputList.focusBackground#1D2025
  • scrollbar.shadow#14182400
  • scrollbarSlider.activeBackground#707a8c63
  • scrollbarSlider.background#707a8c2c
  • scrollbarSlider.hoverBackground#707a8c57
  • selection.background#2a3546fd
  • settings.headerForeground#cbccc6
  • settings.modifiedItemIndicator#77a8d9
  • sideBar.background#1D2025
  • sideBar.border#1D2025
  • sideBar.foreground#b8b0b0
  • sideBarSectionHeader.background#1D2025
  • sideBarSectionHeader.foreground#707a8c
  • sideBarTitle.foreground#707a8c
  • statusBar.background#1D2025
  • statusBar.border#191e2a
  • statusBar.debuggingBackground#ca74f2
  • statusBar.debuggingForeground#1f2430
  • statusBar.foreground#707a8c
  • statusBar.noFolderBackground#232834
  • statusBarItem.activeBackground#00000050
  • statusBarItem.hoverBackground#00000030
  • statusBarItem.prominentBackground#191e2a
  • statusBarItem.prominentHoverBackground#00000030
  • statusBarItem.remoteBackground#ff9940
  • tab.activeBackground#1D2025
  • tab.activeBorderTop#dbdbdb
  • tab.activeForeground#edf0f5
  • tab.border#1f2430
  • tab.hoverBackground#3d424d66
  • tab.inactiveBackground#1D2025
  • tab.inactiveForeground#707a8c
  • tab.unfocusedActiveBorderTop#707a8c
  • tab.unfocusedActiveForeground#707a8c
  • tab.unfocusedInactiveForeground#707a8c
  • terminal.ansiBlack#191e2a
  • terminal.ansiBlue#95e6cb
  • terminal.ansiBrightBlack#686868
  • terminal.ansiBrightBlue#95e6cb
  • terminal.ansiBrightCyan#95e6cb
  • terminal.ansiBrightGreen#bae67e
  • terminal.ansiBrightMagenta#d4bfff
  • terminal.ansiBrightRed#f28779
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffd580
  • terminal.ansiCyan#95e6cb
  • terminal.ansiGreen#a6cc70
  • terminal.ansiMagenta#cfbafa
  • terminal.ansiRed#ed8274
  • terminal.ansiWhite#c7c7c7
  • terminal.ansiYellow#fad07b
  • terminal.background#1D2025
  • terminal.foreground#cbccc6
  • terminalCursor.foreground#ff4057
  • textBlockQuote.background#232834
  • textLink.activeForeground#d693f8
  • textLink.foreground#d693f8
  • textPreformat.foreground#cbccc6
  • titleBar.activeBackground#1D2025
  • titleBar.activeForeground#707a8c
  • titleBar.border#191e2a
  • titleBar.inactiveBackground#1D2025
  • titleBar.inactiveForeground#707a8c
  • walkThrough.embeddedEditorBackground#232834
  • widget.shadow#141925

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#5c6773
string, constant.other.symbol#eefb79
string.regexp, constant.character, constant.other#9fe7fa
constant.numeric#9ffcea
constant.numeric.css#f07178
constant.language#f27983
constant.language.boolean#b796f3
variable#d8d8d8
variable.other.constant#d693f8
variable.member#ee625c
variable.language#d495f6
variable.language.this#d495f6
support.variable#f5ba78
storage#f5ba78
storage.type#ee68af
storage.modifier#ee68af
storage.modifier.async#ee68af
storage.type.class#ee68af
keyword#f578b7
keyword.control#ee68af
keyword.operator#ee68af
keyword.operator.new#f088bd
punctuation.separator, punctuation.terminator#cbccc6b3
punctuation.section#cbcebc
punctuation.definition#CBCCC6B3
punctuation.accessor#d693f8
source.java storage.type, source.haskell storage.type, source.c storage.type#ef82c3
entity.other.inherited-class#9FE7FA
storage.type.function#f088bd
storage.type.function.arrow#ee68af
source.java storage.type.primitive#9fe7fa
variable.parameter, meta.parameter#ee68af
variable.function, variable.annotation, meta.function-call.generic, support.function.go#fced65
support.function, support.macro#be8bf7
support.function.console#fced65
entity.name.import, entity.name.package#a4fb8e
entity.name#be8bf7
entity.name.function#95fb79
entity.name.class#f5ba78
entity.name.tag, meta.tag.sgml#fc4085
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#b3b1ad
text.html.derivative#cbcebc
entity.other.attribute-name#6abbcf
support.constant#d693f8
support.type, support.class, source.go storage.type#9fe7fa
support.class.promise#9fe7fa
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation#cbcebc
invalid#ff3333
meta.diff, meta.diff.header#c594c5
source.ruby variable.other.readwrite#FFD866
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#95e6cb
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#A9DC76
entity.other.attribute-name.class.css#A9DC76
entity.other.attribute-name.id.css#FFD866
support.type.property-name.css#cbcebc
constant.numeric.line-number.find-in-files - match#5c6773
constant.numeric.line-number.match#ffa759
entity.name.filename.find-in-files#A9DC76
message.error#FF6188
markup.heading, markup.heading entity.name#A9DC76bold
markup.underline.link, string.other.link#95e6cb
markup.italic#f28779
markup.bold#f28779bold
markup.italic markup.bold, markup.bold markup.italicbold italic
markup.raw
markup.raw.inline
meta.separator#5c6773bold
markup.quote#95e6cb
markup.list punctuation.definition.list.begin#ffd580
markup.inserted#a6cc70
markup.changed#77a8d9
markup.deleted#f27983
markup.strike#ffe6b3
markup.table#5ccfe6
text.html.markdown markup.inline.raw#f29e74
text.html.markdown meta.dummy.line-break#5c6773
punctuation.definition.markdown#5c6773
string.json support.type.property-name.json#d495f6
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#d4b5e4
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#e4e2e5
constant.language.json#d495f6
constant.numeric.json#f27983
string.unquoted, constant.other.object.key#e6b450
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#95fb79
meta.object-literal.key#6abbcf
entity.name.type#9fe7fa
entity.name.type.class#9fe7fa
support.type.primitive#9fe7fa
text.gitignore#fdf375