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#5AA9E6
  • activityBar.background#060A13
  • activityBar.foreground#5AA9E6
  • activityBarBadge.background#5AA9E6
  • activityBarBadge.foreground#0A0F1A
  • badge.background#D4A72C
  • badge.foreground#0A0F1A
  • button.background#5AA9E6
  • button.foreground#0A0F1A
  • button.hoverBackground#5AA9E6AA
  • dropdown.background#060A13
  • dropdown.border#5AA9E6
  • dropdown.foreground#F0F0F0
  • editor.background#0A0F1A
  • editor.findMatchBackground#5AA9E640
  • editor.findMatchHighlightBackground#5AA9E620
  • editor.foreground#F0F0F0
  • editor.lineHighlightBackground#5AA9E620
  • editor.lineHighlightBorder#5AA9E6
  • editor.selectionBackground#D4A72C60
  • editor.selectionHighlightBackground#D4A72C30
  • editorBracketMatch.background#5AA9E630
  • editorBracketMatch.border#5AA9E6
  • editorCursor.foreground#5AA9E6
  • editorGroupHeader.tabsBackground#0A0F1A
  • editorIndentGuide.activeBackground#7A849580
  • editorIndentGuide.background#7A849540
  • editorLineNumber.activeForeground#5AA9E6
  • editorLineNumber.foreground#7A8495
  • editorWhitespace.foreground#7A8495
  • focusBorder#5AA9E6
  • gitDecoration.conflictingResourceForeground#E5C07B
  • gitDecoration.deletedResourceForeground#E06C75
  • gitDecoration.modifiedResourceForeground#5AA9E6
  • gitDecoration.untrackedResourceForeground#66D9A3
  • input.background#060A13
  • input.border#5AA9E6
  • input.foreground#F0F0F0
  • input.placeholderForeground#7A8495
  • inputOption.activeBorder#5AA9E6
  • list.activeSelectionBackground#5AA9E640
  • list.activeSelectionForeground#F0F0F0
  • list.focusBackground#5AA9E640
  • list.highlightForeground#66D9A3
  • list.hoverBackground#5AA9E620
  • minimap.background#0A0F1A
  • minimapSlider.activeBackground#5AA9E666
  • minimapSlider.background#5AA9E622
  • minimapSlider.hoverBackground#5AA9E644
  • panel.background#0A0F1A
  • panel.border#5AA9E6
  • panelTitle.activeBorder#5AA9E6
  • panelTitle.activeForeground#F0F0F0
  • panelTitle.inactiveForeground#A0A0A0
  • scrollbar.shadow#00000055
  • scrollbarSlider.activeBackground#7A8495AA
  • scrollbarSlider.background#7A849560
  • scrollbarSlider.hoverBackground#7A849580
  • sideBar.background#080C15
  • sideBar.foreground#E0E0E0
  • sideBarSectionHeader.background#0A0F1A
  • sideBarSectionHeader.foreground#5AA9E6
  • sideBarTitle.foreground#5AA9E6
  • statusBar.background#080C15
  • statusBar.debuggingBackground#D4A72C
  • statusBar.foreground#F0F0F0
  • statusBar.noFolderBackground#0A0F1A
  • statusBarItem.hoverBackground#5AA9E640
  • tab.activeBackground#0A0F1A
  • tab.activeBorder#5AA9E6
  • tab.activeForeground#F0F0F0
  • tab.border#0A0F1A
  • tab.inactiveBackground#060A13
  • tab.inactiveForeground#A0A0A0
  • terminal.ansiBlue#5AA9E6
  • terminal.ansiBrightBlue#7FB9F5
  • terminal.ansiBrightCyan#8FFFD0
  • terminal.ansiBrightGreen#98FFB5
  • terminal.ansiBrightMagenta#FFD880
  • terminal.ansiBrightRed#FF9C8A
  • terminal.ansiBrightYellow#FFEFA1
  • terminal.ansiCyan#66D9A3
  • terminal.ansiGreen#66D9A3
  • terminal.ansiMagenta#D4A72C
  • terminal.ansiRed#E06C75
  • terminal.ansiYellow#E5C07B
  • terminal.background#0A0F1A
  • terminal.foreground#F0F0F0
  • titleBar.activeBackground#0A0F1A
  • titleBar.activeForeground#F0F0F0
  • titleBar.inactiveBackground#060A13
  • titleBar.inactiveForeground#A0A0A0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A8495italic
string, string.quoted, string.template#66D9A3
keyword, storage.type, storage.modifier#5AA9E6bold
keyword.operator, punctuation.accessor#D4A72C
variable, variable.other#F0F0F0
variable.parameter#D4A72Citalic
entity.name.function, support.function#66D9A3
meta.function-call#5AA9E6
entity.name.class, entity.name.type.class, support.class#D4A72Cbold
entity.name.type, support.type#5AA9E6
entity.name.type.interface#66D9A3italic
constant.numeric#E5C07B
constant, constant.language, constant.character#D4A72C
constant.language.boolean#E06C75bold
variable.other.property, support.variable.property#66D9A3
meta.object-literal.key#5AA9E6
entity.name.tag, punctuation.definition.tag#D4A72C
entity.other.attribute-name#E5C07Bitalic
punctuation, meta.brace#F0F0F0
string.regexp#E06C75
constant.character.escape#E06C75
meta.decorator, punctuation.decorator#E5C07B
invalid, invalid.illegal#E06C75strikethrough
markup.heading, entity.name.section#5AA9E6bold
markup.bold#D4A72Cbold
markup.italic#E5C07Bitalic
markup.underline.link#5AA9E6
markup.inline.raw, markup.fenced_code#5AA9E6
support.type.property-name.json#5AA9E6
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#D4A72C
support.type.property-name.css#5AA9E6
support.constant.property-value.css#66D9A3
themesmith by CyberBoost - VS Code Theme