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#18e8d5b3
  • activityBar.background#1C2A3B
  • activityBar.border#171b24
  • activityBar.foreground#707a8ccc
  • activityBar.inactiveForeground#707a8c99
  • activityBarBadge.background#18e8d5
  • activityBarBadge.foreground#1B2637
  • badge.background#18e8d533
  • badge.foreground#18e8d5
  • button.background#18e8d5
  • button.foreground#1B2637
  • button.hoverBackground#fac761
  • button.secondaryBackground#707a8c33
  • button.secondaryForeground#cccac2
  • button.secondaryHoverBackground#707a8c80
  • debugConsoleInputIcon.foreground#18e8d5
  • debugExceptionWidget.background#1c212b
  • debugExceptionWidget.border#171b24
  • debugIcon.breakpointDisabledForeground#f29e7480
  • debugIcon.breakpointForeground#f29e74
  • debugToolBar.background#1c212b
  • descriptionForeground#707a8c
  • diffEditor.diagonalFill#171b24
  • diffEditor.insertedTextBackground#87d96c1f
  • diffEditor.removedTextBackground#f279831f
  • dropdown.background#1C2A3B
  • dropdown.border#707a8c45
  • dropdown.foreground#707a8c
  • editor.background#1C2A3B
  • editor.findMatchBackground#0ea1d666
  • editor.findMatchBorder#0ea1d6
  • editor.findMatchHighlightBackground#0ea1d666
  • editor.findMatchHighlightBorder#5c467266
  • editor.findRangeHighlightBackground#0ea1d640
  • editor.foreground#cccac2
  • editor.inactiveSelectionBackground#409fff21
  • editor.lineHighlightBackground#1a1f29
  • editor.rangeHighlightBackground#0ea1d666
  • editor.selectionBackground#409fff40
  • editor.selectionHighlightBackground#87d96c26
  • editor.selectionHighlightBorder#87d96c00
  • editor.snippetTabstopHighlightBackground#87d96c33
  • editor.wordHighlightBackground#80bfff14
  • editor.wordHighlightBorder#80bfff80
  • editor.wordHighlightStrongBackground#87d96c14
  • editor.wordHighlightStrongBorder#87d96c80
  • editorBracketMatch.background#8a91994d
  • editorBracketMatch.border#8a91994d
  • editorCodeLens.foreground#b8cfe680
  • editorCursor.foreground#18e8d5
  • editorError.foreground#ff6666
  • editorGroup.border#171b24
  • editorGroupHeader.noTabsBackground#1B2637
  • editorGroupHeader.tabsBackground#1B2637
  • editorGroupHeader.tabsBorder#171b24
  • editorGutter.addedBackground#87d96ccc
  • editorGutter.deletedBackground#f27983cc
  • editorGutter.modifiedBackground#80bfffcc
  • editorHoverWidget.background#1B2637
  • editorHoverWidget.border#171b24
  • editorIndentGuide.activeBackground1#8a919959
  • editorIndentGuide.background1#8a91992e
  • editorLineNumber.activeForeground#8a9199cc
  • editorLineNumber.foreground#8a919966
  • editorLink.activeForeground#18e8d5
  • editorMarkerNavigation.background#1c212b
  • editorOverviewRuler.addedForeground#87d96c
  • editorOverviewRuler.border#171b24
  • editorOverviewRuler.bracketMatchForeground#8a9199b3
  • editorOverviewRuler.deletedForeground#f27983
  • editorOverviewRuler.errorForeground#ff6666
  • editorOverviewRuler.findMatchForeground#0ea1d6
  • editorOverviewRuler.modifiedForeground#80bfff
  • editorOverviewRuler.warningForeground#18e8d5
  • editorOverviewRuler.wordHighlightForeground#80bfff66
  • editorOverviewRuler.wordHighlightStrongForeground#87d96c66
  • editorRuler.foreground#8a91992e
  • editorSuggestWidget.background#1c212b
  • editorSuggestWidget.border#171b24
  • editorSuggestWidget.highlightForeground#18e8d5
  • editorSuggestWidget.selectedBackground#63759926
  • editorWarning.foreground#18e8d5
  • editorWhitespace.foreground#8a919966
  • editorWidget.background#1B2637
  • editorWidget.border#171b24
  • errorForeground#ff6666
  • extensionButton.prominentBackground#18e8d5
  • extensionButton.prominentForeground#1C2A3B
  • extensionButton.prominentHoverBackground#fac761
  • focusBorder#18e8d5b3
  • foreground#707a8c
  • gitDecoration.conflictingResourceForeground
  • gitDecoration.deletedResourceForeground#f27983b3
  • gitDecoration.ignoredResourceForeground#707a8c80
  • gitDecoration.modifiedResourceForeground#80bfffb3
  • gitDecoration.submoduleResourceForeground#00FFD0b3
  • gitDecoration.untrackedResourceForeground#87d96cb3
  • icon.foreground#707a8c
  • input.background#1C2A3B
  • input.border#707a8c45
  • input.foreground#cccac2
  • input.placeholderForeground#707a8c80
  • inputOption.activeBackground#18e8d533
  • inputOption.activeBorder#18e8d54d
  • inputOption.activeForeground#18e8d5
  • inputValidation.errorBackground#1C2A3B
  • inputValidation.errorBorder#ff6666
  • inputValidation.infoBackground#1B2637
  • inputValidation.infoBorder#5ccfe6
  • inputValidation.warningBackground#1B2637
  • inputValidation.warningBorder#02ce9e
  • keybindingLabel.background#707a8c1a
  • keybindingLabel.border#cccac21a
  • keybindingLabel.bottomBorder#cccac21a
  • keybindingLabel.foreground#cccac2
  • list.activeSelectionBackground#63759926
  • list.activeSelectionForeground#cccac2
  • list.deemphasizedForeground#ff6666
  • list.errorForeground#ff6666
  • list.filterMatchBackground#5c467266
  • list.filterMatchBorder#0ea1d666
  • list.focusBackground#63759926
  • list.focusForeground#cccac2
  • list.focusOutline#63759926
  • list.highlightForeground#18e8d5
  • list.hoverBackground#63759926
  • list.inactiveSelectionBackground#69758c1f
  • list.inactiveSelectionForeground#707a8c
  • list.invalidItemForeground#707a8c4d
  • listFilterWidget.background#1c212b
  • listFilterWidget.noMatchesOutline#ff6666
  • listFilterWidget.outline#18e8d5
  • minimap.background#1C2A3B
  • minimap.errorHighlight#ff6666
  • minimap.findMatchHighlight#18e8d5
  • minimap.selectionHighlight#409fff40
  • minimapGutter.addedBackground#87d96c
  • minimapGutter.deletedBackground#f27983
  • minimapGutter.modifiedBackground#80bfff
  • panel.background#1B2637
  • panel.border#171b24
  • panelTitle.activeBorder#18e8d5
  • panelTitle.activeForeground#cccac2
  • panelTitle.inactiveForeground#707a8c
  • peekView.border#63759926
  • peekViewEditor.background#1B2637
  • peekViewEditor.matchHighlightBackground#0ea1d666
  • peekViewEditor.matchHighlightBorder#5c467266
  • peekViewResult.background#1B2637
  • peekViewResult.fileForeground#cccac2
  • peekViewResult.lineForeground#707a8c
  • peekViewResult.matchHighlightBackground#0ea1d666
  • peekViewResult.selectionBackground#63759926
  • peekViewTitle.background#63759926
  • peekViewTitleDescription.foreground#707a8c
  • peekViewTitleLabel.foreground#cccac2
  • pickerGroup.border#171b24
  • pickerGroup.foreground#707a8c80
  • progressBar.background#18e8d5
  • scrollbar.shadow#18e8d5
  • scrollbarSlider.activeBackground#18e8d5b3
  • scrollbarSlider.background#18e8d566
  • scrollbarSlider.hoverBackground#18e8d599
  • selection.background#409fff40
  • settings.headerForeground#cccac2
  • settings.modifiedItemIndicator#80bfff
  • sideBar.background#1B2637
  • sideBar.border#171b24
  • sideBarSectionHeader.background#1B2637
  • sideBarSectionHeader.border#171b24
  • sideBarSectionHeader.foreground#707a8c
  • sideBarTitle.foreground#707a8c
  • statusBar.background#1B2637
  • statusBar.border#171b24
  • statusBar.debuggingBackground#C46E6E
  • statusBar.debuggingForeground#1C2A3B
  • statusBar.foreground#18e8d5
  • statusBar.noFolderBackground#1B2637
  • statusBar.noFolderForeground#18e8d5
  • statusBarItem.activeBackground#707a8c33
  • statusBarItem.hoverBackground#707a8c33
  • statusBarItem.prominentBackground#171b24
  • statusBarItem.prominentHoverBackground#00000030
  • statusBarItem.remoteBackground#18e8d5
  • statusBarItem.remoteForeground#1C2A3B
  • tab.activeBackground#1C2A3B
  • tab.activeBorder#1C2A3B
  • tab.activeBorderTop#18e8d5
  • tab.activeForeground#cccac2
  • tab.border#171b24
  • tab.inactiveBackground#1B2637
  • tab.inactiveForeground#707a8c
  • tab.unfocusedActiveBorderTop#707a8c
  • tab.unfocusedActiveForeground#707a8c
  • tab.unfocusedInactiveForeground#707a8c
  • terminal.ansiBlack#171b24
  • terminal.ansiBlue#6dcbfa
  • terminal.ansiBrightBlack#686868
  • terminal.ansiBrightBlue#73d0ff
  • terminal.ansiBrightCyan#95e6cb
  • terminal.ansiBrightGreen#d5ff80
  • terminal.ansiBrightMagenta#00FFD0
  • terminal.ansiBrightRed#f28779
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#02ce9e
  • terminal.ansiCyan#90e1c6
  • terminal.ansiGreen#87d96c
  • terminal.ansiMagenta#dabafa
  • terminal.ansiRed#ed8274
  • terminal.ansiWhite#c7c7c7
  • terminal.ansiYellow#facc6e
  • terminal.background#1B2637
  • terminal.foreground#cccac2
  • textBlockQuote.background#1c212b
  • textLink.activeForeground#18e8d5
  • textLink.foreground#18e8d5
  • textPreformat.foreground#cccac2
  • titleBar.activeBackground#1B2637
  • titleBar.activeForeground#cccac2
  • titleBar.border#171b24
  • titleBar.inactiveBackground#1B2637
  • titleBar.inactiveForeground#707a8c
  • tree.indentGuidesStroke#8a919959
  • walkThrough.embeddedEditorBackground#1c212b
  • welcomePage.progress.background#1a1f29
  • welcomePage.tileBackground#1B2637
  • widget.shadow#12151cb3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#cccac2
comment#b8cfe680italic
string, constant.other.symbol#00EAFF
string.regexp, constant.character, constant.other#95e6cb
constant.numeric#00FFD0
constant.language#00FFD0
variable, variable.parameter.function-call#cccac2
variable.member#f28779
variable.language#5ccfe6italic
storage#0ea1d6
keyword#0ea1d6
keyword.operator#0B81AD
punctuation.separator, punctuation.terminator#cccac2b3
punctuation.section#cccac2
punctuation.accessor#0B81AD
punctuation.definition.template-expression#0ea1d6
punctuation.section.embedded#0ea1d6
meta.embedded#cccac2
source.java storage.type, source.haskell storage.type, source.c storage.type#73d0ff
entity.other.inherited-class#5ccfe6
storage.type.function#0ea1d6
source.java storage.type.primitive#5ccfe6
entity.name.function#1AC8ED
variable.parameter, meta.parameter#00FFD0
variable.function, variable.annotation, meta.function-call.generic, support.function.go#02ce9e
support.function, support.macro#f28779
entity.name.import, entity.name.package#d5ff80
entity.name#73d0ff
entity.name.tag, meta.tag.sgml#5ccfe6
support.class.component#73d0ff
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#5ccfe680
entity.other.attribute-name#14CCBD
support.constant#C493B0italic
support.type, support.class, source.go storage.type#5ccfe6
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation#ffdfb3
invalid#ff6666
meta.diff, meta.diff.header#c594c5
source.ruby variable.other.readwrite#02ce9e
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#73d0ff
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type#b8cfe680
support.type.property-name#A689FA
constant.numeric.line-number.find-in-files - match#b8cfe680
constant.numeric.line-number.match#0ea1d6
entity.name.filename.find-in-files#d5ff80
message.error#ff6666
markup.heading, markup.heading entity.name#00EAFFbold
markup.underline.link, string.other.link#5ccfe6
markup.italic#f28779italic
markup.bold#00FFD0bold
markup.italic markup.bold, markup.bold markup.italicbold italic
markup.raw
markup.raw.inline
meta.separator#b8cfe680bold
markup.quote#95e6cbitalic
markup.list punctuation.definition.list.begin#02ce9e
markup.inserted#87d96c
markup.changed#80bfff
markup.deleted#f27983
markup.strike#ffdfb3
markup.table#5ccfe6
text.html.markdown markup.inline.raw#A689FA
text.html.markdown meta.dummy.line-break#b8cfe680
punctuation.definition.markdown#b8cfe680
ICE CUBE 🧊 by ncfrak - VS Code Theme