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#39FF14
  • activityBar.background#E8FAF2
  • activityBar.foreground#39FF14
  • activityBarBadge.background#39FF14
  • activityBarBadge.foreground#F0FFF8
  • badge.background#39FF14
  • badge.foreground#F0FFF8
  • button.background#39FF14
  • button.foreground#F0FFF8
  • button.hoverBackground#39FF1480
  • dropdown.background#E8FAF2
  • dropdown.border#39FF14
  • dropdown.foreground#2E3D31
  • editor.background#F0FFF8
  • editor.findMatchBackground#39FF1660
  • editor.findMatchHighlightBackground#39FF1330
  • editor.foreground#2E3D31
  • editor.lineHighlightBackground#39FF1208
  • editor.lineHighlightBorder#39FF1240
  • editor.selectionBackground#39FF1440
  • editor.selectionHighlightBackground#39FF1330
  • editorBracketMatch.background#39FF1208
  • editorBracketMatch.border#39FF14
  • editorCursor.foreground#39FF14
  • editorGroupHeader.tabsBackground#E8FAF2
  • editorIndentGuide.activeBackground#A5C9B988
  • editorIndentGuide.background#A5C9B944
  • editorLineNumber.activeForeground#39FF14
  • editorLineNumber.foreground#7A7A7A
  • editorWhitespace.foreground#A5C9B9
  • focusBorder#39FF14
  • gitDecoration.conflictingResourceForeground#F9A825
  • gitDecoration.deletedResourceForeground#D32F2F
  • gitDecoration.modifiedResourceForeground#39FF14
  • gitDecoration.untrackedResourceForeground#66FF66
  • input.background#E8FAF2
  • input.border#39FF14
  • input.foreground#2E3D31
  • input.placeholderForeground#7A7A7A
  • inputOption.activeBorder#39FF14
  • list.activeSelectionBackground#39FF1330
  • list.activeSelectionForeground#F0FFF8
  • list.focusBackground#39FF1330
  • list.highlightForeground#39FF14
  • list.hoverBackground#39FF1220
  • minimap.background#F0FFF8
  • minimapSlider.activeBackground#39FF1466
  • minimapSlider.background#39FF1222
  • minimapSlider.hoverBackground#39FF1444
  • panel.background#F0FFF8
  • panel.border#E8FAF2
  • panelTitle.activeBorder#39FF14
  • panelTitle.activeForeground#39FF14
  • panelTitle.inactiveForeground#7A7A7A
  • scrollbar.shadow#00000022
  • scrollbarSlider.activeBackground#39FF1488
  • scrollbarSlider.background#A5C9B944
  • scrollbarSlider.hoverBackground#A5C9B988
  • sideBar.background#E8FAF2
  • sideBar.foreground#2E3D31
  • sideBarSectionHeader.background#F0FFF8
  • sideBarSectionHeader.foreground#39FF14
  • sideBarTitle.foreground#39FF14
  • statusBar.background#E8FAF2
  • statusBar.debuggingBackground#39FF14
  • statusBar.foreground#2E3D31
  • statusBar.noFolderBackground#E8FAF2
  • statusBarItem.hoverBackground#39FF1444
  • tab.activeBackground#F0FFF8
  • tab.activeBorder#39FF14
  • tab.activeForeground#2E3D31
  • tab.border#C2E8D6
  • tab.inactiveBackground#E8FAF2
  • tab.inactiveForeground#7A7A7A
  • terminal.ansiBlue#0077B6
  • terminal.ansiBrightBlue#3399FF
  • terminal.ansiBrightCyan#5FD7FF
  • terminal.ansiBrightGreen#66FF66
  • terminal.ansiBrightMagenta#FF66B2
  • terminal.ansiBrightRed#FF6666
  • terminal.ansiBrightYellow#FFFF66
  • terminal.ansiCyan#00C1D4
  • terminal.ansiGreen#39FF14
  • terminal.ansiMagenta#C2185B
  • terminal.ansiRed#D32F2F
  • terminal.ansiYellow#F9A825
  • terminal.background#F0FFF8
  • terminal.foreground#2E3D31
  • titleBar.activeBackground#E8FAF2
  • titleBar.activeForeground#2E3D31
  • titleBar.inactiveBackground#F0FFF8
  • titleBar.inactiveForeground#7A7A7A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A7A7Aitalic
string, string.quoted, string.template#00C1D4
keyword, storage.type, storage.modifier#39FF14bold
keyword.operator, punctuation.accessor#66BB6A
variable, variable.other#2E3D31
variable.parameter#66BB6Aitalic
entity.name.function, support.function#0077B6
meta.function-call#3399FF
entity.name.class, entity.name.type.class, support.class#C2185Bbold
entity.name.type, support.type#F9A825
entity.name.type.interface#F9A825italic
constant.numeric#F9A825
constant, constant.language, constant.character#F9A825
constant.language.boolean#F9A825bold
variable.other.property, support.variable.property#3399FF
meta.object-literal.key#3399FF
entity.name.tag, punctuation.definition.tag#0077B6
entity.other.attribute-name#C2185Bitalic
punctuation, meta.brace#2E3D31
string.regexp#FF9800
constant.character.escape#C2185B
meta.decorator, punctuation.decorator#F9A825
invalid, invalid.illegal#D32F2Fstrikethrough
markup.heading, entity.name.section#39FF14bold
markup.bold#39FF14bold
markup.italic#66BB6Aitalic
markup.underline.link#0077B6
markup.inline.raw, markup.fenced_code#00C1D4
support.type.property-name.json#39FF14
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#C2185B
support.type.property-name.css#3399FF
support.constant.property-value.css#0077B6
themesmith by CyberBoost - VS Code Theme