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#60e8f0
  • activityBar.activeFocusBorder#60e8f0
  • activityBar.background#05070c
  • activityBar.border#05070c
  • activityBar.foreground#b3b1ad
  • activityBarBadge.background#f07178
  • activityBarBadge.foreground#0a0e14
  • badge.background#1ea8fc
  • badge.foreground#0a0e14
  • button.background#1ea8fc
  • button.foreground#0a0e14
  • button.hoverBackground#1a93df
  • debugExceptionWidget.background#0d1016
  • debugExceptionWidget.border#01060e
  • debugToolBar.background#0d1016
  • diffEditor.insertedTextBackground#c2d94c26
  • diffEditor.removedTextBackground#f2966826
  • dropdown.background#0d1016
  • dropdown.border#191e25
  • dropdown.foreground#3d424d
  • editor.background#0d1016
  • editor.findMatchBackground#1ea8fc0d
  • editor.findMatchBorder#1ea8fc
  • editor.findMatchHighlightBackground#1ea8fc0d
  • editor.findMatchHighlightBorder#1ea8fc59
  • editor.findRangeHighlightBackground#121922
  • editor.findRangeHighlightBorder#0a0e1400
  • editor.foreground#ffffff
  • editor.inactiveSelectionBackground#121922
  • editor.lineHighlightBackground#23262c
  • editor.rangeHighlightBackground#01060e
  • editor.selectionBackground#3d424d
  • editor.selectionHighlightBackground#121922
  • editor.selectionHighlightBorder#1d2936
  • editor.wordHighlightBackground#121922
  • editor.wordHighlightStrongBackground#1ea8fc33
  • editorBracketMatch.background#3d424d4d
  • editorBracketMatch.border#3d424d99
  • editorCodeLens.foreground#626a73
  • editorCursor.foreground#ff4057
  • editorError.foreground#ff3333
  • editorGroup.border#01060e
  • editorGroup.emptyBackground#0d1016
  • editorGroupHeader.noTabsBackground#0a0e14
  • editorGroupHeader.tabsBackground#0a0e14
  • editorGroupHeader.tabsBorder#0d1016
  • editorGutter.addedBackground#91b36299
  • editorGutter.deletedBackground#d96c7599
  • editorGutter.modifiedBackground#6994bf99
  • editorHoverWidget.background#0d1016
  • editorHoverWidget.border#000000
  • editorHoverWidget.foreground#cbccc6
  • editorIndentGuide.activeBackground#3d424db3
  • editorIndentGuide.background#3d424d66
  • editorLineNumber.activeForeground#60e8f0
  • editorLineNumber.foreground#3d424d
  • editorLink.activeForeground#1ea8fc
  • editorMarkerNavigation.background#0d1016
  • editorOverviewRuler.addedForeground#91b36299
  • editorOverviewRuler.border#0d1016
  • editorOverviewRuler.deletedForeground#d96c7599
  • editorOverviewRuler.errorForeground#ff3333
  • editorOverviewRuler.modifiedForeground#6994bf99
  • editorOverviewRuler.warningForeground#1ea8fc
  • editorRuler.foreground#3d424d66
  • editorSuggestWidget.background#0d1016
  • editorSuggestWidget.border#000000
  • editorSuggestWidget.foreground#cbccc6
  • editorSuggestWidget.highlightForeground#1ea8fc
  • editorSuggestWidget.selectedBackground#01060e
  • editorWarning.foreground#1ea8fc
  • editorWhitespace.foreground#3d424d99
  • editorWidget.background#0d1016
  • editorWidget.foreground#cbccc6
  • extensionButton.prominentBackground#1ea8fc
  • extensionButton.prominentForeground#0a0e14
  • extensionButton.prominentHoverBackground#e1af4b
  • focusBorder#292d36
  • foreground#3d424d
  • gitDecoration.conflictingResourceForeground#d96c75
  • gitDecoration.deletedResourceForeground#d96c75b3
  • gitDecoration.ignoredResourceForeground#242831
  • gitDecoration.modifiedResourceForeground#a6cc70
  • gitDecoration.submoduleResourceForeground#ffee99b3
  • gitDecoration.untrackedResourceForeground#d96c75
  • input.background#0d1016
  • input.border#191e25
  • input.foreground#b3b1ad
  • input.placeholderForeground#2e323c
  • inputOption.activeBorder#1ea8fc
  • inputValidation.errorBackground#0a0e14
  • inputValidation.errorBorder#ff3333
  • inputValidation.infoBackground#0a0e14
  • inputValidation.infoBorder#95e6cb
  • inputValidation.warningBackground#0a0e14
  • inputValidation.warningBorder#ffb454
  • list.activeSelectionBackground#191e2a
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#01060e
  • list.focusForeground#ffcc66
  • list.highlightForeground#1ea8fc
  • list.hoverBackground#3d424d66
  • list.hoverForeground#65e2e9
  • list.inactiveSelectionBackground#3d424d66
  • list.inactiveSelectionForeground#60e8f0
  • list.invalidItemForeground#2e323c
  • panel.background#060b0f
  • panel.border#00010a
  • panelTitle.activeBorder#1ea8fc
  • panelTitle.activeForeground#b3b1ad
  • panelTitle.inactiveForeground#3d424d
  • peekView.border#01060e
  • peekViewEditor.background#0d1016
  • peekViewEditor.matchHighlightBackground#1ea8fc33
  • peekViewResult.background#0d1016
  • peekViewResult.fileForeground#3d424d
  • peekViewResult.matchHighlightBackground#1ea8fc33
  • peekViewTitle.background#0d1016
  • peekViewTitleDescription.foreground#3d424d
  • peekViewTitleLabel.foreground#3d424d
  • pickerGroup.border#01060e
  • pickerGroup.foreground#242831
  • progressBar.background#1ea8fc
  • quickInput.list.focusBackground#01060e
  • scrollbar.shadow#01060e
  • scrollbarSlider.activeBackground#3d424db3
  • scrollbarSlider.background#3d424d66
  • scrollbarSlider.hoverBackground#3d424d99
  • selection.background#4e545f
  • settings.headerForeground#b3b1ad
  • settings.modifiedItemIndicator#6994bf
  • sideBar.background#080c11
  • sideBar.border#080c11
  • sideBar.foreground#b8b0b0
  • sideBarSectionHeader.background#080c11
  • sideBarSectionHeader.foreground#3d424d
  • sideBarTitle.foreground#707a8c
  • statusBar.background#0a0e14
  • statusBar.border#01060e
  • statusBar.debuggingBackground#f29668
  • statusBar.debuggingForeground#0a0e14
  • statusBar.foreground#3d424d
  • statusBar.noFolderBackground#0d1016
  • statusBarItem.activeBackground#00000050
  • statusBarItem.hoverBackground#00000030
  • statusBarItem.prominentBackground#01060e
  • statusBarItem.prominentHoverBackground#00000030
  • statusBarItem.remoteBackground#1ea8fc
  • tab.activeBackground#0d1016
  • tab.activeBorderTop#1ea8fc
  • tab.activeForeground#b3b1ad
  • tab.border#0a0e14
  • tab.hoverBackground#3d424d66
  • tab.inactiveBackground#0a0e14
  • tab.inactiveForeground#3d424d
  • tab.unfocusedActiveBorderTop#3d424d
  • tab.unfocusedActiveForeground#3d424d
  • tab.unfocusedInactiveForeground#3d424d
  • terminal.ansiBlack#01060e
  • terminal.ansiBlue#95e6cb
  • terminal.ansiBrightBlack#686868
  • terminal.ansiBrightBlue#95e6cb
  • terminal.ansiBrightCyan#95e6cb
  • terminal.ansiBrightGreen#c2d94c
  • terminal.ansiBrightMagenta#ffee99
  • terminal.ansiBrightRed#f07178
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffb454
  • terminal.ansiCyan#90e1c6
  • terminal.ansiGreen#91b362
  • terminal.ansiMagenta#fae994
  • terminal.ansiRed#ea6c73
  • terminal.ansiWhite#c7c7c7
  • terminal.ansiYellow#f9af4f
  • terminal.background#060b0f
  • terminal.foreground#b3b1ad
  • terminalCursor.foreground#ff4057
  • textBlockQuote.background#0d1016
  • textLink.activeForeground#1ea8fc
  • textLink.foreground#1ea8fc
  • textPreformat.foreground#b3b1ad
  • titleBar.activeBackground#0a0e14
  • titleBar.activeForeground#b3b1ad
  • titleBar.border#01060e
  • titleBar.inactiveBackground#0a0e14
  • titleBar.inactiveForeground#3d424d
  • walkThrough.embeddedEditorBackground#0d1016
  • widget.shadow#00010a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#5c6773italic
string, constant.other.symbol#60e8f0
string.regexp, constant.character, constant.other#ffffff
constant.numeric#60e8f0
constant.numeric.css#f07178
constant.language#d4bfff
constant.language.boolean#d4bfff
variable#dadbc0
variable.other.constant#d4bfff
variable.member#f28779
variable.language#00f0ffitalic
variable.language.this#00f0ffitalic
support.variable#ffa759
storage#1ea8fc
storage.type#1ea8fcitalic
storage.modifier.async#f07178italic
storage.type.class#1ea8fcitalic
keyword#1ea8fc
keyword.control.flow#1ea8fc
keyword.control.loop#1ea8fc
keyword.control.conditional#1ea8fc
keyword.control.trycatch#1ea8fc
keyword.operator#c286ff
keyword.operator.new#1ea8fc
punctuation.separator, punctuation.terminator#cbccc6b3
punctuation.section#dadbc0
punctuation.accessor#ec0000
source.java storage.type, source.haskell storage.type, source.c storage.type#95e6cb
entity.other.inherited-class#FF8F40
storage.type.function#ffa759
storage.type.function.arrow#f07178
source.java storage.type.primitive#95e6cb
variable.parameter, meta.parameter#d4bfffitalic
variable.function, variable.annotation, meta.function-call.generic, support.function.go#ffffff
support.function, support.macro#ffffff
support.function.console#ffd580
entity.name.import, entity.name.package#bae67e
entity.name#c286ff
entity.name.function#ffffff
entity.name.class#ff8f40
entity.name.tag, meta.tag.sgml#fc4085
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#b3b1ad
text.html.derivative#dadbc0
entity.other.attribute-name#1ea8fcitalic
support.constant#f28779italic
support.type, support.class, source.go storage.type#ff0779
support.class.promise#ffa759
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation#dadbc0
invalid#ff3333
meta.diff, meta.diff.header#c594c5
source.ruby variable.other.readwrite#ffd580
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#bae67e
entity.other.attribute-name.class.css#bae67e
entity.other.attribute-name.id.css#ffcc66
support.type.property-name.css#dadbc0
constant.numeric.line-number.find-in-files - match#5c6773
constant.numeric.line-number.match#ffa759
entity.name.filename.find-in-files#bae67e
message.error#ff3333
markup.heading, markup.heading entity.name#bae67ebold
markup.underline.link, string.other.link#95e6cb
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#95e6cbitalic
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#c286ff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#1ea8fc
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#ffffff
constant.language.json#8815fc
constant.numeric.json#c286ff
string.unquoted, constant.other.object.key#1ea8fc
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#ffa759
meta.object-literal.key#ffb454
entity.name.type#ffffff
entity.name.type.class#ffffff
support.type.primitive#ffffff
text.gitignore#ffd76ditalic

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...