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#00A6A6
  • activityBar.background#262638
  • activityBar.foreground#E0E0F0
  • activityBarBadge.background#FF8C42
  • activityBarBadge.foreground#FFFFFF
  • badge.background#FF6F91
  • badge.foreground#FFFFFF
  • button.background#00A6A6
  • button.foreground#FFFFFF
  • button.hoverBackground#009999
  • dropdown.background#262638
  • dropdown.border#3A3A4C
  • dropdown.foreground#E0E0F0
  • editor.background#1E1E2F
  • editor.findMatchBackground#FDD83588
  • editor.findMatchHighlightBackground#FDD83544
  • editor.foreground#E0E0F0
  • editor.lineHighlightBackground#2A2A44
  • editor.lineHighlightBorder#00A6A6
  • editor.selectionBackground#FF8C42AA
  • editor.selectionHighlightBackground#FF8C4233
  • editorBracketMatch.background#FF8C4210
  • editorBracketMatch.border#FF8C42
  • editorCursor.foreground#FF6F91
  • editorGroupHeader.tabsBackground#262638
  • editorIndentGuide.activeBackground#00A6A6
  • editorIndentGuide.background#3A3A4C
  • editorLineNumber.activeForeground#E0E0F0
  • editorLineNumber.foreground#555566
  • editorWhitespace.foreground#555566
  • focusBorder#FF8C42
  • gitDecoration.conflictingResourceForeground#FF6F91
  • gitDecoration.deletedResourceForeground#EF5350
  • gitDecoration.modifiedResourceForeground#FFB74D
  • gitDecoration.untrackedResourceForeground#66BB6A
  • input.background#262638
  • input.border#3A3A4C
  • input.foreground#E0E0F0
  • input.placeholderForeground#777788
  • inputOption.activeBorder#00A6A6
  • list.activeSelectionBackground#FF8C42
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#2A2A44
  • list.highlightForeground#00A6A6
  • list.hoverBackground#3A3A4C
  • minimap.background#1E1E2F
  • minimapSlider.activeBackground#3A3A4CAA
  • minimapSlider.background#3A3A4C66
  • minimapSlider.hoverBackground#3A3A4C99
  • panel.background#24243A
  • panel.border#3A3A4C
  • panelTitle.activeBorder#00A6A6
  • panelTitle.activeForeground#E0E0F0
  • panelTitle.inactiveForeground#A0A0C0
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#3A3A4CAA
  • scrollbarSlider.background#3A3A4C66
  • scrollbarSlider.hoverBackground#3A3A4C99
  • sideBar.background#24243A
  • sideBar.foreground#E0E0F0
  • sideBarSectionHeader.background#2A2A44
  • sideBarSectionHeader.foreground#FFFFFF
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#00A6A6
  • statusBar.debuggingBackground#FF6F91
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#262638
  • statusBarItem.hoverBackground#FF8C42
  • tab.activeBackground#1E1E2F
  • tab.activeBorder#00A6A6
  • tab.activeForeground#E0E0F0
  • tab.border#3A3A4C
  • tab.inactiveBackground#262638
  • tab.inactiveForeground#A0A0C0
  • terminal.ansiBlue#00A6A6
  • terminal.ansiBrightBlue#40E0E0
  • terminal.ansiBrightCyan#66FFFF
  • terminal.ansiBrightGreen#9FFF9F
  • terminal.ansiBrightMagenta#FF91B4
  • terminal.ansiBrightRed#FF9E80
  • terminal.ansiBrightYellow#FFE066
  • terminal.ansiCyan#00F0F0
  • terminal.ansiGreen#6BCB77
  • terminal.ansiMagenta#FF6F91
  • terminal.ansiRed#FF6F91
  • terminal.ansiYellow#FDD835
  • terminal.background#1E1E2F
  • terminal.foreground#E0E0F0
  • titleBar.activeBackground#262638
  • titleBar.activeForeground#E0E0F0
  • titleBar.inactiveBackground#1E1E2F
  • titleBar.inactiveForeground#A0A0C0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#777788italic
string, string.quoted, string.template#66FFFF
keyword, storage.type, storage.modifier#00A6A6bold
keyword.operator, punctuation.accessor#FF8C42
variable, variable.other#E0E0F0
variable.parameter#FF8C42italic
entity.name.function, support.function#FF6F91
meta.function-call#FF6F91
entity.name.class, entity.name.type.class, support.class#FDD835bold
entity.name.type, support.type#FF8C42
entity.name.type.interface#FF8C42italic
constant.numeric#FF8C42
constant, constant.language, constant.character#FF6F91
constant.language.boolean#FF8C42bold
variable.other.property, support.variable.property#66FFFF
meta.object-literal.key#00A6A6
entity.name.tag, punctuation.definition.tag#FF6F91
entity.other.attribute-name#FF8C42italic
punctuation, meta.brace#A0A0C0
string.regexp#FF8C42
constant.character.escape#FF6F91
meta.decorator, punctuation.decorator#FF6F91
invalid, invalid.illegal#EF5350strikethrough
markup.heading, entity.name.section#00A6A6bold
markup.bold#FF6F91bold
markup.italic#FF8C42italic
markup.underline.link#66FFFF
markup.inline.raw, markup.fenced_code#FF8C42
support.type.property-name.json#00A6A6
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FF6F91
support.type.property-name.css#FF8C42
support.constant.property-value.css#FDD835
themesmith by CyberBoost - VS Code Theme