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#3B9BFF
  • activityBar.background#010207
  • activityBar.foreground#EFF9FF
  • activityBar.inactiveForeground#9ABAD1
  • activityBarBadge.background#3B9BFF
  • activityBarBadge.foreground#010207
  • badge.background#3B9BFF
  • badge.foreground#010207
  • button.background#3B9BFF
  • button.foreground#010207
  • button.hoverBackground#86C4FF
  • button.secondaryBackground#060B21
  • button.secondaryForeground#EFF9FF
  • descriptionForeground#9ABAD1
  • diffEditor.insertedLineBackground#83E4BE12
  • diffEditor.insertedTextBackground#83E4BE22
  • diffEditor.removedLineBackground#F27C8B12
  • diffEditor.removedTextBackground#F27C8B22
  • disabledForeground#9ABAD199
  • dropdown.background#060B21
  • dropdown.border#2B5EAE
  • dropdown.foreground#EFF9FF
  • editor.background#02040D
  • editor.findMatchBackground#3B9BFF55
  • editor.findMatchBorder#3B9BFF
  • editor.findMatchHighlightBackground#F2D1742E
  • editor.foreground#EFF9FF
  • editor.inactiveSelectionBackground#245BA645
  • editor.lineHighlightBackground#0B1748
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#245BA685
  • editor.selectionHighlightBackground#3B9BFF22
  • editor.wordHighlightBackground#3B9BFF20
  • editor.wordHighlightStrongBackground#72E4F224
  • editorBracketMatch.background#3B9BFF24
  • editorBracketMatch.border#91E7F4
  • editorCursor.foreground#3B9BFF
  • editorError.foreground#FF7181
  • editorGroupHeader.tabsBackground#010207
  • editorGroupHeader.tabsBorder#2B5EAE
  • editorGutter.addedBackground#83E4BE
  • editorGutter.background#02040D
  • editorGutter.deletedBackground#F27C8B
  • editorGutter.modifiedBackground#86C4FF
  • editorHint.foreground#9ABAD1
  • editorHoverWidget.background#060B21
  • editorHoverWidget.border#2B5EAE
  • editorIndentGuide.activeBackground1#9ABAD1
  • editorIndentGuide.background1#2B5EAE70
  • editorInfo.foreground#72E4F2
  • editorLineNumber.activeForeground#EFF9FF
  • editorLineNumber.foreground#5E82B8
  • editorRuler.foreground#2B5EAE70
  • editorSuggestWidget.background#060B21
  • editorSuggestWidget.border#2B5EAE
  • editorSuggestWidget.foreground#EFF9FF
  • editorSuggestWidget.highlightForeground#3B9BFF
  • editorSuggestWidget.selectedBackground#0B1748
  • editorWarning.foreground#F2D174
  • editorWhitespace.foreground#5E82B870
  • editorWidget.background#060B21
  • editorWidget.border#2B5EAE
  • editorWidget.foreground#EFF9FF
  • errorForeground#FF7181
  • focusBorder#3B9BFF
  • foreground#EFF9FF
  • gitDecoration.addedResourceForeground#83E4BE
  • gitDecoration.deletedResourceForeground#F27C8B
  • gitDecoration.ignoredResourceForeground#829FB2
  • gitDecoration.modifiedResourceForeground#86C4FF
  • gitDecoration.untrackedResourceForeground#83E4BE
  • icon.foreground#9ABAD1
  • input.background#010207
  • input.border#2B5EAE
  • input.foreground#EFF9FF
  • input.placeholderForeground#9ABAD1
  • inputOption.activeBorder#3B9BFF
  • inputValidation.errorBorder#FF7181
  • inputValidation.infoBorder#72E4F2
  • inputValidation.warningBorder#F2D174
  • list.activeSelectionBackground#0B1748
  • list.activeSelectionForeground#EFF9FF
  • list.focusAndSelectionOutline#3B9BFF
  • list.hoverBackground#060B21
  • list.inactiveSelectionBackground#060B21
  • menu.background#060B21
  • menu.border#2B5EAE
  • menu.foreground#EFF9FF
  • menu.selectionBackground#0B1748
  • menu.selectionForeground#EFF9FF
  • panel.background#010207
  • panel.border#2B5EAE
  • panelTitle.activeBorder#3B9BFF
  • panelTitle.activeForeground#EFF9FF
  • panelTitle.inactiveForeground#9ABAD1
  • peekView.border#3B9BFF
  • peekViewEditor.background#010207
  • peekViewEditor.matchHighlightBackground#F2D17435
  • peekViewResult.background#040718
  • peekViewResult.matchHighlightBackground#3B9BFF35
  • peekViewResult.selectionBackground#0B1748
  • peekViewTitle.background#060B21
  • progressBar.background#3B9BFF
  • scrollbar.shadow#010207
  • scrollbarSlider.activeBackground#3B9BFF70
  • scrollbarSlider.background#9ABAD135
  • scrollbarSlider.hoverBackground#9ABAD155
  • sideBar.background#040718
  • sideBar.border#2B5EAE
  • sideBar.foreground#EFF9FF
  • sideBarSectionHeader.background#060B21
  • sideBarSectionHeader.foreground#EFF9FF
  • sideBarTitle.foreground#EFF9FF
  • statusBar.background#040718
  • statusBar.border#2B5EAE
  • statusBar.debuggingBackground#86C4FF
  • statusBar.debuggingForeground#010207
  • statusBar.foreground#EFF9FF
  • statusBar.noFolderBackground#060B21
  • tab.activeBackground#02040D
  • tab.activeBorderTop#3B9BFF
  • tab.activeForeground#EFF9FF
  • tab.border#2B5EAE
  • tab.inactiveBackground#040718
  • tab.inactiveForeground#9ABAD1
  • terminal.ansiBlack#010207
  • terminal.ansiBlue#72E4F2
  • terminal.ansiBrightBlack#5E82B8
  • terminal.ansiBrightBlue#86C4FF
  • terminal.ansiBrightCyan#91E7F4
  • terminal.ansiBrightGreen#C8E8AA
  • terminal.ansiBrightMagenta#A0D3EC
  • terminal.ansiBrightRed#F27C8B
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#B9E5FB
  • terminal.ansiCyan#72E4F2
  • terminal.ansiGreen#83E4BE
  • terminal.ansiMagenta#CAB7FA
  • terminal.ansiRed#FF7181
  • terminal.ansiWhite#EFF9FF
  • terminal.ansiYellow#F2D174
  • terminal.background#010207
  • terminal.foreground#EFF9FF
  • terminalCursor.foreground#3B9BFF
  • textLink.activeForeground#72E4F2
  • textLink.foreground#3B9BFF
  • titleBar.activeBackground#010207
  • titleBar.activeForeground#EFF9FF
  • titleBar.border#2B5EAE
  • titleBar.inactiveBackground#010207
  • titleBar.inactiveForeground#9ABAD1

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#829FB2italic
string, string.quoted, string.template, punctuation.definition.string#C8E8AA
constant.numeric, constant.language, constant.character, constant.other#CAB7FA
keyword, storage.type, storage.modifier, keyword.control, keyword.operator.new#86C4FF
keyword.operator, punctuation.separator, punctuation.accessor, punctuation.definition.tag#91E7F4
entity.name.function, support.function, meta.function-call, variable.function#72E4F2
entity.name.type, entity.name.class, entity.name.interface, support.type, support.class#B9E5FB
variable.parameter, meta.function.parameters variable#EAF4F8
variable.other.property, meta.object-literal.key, support.variable.property, entity.other.attribute-name#A0D3EC
variable, variable.other, identifier#EFF9FF
entity.name.tag, meta.tag#86C4FF
invalid, invalid.illegal, invalid.deprecated#FF7181underline
markup.heading, entity.name.section#72E4F2bold
markup.bold#B9E5FBbold
markup.italic#A0D3ECitalic
markup.underline.link, string.other.link#3B9BFFunderline
markup.inserted#83E4BE
markup.changed#86C4FF
markup.deleted#F27C8B