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#87CEEB
  • activityBar.background#0A0F1A
  • activityBar.border#1E3A5F66
  • activityBar.foreground#F0F8FF
  • activityBar.inactiveForeground#6495ED
  • activityBarBadge.background#4A9EFF
  • activityBarBadge.foreground#0A0F1A
  • breadcrumb.activeSelectionForeground#E0E6FF
  • breadcrumb.focusForeground#F0F8FF
  • breadcrumb.foreground#B8D4E8
  • breadcrumbPicker.background#0F1825EE
  • button.background#4A9EFF
  • button.foreground#0A0F1A
  • button.hoverBackground#87CEEB
  • checkbox.background#0F1825
  • checkbox.border#4682B4
  • debugConsole.errorForeground#FF6B9D
  • debugConsole.infoForeground#87CEEB
  • debugConsole.warningForeground#FFD700
  • debugToolBar.background#0F1825
  • descriptionForeground#B8D4E8
  • diffEditor.insertedLineBackground#32CD3218
  • diffEditor.insertedTextBackground#32CD3233
  • diffEditor.removedLineBackground#FF6B9D18
  • diffEditor.removedTextBackground#FF6B9D33
  • dropdown.background#0F1825EE
  • dropdown.border#4682B4
  • editor.background#0A0F1A
  • editor.findMatchBackground#4A9EFF66
  • editor.findMatchBorder#87CEEB
  • editor.findMatchHighlightBackground#4A9EFF33
  • editor.findMatchHighlightBorder#87CEEB88
  • editor.foreground#F0F8FF
  • editor.hoverHighlightBackground#4A9EFF22
  • editor.inactiveSelectionBackground#2D5AA022
  • editor.lineHighlightBackground#0F1825
  • editor.lineHighlightBorder#2D5AA033
  • editor.linkedEditingBackground#7B68EE22
  • editor.rangeHighlightBackground#4A9EFF18
  • editor.selectionBackground#2D5AA044
  • editor.selectionHighlightBackground#4A9EFF33
  • editor.wordHighlightBackground#7B68EE33
  • editor.wordHighlightStrongBackground#9370DB44
  • editorBracketHighlight.foreground1#E0E6FF
  • editorBracketHighlight.foreground2#87CEEB
  • editorBracketHighlight.foreground3#B0C4DE
  • editorBracketHighlight.foreground4#9370DB
  • editorBracketHighlight.foreground5#DDA0DD
  • editorBracketHighlight.foreground6#E6E6FA
  • editorBracketMatch.background#9370DB33
  • editorBracketMatch.border#DDA0DD
  • editorCodeLens.foreground#6495ED
  • editorCursor.background#0A0F1A
  • editorCursor.foreground#E0E6FF
  • editorGutter.addedBackground#32CD3299
  • editorGutter.background#0A0F1A
  • editorGutter.deletedBackground#FF6B9D99
  • editorGutter.modifiedBackground#4A9EFF99
  • editorHoverWidget.background#0F1825EE
  • editorHoverWidget.border#87CEEB44
  • editorIndentGuide.activeBackground1#87CEEB
  • editorIndentGuide.background1#2D5AA0
  • editorOverviewRuler.addedForeground#32CD32CC
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.bracketMatchForeground#DDA0DDCC
  • editorOverviewRuler.deletedForeground#FF6B9DCC
  • editorOverviewRuler.errorForeground#FF6B9DCC
  • editorOverviewRuler.infoForeground#87CEEBCC
  • editorOverviewRuler.modifiedForeground#4A9EFFCC
  • editorOverviewRuler.warningForeground#FFD700CC
  • editorRuler.foreground#1E3A5F
  • editorSuggestWidget.background#0F1825EE
  • editorSuggestWidget.border#9370DB44
  • editorSuggestWidget.highlightForeground#E0E6FF
  • editorUnnecessaryCode.opacity#00000088
  • editorWhitespace.foreground#4682B455
  • editorWidget.background#0F1825EE
  • editorWidget.border#4A9EFF44
  • focusBorder#4A9EFF88
  • foreground#F0F8FF
  • gitDecoration.addedResourceForeground#32CD32
  • gitDecoration.conflictingResourceForeground#FFD700
  • gitDecoration.deletedResourceForeground#FF6B9D
  • gitDecoration.ignoredResourceForeground#6495ED
  • gitDecoration.modifiedResourceForeground#4A9EFF
  • gitDecoration.untrackedResourceForeground#DDA0DD
  • icon.foreground#E8F4FF
  • input.background#0F1825EE
  • input.border#4682B4
  • input.placeholderForeground#6495ED
  • list.activeSelectionBackground#2D5AA044
  • list.activeSelectionForeground#E0E6FF
  • list.errorForeground#FF6B9D
  • list.focusBackground#2D5AA044
  • list.highlightForeground#E0E6FF
  • list.hoverBackground#2D5AA033
  • list.inactiveSelectionBackground#2D5AA022
  • list.warningForeground#FFD700
  • minimap.background#0A0F1A
  • minimap.findMatchHighlight#4A9EFF66
  • minimap.selectionHighlight#2D5AA066
  • notebook.cellBorderColor#2D5AA0
  • notebook.cellEditorBackground#0D1420
  • notifications.background#0F1825EE
  • notifications.border#87CEEB44
  • panel.background#0F1825
  • panel.border#1E3A5F66
  • panelTitle.activeBorder#87CEEB
  • panelTitle.activeForeground#F0F8FF
  • panelTitle.inactiveForeground#B8D4E8
  • scrollbar.shadow#000B1ACC
  • scrollbarSlider.activeBackground#4A9EFF77
  • scrollbarSlider.background#4A9EFF33
  • scrollbarSlider.hoverBackground#4A9EFF55
  • sideBar.background#0F1825
  • sideBar.border#1E3A5F66
  • sideBar.foreground#F0F8FF
  • sideBarSectionHeader.background#0A0F1A
  • sideBarSectionHeader.foreground#F0F8FF
  • sideBarTitle.foreground#E0E6FF
  • statusBar.background#0A0F1A
  • statusBar.border#1E3A5F66
  • statusBar.debuggingBackground#4A9EFF
  • statusBar.debuggingForeground#0A0F1A
  • statusBar.foreground#F0F8FF
  • statusBar.noFolderBackground#0A0F1A
  • statusBarItem.remoteBackground#9370DB
  • statusBarItem.remoteForeground#F0F8FF
  • terminal.ansiBlack#0A0F1A
  • terminal.ansiBlue#4A9EFF
  • terminal.ansiBrightBlack#6495ED
  • terminal.ansiBrightBlue#87CEEB
  • terminal.ansiBrightCyan#E0FFFF
  • terminal.ansiBrightGreen#90EE90
  • terminal.ansiBrightMagenta#DDA0DD
  • terminal.ansiBrightRed#FF8FA3
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFFF99
  • terminal.ansiCyan#87CEEB
  • terminal.ansiGreen#32CD32
  • terminal.ansiMagenta#9370DB
  • terminal.ansiRed#FF6B9D
  • terminal.ansiWhite#F0F8FF
  • terminal.ansiYellow#FFD700
  • terminal.background#0A0F1A
  • terminal.foreground#F0F8FF
  • terminal.selectionBackground#2D5AA044
  • terminalCursor.background#0A0F1A
  • terminalCursor.foreground#E0E6FF
  • testing.iconFailed#FF6B9D
  • testing.iconPassed#32CD32
  • testing.iconQueued#FFD700
  • titleBar.activeBackground#0A0F1A
  • titleBar.activeForeground#F0F8FF
  • titleBar.inactiveBackground#0A0F1A
  • titleBar.inactiveForeground#B8D4E8
  • widget.shadow#000B1A99

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source, text#F0F8FF
invalid, invalid.illegal#FF6B9Dbold
comment, punctuation.definition.comment#6495EDitalic
comment.block.documentation#B8D4E8italic
string, punctuation.definition.string#B0C4DE
string.template, punctuation.definition.template-string#E6E6FA
string.regexp, constant.character.escape#87CEEB
constant.numeric, constant.language#FFD700
constant.character, constant.other#DDA0DD
keyword.control, storage.type, storage.modifier#4A9EFFitalic
keyword.operator#87CEEB
punctuation, meta.brace, meta.delimiter#6495ED
variable, meta.definition.variable#F0F8FF
variable.other.readwrite#E8F4FF
variable.parameter#E0E6FFitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#B8D4E8
entity.name.function, support.function#9370DBbold
meta.function-call, entity.name.function.call#DDA0DD
entity.name.class, entity.name.type.class, support.class#E0E6FFbold
entity.name.type, support.type, entity.name.interface#B0C4DE
entity.name.namespace, entity.name.module, entity.name.package#87CEEB
support.class.component, support.type.component#E0E6FFbold
entity.name.tag#4A9EFF
entity.other.attribute-name#FFD700italic
meta.decorator, storage.type.annotation, punctuation.decorator#9370DBitalic
markup.heading, markup.heading.setext, entity.name.section#E0E6FFbold
markup.bold, markup.italic#DDA0DD
markup.inline.raw, markup.fenced_code#87CEEB