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#5A9EFF
  • activityBar.background#110606
  • activityBar.foreground#5A9EFF
  • activityBarBadge.background#C94F60
  • activityBarBadge.foreground#F5E0C0
  • badge.background#C94F60
  • badge.foreground#F5E0C0
  • button.background#5A9EFF
  • button.foreground#1F0A0A
  • button.hoverBackground#5A9EFF66
  • dropdown.background#110606
  • dropdown.border#5A9EFF
  • dropdown.foreground#F5E0C0
  • editor.background#1F0A0A
  • editor.findMatchBackground#C94F6055
  • editor.findMatchHighlightBackground#C94F6033
  • editor.foreground#F5E0C0
  • editor.lineHighlightBackground#5A9EFF20
  • editor.lineHighlightBorder#5A9EFF40
  • editor.selectionBackground#5A9EFF55
  • editor.selectionHighlightBackground#5A9EFF33
  • editorBracketMatch.background#C94F6033
  • editorBracketMatch.border#C94F60
  • editorCursor.foreground#5A9EFF
  • editorGroupHeader.tabsBackground#110606
  • editorIndentGuide.activeBackground#5A9EFF88
  • editorIndentGuide.background#77777744
  • editorLineNumber.activeForeground#5A9EFF
  • editorLineNumber.foreground#777777
  • editorWhitespace.foreground#777777
  • focusBorder#5A9EFF
  • gitDecoration.conflictingResourceForeground#FF79C6
  • gitDecoration.deletedResourceForeground#C94F60
  • gitDecoration.modifiedResourceForeground#5A9EFF
  • gitDecoration.untrackedResourceForeground#A6E22E
  • input.background#110606
  • input.border#5A9EFF
  • input.foreground#F5E0C0
  • input.placeholderForeground#777777
  • inputOption.activeBorder#C94F60
  • list.activeSelectionBackground#5A9EFF33
  • list.activeSelectionForeground#F5E0C0
  • list.focusBackground#5A9EFF44
  • list.highlightForeground#C94F60
  • list.hoverBackground#5A9EFF22
  • minimap.background#110606
  • minimapSlider.activeBackground#5A9EFF66
  • minimapSlider.background#5A9EFF22
  • minimapSlider.hoverBackground#5A9EFF44
  • panel.background#110606
  • panel.border#1F0A0A
  • panelTitle.activeBorder#5A9EFF
  • panelTitle.activeForeground#5A9EFF
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#5A9EFF88
  • scrollbarSlider.background#77777744
  • scrollbarSlider.hoverBackground#77777788
  • sideBar.background#110606
  • sideBar.foreground#F5E0C0
  • sideBarSectionHeader.background#1F0A0A
  • sideBarSectionHeader.foreground#5A9EFF
  • sideBarTitle.foreground#5A9EFF
  • statusBar.background#1F0A0A
  • statusBar.debuggingBackground#C94F60
  • statusBar.foreground#F5E0C0
  • statusBar.noFolderBackground#110606
  • statusBarItem.hoverBackground#5A9EFF33
  • tab.activeBackground#1F0A0A
  • tab.activeBorder#5A9EFF
  • tab.activeForeground#F5E0C0
  • tab.border#110606
  • tab.inactiveBackground#110606
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#5A9EFF
  • terminal.ansiBrightBlue#66E0FF
  • terminal.ansiBrightCyan#A1EFE4
  • terminal.ansiBrightGreen#C1E698
  • terminal.ansiBrightMagenta#FF79C6
  • terminal.ansiBrightRed#FF6E6E
  • terminal.ansiBrightYellow#FFF79A
  • terminal.ansiCyan#66E0FF
  • terminal.ansiGreen#A6E22E
  • terminal.ansiMagenta#FF6EB5
  • terminal.ansiRed#C94F60
  • terminal.ansiYellow#E6DB74
  • terminal.background#1F0A0A
  • terminal.foreground#F5E0C0
  • titleBar.activeBackground#110606
  • titleBar.activeForeground#F5E0C0
  • titleBar.inactiveBackground#1F0A0A
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#777777italic
string, string.quoted, string.template#D96A79
keyword, storage.type, storage.modifier#5A9EFFbold
keyword.operator, punctuation.accessor#66E0FF
variable, variable.other#F5E0C0
variable.parameter#F5E0C0italic
entity.name.function, support.function#66E0FF
meta.function-call#F5E0C0
entity.name.class, entity.name.type.class, support.class#FF6EB5bold
entity.name.type, support.type#FF6EB5
entity.name.type.interface#FF6EB5italic
constant.numeric#A6E22E
constant, constant.language, constant.character#A6E22E
constant.language.boolean#A6E22Ebold
variable.other.property, support.variable.property#F92672
meta.object-literal.key#F92672
entity.name.tag, punctuation.definition.tag#5A9EFF
entity.other.attribute-name#F92672italic
punctuation, meta.brace#66E0FF
string.regexp#A6E22E
constant.character.escape#F92672
meta.decorator, punctuation.decorator#E6DB74
invalid, invalid.illegal#FF6E6Estrikethrough
markup.heading, entity.name.section#FF6EB5bold
markup.bold#FF6EB5bold
markup.italic#FF6EB5italic
markup.underline.link#5A9EFF
markup.inline.raw, markup.fenced_code#A6E22E
support.type.property-name.json#5A9EFF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FF6EB5
support.type.property-name.css#A6E22E
support.constant.property-value.css#FF6EB5
themesmith by CyberBoost - VS Code Theme